getElementById vs querySelector: DOM Selection Methods

Just built my first real JavaScript project 🚀 I created a Simon Says Game using HTML, CSS, and JavaScript. 🔹 Features: • Dynamic color sequence generation • Real-time user input validation • Progressive difficulty levels 🔹 What I focused on: • DOM manipulation • Event handling • Structuring game logic This project helped me understand how small UI interactions actually work behind the scenes. 👉 Try it here: https://lnkd.in/gVuXbaAq Would appreciate feedback 🙌 #javascript #webdevelopment #100DaysOfCode #learninginpublic

⚡ Day 3 – querySelector vs querySelectorAll (Real Difference) Both methods use CSS selectors. But they return different results — and that difference matters. 🔹 querySelector() ✔ Uses CSS selectors ✔ Returns the first matching element ✔ Returns a single element ✔ Stops after first match 🔹 querySelectorAll() ✔ Uses CSS selectors ✔ Returns all matching elements ✔ Returns a NodeList ✔ Can loop using forEach() 🧠 Key Difference: querySelector() → first match only querySelectorAll() → all matching elements ⚠️ Important: A NodeList is not an Array, but it supports forEach(). Understanding small DOM differences like this helps avoid common bugs and builds a strong JavaScript foundation. #JavaScript #WebDevelopment #Frontend #DOM #JSConcepts #Coding #100DaysOfCode

This image explains how the JavaScript map() function works to create images dynamically from an array. It shows that map() loops through a list of image paths, creates a new <img> element for each item, and then appends those images to a webpage. The diagram visually demonstrates the step-by-step process from array → mapping → generated images → displayed on the page. 🚀 #JavaScript #WebDevelopment #LearnToCode #Frontend

⚡ Day 4 – innerText vs textContent vs innerHTML (Real Difference) All three properties deal with content inside an element — but they behave very differently. 🔹 innerText Returns only visible text. Ignores hidden elements and respects CSS styling. Slightly slower because it triggers reflow. 🔹 textContent Returns all text (including hidden content). Does not consider CSS styling. Faster and safer when you only need text. 🔹 innerHTML Returns HTML + text. Can insert HTML into the element. ⚠️ Risk of XSS if inserting unsanitized user input. 🧠 Key Difference: innerText → visible text only textContent → all text (hidden included) innerHTML → returns full HTML markup Understanding these differences helps prevent performance issues and security risks. Small DOM clarity → Strong JavaScript foundation. #JavaScript #WebDevelopment #Frontend #DOM #JSConcepts #Coding #100DaysOfCode

Shipped a CSS Specificity Calculator: a lightweight JavaScript tool that breaks down any CSS selector into its A-B-C specificity score. Enter a selector, click calculate, and instantly see which IDs, classes, pseudo-classes, elements, and pseudo-elements are contributing to the score and which column they belong to. Built with accessibility as a first principle. Aria-live result announcements, :focus-visible keyboard navigation, WCAG 2.1 AA contrast in both light and dark modes, and dynamic ARIA labels on the theme toggle. Live demo: https://lnkd.in/gcJ3dKRZ GitHub: https://lnkd.in/g5upWsga #Frontend #JavaScript #CSS #WebAccessibility #WCAG

What does it take to turn particles into text in the browser? I built a small interactive experiment that runs directly in the browser. Using the HTML Canvas element.. JavaScript can draw and animate thousands of tiny points on the screen.. Each particle has its own position and movement. When the cursor moves nearby.. the particles react and drift away — and then slowly return to form the text again.. So what looks like a glowing name is actually a swarm of small particles continuously calculating their positions in real time.. Built with HTML, CSS and JavaScript. Live demo in the comments 🔗 CodePen #creativecoding #javascript #frontend #generativeart

Practicing and revising my JavaScript concepts by building a Simon Says Game using HTML, CSS, and JavaScript. In this project, the player needs to remember and repeat the sequence generated by the system. Through this, I practiced: • DOM events • Arrays for storing sequences • Game logic implementation • User interaction handling Building small projects is a great way to strengthen concepts. 💻✨ #javascript #webdevelopment #frontend #coding #learningbydoing #project #html #css

Day 14/21 : JavaScript DOM (Document Object Model) As part of my 21-Day Full Stack Revision Challenge, today I revised the DOM, which allows JavaScript to interact with and modify web pages. The DOM represents the webpage as a structured tree, making it possible to access and update elements dynamically. > Topics I Covered What is DOM – A representation of the HTML document Selecting Elements – Accessing elements using JavaScript Manipulating Content – Changing text, styles, and attributes Event Handling – Responding to user actions like clicks and inputs > Why It Matters DOM manipulation helps in creating interactive and dynamic web applications instead of static pages. Day 14 completed #FullStackDeveloper #JavaScript #DOM #WebDevelopment #LearningInPublic #21DaysChallenge #CodingJourney

🚀 Mini Frontend Project – Update CSS Variables with JavaScript Today I built a small but powerful project while learning modern JavaScript concepts. ✨ What this project does: • Real-time CSS variable updates using JavaScript • Interactive sliders to control spacing & blur • Dynamic color picker for theme changes • Smooth animations & transitions • Fun feature: Added “Thug Life” glasses with rotation 😎 This project helped me understand: 🔹 CSS Variables (:root & setProperty) 🔹 DOM selection & events 🔹 Real-time UI updates using the input event 🔹 Combining CSS + JS for interactive UI Small projects like this make learning much more practical and fun 💡 #JavaScript #CSS #FrontendDevelopment #WebDevelopment #100DaysOfCode #LearningInPublic

I recently created a simple yet fun Bulb ON/OFF project using HTML, CSS, and JavaScript — and honestly, it helped me understand DOM manipulation much better. 🔧 What I learned: How to use getElementById() to access elements Handling user interactions with addEventListener() Dynamically changing UI using JavaScript (like switching images) Difference between img src vs background-image ✨ Features: Toggle bulb ON/OFF using buttons Clean UI with centered layout Real-time visual feedback This may look like a small project, but it’s a big step in building strong fundamentals 💪 Would love feedback and suggestions 🚀 Gravity Coding #javascript #Frontend #codingJourney #LearningInPublic #WebDevelopment #JavaScript #Frontend #LearningByDoing #100DaysOfCode #BeginnerProjects