Day 10 of #JavaScript30 Today I learned how Shift + checkbox selection works using vanilla JavaScript. When selecting one checkbox and then holding Shift while selecting another, all the checkboxes in between get selected automatically — similar to inbox selection behavior. What I practiced today: • Handling keyboard events (shiftKey) • Tracking the previously selected checkbox • Applying logic between two selected elements • Working with multiple checkboxes using JavaScript Small feature, but good logic practice. #JavaScript30 #JavaScript #WebDevelopment #LearningInPublic #HTML #CSS #VanillaJS

This is how you can open any GitHub repository in VS Code directly in your web browser in less than 5 seconds 🤯 On any repository page, simply replace ".com" with ".dev" and you're all set ✅ Watch the below video for a quick example 📹 Do Like 👍 & Repost 🔄   #html #css #javascript #typescript #react

🔥 Understanding this keyword in JavaScript The value of this depends on how a function is called, not where it is written. >> In the global scope console.log(this); this → refers to the global object (window in browsers) >> Inside an object method const user = { name: "Javascript", greet() { console.log(this.name); } }; user.greet(); // Javascript this → refers to the object calling the method ✔️ user.greet() → this is user >> In a regular function function show() {  console.log(this);} show(); this → undefined (in strict mode) or → global object (non-strict mode) >> In arrow functions const obj = {  name: "Javascript",  greet: () => {    console.log(this.name);}}; obj.greet(); // undefined this → does NOT have its own value It borrows from the surrounding scope 👉 That’s why arrow functions can surprise you! >> In event handlers button.addEventListener("click", function() {  console.log(this);}); this → refers to the element that triggered the event #JavaScript #FrontendDevelopment #WebDevelopment #Coding #LearnToCode

From basic tags to advanced frameworks, here is the breakdown: ✅ Days 1-20: The Foundations (HTML/CSS) ✅ Days 20-40: The Engine (JavaScript/React) ✅ Days 40-70: Real-world Application & Design ✅ Days 80-100: Optimization & Polish Which stage do you find the most challenging? For me, it was definitely mastering Advanced JS! #TechCommunity #CodeNewbie #FrontendDeveloper #Roadmap

Here's a clever JavaScript trick to swap values between two variables using array destructuring 🔥 For Example: 🔹 Start with a = "Apple" and b = "Banana". 🔹 Assign [a, b] = [b, a] to swap their values in a single line. 🔹 After running, a becomes "Banana" and b becomes "Apple". This is a clean and efficient way to swap variables in JavaScript with no need for a temporary variable 🤯 Hope this helps ✅️ Do Like 👍 & Repost 🔄   #html #css #javascript #typescript #react #viral

💡 JavaScript Trick Question: 3 + 2 + "7" In JavaScript, the answer is: 👉 "57" 🔍 Why? 🔹 JavaScript follows left-to-right evaluation and uses type coercion. ⚡ Key Insight : 🔹Once a string enters the expression, everything after that becomes a string operation. "In JavaScript, the moment a string joins the party, numbers stop adding and start concatenating." #JavaScript #WebDevelopment #CodingInterview #Frontend #JSConcepts

⚡ 1-Minute JavaScript Convert an object into a query string in one clean line. Utility function :- const toQueryString = (obj) => new URLSearchParams(obj).toString(); //Usage toQueryString({ page: 1, limit: 10 }); // "page=1&limit=10" 💡 Why this is useful: Instead of manually concatenating strings (and risking bugs), URLSearchParams handles encoding and formatting for you. 🔍 What it takes care of: 🔐 Proper URL encoding 🧩 Clean key-value formatting ⚡ Less boilerplate code 🔎 Practical use cases: 🌐 Building API query params 🔎 Search & filter URLs 📊 Pagination handling 🧾 Dynamic query generation Cleaner than manual string building. More reliable too. #JavaScript #FrontendDevelopment #CleanCode #WebDevelopment #DevTips

⚡ Arrow Functions vs Regular Functions in JavaScript 🔹 Syntax Arrow → shorter & cleaner const add = (a, b) => a + b; Regular → traditional function add(a, b) { return a + b; } 🔹 this (key difference) Arrow → inherits this from parent Regular → has its own this 🔹 Usage ✅ Arrow: callbacks, short logic ✅ Regular: object methods, constructors 💡 Rule: Use arrow by default, switch to regular when you need this. #JavaScript #Frontend #WebDev

Did you know? With JavaScript's Spread Operator (...), you can easily convert an Array into an Object! 🔥 Watch the below video for a quick example 📹 Do Like 👍 & Repost 🔄   #html #css #javascript #typescript #react #viral