😃 Day 5 of my JavaScript API Practice Today I built an Image Gallery using the Unsplash API. 💡 What I learned: Fetching random images using API Displaying images using CSS Grid layout Implementing lazy loading for better performance ✨ This project helped me understand how to handle images efficiently and design clean layouts. 🔗 GitHub Repo: https://lnkd.in/g4Q-_Dev 🔗 Hosted link: //https://lnkd.in/gUgtP_58 #Day5 #WebDevelopment #JavaScript #CSS #Learning #API #Frontend #spotknack

🔍 JavaScript Behavior You Might Have Seen (Prototype Chain) You write this: const arr = [1, 2, 3]; console.log(arr.toString()); // ? 👉 Did you define toString on this array? 👉 Did you even define it anywhere? No. Still it works. Now think step by step 👇 When you do: 👉 arr.toString JavaScript checks: Inside arr → ❌ not found Inside Array.prototype → ❌ not found Inside Object.prototype → ✔ found This step-by-step lookup is called the Prototype Chain 📌 What is Prototype Chain? 👉 It’s the process JavaScript uses to find a property by searching up through prototypes. 📌 How it works? Every object is linked to another object (its prototype) So lookup happens like this: 👉 arr → Array.prototype → Object.prototype → null Same with strings 👇 const str = "hello"; console.log(str.hasOwnProperty("length")); // ? 👉 hasOwnProperty is not in string JS finds it here: 👉 str → String.prototype → Object.prototype 📌 Important point: 👉 JavaScript keeps searching until it finds the property or reaches null 💡 Takeaway: ✔ Prototype Chain = lookup mechanism ✔ JS searches step by step ✔ That’s how all built-in methods work 👉 If you understand this, you’ll understand how JavaScript really works 💬 Comment “chain” if this clicked 🔁 Save this for later ❤️ Like for more JavaScript deep dives #javascript #frontend #codingtips #webdevelopment #js #developer

🚀 Day 4 of #100DaysOfFrontend Built a Real-Time Digital Clock using HTML, CSS, and JavaScript ⏱️ This project helped me understand how to work with the Date object, update the UI dynamically, and use setInterval for real-time functionality. Small project, but a big step in learning JavaScript 💪 🔗 Live Demo: https://lnkd.in/ghiNej6F 💻 GitHub: https://lnkd.in/gZ_z8fDm #JavaScript #FrontendDevelopment #WebDevelopment #BuildInPublic #Consistency

Excited to share a recent front-end practice project. I built a straightforward, interactive webpage to solidify my understanding of vanilla JavaScript and DOM manipulation. - Dynamic Styling: Created a button that triggers a color change upon interaction using JavaScript event listeners. - Time-Based Logic: Programmed a dynamic greeting alert that checks the current time (new Date().getHours()) and delivers a context-aware message (Morning, Afternoon, or Evening). - Interactive Calculator: Built a simple calculator that takes values from user input fields, parses the data, performs the addition, and instantly updates the DOM with the correct result. It is always rewarding to see the code come to life on the screen. You can see the HTML, CSS, and JS logic working together in the attached video. #JavaScript #WebDevelopment #FrontEnd #CodingJourney #HTML #CSS #DOMmanipulation #cognifyz #cognifyzTechnologies

The Document Object Model (DOM) was the moment JavaScript stopped being abstract and became real. Before the DOM, I wrote JavaScript that just ran calculations. After the DOM, I could make webpages respond to user actions. Here's the mental model that helped me: The DOM is JavaScript's map of your HTML. Every element is a node. You can find any element, read its content, change its style, and create or delete elements — all with JavaScript. The methods I use constantly: document.querySelector() — find one element document.querySelectorAll() — find all matching elements element.innerHTML — read or change content element.classList.add() / remove() — toggle CSS classes element.appendChild() — add new elements dynamically My first DOM project: a comment box where users type a comment, click submit, and it appears on screen — no page reload. That tiny interaction felt enormous. Do you remember the first time you made a webpage change dynamically? What did you build?

🚀 Last week I built my own mini Tailwind using JavaScript — meet 𝗖𝗵𝗮𝗶-𝗧𝗮𝗶𝗹𝘄𝗶𝗻𝗱 ☕⚡ Last week, Hitesh Choudhary sir gave us an assignment in the Chaicode Web Dev Cohort to build our own TailwindCSS. While working on it, I got curious — what if I could style my UI using simple class names, without writing any CSS at all? That curiosity turned into this small project where `chai-*` classes are parsed dynamically and converted into styles directly in the browser. It’s lightweight, plug-and-play, and honestly… really fun to experiment with. You can simply add the script to any of your HTML files and start using it — no setup, no configuration. If you want to try it out: 🔗 𝗟𝗶𝘃𝗲 𝗗𝗲𝗺𝗼: https://lnkd.in/gpH5zPqf 💻 𝗚𝗶𝘁𝗛𝘂𝗯: https://lnkd.in/gZKZ-QFJ 🎥 𝗗𝗲𝗺𝗼 𝗩𝗶𝗱𝗲𝗼: https://lnkd.in/gdFnWHa8 Building this helped me understand DOM manipulation and how libraries actually work behind the scenes, not just how to use them. I’m now thinking of taking this a step further and publishing it as an 𝗻𝗽𝗺 𝗽𝗮𝗰𝗸𝗮𝗴e so it can be easily used in projects. Would love to hear your thoughts or suggestions 🙌 #chaicode #webdevelopment #javascript #frontend #buildinpublic #opensource Piyush Garg Akash Kadlag Suraj Kumar Jha Jay Kadlag Chai Aur Code Chai Code

Day 28 of my JavaScript journey 🚀 Built a Coming Soon Page with a live countdown timer using HTML, CSS, and JavaScript. Features: ⏳ Real-time countdown timer 🎯 Dynamic date calculation using JavaScript 📱 Responsive and clean UI This project helped me understand how to work with time-based logic and create engaging landing page components. 🔗 Live Demo: https://lnkd.in/gxAnkF3v 💻 GitHub Repo: https://lnkd.in/gPimcWEY Exploring how small features like countdowns can improve user engagement. 💻 #JavaScript #WebDevelopment #FrontendDeveloper #100DaysOfCode #CodingJourney

Just built a simple yet functional Stopwatch using HTML, CSS, and JavaScript ( This project helped me strengthen my understanding of: • DOM manipulation • Event handling (Start, Stop, Reset) • Time logic and intervals in JavaScript • Structuring clean and responsive Ul with CSS Watching the timer run in real-time after writing the logic from scratch was a satisfying moment. Small projects like this continue to sharpen my problem-solving skills and build my confidence as a developer. Next step: improving the design and adding more advanced features #WebDevelopment #JavaScript #HTML #CSS #FrontendDevelopment #SoftwareEngineering

🚀 I finally understand the DOM — not just memorized it. Most beginners (including me earlier) think: 👉 “DOM = something to manipulate HTML” But here’s what actually clicked for me: The DOM is a tree of objects (nodes) created by the browser — so JavaScript never touches HTML directly. Instead: HTML → parsed by browser → converted into DOM (objects) → JS interacts with it 💡 Key realizations: • `window` is the global object (not part of DOM) • `document` is the root of the DOM tree • Everything is a node: * Element nodes (`div`, `p`, `h1`) * Text nodes (actual content) * Comment nodes • Selectors are just shortcuts: Instead of painful traversal like: `document.body.children[4].children[1]...` we use: `querySelector()` and friends • `innerText` vs `textContent` vs `innerHTML` — not the same ⚠️ • DOM = live structure → change it with JS → UI updates instantly 🔥 Next step: I’m going to build my own versions of: * `getElementById` * `getElementsByClassName` To truly understand how browsers work under the hood. If you're learning frontend: 👉 Don’t just use the DOM — understand it. Shared Detailed Notes below (provided by CoderArmy youtube channel): Course Instructor: Rohit Negi | Youtube Channel: CoderArmy. Special thanks to Rohit Negi, he explained everything from first thought principle, why we even need DOM and builds understanding on top of that. #JavaScript #WebDevelopment #Frontend #DOM #LearningInPublic #fullstackdevelopment #coding

⚡ Day 7 — JavaScript Event Loop (Explained Simply) Ever wondered how JavaScript handles async tasks while being single-threaded? 🤔 That’s where the Event Loop comes in. --- 🧠 What is the Event Loop? 👉 The Event Loop manages execution of code, async tasks, and callbacks. --- 🔄 How it works: 1. Call Stack → Executes synchronous code 2. Web APIs → Handle async tasks (setTimeout, fetch, etc.) 3. Callback Queue / Microtask Queue → Stores callbacks 4. Event Loop → Moves tasks to the stack when it’s empty --- 🔍 Example: console.log("Start"); setTimeout(() => { console.log("Timeout"); }, 0); Promise.resolve().then(() => { console.log("Promise"); }); console.log("End"); --- 📌 Output: Start End Promise Timeout --- 🧠 Why? 👉 Microtasks (Promises) run before macrotasks (setTimeout) --- 🔥 One-line takeaway: 👉 “Event Loop decides what runs next in async JavaScript.” --- If you're learning async JS, understanding this will change how you debug forever. #JavaScript #EventLoop #WebDevelopment #Frontend #100DaysOfCode 🚀