🚀 JavaScript – Updating CSS Variables with JS Built a dynamic CSS updater using HTML, CSS, and Vanilla JavaScript 🎯 🔹 Used :root CSS variables (blur, spacing, base color) 🔹 Improved understanding of change and mousemove events 🔹 Learned that querySelectorAll() returns a NodeList (not an array) and how to use forEach() 🔹 Implemented real-time style updates on drag ⚙️ Challenge: Handling dynamic px units for blur and spacing. 🔗 GitHub Repo: https://lnkd.in/gT3kKbCE #JavaScript #LearningInPublic #WebDevelopment #StudentDeveloper

🚀 JavaScript Clock (HTML + CSS + JS) Built a real-time analog clock using HTML, CSS, and Vanilla JavaScript ⏰ 🔹 Implemented the Date object to fetch real-time data 🔹 Improved understanding of setInterval() 🔹 Learned how to rotate hour, minute, and second hands using JavaScript logic ⚙️ Challenges faced: Handling setInterval() correctly and synchronizing the rotation of hour, minute, and second hands. 🔗 GitHub Repo: https://lnkd.in/gT3kKbCE #JavaScript #LearningInPublic #WebDevelopment #StudentDeveloper

Today I understood the working of a simple calculator using HTML, CSS, and JavaScript. When a user clicks a button, JavaScript captures the value and displays it on the screen. When "=" is clicked, the expression is evaluated and the result is shown. The "Clear" button resets everything. This helped me understand basic event handling and DOM manipulation in JavaScript. Learning step by step 🚀 #JavaScript #WebDevelopment #HTML #CSS #CodingPractice

I recently built a Real-Time Character Counter using HTML, CSS, and JavaScript. The text area updates the character count as the user types and prevents input beyond the maximum limit. This small project helped me practice JavaScript event handling and DOM manipulation. Feel free to check it out and use the code for learning. #JavaScript #WebDevelopment #HTML #CSS #LearningByDoing #CodingJourney Live demo link: https://lnkd.in/gHNBqfN2 Github repository link: https://lnkd.in/geS37Eia

🚀 JavaScript Practice Project – Form Submission Today I practiced handling form submission using JavaScript. Instead of letting the page reload, I used event.preventDefault() and collected the input values from the form. 🔹 Created a form with fields like Full Name and Password 🔹 Captured the data when the form is submitted 🔹 Stored the form data inside a JavaScript object 🔹 Displayed the object in the console This helped me understand: ✔️ DOM manipulation ✔️ Form validation basics ✔️ Creating and storing data using objects in JavaScript Small steps like these are helping me strengthen my JavaScript fundamentals and move closer to building real-world web applications. #JavaScript #WebDevelopment #FrontendDevelopment #LearningJourney #CodingPractice

JAVASCRIPT NOTES — PART 1 (Foundations) After structure (HTML) and styling (CSS), JavaScript is where logic begins. This post covers the fundamentals that everything else depends on: • Variables (let, const, scope) • Data types • Operators & type coercion • Conditionals & loops • Functions & hoisting Most confusion in JavaScript doesn’t come from complexity — it comes from unclear basics. Before frameworks, before React, understanding these concepts clearly makes everything easier. 📌 Save this if you’re building JavaScript properly. #JavaScript #WebDevelopment #FrontendDeveloper #LearningInPublic #InterviewPrep #StudentDeveloper #Consistency

Today I practiced a small JavaScript program to change the background color when a button is clicked. When the button is pressed, JavaScript triggers a function that changes the page’s background color using DOM manipulation. This helped me understand: ✔ Event handling ✔ onclick function ✔ DOM manipulation ✔ How JavaScript interacts with HTML & CSS Small practice, better understanding 🚀 #JavaScript #WebDevelopment #Frontend #CodingPractice #LearningJourney

JavaScript Tip 💡:  Use the Array "at()" method to access last Array element easily! The "at()" method in JavaScript provides a simpler way to access elements in an array, especially the last one. Traditionally, getting the last element required using arr[arr.length - 1], but .at(-1) now handles this directly and more cleanly. With "at()", positive indices retrieve elements from the start, while negative indices count backward from the end. This makes .at(-1) a straightforward and readable alternative for accessing the last item in an array. Hope this helps ✅️ Do Like 👍 & Repost 🔄   #html #css #javascript #typescript #react

Just finished building a Metric/Imperial Unit Converter (HTML, CSS, JavaScript). Live demo: https://lnkd.in/dpzCZvHR Git repo: https://lnkd.in/dMKr56_d Repo: https://lnkd.in/dMKr56_d For this project, I focused on: - Clean separation between structure (HTML), styling (CSS), and logic (JavaScript) - DOM manipulation and event handling - Input validation and reset functionality - Writing conversion logic in a simple, readable way What I liked most was implementing the JavaScript logic - debugging and refining the behavior until everything worked as expected. Small project, but solid step forward. #code #scrimba #javascript #html #css

Linking JS file Sounds small… but it’s VERY important. 🔥 Without linking JS properly, your website is just a static page. 💡 What is a JS File? A JavaScript file (script.js) contains code that makes your website: ✅ Interactive ✅ Dynamic ✅ Responsive to user actions For example: - Button click events - Form validation - Show/Hide content - API calls 🛠 How to Link JavaScript File? There are 2 common ways: ✅ 1️⃣ Inside <head> <head> <script src="script.js"></script> </head> Problem ❌ JS loads before HTML → can cause errors. ✅ 2️⃣ Before Closing </body> <body> <script src="script.js"></script> </body> Why this is better? ✔ HTML loads first ✔ Then JavaScript runs ✔ Faster page experience 🎯 What I Understood Today Linking JS file is simple but powerful. One small line connects your entire logic to the UI. #WebDevelopment #JavaScript #Programming #Coding #SoftwareDevelopment #Tech