JavaScript Student Contact Management System with LocalStorage

Learning JavaScript: Objects & DOM As part of my JavaScript learning journey, I explored two powerful concepts: Objects and the DOM (Document Object Model). 🔹 JavaScript Objects Objects help store related data and functionality together using key–value pairs. They make code more structured, reusable, and easier to manage. ✔ Represent real-world entities ✔ Hold properties and methods ✔ Core to object-based programming in JavaScript 🔹 DOM (Document Object Model) The DOM allows JavaScript to interact with HTML elements dynamically. ✔ Access and modify elements ✔ Handle user events ✔ Create interactive and responsive web pages 📌 Understanding Objects and the DOM is essential for building dynamic, real-world web applications. Excited to keep learning and applying these concepts through practice 🚀 #JavaScript #WebDevelopment #LearningJourney #ObjectsInJS #DOM #NextGenFreedu #FullStackDeveloper

🚀 JavaScript Journey Started | Strong Basics First 🚀 I’ve started my JavaScript journey with one clear goal: master the fundamentals before jumping into advanced stuff. Right now, I’ve built a JavaScript Strings practice repository, fully documented in README.md, focusing on clarity, clean code, and real understanding 📘 What this repo covers: • JavaScript Strings basics & immutability • Indexing & character access • New lines (\n) & escaping strings • Template literals & string interpolation • ASCII / char codes • Core string methods: indexOf, includes, slice, replace, replaceAll, toUpperCase, toLowerCase, repeat, trim • Basic user input using prompt() Simple goal: understand → practice → document. Alongside JavaScript, I’m also working on CSS projects to improve layouts, structure, and UI skills 🎨 At the same time, I’ve started DSA (Arrays) and solved problems like array traversal, min & max elements, linear search, reversing arrays, pass by reference, and sum/product logic 🧠 GitHub Repository (JavaScript Strings Practice): https://lnkd.in/dyPNNcsi This is just the beginning. Staying consistent, learning daily, and building step by step 💪 #JavaScript #JSBasics #JSStrings #WebDevelopment #CSSProjects #DSA #Arrays #LearnInPublic #100DaysOfCode #CodingJourney

Understanding JavaScript Events — Where Web Pages Become Interactive While learning JavaScript, one concept that really changed how I see web pages is Events. Before events, a webpage is just structure and styling. With events, it starts responding to users. 👉 That’s where interaction begins. ✅ What is a JavaScript Event? An event is an action that happens in the browser. For example: • A user clicks a button • Types in an input field • Moves the mouse • Submits a form • A page finishes loading JavaScript listens to these actions and responds accordingly. ✅ Common JavaScript Events • click → when a user clicks an element • input → when input value changes • submit → when a form is submitted • mouseover → when mouse moves over an element • load → when page finishes loading Example: button.addEventListener("click", function() { console.log("Button clicked"); }); ✅ Why Events Matter Events allow us to: • Create dynamic user interfaces • Validate inputs instantly • Trigger API calls • Improve user experience Without events, modern web applications wouldn’t exist. 💡 My learning takeaway: Coming from a backend background, events feel similar to handling requests — something happens, and logic responds to it. Understanding events made JavaScript feel much more practical and alive. What was the first JavaScript event you implemented when learning frontend? 👇 #JavaScript #FrontendDevelopment #WebDevelopment #DOM #WebEvents #LearningJourney #FullStackDeveloper #Programming #SoftwareEngineering #DeveloperGrowth

Student Details Management Project 🔗 Live Demo: https://lnkd.in/g7AybBJh RIDTECH Developed a Student Details Form using HTML, CSS, and JavaScript that collects student information (Name, Age, Subject, Marks, DOB, Mobile) and displays it dynamically in a table. Implemented DOM manipulation and LocalStorage for data handling with a responsive and user-friendly interface. Technologies Used: HTML | CSS | JavaScript | LocalStorage | DOM Hashtags #WebDevelopment #JavaScript #HTML #CSS #Frontend #StudentProject #Coding

Hello everyone 👋 Welcome to Day 20 of my JavaScript learning journey 🚀 Today I built a Real-Time Digital Clock using HTML, CSS, and JavaScript, where the time updates every second automatically. This project helped me understand how JavaScript works with time, intervals, and continuous DOM updates. ⏰ Project: Digital Clock The clock: ✔ Displays the current time (HH:MM:SS) ✔ Updates automatically every second ✔ Uses a clean and minimal UI ✔ Runs continuously without page reload It feels simple on the surface, but it teaches an important real-world concept. 🔧 Concepts I Applied In this project, I worked with: 🔹 Date() object to get current time 🔹 toLocaleTimeString() for readable format 🔹 setInterval() to update time every second 🔹 DOM selection using getElementById() 🔹 Updating content dynamically with innerHTML This showed me how JavaScript can continuously update the UI in real time. 🧠 What I Learned • How real-time applications update data • How setInterval() works behind the scenes • How JavaScript handles time-based logic • How DOM updates can run continuously without user input This project made me more comfortable with timers and live data updates. 🎯 Day 20 Takeaway From handling user clicks to handling time itself, JavaScript keeps getting more powerful ⏳💻 Building small projects like this is helping me connect concepts and gain confidence with real-world frontend logic. Next ideas: 👉 Stopwatch / Timer 👉 Countdown Clock 👉 Date & Time Dashboard #javascript #webdevelopment #frontenddevelopment #learninginpublic #codingjourney #developers #100daysofcode #dom #projects #selflearning

🚀 JavaScript Mini Project – Bulb ON/OFF with Size Control Built a Bulb Toggle project using HTML, CSS, and JavaScript as part of my frontend learning journey. 🔹 Features Bulb ON & OFF toggle with dynamic text change Change bulb dimensions using JavaScript Clean UI without using images 🔹 Concepts Used DOM Manipulation Event Handling classList.toggle() Conditional Logic Grateful to 10000 Coders for the learning environment and special thanks to Ajay Miryala for the continuous guidance and support 🙏 🔗 Live Demo: https://lnkd.in/gbGxAEVp 🔗 GitHub Repository: https://lnkd.in/g9_z_XhY 📌 Learning JavaScript by building real-world mini projects. More coming soon 💻✨ #JavaScript #WebDevelopment #Frontend #HTML #CSS #MiniProject #LearningByDoing

Your first real button (do this now) #coding #shorts In this short project, we build a basic JavaScript counter that increments a number each time you click a button. This beginner‑friendly tutorial demonstrates how to use HTML, JavaScript, and DOM manipulation to update content dynamically on a webpage. Perfect for those starting out with JavaScript basics and learning how to interact with elements using event handlers. Features - HTML structure with a number display and button. - JavaScript function to increment the number on button click. - Demonstrates DOM manipulation using getElementById and innerHTML. - Beginner‑friendly project for learning event handling in JavaScript. - Clean and minimal code, easy to understand and extend. - Can be expanded into a counter app with decrement, reset, or advanced features. Connect with me YouTube: https://lnkd.in/gAtk9suf LinkedIn: https://lnkd.in/gu-ZN9dB Facebook: https://lnkd.in/gZNu3sb3 Instagram: https://lnkd.in/gEUR34hP TikTok: https://lnkd.in/gQvUEgSq GitHub: https://lnkd.in/gTcg6vFt Subscribe for more creative coding demos, Canvas tutorials, and short projects optimized for social platforms 🚀 #javascript #html #dommanipulation #webdevelopment #frontenddevelopment #codingforbeginners #javascriptproject #learnjavascript #htmlcssjavascript #webdesign #frontendproject #codingtutorial #javascriptbeginner #interactiveui #simplejavascript #javascriptdemo #webdevelopmentproject #javascriptcounter #javascriptincrement #javascriptdom

Built a Result Publish Software (RPA) using HTML, CSS, JavaScript & Bootstrap. This mini project allows users to: • Enter student details • Input subject marks • Auto-calculate total, percentage & grade • Validate inputs • Generate a clean result table instantly Focused on DOM manipulation, form validation, and dynamic calculations using JavaScript. Small project, but a big step in strengthening my frontend fundamentals 💻 Skyy Skill Academy Himansu Sekhar Panda Siddhant Pattanaik Annanya Sahoo Anasuya Nayak Asif Ali Quraishi ♞ koustav moitra Kumar Biplab Sahoo Manoj kumar Das M. Payel Shila Google #WebDevelopment #JavaScript #Frontend #Bootstrap #StudentProject #CSE #LearningByBuilding

🚀 Building with JavaScript, not just learning it. After revisiting JavaScript Core concepts, I focused on strengthening my skills by building real projects using Vanilla JavaScript. This post showcases 10 JavaScript projects I’ve built so far, including calculators, utilities, and DOM-based applications. Each project helped me better understand logic building, event handling, and clean UI behavior. 🧠 What this journey reinforced for me: Strong fundamentals matter more than frameworks Practice beats passive learning Small projects compound into real confidence I’ll keep adding more projects as I continue growing toward full-stack development. Thanks for checking this out 😊 github: https://lnkd.in/gGkBycXa #JavaScript #FrontendDevelopment #WebDevelopment #VanillaJavaScript #LearningByBuilding #Projects #CodingJourney #SelfLearning #DeveloperJourney

Day 43 of #90DaysOfCode — Frontend Foundations: HTML & CSS Vocabulary Page Continued strengthening frontend fundamentals by building a simple HTML and CSS project that presents Spanish color vocabulary with structured markup and basic styling. The goal of this exercise was to reinforce correct separation of structure and presentation, along with disciplined use of CSS selectors and asset organization. Key focus areas: • External CSS integration • ID and class selectors for targeted styling • Consistent styling through reusable rules • Organized asset and image management • Clean and readable frontend structure Solid frontend foundations rely on clarity and structure. This project focused on building those fundamentals correctly before layering on additional complexity. GitHub repository: https://lnkd.in/gmA8Hp-y #HTML #CSS #FrontendDevelopment #WebDevelopment #SoftwareEngineering #90DaysOfCode