Use HTML Popover API for Simple UI Popups

🚀 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

This JavaScript library completely changed how I think about text. I’ve been working on my portfolio recently using the Pretext library by Cheng Lou and it’s absurd. Pretext is a JavaScript library that lets you break out of traditional CSS and DOM constraints and build truly dynamic UI. Instead of rendering everything and asking the DOM what happened, with Pretext you compute and measure everything first, then render once. This shift feels small, but it opens the door to more innovative, dynamic interfaces that aren't limited by typical layout rules. Check it out👇 : https://lnkd.in/ghedSc_K Pretext by Cheng Lou: https://lnkd.in/dy2n-utx #pretext #webdev #javascript #react #userinterface

Watch My Calculator Project in Action! I recently built this calculator using HTML, CSS, and JavaScript, and here’s a quick demo of how it works What I worked on: • Implementing JavaScript logic for calculations • Handling user input and button events • DOM manipulation for dynamic updates • Creating a clean and responsive UI 💡 This project helped me strengthen my understanding of how frontend logic works behind the scenes. Every small project is a step forward, and I’m excited to keep building and improving my skills. 💬 I’d love to hear your feedback! #WebDevelopment #JavaScript #Frontend #Projects #LearningJourney #BSCS

💡CSS Tip💡 Whenever, we use the textarea input tag like this: <textarea rows="5" cols="30"></textarea> by default, the browser makes it a resizable area so you can make it smaller or larger by just dragging it. But generally, we don't want the user to resize the textarea. In that case, you can apply resize: none CSS property for that textarea. This will not allow the user to resize that textarea. 𝗖𝗵𝗲𝗰𝗸 𝗼𝘂𝘁 𝘁𝗵𝗲 𝗖𝗼𝗱𝗲𝗣𝗲𝗻 𝗱𝗲𝗺𝗼 𝗹𝗶𝗻𝗸 𝗶𝗻 𝘁𝗵𝗲 𝗰𝗼𝗺𝗺𝗲𝗻𝘁 𝘁𝗼 𝘀𝗲𝗲 𝗶𝘁 𝗶𝗻 𝗮𝗰𝘁𝗶𝗼𝗻. #html #javascript #reactjs #webdevelopment

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

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

⚡ Bringing static web pages to life using JavaScript DOM 🔹 Key Concepts: 📝 innerHTML vs textContent → HTML content vs plain text 🎯 classList → add, remove, toggle classes 🧩 createElement() & appendChild() → create and add elements 🔗 setAttribute() & getAttribute() → manage element attributes 🎨 style → apply CSS using JavaScript ❌ removeChild() → remove elements from DOM 💡 Summary: DOM enables JavaScript to control and update web pages dynamically without reloading. #JavaScript #DOM #WebDevelopment #FullStackDeveloper #Frontend #CodingJourney

Just learned about the DOM (Document Object Model) in JavaScript! The DOM is what allows JavaScript to interact with HTML and CSS, making web pages dynamic and interactive. From changing text, styles, images, to handling button clicks — DOM manipulation is the backbone of modern web development. Example: ✔ Updating content instantly ✔ Creating new elements dynamically ✔ Responding to user actions Understanding DOM is a big step toward becoming a better frontend developer. Edure #JavaScript #WebDevelopment #Frontend #DOM #CodingJourney #LearnToCode

We often hear that JavaScript is single threaded. But at the same time, it handles API calls, timers, and UI updates smoothly. The reason is the Event Loop. Here is a simple way to understand it. Think in terms of 5 parts: 1. Call Stack This is where code runs right now. If something blocks here (like an infinite loop), everything else stops. 2. Web APIs The browser handles things like fetch, setTimeout, and events outside the main thread. When they are done, they send callbacks to queues. 3. Microtask Queue (high priority) This includes Promise callbacks and async/await. All microtasks run completely before anything else happens. -> If you keep adding microtasks (like recursive Promise.then), you can actually block rendering completely. 4. Macrotask Queue (low priority) This includes setTimeout, setInterval, and other tasks. Only one macrotask runs at a time. 5. Render After microtasks are done, the browser updates the UI (layout and paint). -> The browser decides when to paint — not strictly after every loop. Simple cycle: Run one macrotask → run all microtasks → update UI → repeat JavaScript isn’t non-blocking — the event loop just makes it feel that way. #javascript #frontend #reactjs #webdevelopment #softwareengineering #webperformance #systemdesign #Coding

Worked on a few small projects while learning JavaScript in the browser. Focused mainly on: • DOM manipulation • forms and validation • timers (setTimeout, setInterval) • localStorage Nothing complex, but enough to understand how things actually behave. Handling user input, updating the UI, storing data - all of it made JavaScript feel more practical. These small projects helped connect multiple concepts together instead of learning them in isolation. #javascript #webdevelopment #frontend