#Hello #Connections 👋 #100DaysOfCodeChallenge | #Day38 🚀 Project: Notes App 📌 What I built Today I built a simple and interactive Notes App where users can create and manage notes directly in the browser. Users can add a note with a heading and details, view it instantly in the notes section, and delete notes when they are no longer needed. 🛠 Technologies Used HTML5 CSS3 Tailwind CSS JavaScript (DOM Manipulation & Event Handling) ⚠ Challenge I faced Dynamically creating note cards and updating the UI whenever a note is added or deleted. ✅ How I solved it Used JavaScript arrays to store notes and a render function to dynamically generate note cards in the DOM whenever the notes list changes. 💬 Open to feedback and suggestions 🚀 🔗 Project link in comments 👇 🙏 Code Of School Avinash Gour | Ritendra Gour #FrontendDeveloper #JavaScript #HTML5 #CSS3 #TailwindCSS #WebDevelopment #100DaysOfCode #DeveloperJourney

🧠 Just built a Trivia Question Fetcher App using HTML, CSS & JavaScript! A fun little project that fetches a brand new trivia question from an API every 5 seconds — automatically! 🎯 Here's what the app does: ✅ Fetches random trivia questions from a live API ✅ Auto-refreshes every 5 seconds with a new question ✅ Stop button to halt the question rotation ✅ Button changes color when stopped — visual feedback matters! ✅ Prevents any further API calls once stopped The biggest learning from this project? 👉 How setInterval() and clearInterval() work in JavaScript 👉 Why a simple isStopped flag can save you from unwanted API calls 👉 How to handle async fetch() responses even after a stop event #JavaScript #WebDevelopment #HTML #CSS #VanillaJS #API #100DaysOfCode #Frontend #BuildInPublic

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

Built a simple Counter App using HTML, CSS, and JavaScript. Increase ➕ Decrease ➖ Reset 🔄 — works similar to cart quantity updates. This project helped me understand DOM manipulation and dynamic value updates. GitHub Repository : https://lnkd.in/gZzUcGWT Live Demo : https://lnkd.in/gYbGruAM #JavaScript #Frontend #Learning

Just built a Todo App using Vanilla JavaScript! Key Features: ->Add, edit and delete tasks dynamically ->Reorder tasks with up/down buttons ->Persistent storage using localStorage ->Auto-display of tasks with date & time ->Efficient event handling using event delegation This project helped me strengthen my DOM manipulation, JavaScript logic, and web storage skills. Todo Website: https://lnkd.in/e6y7QmAb Check it out on GitHub: https://lnkd.in/eQjqyHwh #JavaScript #WebDevelopment #Frontend #TodoApp #Coding

🚀 Excited to share my first JavaScript Calculator project! I built this web app using HTML, CSS, and JavaScript, where you can perform basic arithmetic operations with real-time results. What started as a small learning experiment turned into a hands-on experience with: 💡 DOM manipulation 💡 Handling button clicks 💡 Building calculation logic It’s amazing how much you can learn by building something from scratch! 🎉 🎥 Check out the demo showing both the code and working app. #javascript #webdevelopment #frontend #learningbydoing #codingjourney

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

Day 25 of my JavaScript journey 🚀 Built a Recipe Finder App using HTML, CSS, and JavaScript, powered by an external API. Features: 🍽️ Search recipes dynamically 🌐 Fetch data from TheMealDB API 📄 Display recipe details in real-time ✨ Interactive and user-friendly UI This project helped me understand how to work with APIs, handle asynchronous JavaScript, and build real-world applications. 🔗 Live Demo: https://lnkd.in/gSAAATzM 💻 GitHub Repo: https://lnkd.in/gBQmmBYJ Moving beyond basic projects and building applications that interact with real data. 💻 #JavaScript #WebDevelopment #FrontendDeveloper #100DaysOfCode #CodingJourney #API

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

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