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 | Dynamic Quote Generator Learning becomes powerful when we apply concepts to real projects. Today I built a Dynamic Quote Generator using HTML, CSS, and JavaScript, where I implemented the concepts I learned in my previous JavaScript lectures. This project randomly displays motivational quotes on the webpage, making the page dynamic and interactive using JavaScript. Here are the concepts I used while building this project: ● Using arrays in JavaScript to store multiple quotes ● Generating random numbers using Math.random() ● Accessing elements using document.getElementById() ● Updating content dynamically using textContent / innerHTML ● Using functions to organize JavaScript logic ● Implementing setInterval() to change quotes automatically ● Applying DOM manipulation to update webpage content in real time Projects like this help me better understand how JavaScript controls webpage behavior and creates interactive user experiences. Step by step, I am improving my JavaScript and Frontend Development skills by building small practical projects. #JavaScript #WebDevelopment #FrontendDevelopment #DOM #DOMManipulation #CodingJourney #Programming #LearnJavaScript #DeveloperJourney #CodingLife #SoftwareDevelopment #BuildInPublic #TechLearning

Small JavaScript Project | Add Two Numbers Turning learning into practice! Today I built a simple “Add Two Numbers” project using HTML, CSS, and JavaScript, where I applied the concepts I learned in my previous lectures. Even a small project like this helps strengthen the core understanding of DOM manipulation and JavaScript logic, which are essential for frontend development. Here are the concepts I applied while building this project: ● Accessing HTML elements using document.getElementById() ● Handling user input from input fields ● Performing basic arithmetic operations using JavaScript ● Using event handling to trigger actions on button click ● Dynamically displaying the result on the webpage ● Applying DOM manipulation to update content in real time ● Understanding how JavaScript makes webpages interactive Building small projects like this helps transform theoretical knowledge into practical skills and improves problem-solving ability. Excited to keep learning and building more JavaScript projects as I continue my web development journey. #JavaScript #WebDevelopment #FrontendDevelopment #DOM #DOMManipulation #CodingJourney #Programming #LearnJavaScript #DeveloperJourney #CodingLife #SoftwareDevelopment #BuildInPublic #TechLearning

🚀 Simple CRUD User Form Project I recently built a Simple CRUD application to practice full-stack development concepts using HTML, CSS, JavaScript, and Node.js. 📌 Project Description This project allows users to enter their Name and Email ID through a form. Once submitted, the data is stored using Local Storage and displayed dynamically in a table on the UI. ✨ Features • User input form for Name and Email • Store data using Local Storage • Display stored users in a dynamic table • Perform CRUD operations (Create, Read, Update, Delete) • Simple and responsive UI 🛠 Tech Stack • HTML – Structure • CSS – Styling • JavaScript – Logic and DOM manipulation • Node.js – Backend practice environment • Local Storage – Data persistence in the browser 📚 What I Learned ✔ Handling form inputs and validation ✔ Working with Local Storage in JavaScript ✔ Implementing CRUD functionality ✔ Dynamically updating UI using DOM manipulation This project helped me understand how user input can be stored, managed, and displayed dynamically in a web application. Looking forward to building more projects and improving my full-stack development skills! #WebDevelopment #JavaScript #NodeJS #CRUD #FrontendDevelopment #LearningByDoing #TechnoHacks #MentorSandipGavit

Day 10/21: Illuminating the Web with Vanilla JavaScript! 🔦 Halfway through my 21-day coding challenge, and today I decided to dive deep into DOM manipulation and Event Listeners to create a dynamic Spotlight Effect. The goal was simple but the logic is powerful: creating an interactive overlay that follows the user's cursor, revealing the content beneath—much like a flashlight in a dark room. 🛠️ How it works: The Layer: Used a fixed div with a radial-gradient background to create the "darkness" and the "hole" of light. The Interaction: Leveraged the mousemove event to capture the real-time coordinates (clientX, clientY) of the cursor. The Magic: Dynamically updated the CSS background property using JavaScript template literals to move the center of the radial gradient to the cursor's exact position. 💡 Key Takeaways: Event Handling: Understanding how addEventListener drives high-performance UI updates. CSS-in-JS: Learning to manipulate complex CSS properties (like gradients) on the fly. User Experience: Seeing how interactive elements can make a landing page feel more premium. 🌐 Live Demo: https://lnkd.in/g9BnnDBG 🔗 Check out the source code here: https://lnkd.in/gd7eyfEm Building this from scratch reinforced my understanding of how JavaScript interacts with the browser's coordinate system. It’s not just about writing code; it's about creating an experience. Check out the video below to see it in action! 👇 Sarthak Sharma Ritik Rajput Devendra Dhote #JavaScript #WebDevelopment #Frontend #CodingChallenge #21DaysOfLinkedIn #MERNStack #CodingJourney #SoftwareEngineering

Day 25: Currying in JavaScript 🍛 Currying sounds complicated… But it’s actually a powerful functional programming technique. 🔹 What is Currying? Currying is: Transforming a function that takes multiple arguments into a sequence of functions that take one argument at a time. Instead of this 👇 function add(a, b, c) { return a + b + c; } add(2, 3, 4); // 9 We do this 👇 function add(a) { return function (b) { return function (c) { return a + b + c; }; }; } add(2)(3)(4); // 9 One argument at a time 🔹 Why Use Currying? ✔ Improves reusability ✔ Helps create specialized functions ✔ Enables function composition ✔ Common in functional programming Real Practical Example function multiply(a) { return function (b) { return a * b; }; } const double = multiply(2); const triple = multiply(3); console.log(double(5)); // 10 console.log(triple(5)); // 15 Here: multiply(2) creates a reusable function That’s powerful abstraction 🔥Modern ES6 Version (Cleaner) const add = a => b => c => a + b + c; add(1)(2)(3); // 6 Short and elegant. 🔹 Currying vs Partial Application 👉 Currying → Always single argument functions 👉 Partial Application → Fix some arguments, not necessarily one by one Example of partial application: function add(a, b) { return a + b; } const add5 = add.bind(null, 5); console.log(add5(10)); // 15 🧠 Interview Insight Currying is possible in JavaScript because: ✔ Functions are first-class citizens ✔ Functions can return functions ✔ Closures preserve outer scope values 🔥 Where It’s Used? Redux Functional libraries like Lodash Middleware patterns Advanced React patterns #JavaScript #Currying #FunctionalProgramming #Frontend #WebDevelopment #LearnInPublic

🚀 Just Built a Random Advice Generator using JavaScript & API! I recently built a small project to practice JavaScript API integration. This project fetches random advice using the Advice Slip API and displays it in a simple responsive UI. 🔹 Features • Fetches advice using Fetch API • Uses Async / Await for API handling • Button loading state while fetching data • Random background color change 🎨 • Fully responsive design 📱 🛠 Tech Stack HTML • CSS • JavaScript • Fetch API 📡 API Used https://lnkd.in/dhQVZzs9 🌐 Live Demo 👉 https://lnkd.in/dPePU2n5 💻 GitHub Repository 👉 https://lnkd.in/dJ7nNPCe This project helped me improve my understanding of JavaScript API calls, async programming, and DOM manipulation. I’ll continue building more projects to strengthen my frontend development skills. #javascript #webdevelopment #frontenddevelopment #api #100DaysOfCode #coding

Hello everyone 👋 Welcome to Day 19 of my JavaScript learning journey 🚀 Today I built a simple yet powerful Color Changer Web App using HTML, CSS, and JavaScript. This project helped me strengthen my understanding of DOM events and dynamic style manipulation. 🎨 Project: Color Changer The app allows users to: ✔ Click on different color buttons ✔ Instantly change the background color of the webpage ✔ Experience real-time UI updates using JavaScript Each button represents a color, and clicking it updates the page background dynamically. 🔧 Concepts Applied This mini project helped me apply: 🔹 Selecting multiple elements using querySelectorAll() 🔹 Looping through elements using forEach() 🔹 Handling click events with addEventListener() 🔹 Using the event.target object 🔹 Dynamically changing styles using document.body.style 🔹 Conditional logic to handle different button actions Even though the project is simple, it covers core DOM + Events fundamentals used in real applications. 🧠 What I Learned • How multiple elements can share the same event logic • How JavaScript directly controls page styles • Why event.target is important in event handling • How UI reacts instantly to user interaction This project made DOM events feel much more natural and intuitive. 🎯 Day 19 Takeaway Small projects like this build strong confidence. Each click, event, and style change makes JavaScript feel more real 💻✨ Now moving forward toward: 👉 Better UI logic 👉 Cleaner event handling 👉 More interactive DOM-based projects On to the next challenge 🚀 #javascript #dom #webdevelopment #frontenddevelopment #learninginpublic #codingjourney #developers #100daysofcode #projects #selflearning

🚀 Understanding JavaScript Web APIs – The Hidden Power Behind Modern Web Apps When we talk about JavaScript, most developers immediately think about variables, functions, promises, and frameworks. But what truly unlocks the power of the browser are Web APIs. JavaScript Web APIs are not part of the core language — they are provided by the browser environment to help us interact with the web platform. Some essential Web APIs every developer should understand: 🔹 DOM API – Manipulate and control HTML elements dynamically 🔹 Fetch API – Make network requests and handle APIs seamlessly 🔹 Local Storage API – Store data in the browser 🔹 Geolocation API – Access user location (with permission) 🔹 Canvas API – Render graphics and animations 🔹 Web Storage API – Manage client-side storage efficiently 🔹 WebSockets API – Enable real-time communication Mastering Web APIs helps you: ✔ Build interactive user experiences ✔ Handle asynchronous operations effectively ✔ Optimize performance ✔ Create real-time applications ✔ Work confidently without relying heavily on external libraries As developers, understanding how JavaScript communicates with the browser environment is what separates beginners from advanced engineers. If you're learning JavaScript or preparing for interviews, Web APIs are a must-know topic. What’s your favorite Web API to work with? 👇 #JavaScript #WebDevelopment #FrontendDevelopment #WebAPIs #Programming #SoftwareEngineering #ReactJS #NodeJS #Learning #Developers

🚀 Just launched a small project to demonstrate JavaScript library usage and practical examples for developers. While learning or working with JavaScript libraries, one common challenge is finding clear and simple usage examples. Many developers spend time searching documentation just to understand how to integrate a library. So I built a simple demo site that shows how to use JavaScript libraries with real examples. 👉 Explore the project: https://lnkd.in/gg_fU8EB What this project focuses on • Practical examples of using JavaScript libraries • Simple and easy-to-understand implementation • Developer-friendly structure for experimentation • A quick reference for integrating libraries into web projects JavaScript libraries play a huge role in modern web development by helping developers build features faster and reuse tested functionality rather than writing everything from scratch. (arXiv) This project is part of my effort to build useful developer tools and learning resources while exploring new ideas around automation, testing, and developer productivity. If you're a developer, student, or someone exploring JavaScript libraries, I’d love your feedback. Let me know what libraries or examples you would like to see added next. #JavaScript #WebDevelopment #DeveloperTools #Frontend #Programming #Coding #OpenSource #LearningInPublic #BuildInPublic