JavaScript 20Days Challenge 🚀 Consistency continues! Today marks Day 3 of my 20-day JavaScript learning challenge, where I focus on learning JavaScript concepts and building small projects daily. 🎨 Day 3 Project: Random Background Colour Generator Today I built a simple but interactive Random Background Colour Generator using JavaScript. When the user clicks the button, the page background changes to a randomly generated color and displays the HEX color code on the screen. 💡 Concepts I practiced today: • Generating random values using Math.random() • Converting numbers to HEX color codes • DOM manipulation with querySelector() • Updating UI dynamically with innerText • Handling button click events This small project helped me understand how JavaScript can dynamically change styles and create interactive UI experiences. 📅 Day 3/20 completed — learning, building, and improving every day. #JavaScript #WebDevelopment #FrontendDevelopment #CodingJourney #BuildProjects #JS #Github #MernStack
More Relevant Posts
-
🚀 Day 15 of My JavaScript Learning Journey Today I explored one of the most important concepts in JavaScript — how it actually works behind the scenes! 🤯 Here’s what I learned 👇 🧠 JavaScript Engine & Single Thread Concept JavaScript runs on a single thread — meaning it executes one task at a time. But still, it feels fast… how? 👀 ⚙️ What Makes JS Synchronous By default, JavaScript executes code line by line (synchronously). But real-world apps need more power! 🌐 Understanding Web APIs Browsers provide Web APIs (like setTimeout, DOM events) that handle async tasks outside JS engine 💡 📥 Callback Queue & Task Queue Async tasks go into queues and wait for their turn to be executed. 🔁 Event Loop Explained The Event Loop checks if the call stack is empty and then pushes tasks from the queue — this is how async magic happens! ✨ 📌 Summary & Key Takeaways: ✔ JS is single-threaded but handles async operations smartly ✔ Event Loop is the heart of async behavior ✔ Web APIs make non-blocking execution possible 📚 Prerequisites I Used: • Basic HTML & CSS • VS Code • Browser 🎯 Skills I'm Building: 💻 Interactive web apps 🧩 Strong JavaScript fundamentals 🎨 Clean & maintainable code #Day15 #JavaScript #LearnJavaScript #WebDevelopment #CodingJourney #FrontendDevelopment #Programming #Beginners #JavaScriptBasics #EventLoop #AsyncJavaScript
To view or add a comment, sign in
-
-
Day 4 of my JavaScript learning journey. Today I learned one of the most confusing concepts so far: Hoisting. I tried something strange. greet(); function greet() { console.log("Hello!"); } The function worked even before it was defined. That’s because of hoisting. JavaScript reads the whole code first and moves function declarations to the top internally. But variables behave differently. console.log(x); var x = 5; This prints undefined, not 5. And if we use let or const, JavaScript throws a ReferenceError. This area is called the Temporal Dead Zone. My takeaway today: Always declare variables before using them. Day 4 done. JavaScript keeps getting more interesting. What JavaScript concept confused you the most when you first learned it? #JavaScript #LearningInPublic #WebDevelopment #100DaysOfCode #Frontend
To view or add a comment, sign in
-
-
🚀 Day 4 of My JavaScript Learning Journey Today I learned about the building blocks of JavaScript code, which help the JavaScript engine understand and process programs. 📌 Key concepts I explored: • Tokens – The smallest units of code in the source text. • Keywords – Reserved words that have special meaning in JavaScript (like if, for, let, etc.). • Identifiers – User-defined names for variables, functions, or objects. • Literals – Fixed values written directly in the code (like "hello", 42, true). ⚙️ During the parsing phase, the JavaScript engine reads the source code and converts it into a sequence of tokens. These tokens help build the structure of the program and allow the engine to execute it correctly. Step by step, I’m strengthening my understanding of JavaScript fundamentals and how code is processed internally. 💻✨ #JavaScript #WebDevelopment #FrontendDevelopment #CodingJourney #LearningInPublic #DeveloperJourney #ProgrammingBasics
To view or add a comment, sign in
-
-
🚀 Day 10 of My JavaScript Learning Journey Today I explored JavaScript Functions — the core building blocks of any application. 📌 Key concepts I learned: 🔹 Types of Functions • Named Functions – Functions with a defined name • Anonymous Functions – Functions without a name, often used for one-time use • Arrow Functions (=>) – Modern and concise syntax 🔹 Function Expressions • Functions can be assigned to variables and treated like data 🔹 Advanced Concepts • First-Class Functions – Functions can be passed as arguments and returned from other functions • Higher-Order Functions – Functions that work with other functions • IIFE (Immediately Invoked Function Expression) – Executes immediately after definition 🔹 Scope & Closures • Nested Functions create scope within scope • Important for managing variables and data access 🔹 Generators • Functions that allow pausable execution using yield ⚙️ Understanding functions is crucial because they help write modular, reusable, and efficient code. Step by step, I’m building strong JavaScript fundamentals and problem-solving skills. 💻✨ #JavaScript #WebDevelopment #FrontendDevelopment #CodingJourney #LearningInPublic #DeveloperJourney #ProgrammingBasics
To view or add a comment, sign in
-
-
🚀 Today’s JavaScript Learning — DOM Stopwatch Project Today I worked on building a Stopwatch using JavaScript DOM. At first, the code was not working properly. The Stop button issue, event handling mistakes, and timer logic took me nearly 2 hours to debug. But finally I understood: ✅ DOM element selection ✅ EventListeners ✅ setInterval & clearInterval ✅ Debugging real errors ✅ Logical thinking improvement This small project taught me an important lesson: 👉 Programming is not about writing code fast — it’s about understanding problems patiently. Every mistake helped me learn deeper JavaScript concepts. Learning step by step and improving daily 🚀 #JavaScript #DreamTusk #DreamTuskTechnologies #WebDevelopment #DOM #LearningJourney #FrontendDeveloper
To view or add a comment, sign in
-
🚀 Day 11 of My JavaScript Learning Journey Today I learned about JavaScript Scopes and Function Execution Context (FEC) — a core concept to understand how JavaScript manages variables and executes code. 📌 Key concepts I explored: 🔹 Scopes in JavaScript • Global Scope – Variables accessible throughout the program • Local Scope – Variables accessible within a function • Block Scope – Variables declared with let and const inside {} 🔹 Key Difference • var → Function scoped • let & const → Block scoped 🔹 Function Execution Context (FEC) Every time a function is called, JavaScript creates a new execution context. ⚙️ FEC Lifecycle: 1️⃣ Memory Creation Phase • Variables are hoisted and initialized • Functions are stored in memory 2️⃣ Execution Phase • Code runs line by line • Variables get their actual values 🔹 FEC Components • Variable Environment • Scope Chain (access to outer scope) • this keyword 💡 Understanding scopes and execution context helps in writing efficient, bug-free, and optimized JavaScript code. Step by step, I’m strengthening my JavaScript fundamentals and internal working knowledge. 💻✨ #JavaScript #WebDevelopment #FrontendDevelopment #CodingJourney #LearningInPublic #DeveloperJourney #ProgrammingBasics
To view or add a comment, sign in
-
-
🚀 Day 16 of My JavaScript Journey Today was a powerful learning day 💻🔥 I explored some core JavaScript concepts that are extremely important for real-world applications. ✨ Topics I Covered: 🔹 Synchronous vs Asynchronous code 🔹 How the JavaScript Event Loop works 🔁 🔹 Why Callback Hell is a problem 😵 🔹 Creating Promises using "resolve" and "reject" 🤝 🔹 ".then()", ".catch()", ".finally()" methods 🔹 Sequential vs Parallel Promise execution ⚡ 🔹 Comparison of Promise utility methods 🔹 Real-world example: Food Delivery App (Zomato Clone 🍔) 🔹 API fetching using Promises 🌐 🔹 Error handling patterns 🚨 💡 Key Learning: Understanding asynchronous JavaScript is a game-changer 💯 Concepts like the Event Loop and Promises help write cleaner, more efficient, and scalable code. 🍽️ The food delivery app example helped me understand how multiple tasks like ordering, payment, and delivery can run efficiently using async concepts. 🔥 Growing step by step every day! Consistency is the key 🔑 #JavaScript #WebDevelopment #CodingJourney #DaysOfCode #AsyncJS #Promises #Learning #DeveloperLife
To view or add a comment, sign in
-
-
🔥 Day 13 of My JavaScript Journey 🚀 | Mastering DOM Events ✨Today I learned one of the most important concepts in JavaScript — DOM Events 💡 Now I finally understand how clicks, scrolls, and typing actually work behind the scenes 😎 🎓 What I Learned Today: 🔹 Event Basics (Strong Foundation 💪) 👉 DOM Event = like a 🔔 doorbell (it triggers an action) 👉 3 Core Components: Target 🎯, Event Type ⚡, Handler 🧠 👉 "addEventListener()" = the modern & best approach ✅ 👉 Avoid using "onclick" (clean code = professional code) 🔹 Event Flow (Behind the Scenes Magic ✨) 👉 Event Bubbling 🔼 (child → parent) 👉 Event Capturing 🔽 (parent → child) 👉 Understood the complete event flow 🔄 👉 Learned to control it using "event.stopPropagation()" 🛑 🔹 Event Delegation (Smart Coding 🧠⚡) 👉 Handle multiple elements with just ONE listener 😱 👉 Difference between "event.target" vs "event.currentTarget" 👉 Managing dynamic elements became much easier 💯 💭 My Learning: Events used to feel confusing, but now I clearly understand how JavaScript handles user interactions 🔥 📌 Consistency is the key — Day 13 completed! 🌐 Learn more: https://coderarmy.in #Day13 #JavaScript #WebDevelopment #FrontendDeveloper #CodingJourney #100DaysOfCode #LearnInPublic #DeveloperLife 💻🚀
To view or add a comment, sign in
-
-
Day 2/30 — Stuck in the “learning JavaScript” loop? Ever felt like you’re learning JS daily… but still can’t build anything on your own? Same here. You watch tutorials, understand concepts like promises, async/await, DOM — everything makes sense… until you open a blank file. Then suddenly: nothing. That’s the trap. Watch → Understand → Feel productive → Don’t build → Forget → Repeat It feels like progress, but it’s not. Real learning starts when things break: - your code doesn’t run - your logic fails - you spend 30 mins fixing one bug That frustration? That’s growth. So I’m changing one thing: Less watching, more building. Even if it’s messy. 👉 Be honest — what’s stopping you from building right now? Tried my Best today and practised 3X for grasping fast now will implement in next programs #30DaysOfBuilding #JavaScript #WebDevelopment #BuildInPublic
To view or add a comment, sign in
-
-
🚀 Day 9 of My JavaScript Journey 👉Today was a powerful learning day 💥 — Functions and callbacks completely changed how I see JavaScript! Here’s what I learned 👇 🔹 Function Basics Functions are reusable blocks of code 🔁 Write once, use multiple times 🔹 Parameters & Arguments Learned how to pass inputs to make functions flexible 🧠 🔹 Default Values Even if no value is passed, functions can still work smartly 😎 🔹 Rest Operator (...) Used to collect multiple values into one 📦 🔹 Spread vs Rest Same syntax, different roles — one expands, one collects 🤯 🔹 Function Types 👉 Function Declaration vs Expression 👉 Arrow Functions (modern & cleaner ⚡) 🔹 Arrow Function Tricks ✔ Implicit return ✔ Single parameter shortcut ✔ Returning objects 🔹 IIFE (Immediately Invoked Function Expression) Functions that run instantly after being defined 🚀 🔹 Callbacks 🔥 (Most Important) Passing a function as an argument — foundation of async JavaScript 💡 Real-life use case: Placing an order → Payment → Confirmation All handled using callbacks 👉 Why Callbacks Matter? Because JavaScript is asynchronous — callbacks help control execution flow 📌 Next Topic: Closures (Advanced concept 🔐) Consistency is the real power 💯 Improving step by step every day 🚀 #javascript #webdevelopment #mernstack #coding #learning #day9
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