🚀 Day 11 of My Web Development Journey Today, I focused on JavaScript interactivity and DOM manipulation by building multiple mini features in a single project. 💡 What I implemented: • 🎯 Number guessing game using random logic • ⌨️ Live text display using onkeyup event • 🎨 Dynamic color change using JavaScript • 🔐 Simple login validation system ✨ What I learned: JavaScript allows us to make web pages interactive and responsive to user actions. Handling events like clicks and key inputs is essential for building real-world applications. 🔥 Key takeaway: Understanding DOM manipulation + events is a major step toward building dynamic apps like LinkedIn. 📌 Next step: Building a To-Do List and post system with LocalStorage #JavaScript #WebDevelopment #FrontendDeveloper #LearningJourney

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

Day 3/30 – Event Countdown Timer Continuing my 30 Days – 30 Frontend Projects Challenge, today I built a countdown timer web app using HTML, CSS, and JavaScript. Features: • Real-time countdown (Days, Hours, Minutes, Seconds) • Clean and responsive UI layout • JavaScript logic updating every second • Simple and practical event tracking tool This project helped me practice time calculations, DOM updates, and interactive UI components. 🌐 Live Demo: https://lnkd.in/g2cVCzTF Consistency is key on to Day 4 tomorrow #snsinstitutions #snsdesignthinkers #designthinking #30DaysOfCode #FrontendDeveloper #WebDevelopment #JavaScript #StudentDeveloper

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

Browser APIs Every JavaScript Developer Should Know👆 Modern web applications rely heavily on powerful Browser APIs that allow JavaScript to interact with the browser, device, and network. I created a quick developer reference guide covering some of the most commonly used Browser APIs including: 🔹 DOM API – Manipulate and control HTML elements dynamically 🔹 Console API – Debugging, logging, and performance tracking 🔹 Navigator API – Access browser and device information 🔹 Fetch API – Handle HTTP requests and networking 🔹 Web Storage API – Store data using localStorage & sessionStorage 🔹 History API – Manage navigation without page reloads (SPA routing) 🔹 Events API – Handle user interactions and browser events 🔹 Canvas API – Create graphics, charts, and animations 🔹 Geolocation API – Access device location (with permission) 🔹 Web Workers & Timers API – Run background tasks and schedule execution Understanding these APIs helps developers build faster, more interactive, and powerful web applications. 📌 Save this post as a quick reference for your development workflow. #JavaScript #WebDevelopment #FrontendDevelopment #BrowserAPIs #WebAPI #Developers #Programming #Learning

Built an Advanced To-Do List Web App using HTML, CSS & JavaScript 🚀 Features: ✔️ Add and delete tasks ✔️ Mark tasks as completed ✔️ Filter: All / Completed ✔️ Data persistence using LocalStorage ✔️ Confirmation before delete This project helped me understand: • DOM manipulation • State management • LocalStorage usage • Dynamic rendering logic Leveling up my frontend development journey 💪 #WebDevelopment #JavaScript #Frontend #LocalStorage #LearningInPublic

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

🚀 New Project Deployed – To-Do List Web App I recently built and deployed a To-Do List application using HTML, CSS, and JavaScript. This project helped me strengthen my understanding of DOM manipulation and interactive UI behavior in JavaScript. You can check it out here: 🔗 [https://lnkd.in/geExcau9] github: [https://lnkd.in/gVRsq3xk] Key Features: • ➕ Add a new task instantly by pressing Enter • ✏️ Edit any task by simply double-clicking on it • ✅ Mark tasks as completed using the checkbox (with strikethrough effect) • 🗑️ Delete tasks easily using the delete button • ⚡ Smooth and simple user experience with real-time updates Building small projects like this helps me improve my JavaScript logic and front-end development skills. I’d love to hear your feedback! 🙌 #WebDevelopment #JavaScript #HTML #CSS #FrontendDevelopment

🚀 Just built a Real-Time Character Counter using HTML, CSS, and JavaScript. This small project tracks user input in real time and displays the number of characters typed along with the remaining limit — a feature commonly used in forms, messaging apps, and content editors. 🔧 What I practiced while building this: • DOM manipulation • JavaScript event listeners ("input" event) • Real-time UI updates • Simple and responsive front-end design Building small projects like this helps strengthen the fundamentals and understand how real user interactions work in web applications. 🔗 Live Demo: https://lnkd.in/gXjy2TSK I’m continuously building projects to improve my front-end development skills. Feedback is always welcome! #WebDevelopment #JavaScript #FrontendDevelopment #HTML #CSS #CodingProjects #LearningInPublic

#Day59 of #100DaysOfCode Today I explored some important React and JavaScript concepts that help in building interactive web applications. 🔹 Handling Click Events – Learned how React responds to user clicks using event handlers like onClick. 🔹 Handling Non-Click Events – Explored events like keyboard input, form changes, and mouse movements. 🔹 Event Object – Understood how React provides event information (like target element, value, etc.) through the event object. 🔹 State in React – Learned how state helps store dynamic data and update the UI automatically. 🔹 Hooks – Got introduced to React Hooks which allow functional components to use features like state and lifecycle behavior. 🔹 useState() Hook – Practiced managing component state using useState. 🔹 Activity: Create Like Button – Built a simple Like Button to practice state updates and user interaction. 🔹 Closures in JavaScript – Understood how functions can access variables from their outer scope even after execution. 🔹 Re-render in React – Learned how React re-renders components when state or props change. 🔹 Callback in setState Function – Explored how callback functions help update state based on the previous state. 🔹 More About State – Deepened understanding of how state works internally in React. #React #JavaScript #MERN #WebDevelopment #100DaysOfCode #Day59complete✅👍🏻