\n\n---\n\n## 🔹 Modern JavaScript Features\n### 1. Block-Scoped Declarations (ES6)\nlet x = 10; // Block-scoped variable\nconst PI = 3.14; // Block-scoped constant\n\n### 2. Template Literals (ES6)\nconst name = 'Ali';\nconsole.log(`Hello ${name}! Today is ${new Date().toLocaleDateString()}`);\n\n### 3. Arrow Functions (ES6)\nconst add = (a, b) => a + b;\n[1, 2, 3].map(n => n * 2);\n\n### 4. Destructuring (ES6)\n// Array destructuring\nconst [first, second] = [1, 2];\n\n// Object destructuring\nconst { name, age } = user;\n\n### 5. Spread/Rest Operator (ES6)\n// Spread\nconst nums = [1, 2, 3];\nconst newNums = [...nums, 4, 5];\n\n// Rest parameters\nfunction sum(...numbers) {\n return numbers.reduce((total, n) => total + n, 0);\n}\n\n### 6. Optional Chaining (ES2020)\nconst street = user?.address?.street; // No error if null\n\n### 7. Nullish Coalescing (ES2020)\nconst limit = config.maxItems ?? 10; // Only if null/undefined\n\n---\n\n## 🔹 JavaScript Tooling\n### 1. Package Management with npm/yarn\nnpm init -y # Initialize project\nnpm install lodash # Install package\nnpm install --save-dev webpack # Dev dependency\n\n### 2. Module Bundlers\n#### Webpack Configuration (webpack.config.js):\nmodule.exports = {\n entry: './src/index.js',\n output: {\n filename: 'bundle.js',\n path: path.resolve(__dirname, 'dist')\n },\n module: {\n rules: [\n {\n test: /\\.js$/,\n exclude: /node_modules/,\n use: 'babel-loader'\n }\n ]\n }\n};\n\n### 3. Babel (JavaScript Compiler)\n#### .babelrc Configuration:\n{\n \"presets\": [\"@babel/preset-env\"],\n \"plugins\": [\"@babel/plugin-transform-runtime\"]\n}\n\n### 4. ESLint (Code Linter)\n#### .eslintrc.json Example:\n{\n \"extends\": \"eslint:recommended\",\n \"rules\": {\n \"semi\": [\"error\", \"always\"],\n \"quotes\": [\"error\", \"single\"]\n }\n}\n\n---\n\n## 🔹 Practical Example: Modular App Structure\nproject/\n├── src/\n│ ├── index.js # Entry point\n│ ├── utils/ # Helper modules\n│ │ ├── api.js # API functions\n│ │ └── dom.js # DOM helpers\n│ ├── components/ # UI components\n│ │ ├── header.js\n│ │ └── modal.js\n│ └── styles/\n│ └── main.css # Imported in JS\n├── package.json # npm config\n├── webpack.config.js # Bundler config\n└── .babelrc # Compiler config\n\nExample Component (`components/header.js`):\nexport function createHeader(title) {\n const header = document.createElement('header');\n header.innerHTML = `

${title}

`;\n return header;\n}\n\nMain Entry Point (`index.js`):\nimport { createHeader } from './components/header.js';\nimport { fetchPosts } from './utils/api.js';\n\ndocument.body.appendChild(createHeader('My Blog'));\n\nasync function init() {\n const posts = await fetchPosts();\n console.log('Loaded posts:', posts);\n}\n\ninit();\n\n---","datePublished":"2025-07-24T10:32:43Z","dateModified":"2025-07-24T10:32:43Z","author":{"@type":"Organization","name":"Data Analytics","url":"https://telemetr.io/en/channels/1864702447-dataanalyticsx","image":"https://img.tlmtr.io/c/22c6hV/6032738397593472979?ty=x"},"publisher":{"@type":"Organization","name":"Data Analytics","url":"https://telemetr.io/en/channels/1864702447-dataanalyticsx","image":"https://img.tlmtr.io/c/22c6hV/6032738397593472979?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":298},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":1}]}},{"@type":"ListItem","position":10,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1864702447-dataanalyticsx/posts/2136","url":"https://telemetr.io/en/channels/1864702447-dataanalyticsx/posts/2136","mainEntityOfPage":"https://telemetr.io/en/channels/1864702447-dataanalyticsx/posts/2136","headline":"function oldFetch(url, callback) { const xhr = new XMLHttpRequest(); xhr.open('GET', url); xhr.onload = () =>…","articleBody":"function oldFetch(url, callback) {\n const xhr = new XMLHttpRequest();\n xhr.open('GET', url);\n xhr.onload = () => {\n if (xhr.status === 200) {\n callback(JSON.parse(xhr.response));\n } else {\n callback(null, xhr.status);\n }\n };\n xhr.send();\n}\n\n---\n\n## 🔹 Best Practices\n1. Always handle errors in promises/async functions\n2. Use async/await for better readability\n3. Cancel requests when no longer needed (AbortController)\n4. Throttle rapid API calls (debounce input handlers)\n5. Cache responses when appropriate\n\n---\n\n### 📌 What's Next? \nIn Part 6, we'll cover: \n➡️ JavaScript Modules \n➡️ ES6+ Features \n➡️ Tooling (Babel, Webpack, npm) \n\n#JavaScript #AsyncProgramming #WebDevelopment 🚀 \n\nPractice Exercise: \n1. Fetch GitHub user data (https://api.github.com/users/username) \n2. Create a function that fetches multiple Pokémon in parallel \n3. Build a retry mechanism for failed requests (max 3 attempts)","datePublished":"2025-07-24T10:28:45Z","dateModified":"2025-07-24T10:28:45Z","author":{"@type":"Organization","name":"Data Analytics","url":"https://telemetr.io/en/channels/1864702447-dataanalyticsx","image":"https://img.tlmtr.io/c/22c6hV/6032738397593472979?ty=x"},"publisher":{"@type":"Organization","name":"Data Analytics","url":"https://telemetr.io/en/channels/1864702447-dataanalyticsx","image":"https://img.tlmtr.io/c/22c6hV/6032738397593472979?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":361}]}},{"@type":"ListItem","position":11,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1864702447-dataanalyticsx/posts/2135","url":"https://telemetr.io/en/channels/1864702447-dataanalyticsx/posts/2135","mainEntityOfPage":"https://telemetr.io/en/channels/1864702447-dataanalyticsx/posts/2135","headline":"# 📚 JavaScript Tutorial - Part 5/10: Asynchronous JavaScript #JavaScript #Async #Promises #FetchAPI #WebDev W…","articleBody":"# 📚 JavaScript Tutorial - Part 5/10: Asynchronous JavaScript \n#JavaScript #Async #Promises #FetchAPI #WebDev\n\nWelcome to Part 5 of our JavaScript series! Today we'll conquer asynchronous programming - the key to handling delays, API calls, and non-blocking operations.\n\n---\n\n## 🔹 Synchronous vs Asynchronous\n### 1. Synchronous Execution\nconsole.log(\"Step 1\");\nconsole.log(\"Step 2\"); // Waits for Step 1\nconsole.log(\"Step 3\"); // Waits for Step 2\n\n### 2. Asynchronous Execution\nconsole.log(\"Start\");\n\nsetTimeout(() => {\n console.log(\"Async operation complete\");\n}, 2000);\n\nconsole.log(\"End\");\n\n// Output order: Start → End → Async operation complete\n\n---\n\n## 🔹 Callback Functions\nTraditional way to handle async operations.\n\n### 1. Basic Callback\nfunction fetchData(callback) {\n setTimeout(() => {\n callback(\"Data received\");\n }, 1000);\n}\n\nfetchData((data) => {\n console.log(data); // \"Data received\" after 1 second\n});\n\n### 2. Callback Hell (The Pyramid of Doom)\ngetUser(user => {\n getPosts(user.id, posts => {\n getComments(posts[0].id, comments => {\n console.log(comments); // Nested nightmare!\n });\n });\n});\n\n---\n\n## 🔹 Promises (ES6)\nModern solution for async operations.\n\n### 1. Promise States\n- Pending: Initial state\n- Fulfilled: Operation completed successfully\n- Rejected: Operation failed\n\n### 2. Creating Promises\nconst fetchData = new Promise((resolve, reject) => {\n setTimeout(() => {\n const success = true;\n success ? resolve(\"Data fetched!\") : reject(\"Error!\");\n }, 1500);\n});\n\n### 3. Using Promises\nfetchData\n .then(data => console.log(data))\n .catch(error => console.error(error))\n .finally(() => console.log(\"Done!\"));\n\n### 4. Promise Chaining\nfetchUser()\n .then(user => fetchPosts(user.id))\n .then(posts => fetchComments(posts[0].id))\n .then(comments => console.log(comments))\n .catch(error => console.error(error));\n\n### 5. Promise Methods\nPromise.all([promise1, promise2]) // Waits for all\nPromise.race([promise1, promise2]) // First to settle\nPromise.any([promise1, promise2]) // First to fulfill\n\n---\n\n## 🔹 Async/Await (ES8)\nSyntactic sugar for promises.\n\n### 1. Basic Usage\nasync function getData() {\n try {\n const response = await fetchData();\n console.log(response);\n } catch (error) {\n console.error(error);\n }\n}\n\n### 2. Parallel Execution\nasync function fetchAll() {\n const [users, posts] = await Promise.all([\n fetchUsers(),\n fetchPosts()\n ]);\n console.log(users, posts);\n}\n\n---\n\n## 🔹 Fetch API\nModern way to make HTTP requests.\n\n### 1. GET Request\nasync function getUsers() {\n const response = await fetch('https://api.example.com/users');\n const data = await response.json();\n return data;\n}\n\n### 2. POST Request\nasync function createUser(user) {\n const response = await fetch('https://api.example.com/users', {\n method: 'POST',\n headers: {\n 'Content-Type': 'application/json'\n },\n body: JSON.stringify(user)\n });\n return response.json();\n}\n\n### 3. Error Handling\nasync function safeFetch(url) {\n try {\n const response = await fetch(url);\n if (!response.ok) throw new Error(response.status);\n return await response.json();\n } catch (error) {\n console.error(\"Fetch failed:\", error);\n }\n}\n\n---\n\n## 🔹 Practical Example: Weather App\nasync function getWeather(city) {\n try {\n const apiKey = 'YOUR_API_KEY';\n const response = await fetch(\n `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${apiKey}`\n );\n \n if (!response.ok) throw new Error('City not found');\n \n const data = await response.json();\n return {\n temp: Math.round(data.main.temp - 273.15), // Kelvin → Celsius\n conditions: data.weather[0].main\n };\n } catch (error) {\n console.error(\"Weather fetch error:\", error);\n return null;\n }\n}\n\n// Usage\nconst weather = await getWeather(\"London\");\nif (weather) {\n console.log(`Temperature: ${weather.temp}°C`);\n console.log(`Conditions: ${weather.conditions}`);\n}\n\n---\n\n## 🔹 AJAX with XMLHttpRequest (Legacy)\nOlder way to make requests (still good to know).","datePublished":"2025-07-24T10:28:45Z","dateModified":"2025-07-24T10:28:45Z","author":{"@type":"Organization","name":"Data Analytics","url":"https://telemetr.io/en/channels/1864702447-dataanalyticsx","image":"https://img.tlmtr.io/c/22c6hV/6032738397593472979?ty=x"},"publisher":{"@type":"Organization","name":"Data Analytics","url":"https://telemetr.io/en/channels/1864702447-dataanalyticsx","image":"https://img.tlmtr.io/c/22c6hV/6032738397593472979?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":533},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":1}]}},{"@type":"ListItem","position":12,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1864702447-dataanalyticsx/posts/2134","url":"https://telemetr.io/en/channels/1864702447-dataanalyticsx/posts/2134","mainEntityOfPage":"https://telemetr.io/en/channels/1864702447-dataanalyticsx/posts/2134","headline":"I recommend you to join @TradingNewsIO for Global & Economic News 24/7 ⚡️Stay up-to-date with real-time updat…","articleBody":"I recommend you to join @TradingNewsIO for Global & Economic News 24/7\n⚡️Stay up-to-date with real-time updates on global events.\n➡️ Click Here and JOIN NOW !\n\n#إعلان InsideAds - ترويج","datePublished":"2025-07-23T22:35:17Z","dateModified":"2025-07-24T03:42:49Z","author":{"@type":"Organization","name":"Data Analytics","url":"https://telemetr.io/en/channels/1864702447-dataanalyticsx","image":"https://img.tlmtr.io/c/22c6hV/6032738397593472979?ty=x"},"publisher":{"@type":"Organization","name":"Data Analytics","url":"https://telemetr.io/en/channels/1864702447-dataanalyticsx","image":"https://img.tlmtr.io/c/22c6hV/6032738397593472979?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":143}]}},{"@type":"ListItem","position":13,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1864702447-dataanalyticsx/posts/2133","url":"https://telemetr.io/en/channels/1864702447-dataanalyticsx/posts/2133","mainEntityOfPage":"https://telemetr.io/en/channels/1864702447-dataanalyticsx/posts/2133","headline":"Stop wasting time scrolling. Start making money. 💰 With @TaniaTradingAcademy you just copy, paste… and cash o…","articleBody":"Stop wasting time scrolling. Start making money. 💰\nWith @TaniaTradingAcademy you just copy, paste… and cash out.\nNo stress. No complicated strategies. Just pure profits.\n💥 Anyone can do it. The earlier you join, the faster you win.\n🟣 Join the winning side 👉 @TaniaTradingAcademy\n\n\n#إعلان InsideAds - ترويج","datePublished":"2025-07-23T21:07:21Z","dateModified":"2025-07-24T03:45:38Z","author":{"@type":"Organization","name":"Data Analytics","url":"https://telemetr.io/en/channels/1864702447-dataanalyticsx","image":"https://img.tlmtr.io/c/22c6hV/6032738397593472979?ty=x"},"publisher":{"@type":"Organization","name":"Data Analytics","url":"https://telemetr.io/en/channels/1864702447-dataanalyticsx","image":"https://img.tlmtr.io/c/22c6hV/6032738397593472979?ty=x"},"image":["https://n1.tlmtr.cc/p/5188382122509990962?ty=l"],"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":179}]}},{"@type":"ListItem","position":14,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1864702447-dataanalyticsx/posts/2132","url":"https://telemetr.io/en/channels/1864702447-dataanalyticsx/posts/2132","mainEntityOfPage":"https://telemetr.io/en/channels/1864702447-dataanalyticsx/posts/2132","headline":"Tired of endless job hunting? Unlock high-paying remote jobs from top startups – fresh roles posted daily. Wa…","articleBody":"Tired of endless job hunting?\nUnlock high-paying remote jobs from top startups – fresh roles posted daily. Want early access to exclusive $50+/h positions you won’t find on LinkedIn?\nGet ahead now — the best offers go fast!\nSee today’s hottest openings before everyone else.\n\n#إعلان InsideAds - ترويج","datePublished":"2025-07-23T20:00:56Z","dateModified":"2025-07-24T20:24:42Z","author":{"@type":"Organization","name":"Data Analytics","url":"https://telemetr.io/en/channels/1864702447-dataanalyticsx","image":"https://img.tlmtr.io/c/22c6hV/6032738397593472979?ty=x"},"publisher":{"@type":"Organization","name":"Data Analytics","url":"https://telemetr.io/en/channels/1864702447-dataanalyticsx","image":"https://img.tlmtr.io/c/22c6hV/6032738397593472979?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":396}]}},{"@type":"ListItem","position":15,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1864702447-dataanalyticsx/posts/2131","url":"https://telemetr.io/en/channels/1864702447-dataanalyticsx/posts/2131","mainEntityOfPage":"https://telemetr.io/en/channels/1864702447-dataanalyticsx/posts/2131","headline":"🙏💸 500$ FOR THE FIRST 500 WHO JOIN THE CHANNEL! 🙏💸 Join our channel today for free! Tomorrow it will cost 500…","articleBody":"🙏💸 500$ FOR THE FIRST 500 WHO JOIN THE CHANNEL! 🙏💸\n\nJoin our channel today for free! Tomorrow it will cost 500$! \n\nhttps://t.me/+QHlfCJcO2lRjZWVl\n\nYou can join at this link! 👆👇\n\nhttps://t.me/+QHlfCJcO2lRjZWVl","datePublished":"2025-07-23T14:32:29Z","dateModified":"2025-07-23T14:32:29Z","author":{"@type":"Organization","name":"Data Analytics","url":"https://telemetr.io/en/channels/1864702447-dataanalyticsx","image":"https://img.tlmtr.io/c/22c6hV/6032738397593472979?ty=x"},"publisher":{"@type":"Organization","name":"Data Analytics","url":"https://telemetr.io/en/channels/1864702447-dataanalyticsx","image":"https://img.tlmtr.io/c/22c6hV/6032738397593472979?ty=x"},"image":["https://n3.tlmtr.cc/p/_H0GeOFX-dW2lC8WXk0RsACJPl5atnrIl9gjBnu2LZSA?ty=l"],"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":296}],"sharedContent":{"@type":"SocialMediaPosting","datePublished":"2025-07-23T14:32:16Z"}}},{"@type":"ListItem","position":16,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1864702447-dataanalyticsx/posts/2130","url":"https://telemetr.io/en/channels/1864702447-dataanalyticsx/posts/2130","mainEntityOfPage":"https://telemetr.io/en/channels/1864702447-dataanalyticsx/posts/2130","headline":"Most people just watch others make money online. Why not you? ➡️ 21,000+ already joined. Be next, click NOW!…","articleBody":"Most people just watch others make money online. Why not you?\n➡️ 21,000+ already joined. Be next, click NOW!\n\n#إعلان InsideAds - ترويج","datePublished":"2025-07-23T13:36:06Z","dateModified":"2025-07-24T03:57:44Z","author":{"@type":"Organization","name":"Data Analytics","url":"https://telemetr.io/en/channels/1864702447-dataanalyticsx","image":"https://img.tlmtr.io/c/22c6hV/6032738397593472979?ty=x"},"publisher":{"@type":"Organization","name":"Data Analytics","url":"https://telemetr.io/en/channels/1864702447-dataanalyticsx","image":"https://img.tlmtr.io/c/22c6hV/6032738397593472979?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":280},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":1}]}},{"@type":"ListItem","position":17,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1864702447-dataanalyticsx/posts/2129","url":"https://telemetr.io/en/channels/1864702447-dataanalyticsx/posts/2129","mainEntityOfPage":"https://telemetr.io/en/channels/1864702447-dataanalyticsx/posts/2129","headline":"I’ve watched traders lose thousands because they missed this one signal. It happened to me too—until I found…","articleBody":"I’ve watched traders lose thousands because they missed this one signal. It happened to me too—until I found a formula nobody talks about.\n\nWant to see what really moves the gold market? Discover the signal here\n\nDon’t be the last one to know.\n\n#إعلان InsideAds - ترويج","datePublished":"2025-07-23T12:33:50Z","dateModified":"2025-07-23T14:15:28Z","author":{"@type":"Organization","name":"Data Analytics","url":"https://telemetr.io/en/channels/1864702447-dataanalyticsx","image":"https://img.tlmtr.io/c/22c6hV/6032738397593472979?ty=x"},"publisher":{"@type":"Organization","name":"Data Analytics","url":"https://telemetr.io/en/channels/1864702447-dataanalyticsx","image":"https://img.tlmtr.io/c/22c6hV/6032738397593472979?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":97}]}},{"@type":"ListItem","position":18,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1864702447-dataanalyticsx/posts/2128","url":"https://telemetr.io/en/channels/1864702447-dataanalyticsx/posts/2128","mainEntityOfPage":"https://telemetr.io/en/channels/1864702447-dataanalyticsx/posts/2128","headline":"“I posted just one word, and the whole feed EXPLODED with hearts and fire. Even my friends were shocked…” Why…","articleBody":"“I posted just one word, and the whole feed EXPLODED with hearts and fire. Even my friends were shocked…”\n\nWhy? Because there’s something special happening here — and only those who see it first get it.\n\nDon’t blink. Dive in now — before you miss it.\n\n#إعلان InsideAds - ترويج","datePublished":"2025-07-22T15:03:39Z","dateModified":"2025-07-22T18:55:42Z","author":{"@type":"Organization","name":"Data Analytics","url":"https://telemetr.io/en/channels/1864702447-dataanalyticsx","image":"https://img.tlmtr.io/c/22c6hV/6032738397593472979?ty=x"},"publisher":{"@type":"Organization","name":"Data Analytics","url":"https://telemetr.io/en/channels/1864702447-dataanalyticsx","image":"https://img.tlmtr.io/c/22c6hV/6032738397593472979?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":180}]}},{"@type":"ListItem","position":19,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1864702447-dataanalyticsx/posts/2127","url":"https://telemetr.io/en/channels/1864702447-dataanalyticsx/posts/2127","mainEntityOfPage":"https://telemetr.io/en/channels/1864702447-dataanalyticsx/posts/2127","headline":"Think building wealth is complicated? Discover how real investors use the Wheel Strategy and ETFs to generate…","articleBody":"Think building wealth is complicated? Discover how real investors use the Wheel Strategy and ETFs to generate low-risk, steady income—no guesswork, just disciplined results. Get weekly trade breakdowns, proven tips, and global investing insights in one place.\nReady to take control? Join Wheel & Wealth now and start securing your financial future!\n\n#إعلان InsideAds - ترويج","datePublished":"2025-07-22T13:18:30Z","dateModified":"2025-07-23T13:36:08Z","author":{"@type":"Organization","name":"Data Analytics","url":"https://telemetr.io/en/channels/1864702447-dataanalyticsx","image":"https://img.tlmtr.io/c/22c6hV/6032738397593472979?ty=x"},"publisher":{"@type":"Organization","name":"Data Analytics","url":"https://telemetr.io/en/channels/1864702447-dataanalyticsx","image":"https://img.tlmtr.io/c/22c6hV/6032738397593472979?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":445}]}},{"@type":"ListItem","position":20,"item":{"@type":"SocialMediaPosting","@id":"https://telemetr.io/en/channels/1864702447-dataanalyticsx/posts/2126","url":"https://telemetr.io/en/channels/1864702447-dataanalyticsx/posts/2126","mainEntityOfPage":"https://telemetr.io/en/channels/1864702447-dataanalyticsx/posts/2126","headline":"## 🔹 Practical Example: Interactive Todo List // DOM Elements const form = document.querySelector('#todo-form…","articleBody":"## 🔹 Practical Example: Interactive Todo List\n// DOM Elements\nconst form = document.querySelector('#todo-form');\nconst input = document.querySelector('#todo-input');\nconst list = document.querySelector('#todo-list');\n\n// Add new todo\nform.addEventListener('submit', function(e) {\n e.preventDefault();\n \n if (input.value.trim() === '') return;\n \n const todoText = input.value;\n const li = document.createElement('li');\n li.innerHTML = `\n ${todoText}\n X\n `;\n \n list.appendChild(li);\n input.value = '';\n});\n\n// Delete todo (using delegation)\nlist.addEventListener('click', function(e) {\n if (e.target.classList.contains('delete-btn')) {\n e.target.parentElement.remove();\n }\n});\n\n---\n\n## 🔹 Working with Forms\n### 1. Accessing Form Data\nconst form = document.querySelector('form');\nform.addEventListener('submit', function(e) {\n e.preventDefault();\n \n // Get form values\n const username = form.elements['username'].value;\n const password = form.elements['password'].value;\n \n console.log({ username, password });\n});\n\n### 2. Form Validation\nfunction validateForm() {\n const email = document.getElementById('email').value;\n \n if (!email.includes('@')) {\n alert('Please enter a valid email');\n return false;\n }\n \n return true;\n}\n\n---\n\n## 🔹 Best Practices\n1. Cache DOM queries (store in variables)\n2. Use event delegation for dynamic elements\n3. Always prevent default on form submissions\n4. Separate JS from HTML (avoid inline handlers)\n5. Throttle rapid-fire events (resize, scroll)\n\n---\n\n### 📌 What's Next? \nIn Part 5, we'll cover: \n➡️ Asynchronous JavaScript \n➡️ Callbacks, Promises, Async/Await \n➡️ Fetch API & AJAX \n\n#JavaScript #FrontEnd #WebDevelopment 🚀 \n\nPractice Exercise: \n1. Create a color picker that changes background color \n2. Build a counter with + and - buttons \n3. Make a dropdown menu that shows/hides on click","datePublished":"2025-07-22T12:31:34Z","dateModified":"2025-07-22T12:31:34Z","author":{"@type":"Organization","name":"Data Analytics","url":"https://telemetr.io/en/channels/1864702447-dataanalyticsx","image":"https://img.tlmtr.io/c/22c6hV/6032738397593472979?ty=x"},"publisher":{"@type":"Organization","name":"Data Analytics","url":"https://telemetr.io/en/channels/1864702447-dataanalyticsx","image":"https://img.tlmtr.io/c/22c6hV/6032738397593472979?ty=x"},"commentCount":0,"interactionStatistic":[{"@type":"InteractionCounter","interactionType":"https://schema.org/ViewAction","userInteractionCount":695},{"@type":"InteractionCounter","interactionType":"https://schema.org/LikeAction","userInteractionCount":2},{"@type":"InteractionCounter","interactionType":"https://schema.org/ShareAction","userInteractionCount":2}]}}]}