Just shipped my Day 17/30 JavaScript challenge: a fully functional To-Do List app! Built with vanilla JS, this project showcases DOM manipulation, event listeners, and dynamic element creation in action. Features include adding tasks, marking them complete with a strikethrough effect, deleting individual items, and clearing everything at once. The sleek UI is fully responsive and built with pure HTML, CSS, and JavaScript. no frameworks, just core fundamentals. Tech topics covered: querySelector, innerHTML, createElement, addEventListener, and event delegation. From image uploaders to task managers, each project peels back another layer of web development. Check it out live: https://lnkd.in/d34HUqPn #FullStackDeveloper #JavaScript #WebDevelopment #CodeGuru #FrontendDevelopment

🚀 React Insight: Why key Matters in Lists If you’ve worked with lists in React, you’ve probably written something like this: {items.map((item) => ( <li key={item.id}>{item.name}</li> ))} But have you ever wondered why the key prop is so important? 🤔 React uses keys to identify which items in a list have: • changed • been added • been removed This helps React update the UI efficiently without re-rendering everything. ⚠️ What happens without proper keys? ❌ Components may re-render unnecessarily ❌ Component state can attach to the wrong item ❌ Performance issues in large lists 💡 Best Practices ✔️ Use a unique and stable identifier from your data (like id or uuid) => Bad practice: key={index} => Better approach: key={user.id} Using the array index as a key can cause bugs when the list reorders, adds, or removes items. ✨ Takeaway Keys aren’t just there to remove React warnings — they help React’s reconciliation algorithm update the DOM efficiently. Small detail. Big difference. #ReactJS #FrontendDevelopment #JavaScript #WebDevelopment #CodingTips #SoftwareEngineering

Built a To-Do List Web App using HTML, CSS, and JavaScript to practice working with the DOM and browser storage. Key implementation details: • Tasks are managed using a JavaScript array. • The display() function loops through the array and dynamically generates the task elements on the page. • Each task has Edit and Delete buttons that trigger their respective functions. • Whenever tasks change, the array is saved to localStorage using JSON.stringify(), allowing the tasks to persist after page refresh. Features: ✔ Add tasks ✔ Edit tasks ✔ Delete tasks ✔ Persistent storage using localStorage Building projects like this helps in understanding how JavaScript interacts with the UI and browser storage. #javascriptdeveloper #webdev #frontend #htmlcssjavascript #codingjourney #buildinpublic #developerlife #programming

🟨 𝗪𝗵𝘆 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗲𝘅𝗶𝘀𝘁𝘀 In the early days of the web, pages were static. They could display information, but they couldn’t really interact with users. JavaScript changed that. It allowed browsers to handle things like: ⚡ form validation 🎯 user interactions 🔄 dynamic page updates Today, JavaScript powers: 🌐 websites 📱 web apps ⚙️ even backend systems (Node.js) 𝗙𝗿𝗼𝗺 𝗮 𝘀𝗶𝗺𝗽𝗹𝗲 𝘀𝗰𝗿𝗶𝗽𝘁𝗶𝗻𝗴 𝗹𝗮𝗻𝗴𝘂𝗮𝗴𝗲 → 𝘁𝗼 𝗮 𝗳𝘂𝗹𝗹 𝘀𝘁𝗮𝗰𝗸 𝗲𝗰𝗼𝘀𝘆𝘀𝘁𝗲𝗺. #JavaScript #Programming #LearningInPublic #ITStudent

Half the JavaScript your app ships is never used. Not on slow connections. Not on fast ones. Never. According to HTTP Archive's, the median page ships 613KB of JavaScript on desktop. Roughly half of it is never used during page load. What it does Code splitting divides your bundle into smaller chunks that load only when required. For example, one production React application reduced its bundle size from 2.3MB to 875KB and improved Time to Interactive from 5.2 seconds to 2.7 seconds. Where to split Routes — always first Heavy libraries — 200–500KB each Modals, drawers, PDF export — rarely used, no reason to preload Permission-based chunks — admin panels, billing, or internal tools, in bundles for users who cannot access them. This practice avoids unnecessary data transfer and potential security concerns. The trap I see most often Avoid splitting too aggressively at the component level, as it can lead to excessive network requests. Instead, split at logical boundaries that align with the user journey rather than the file structure. Code splitting is a simple yet significant technique. #Frontend #JavaScript #WebPerformance #React #CodeSplitting #WebDev #SoftwareEngineering #Programming

🚀 Just Built a Todo App with Vanilla JavaScript! I’m excited to share a project I recently completed while improving my JavaScript and DOM manipulation skills. 🔗 Live Demo: https://lnkd.in/gBK7vy89 💻 GitHub Repository: https://lnkd.in/gu5yEdSe 💡 Project Overview This Todo App helps users manage tasks efficiently with features like adding, editing, deleting, filtering, and sorting tasks. ⚙️ Features ✅ Add, edit, and delete tasks ✅ Mark tasks as completed ✅ Filter tasks (All / Completed / Pending) ✅ Sort tasks (Ascending / Descending) ✅ Real-time task counters (Total / Completed / Pending) ✅ Data persistence using Local Storage Projects like this are great for mastering DOM manipulation, event handling, array methods, and state management in JavaScript. (The Road To Dev) 🛠️ Tech Stack • HTML • CSS • JavaScript (Vanilla JS) • LocalStorage API Building this project helped me understand how to structure code better and manage application state in a clean way. I’m continuously improving my JavaScript skills by building real projects. If you have any suggestions or feedback, I’d love to hear them! 🙌 #javascript #webdevelopment #frontend #100DaysOfCode #learninginpublic #coding

🚀 Built a Simple To-Do App Today! Today I worked on strengthening my JavaScript fundamentals by building a basic To-Do List application from scratch. Here’s what I implemented: ✅ Fetched data from a JSON source ✅ Added a checkbox feature to mark tasks as completed (with strike-through effect) ✅ Implemented a delete button to remove tasks dynamically ✅ Created an input field to add new tasks, which get pushed into the array and displayed instantly on the UI This project helped me understand DOM manipulation, event handling, and working with arrays in a much better way. Small steps, consistent progress 💪 Looking forward to building more real-world projects! #JavaScript #WebDevelopment #FrontendDevelopment #LearningInPublic #CodingJourney

Headline: 📈 Small Projects, Big Progress. From static HTML pages to dynamic, state-driven interfaces. This To-Do app was a fun way to practice Clean Code principles in Vanilla JS. Key Features: ✅ Add tasks via button or keyboard. ✅ Individual task deletion. ✅ Clean, centered UI for better focus. Next step? Adding LocalStorage so the tasks persist even after a page refresh! 🔄 #LearnToCode #JavaScript #DeveloperJourney #WebDev #PortfolioProject

Day 17 of my JavaScript journey 🚀 Built an Expense Tracker using HTML, CSS, and JavaScript. This app helps users track their income and expenses, showing the total balance dynamically. This project helped me practice: • Working with arrays and objects • DOM manipulation • Event handling • Dynamic data updates 🔗 Live Demo: https://lnkd.in/gmrsaRJR 💻 GitHub Repo: https://lnkd.in/gS4WA8gJ Moving from small UI projects to more real-world applications step by step. 💻 #JavaScript #WebDevelopment #FrontendDeveloper #100DaysOfCode #CodingJourney

🚀 Day 5/30 – State in React One of the most important concepts 🔥 Today I learned: ✅ State stores dynamic data inside a component → It allows components to manage and update their own data ✅ When state changes → React re-renders the UI → React automatically updates only the changed parts (efficient rendering ⚡) ✅ Managed using useState hook → The most commonly used hook in functional components ✅ State updates are asynchronous → React batches updates for better performance 💻 Example: import { useState } from "react"; function Counter() { const [count, setCount] = useState(0); const handleClick = () => { setCount(prev => prev + 1); // safe update }; return ( <div> <h2>Count: {count}</h2> <button onClick={handleClick}>Increment</button> </div> ); } 🔥 Key Takeaway: State is what makes React components interactive, dynamic, and responsive to user actions. #React #State #FrontendDevelopment #JavaScript #WebDev #CodingJourney #LearnInPublic