🚀 Day 2/30 – Random Color Generator Continuing my 30 Days JavaScript Challenge. Today I built a Random Color Generator using HTML, CSS, and JavaScript. What it does: 🎨 Generates a random HEX color 🖱 Changes background on button click 🔢 Displays the color code dynamically What I learned: ✔ Math.random() logic ✔ DOM manipulation ✔ Updating styles dynamically ✔ Handling events properly Small projects, but strong fundamentals 💪 Live Demo: https://lnkd.in/gTw_h_G3 GitHub Repository: https://lnkd.in/gci2tTXc 28 more projects to go 🚀 #javascript #webdevelopment #codingjourney #30daysofcode #mernstack

🚀 30 Days of JavaScript – Day 6 Continuing my journey to improve my JavaScript logical thinking by building small programs every day. 💡 Today’s Program: Find the Largest Number (User Input) This program allows the user to enter numbers separated by commas and then finds the largest number in the list. 🧠 Concepts Used: • prompt() for user input • split() to convert input into an array • map(Number) to convert strings into numbers • for loop for iteration • Conditional comparison (if statement) 📌 Example Input: 10,25,7,90,30 Output: Largest Number: 90 🎥 Demo below 👇 Full source code in the First comment. #JavaScript #WebDevelopment #CodingJourney #ProblemSolving #LearningJavaScript #30DaysOfCode

🚀 Day 85 of My #100DaysOfCode Challenge One of the most confusing things in JavaScript is the "this" keyword. Many developers think "this" always refers to the current object… but that’s not always true. In JavaScript, the value of "this" depends on how a function is called, not where it is written. Let’s see a quick example 👇 const user = { name: "Tejal", greet() { console.log(this.name); } }; user.greet(); ✅ Output Tejal Here "this" refers to the object that called the function. But look at this 👇 const user = { name: "Tejal", greet: () => { console.log(this.name); } }; user.greet(); ❌ Output undefined Why? Because arrow functions don’t create their own "this". They inherit "this" from the surrounding scope. ⚡ Simple rule to remember • Regular functions → "this" depends on how the function is called • Arrow functions → "this" comes from the outer scope Understanding this small concept can save hours of debugging in real projects. JavaScript keeps reminding me that small details often make the biggest difference. #Day85 #100DaysOfCode #JavaScript #CodingJourney #WebDevelopment #LearningInPublic

Frontend Learning – JavaScript 🧠🧠 This week, I’m transitioning from structure and styling into behavior. I’ve started learning JavaScript, focusing on: • Variables and data types • Functions • Control structures (conditions and loops) What I’m realizing: HTML gives structure. CSS gives style. JavaScript gives life. It’s interesting to see how small scripts can completely change how a page behaves. Frontend is starting to feel more interactive and dynamic. #FrontendDevelopment #JavaScript #LearningJourney #LearningInPublic #WebDevelopment

🚀 Day 36/50 – Understanding Functions in JavaScript Today I explored one of the most important concepts in JavaScript — Functions. 🔹 A function is a reusable block of code designed to perform a specific task. 🔹 Functions help make code modular, reusable, and easy to maintain. 📌 1️⃣ Function Declaration function greet(name) { return "Hello, " + name + "!"; } console.log(greet("Priyanka")); 2️⃣ Function Expression const add = function(a, b) { return a + b; }; console.log(add(5, 3)); 3️⃣ Arrow Function (ES6) const multiply = (a, b) => { return a * b; }; console.log(multiply(4, 2)); ✔ Shorter syntax ✔ Cleaner and more readable 4️⃣ Default Parameters function welcome(name = "Guest") { return "Welcome, " + name; } console.log(welcome()); 💡 Key Learnings: ✅ Functions improve code reusability ✅ Arrow functions make code concise ✅ Parameters and return values make functions dynamic ✅ Clean function design is important for scalable applications #Day36 #50DaysOfCode #JavaScript #WebDevelopment #FrontendDevelopment #CodingJourney #LearningEveryday

Adding event listeners to every element? There’s a smarter way in JavaScript. It’s called Event Delegation. Instead of attaching multiple event listeners to child elements, you attach one listener to the parent element. Why this works? Because of event bubbling. When an event happens, it moves up the DOM tree: Child → Parent → Document Example: document.getElementById("list").addEventListener("click", (e) => { if (e.target.tagName === "LI") { console.log("List item clicked"); } }); Now a single listener can handle all child element clicks. Benefits: • Better performance • Cleaner code • Works for dynamically added elements Small concepts like this make a big difference in real projects. Follow for more JavaScript concepts explained visually. #javascript #frontenddeveloper #webdevelopment #coding #softwareengineering

Day 4 – Going Deep into JavaScript Foundations Most people rush to frameworks. Today, I went deeper into the core of JavaScript. Not just watching lectures — but actually testing everything in the browser console. 📌 What I practiced today: Linking JS with HTML Script tag placement Understanding defer How browser loads JS Variables (var, let, const) Scope differences Reassignment & redeclaration Why const should be default Expressions vs Statements Why 5 + 10 gives value instantly Why let x = 10; doesn’t Data Types & Special Values Infinity NaN undefined null Symbol typeof behavior Primitive vs Reference (Mind-Blowing Part 🧠) Copy by value Copy by reference Memory visualization with objects Realization today: JavaScript isn’t confusing. We just skip understanding how it actually works. Strong fundamentals = fewer bugs + better logic. This is Day 4 of rebuilding my foundation from scratch. Consistency over hype 🔥 #JavaScript #FrontendDeveloper #BuildInPublic #DeveloperJourney #SheriyansCodingSchool #WebDevelopment

🚀 Day 86 of My #100DaysOfCode Challenge Today I discovered a lesser-known feature in JavaScript — Symbols. Most developers work with object keys using strings, but JavaScript also provides another unique type called Symbol. A Symbol creates a unique and hidden property key that cannot accidentally conflict with other keys. Example const id = Symbol("id"); const user = { name: "Tejal", [id]: 12345 }; console.log(user.name); // Tejal console.log(user[id]); // 12345 Why Symbols are interesting • Every Symbol is unique • Helps create hidden object properties • Prevents accidental property overwriting • Often used internally in libraries and frameworks Even if two symbols have the same description, they are still different. const a = Symbol("key"); const b = Symbol("key"); console.log(a === b); // false Learning about features like Symbols helps me understand how JavaScript works behind the scenes and how large applications manage object data safely. Exploring deeper concepts every day. 💻✨ #Day86 #100DaysOfCode #JavaScript #WebDevelopment #LearningInPublic #CodingJourney

🚀 From Learning JavaScript to Building a Real-Time Clock I built a real-time Analog Clock using JavaScript, and here’s a quick demo of it in action ⏱️ 🔧 Tech Stack: HTML | CSS | JavaScript ✨ Features: • Live time updates • Smooth hand movements • Responsive layout 💡 Key Learning: Learned how JavaScript handles time-based functions, DOM manipulation, and real-time updates. 🎥 Check out the working demo in the video! 👉 What should I build next? Suggestions are welcome! #WebDevelopment #JavaScript #HTML #CSS #FrontendDeveloper #Projects #Learning

🚀 30 Days of JavaScript – Day 8 Continuing my journey to improve my JavaScript logical thinking by building small programs every day. 💡 Today’s Mini Project: Random Color Generator This program randomly selects a color and changes the background color of the page. 🧠 Concepts Used: Arrays Math.random() confirm() and alert() Basic DOM manipulation 🎥 Demo video below 👇 Full source code in the First comment. #JavaScript #WebDevelopment #CodingJourney #FrontendDeveloper #LearningJavaScript #30DaysOfCode