Day 69 of #100DaysCodeChallenge Today, I practiced an exciting JavaScript functionality — a Click Counter App that remembers your progress using Local Storage! What I did: ✅ Added HTML elements inside the container with the id clickCounterContainer. ✅ Created a span element with the id counterValue to display the count. ✅ Added a button with the id incrementBtn to increase the count. ✅ Used Local Storage to save the click count value with the key clickCount. ✅ On page reload, if clickCount exists, it displays the saved value; otherwise, it starts from 0. ✅ Each button click increments the count and updates both the screen and local storage. This practice helped me understand how to persist data across sessions using localStorage — a crucial concept in modern web development! #100DaysOfCode #Day69 #JavaScript #WebDevelopment #FrontendDevelopment #LearnByDoing #CCBP #NxtWave #CodingJourney #ProgrammerLife #HTML #CSS #JS #CodeNewbie #PracticeMakesPerfect #DeveloperCommunity
More Relevant Posts
-
👇 💣 Day 38/100 – Bomb Defuser Timer using JavaScript ⏱ Thrilled to continue my #100DaysOfCode journey with an exciting mini-project — a Bomb Defuser Timer App 💥 In this project, I created a countdown timer that ticks down from 10 seconds, and the user must type “defuse” before it hits zero to prevent the bomb from exploding! 🧨 ✨ What I learned today: 🔹 How to use setInterval() and clearInterval() for timer control ⏳ 🔹 Handling keyboard events (like pressing Enter) 🔹 Real-time DOM updates for dynamic interactions A fun way to practice JavaScript timing and event handling — definitely one of the most thrilling projects so far! ⚡ #100DaysOfCode #JavaScript #WebDevelopment #Frontend #LearningByDoing #NxtWave #CCBP #CodingChallenge #HTML #CSS #DOMManipulation #TimerApp #JavaScriptProjects
To view or add a comment, sign in
-
🧠 Day 37/100 – KeyCode Detector using JavaScript ⚡ Continuing my #100DaysOfCode challenge with another fun and interactive project! Today, I built a KeyCode Detector App that shows the key codes of the keys you press. 🎹 ✨ What I learned today: 🔹 How to use keyboard events (keydown) in JavaScript 🔹 How to dynamically create and update HTML elements using the DOM 🔹 Improved understanding of event objects and how browsers handle user input This project is simple yet powerful — great for understanding real-time interactions between users and web applications. 💡 #100DaysOfCode #JavaScript #WebDevelopment #Frontend #LearningByDoing #CodingChallenge #NxtWave #CCBP #HTML #CSS #DOMManipulation #KeyboardEvents
To view or add a comment, sign in
-
⏰ Day 39/100 – Time Converter using JavaScript ⚡ Excited to share my next project in the #100DaysOfCode challenge — a Time Converter App! 🕒 This simple yet useful app takes input in hours and minutes and converts it into seconds instantly. A great exercise to sharpen my JavaScript logic and DOM manipulation skills. 💡 ✨ What I learned today: 🔹 Handling user inputs and form validations 🧮 🔹 Performing arithmetic operations dynamically 🔹 Updating the DOM with calculated results Every project adds more clarity to my understanding of JavaScript fundamentals and real-world problem-solving! 💪 #100DaysOfCode #JavaScript #WebDevelopment #Frontend #NxtWave #CCBP #CodingChallenge #LearningByDoing #HTML #CSS #DOMManipulation #ProblemSolving
To view or add a comment, sign in
-
Just built a simple yet smart To-Do App using HTML, CSS, and JavaScript! It allows you to add, edit, delete, and complete tasks, and even uses LocalStorage to keep everything saved — no database needed! This project helped me strengthen my understanding of DOM manipulation, event handling, and data persistence in JavaScript. I’ve also recorded a short demo of how it works (check out the video below ). Small steps, big learning. #JavaScript #HTML #CSS #WebDevelopment #Frontend #LearningByDoing #CodingJourney #LocalStorage #Projects WebLight IT Solutions
To view or add a comment, sign in
-
|| Day - 32 || +JavaScript : Cohort 2.0 ✨ Key Learnings of the Day: 1. Learned about conditional statements such as if-else-if, switch case, and the ternary operator. 2. Understood the concept of truthy and falsy values and how they affect conditions in if-else statements. 3. Explored the concept of loops: (i) Understood how loops play an essential role in software development for executing repetitive tasks efficiently. (ii) Learned different types of loops such as for, for-each, and while loops. + Step 7 in JavaScript for Web Development. >>#HarshVandanaSharma #SheriyansCodingSchool #LearningJourney #JavaScript #WebDevelopment #FrontendDesign #CareerGrowth
To view or add a comment, sign in
-
-
Web Development – Event Bubbling Today, we explored one of the key JavaScript concepts: Event Bubbling. Event bubbling happens when an event on a nested element (like a child div) also triggers the same event on its parent elements, moving from the innermost element outward. We also learned how to use event.stopPropagation() to stop the event from moving up the DOM, and added a fun touch by dynamically changing background colors with setInterval() and setTimeout() functions. A great way to understand how JavaScript handles events and timing in real projects. GitHub: https://lnkd.in/dyh-M34h #JavaScript #WebDevelopment #FrontEndDevelopment #EventBubbling #CodingLearning #HTML #CSS #Programming
To view or add a comment, sign in
-
Today I learned about Exceptions and Exception Handling in JavaScript, one of the most important concepts for building stable and user-friendly web applications. 💡 Handling is Important ✅ Prevents the entire application from crashing. ✅ Helps maintain smooth execution even when errors occur. ✅ Improves user experience by handling problems gracefully. #JavaScript #WebDevelopment #ErrorHandling #FrontendDevelopment #CodingJourney #LearnEveryday #ProgrammerLife #TechLearning #DevelopersCommunity Makes debugging easier by isolating error sources.
To view or add a comment, sign in
-
Day 68 of #100daysofcodechallnge Today, I practiced building a Movie Reviews App using HTML, CSS, and JavaScript 🎯 Task Overview: Added HTML elements inside the container with id movieReviewsContainer. Created: An input element (id="titleInput") for movie titles. A textarea (id="reviewTextarea") for reviews. A button (id="addBtn") to add the review. Dynamically displayed the reviews inside the container (id="reviewsContainer"). ⚙️ Functionality Achieved: When the Add button is clicked: ✅ If the movie title is empty → show an alert asking for the title. ✅ Otherwise → add the entered title and review to the reviews section. ✅ Finally, clear the input fields for the next entry. Each day I’m learning how to make web pages more interactive and user-friendly through JavaScript DOM manipulation. #CCBP #NxtWave #100DaysOfCode #WebDevelopment #HTML #CSS #JavaScript #CodingChallenge #FrontendDevelopment #LearnCoding #PracticeMakesPerfect #DevelopersCommunity #CodeEveryday #TechJourney #SoftwareDevelopment #CodingIsFun #BuildInPublic
To view or add a comment, sign in
-
Just built a Bookmark Manager using JavaScript! 🚀 This Allows users to save their favorite website links dynamically. By entering a site name and URL, the app instantly adds them to an unordered list, with the name and clickable link displayed neatly. ✨ Key Features: ✅ Input validation using change and submit events 🧩 Dynamic list creation using DOM methods ⚠️ Error handling for empty fields 🧹 Automatically clears inputs after each entry 💡 This small project helped me understand: ⚡ The power of addEventListener() and event.preventDefault() 🧠 How to manipulate the DOM effectively 🛡️ The importance of form validation in user interfaces #JavaScript #WebDevelopment #LearningByDoing #CodingJourney #HTML #CSS #Projects #DOMManipulation #NxtWave
To view or add a comment, sign in
-
How to fix "A tree hydrated but some attributes of the server rendered HTML didn't match the client properties." error in next.js code If your code is showing above error, means the HTML the server sent doesn’t match what React computed on the client during hydration. A simple solution, add suppressHydrationWarning in html node where theme class is applied. Something similar like this: // layout.tsx export default function RootLayout({ children }) { return ( <html lang="en" suppressHydrationWarning> <body className={`${geistSans.variable} ${geistMono.variable} antialiased`}> {children} </body> </html> ) } #JavaScript #next.js
To view or add a comment, sign in
Explore content categories
- Career
- Productivity
- Finance
- Soft Skills & Emotional Intelligence
- Project Management
- Education
- Technology
- Leadership
- Ecommerce
- User Experience
- Recruitment & HR
- Customer Experience
- Real Estate
- Marketing
- Sales
- Retail & Merchandising
- Science
- Supply Chain Management
- Future Of Work
- Consulting
- Writing
- Economics
- Artificial Intelligence
- Employee Experience
- Workplace Trends
- Fundraising
- Networking
- Corporate Social Responsibility
- Negotiation
- Communication
- Engineering
- Hospitality & Tourism
- Business Strategy
- Change Management
- Organizational Culture
- Design
- Innovation
- Event Planning
- Training & Development