View profile for Pratyush Kumar Nanda
Pratyush Kumar Nanda

I thought a To-Do List was “too basic”… until I actually built one. While working on this project, I realized how many small details matter in real frontend development 👇 ❌ My first version had logic issues ❌ Edit & save functionality felt confusing ❌ The UI didn’t feel smooth So I improved it step by step and finally built a fully functional To-Do List using HTML, CSS & JavaScript ✅ 🚀 Features: • Add, edit & delete tasks • Clean UI with subtle animations • Proper DOM manipulation • Focused on readability & user experience 📚 What I learned: • How event listeners actually work • Difference between textContent and innerText • Writing cleaner JS logic instead of messy conditions • Why small UI details really matter This project may look simple, but it strengthened my JavaScript fundamentals a lot 💡 👉 Question: What feature should I add next? ✔ LocalStorage ✔ Dark mode ✔ Drag & drop tasks Would love your suggestions 🙌 Thanks to @Suryamani Kumar for the guidance and support 🙌 #FrontendDevelopment #JavaScript #WebDevelopment #LearningByDoing #Projects #HTML #CSS

Pratyush Kumar Nanda 2mo

🔗 GitHub Repository: https://github.com/Pratyush7021 🌐 Live Demo: https://pratyush7021.github.io/TO-DO-LIST/ Suggestions and feedback are welcome 🙌

Like
Reply
Pratyasha N. 2mo

Too good for nowadays college and school going students - as the font is quite attractive and please try to make the UI a bit professional friendly so that we can use it too😇

Like
Reply
1 Reaction
Suryamani Kumar 2mo

Good work 👏 keep practicing

Like
Reply
1 Reaction
Ambika Prasad Mishra 2mo

Good work

Like
Reply
1 Reaction
See more comments

To view or add a comment, sign in

More Relevant Posts

  • View profile for Jithin U S
    Jithin U S

    💡 What is DOM? (And Why Every Frontend Developer Must Truly Understand It) When we write HTML, we’re not just creating a webpage. We’re creating a structure that the browser converts into something powerful: the DOM (Document Object Model). 📌 So what exactly is the DOM? The DOM is a programming interface that represents your HTML document as a tree of objects (nodes). Every: <html> tag <body> tag <div> <button> even text inside elements … becomes a node inside a structured tree. This allows JavaScript to: ✔ Read content ✔ Modify elements ✔ Change styles ✔ Add or remove nodes ✔ Respond to user events Without the DOM, JavaScript couldn’t dynamically update a webpage. 🧠 How It Actually Works Behind the Scenes 1️⃣ Browser parses HTML 2️⃣ It creates a DOM tree in memory 3️⃣ JavaScript interacts with this tree 4️⃣ When changes happen, the browser repaints the UI Every DOM manipulation has a performance cost — especially large or frequent updates. This is exactly why libraries like React introduced the concept of a Virtual DOM — to minimize direct DOM operations and optimize rendering. ⚡ Why Understanding DOM is Important (Even If You Use React) Even if you work with modern frameworks: Re-renders are still tied to DOM updates Performance optimization depends on understanding repaint & reflow Debugging UI issues often requires DOM inspection Event bubbling & capturing are pure DOM concepts If you truly understand the DOM, you understand frontend at a deeper level. #WebDevelopment #FrontendDevelopment #JavaScript #HTML #DOM #Programming #Coding #ReactJS #FrontendEngineer #SoftwareEngineering #WebDev #LearnToCode #DeveloperLife #CodingJourney #TechCommunity #ContinuousLearning

    • No alternative text description for this image

    To view or add a comment, sign in

  • View profile for Hymavathi Guvvala
    Hymavathi Guvvala

    Hi everyone.... 💻 Day 18 of #30DaysCodeChallenge Today I built a Random Quote Generator using HTML, CSS, and JavaScript as part of my daily frontend practice. This project helped me strengthen my understanding of DOM manipulation and event handling in JavaScript while also focusing on clean and responsive UI design. ✨ Key Features of the Project: 🔹 Displays a random motivational quote each time the user clicks the "New Quote" button 🔹 Shows the author name along with the quote 🔹 Added a Copy Quote button to copy the quote directly to the clipboard 🔹 Designed a simple and clean UI using CSS with a gradient background 🧠 What I Practiced: ✔️ Working with arrays and objects in JavaScript ✔️ DOM manipulation using getElementById ✔️ Event listeners for button interactions ✔️ Generating random quotes using JavaScript logic ✔️ Using the Clipboard API Consistent practice like this helps improve problem-solving skills and builds confidence in frontend development. Looking forward to continuing this journey and learning something new every day! 🚀 #30DaysCodeChallenge #Day18 #WebDevelopment #HTML #CSS #JavaScript #FrontendDevelopment #CodingJourney

    To view or add a comment, sign in

  • View profile for Surekha Bollineni
    Surekha Bollineni

    🚀 Mini Frontend Project: Interactive Like Button (HTML • CSS • JavaScript) Just built a small yet powerful UI interaction to strengthen my JavaScript fundamentals 💡 ✨ What this project demonstrates: DOM manipulation using vanilla JavaScript State management using a boolean flag Dynamic image & style updates on user interaction Clean UI built with HTML, CSS, Bootstrap & Font Awesome 👍 Clicking the Like button updates the image, icon color, and button style in real time—just like a real social media interaction. 🛠 Tech Stack: HTML | CSS | JavaScript | Bootstrap | Font Awesome 📈 Projects like these help me deeply understand how user actions connect with UI behavior and logic behind the scenes. Always learning, always building 💻✨ 🔗 https://lnkd.in/gU74UcdP #FrontendDevelopment #JavaScript #WebDevelopment #DOMManipulation #LearningByBuilding #MiniProject #HTML #CSS

    • No alternative text description for this image

    To view or add a comment, sign in

  • View profile for Parmeshwar Metkar
    Parmeshwar Metkar

    🚀✨Understanding DOM Manipulation in JavaScript 👩🎓Ever wondered how websites update content instantly without reloading the page? That’s the power of DOM Manipulation. 📚The Document Object Model (DOM) represents a web page as a structured tree where JavaScript can interact with HTML elements dynamically. ✅ Why DOM Manipulation Matters • Creates interactive and dynamic web applications • Updates content in real-time • Improves user experience without page refresh • Enables modern UI behavior 🔹 What You Can Do with DOM Manipulation • Change text and content dynamically • Modify styles and layouts • Add or remove elements • Handle user events like clicks, inputs, and scrolling 🚀 From simple buttons to complex web applications, DOM manipulation is one of the most essential skills for every frontend developer. Mastering DOM means moving from static pages to interactive experiences. #JavaScript #WebDevelopment #Parmeshwarmetkar #FrontendDevelopment #DOM #CodingJourney #Developers #Learning

    To view or add a comment, sign in

  • View profile for KOVURU RAMYA
    KOVURU RAMYA

    Add Friend / Remove Friend – JavaScript DOM Project: I’m happy to share another JavaScript DOM manipulation project where I focused on building interactive UI behavior using pure JavaScript. In this project, when the “Add Friend” button is clicked: The button text dynamically changes to “Remove Friend” The status updates from “Stranger” to “Friend” On clicking again, everything switches back demonstrating toggle functionality using DOM concepts. What I learned from this project: 1.) Deepened my understanding of the Document Object Model (DOM). 2.) Handling click events efficiently. 3.) Dynamically updating text content and styles. 4.) Implementing conditional logic in real-time UI changes. 5.) How JavaScript controls and updates the webpage without reload. 6.) Building clean and interactive user experiences. Through this project, my confidence in DOM manipulation and event handling has significantly increased, and I now better understand how real-world UI interactions work in web applications. Learning by building one project at a time. Feedback and suggestions are always welcome! Checkout the project code on github : https://lnkd.in/egzkYnJK #JavaScript #DOMManipulation #FrontendDevelopment #WebDevelopment #JavaScriptProjects #LearningJourney #CodingPractice #UIInteraction #WebDesign #BeginnerDeveloper

    To view or add a comment, sign in

  • View profile for Najnin .
    Najnin .

    🌡️ Temperature Converter - Practicing JavaScript Logic & DOM Interaction As part of improving my JavaScript fundamentals through hands-on projects, I built a Temperature Converter that performs real-time unit conversion between Celsius and Fahrenheit. This project helped me understand how user input, logical calculations, and DOM updates work together to create interactive web features. What I implemented: • Handling user input dynamically • Temperature conversion logic (Celsius ↔ Fahrenheit) • Dropdown-based unit selection • Real-time result updates using DOM manipulation • Clean and simple UI focused on functionality Working on this project strengthened my understanding of how small logic-driven features form the foundation of real-world frontend applications. Each project I build is helping me improve problem-solving skills and write more structured JavaScript code. 🔗 Live Demo: https://lnkd.in/gAKd428M 🔗 GitHub Repository: https://lnkd.in/gzKGr6ka Currently continuing to build JavaScript projects to deepen core concepts and move toward real-world frontend development. #JavaScript #FrontendDevelopment #WebDevelopment #JavaScriptProjects #DOMManipulation #CodingJourney #FrontendDeveloper

    To view or add a comment, sign in

  • View profile for Meena Subash
    Meena Subash

    🚀 Project Update: Textarea Character Counter I recently built a Textarea Character Counter using HTML, CSS, and JavaScript as part of my front-end development practice. This project helped me understand how to work with JavaScript events and DOM manipulation to create interactive web features. Live demo:https://lnkd.in/g9V42Hhj 🔹 Key Features ✅ Live character counter inside the textarea ✅ Maximum character limit ✅ Red border indication when the limit is reached ✅ Copy button to copy the entered text ✅ Message displayed after copying text 💡 What I learned • Handling user input using JavaScript • Using event listeners for real-time updates • Implementing character limits in forms • Improving UI feedback for better user experience Small projects like this help me improve my front-end development skills and gain practical experience. More projects coming soon as I continue my learning journey in Web Development 💻 💻 Technologies Used: HTML | CSS | JavaScript #WebDevelopment #FrontendDevelopment #JavaScript #HTML #CSS #LearningJourney #CodingPractice

    • No alternative text description for this image

    To view or add a comment, sign in

  • View profile for SATHVIKA SEENAPALLY
    SATHVIKA SEENAPALLY

    𝐔𝐧𝐝𝐞𝐫𝐬𝐭𝐚𝐧𝐝𝐢𝐧𝐠 𝐃𝐎𝐌 𝐒𝐭𝐫𝐮𝐜𝐭𝐮𝐫𝐞 & 𝐌𝐚𝐧𝐢𝐩𝐮𝐥𝐚𝐭𝐢𝐨𝐧 While building my project, I revisited something fundamental — the DOM. The DOM (Document Object Model) is how the browser represents an HTML page as a tree structure. Every element becomes a node. Think of it like this: html ├── head └── body ├── h1 └── button JavaScript interacts with this structure to update the UI dynamically. 🔹Selecting Elements const button = document.getElementById("btn"); 🔹 Changing Content button.textContent = "Clicked!"; 🔹 Adding Elements Dynamically const newDiv = document.createElement("div"); newDiv.textContent = "Hello"; document.body.appendChild(newDiv); 💡What I Realized: 𝗛𝗧𝗠𝗟 𝗰𝗿𝗲𝗮𝘁𝗲𝘀 𝘀𝘁𝗿𝘂𝗰𝘁𝘂𝗿𝗲 𝗖𝗦𝗦 𝗮𝗱𝗱𝘀 𝘀𝘁𝘆𝗹𝗶𝗻𝗴 𝗝𝗮𝘃𝗮𝗦𝗰𝗿𝗶𝗽𝘁 𝗰𝗼𝗻𝘁𝗿𝗼𝗹𝘀 𝗯𝗲𝗵𝗮𝘃𝗶𝗼𝗿 𝗗𝗢𝗠 𝗰𝗼𝗻𝗻𝗲𝗰𝘁𝘀 𝗮𝗹𝗹 𝘁𝗵𝗿𝗲𝗲 Understanding DOM manipulation changed how I approach frontend development — because now I’m not just writing HTML, I’m controlling the page. #JavaScript #WebDevelopment #DOM #Frontend #LearningInPublic #dailyChallenge

    To view or add a comment, sign in

  • View profile for Sahar Khan
    Sahar Khan

    Most websites add Dark Mode. But many forget to save user preference.🚀 In this project, I built a Dark & Light Theme Toggle using HTML, CSS, and JavaScript and stored the selected theme in localStorage so it remains saved even after refreshing or reopening the browser. This small feature significantly improves user experience and makes frontend projects feel more professional. 💡What This Project Covers: • DOM manipulation • classList.toggle() • localStorage setItem() & getItem() • Theme persistence logic • Clean modern UI structure 🎥 YouTube Tutorial: You can watch the complete step-by-step process here 👇🏻 https://lnkd.in/dH9q-aT2 If you're learning frontend development, implementing theme persistence is a great real-world practice project. #webdevelopement #localstorage #savetheme #javascript #consistency #darkmode #uidesign

    To view or add a comment, sign in

  • View profile for Shubham Arya
    Shubham Arya

    Just built a simple calculator using HTML, CSS, and JavaScript! This project gave me hands-on experience with DOM manipulation, event handling, and dynamic UI updates ○ Key learnings: ⁃ Handling button clicks with event listeners ⁃ Using string operations for calculations - Updating input fields in real-time This is a small step, but it boosted my confidence in frontend development Looking forward to adding more features like calculation history and scientific functions., ◦ Feedback and suggestions are most welcome #JavaScript #WebDevelopment #FrontendDevelopment #LearningJourney #BeginnerProject

    To view or add a comment, sign in

Pratyush Kumar Nanda

94 followers

View Profile

Explore content categories