Abhishek Kumar’s Post

Building with Logic: My Dynamic Mini Calendar 📅 I just deployed a mini calendar that stays perfectly in sync with the real world! Using the JavaScript Date object, I built this to automatically pull the current day, date, month, and year every time the interface loads. It was a great exercise in DOM manipulation and CSS Flexbox for that clean, centered UI. Check out the live version below! 🚀 Live Link: https://lnkd.in/g4eZgEZD 💻 GitHub: https://lnkd.in/gyQVAYQD #FrontendDevelopment #JavaScript #WebDesign #CodingLife #LearningToCode

Continuing my daily practice. This time, I built a simple Image Modal using JavaScript — not as a feature demo, but as an exercise in managing state, events, and user interaction. What I focused on: • Tracking the current item and updating UI predictably • Handling multiple inputs (clicks + keyboard navigation) without duplicated logic • Keeping behavior clear and maintainable as the feature grows I’m intentionally working through small, focused tasks, treating each one as a way to sharpen thinking, not just produce output. Consistency > complexity. More practice ahead. GitHub repository: https://lnkd.in/dgMHEEqz #JavaScript #DOM #ProblemSolving #ITI

🔴 Connect Four: From Logic to Layout🟡 I just finished building a fully functional Connect Four game using HTML, CSS, and JavaScript. 🕹️ The most exciting part of this project wasn't just the UI—it was tackling the "Gravity Logic" and designing an efficient algorithm to check for wins across horizontal, vertical, and diagonal axes. 🧮 Key Features: ✅ Responsive Grid System ✅ Dynamic Turn Management ✅ 4-way Win Detection Algorithm #WebDevelopment #JavaScript #CodingProject #Frontend #ConnectFour #Systemstron #ProgrammingLife

🟩 Milestone 04: The power of DOM After hitting the ground with the fundamentals of JavaScript, now I have explored the world of DOM. Where everything feels practical with a logical world. In this milestone I learned how to connect the logic directly to the UI and update things. ✅ What I learned in this Milestone ▪️ Understanding of DOM and how it represent the webpage ▪️ Selecting and modifying elements (getElementById and so on) ▪️ Handling events like 'click' and form input. ▪️ Updating UI content in real time ▪️ Validation and logic in UI ✅ Project: 'Khorooch,' A simple MFS solution ✅ In this project I implemented: ▪️ Add money functionality ▪️ Cashout functionality ▪️ Real-time balance update ▪️ Real-time transaction history ▪️ Basic validations 👉 Note: Other services in the UI are currently unavailable. Because this is a demo project. 👉 Live link: https://lnkd.in/gXMSbzVu #JavaScript #DOM #FrontendDevelopment #WebDevelopment #LearningInPublic #ProgrammingHero

When you click an element in the DOM, the event doesn’t just stay there — it travels through three important phases: 1️⃣ Capturing Phase The event starts from the top of the DOM tree (window → html → body → ancestors) and travels down to the target element. 2️⃣ Target Phase The event reaches the actual element that was clicked. 3️⃣ Bubbling Phase After execution, the event travels back up the DOM (target → parent → ancestors → window). 💡 By default, addEventListener() listens in the bubbling phase. 🛑 We can control propagation using: event.stopPropagation() → Stops the event from moving to parent elements. event.stopImmediatePropagation() → Stops other handlers on the same element + prevents further bubbling. Understanding this concept is key to mastering Event Delegation, performance optimisation, and clean DOM event handling. #JavaScript #WebDevelopment #Frontend #EventPropagation #DOM #LearningInPublic

Recently practicing frontend system design: YouTube timeline preview. It gets interesting when it comes to 1. calculating exact frame for a given timestamp. 2. reducing HTTP overhead using sprite sheets (storyboard). 3. memory management for large sprite sheet. 4. ui optimizations: use of requestAnimationFrame, preloading the sprite sheet and using CSS property transform instead of left/margin to prevent layout/paint phases, and the edge cases. tools used while practicing: Gemini + Notebook LLM (visual revision notes) #reactjs #frontend #javascript #machinecoding #frontend #dsa

𝐂𝐒𝐒 has always had a specificity problem. @𝐥𝐚𝐲𝐞𝐫 finally gives you control over it. CSS Cascade Layers let you define the order in which styles are applied,  regardless of specificity. 𝐖𝐢𝐭𝐡𝐨𝐮𝐭 𝐥𝐚𝐲𝐞𝐫𝐬: Specificity wars. One !important leads to another. Your stylesheet becomes a guessing game. 𝐖𝐢𝐭𝐡 𝐥𝐚𝐲𝐞𝐫𝐬: You declare the order once at the top. Later layers always win, no specificity tricks needed. The order matters: => First declared = lowest priority => Last declared = highest priority Real-world use: - reset => browser defaults cleanup - base => your global styles - components => reusable UI pieces - utilities => overrides like Tailwind classes Your utilities will always win over components. Your components will always win over base. No more !important. No more specificity debugging. Stop fighting the cascade. Declare your layers. Are you using @𝐥𝐚𝐲𝐞𝐫 in your projects? #CSS #Frontend #WebDevelopment #CleanCode #WebDesign

#Hello_Connections #Day8 of #100DaysCodeChallenge Project Name: Stopwatch Web Page Details : Built a fully functional Stopwatch Web Application using HTML, CSS, and JavaScript with start, stop, lap, clear and reset functionality. What I Focused On: JavaScript timing functions (setInterval, clearInterval) DOM manipulation Event handling Time calculation logic (minutes, seconds, milliseconds) Clean and responsive UI structure Challenges: Managing accurate time increments without duplication issues and properly clearing intervals to prevent multiple timers running simultaneously. How I Solved It: Implemented controlled interval handling using conditional checks, cleared existing intervals before starting a new one, and structured the timer logic for consistent and accurate updates. Code Of School -Avinash Gour || Ritendra Gour 🔗 Live Project: https://lnkd.in/dwD9Trw4 #Day8 #100DaysOfCode #JavaScript #WebDevelopment #FrontendDeveloper #HTML #CSS #LearningInPublic #WomenInTech

A secure Random Password Generator built with ReactJS and Tailwind CSS. It features strict character generation logic ensuring highly randomized passwords with no unwanted extra characters. The clean UI includes custom notification templates to provide instant, satisfying feedback when copying passwords to the clipboard . This is the live link, Please visit and verify and let me know if any changes required. https://lnkd.in/gbZh-4UG

6 visual modes. They change every month. 30 components depend on them. I got tired of hunting down missed style variables across files every time a mode changed, so I spent a weekend experimenting with theming approaches in a side project. The result: a pattern where SCSS maps serve as a single config and auto-generate CSS custom properties for runtime switching. One entry in the config to add a mode. One line in a component to connect it. Zero duplication in the bundle. The interesting part was realizing that SCSS maps and CSS variables aren't competing tools — one handles build-time generation, the other handles runtime switching. They complement each other perfectly. I wrote up the full journey with three approaches I tried, code examples, and the trade-offs of each. Link in the comments. What's your go-to approach for runtime theming? #frontend #css #scss #webdev