🔧 From functions to DOM events — brought them all together to create a Simon Says game using HTML, CSS & JS! Learning by building > learning by reading. 🚀 GitHub link = https://lnkd.in/gqwKdrNn #JavaScript #FrontendDevelopment #WebDevelopment #HTML #CSS #CodingJourney #ProgrammerLife #TechProjects #DOMManipulation #DeveloperCommunity #LearnByBuilding #JavaScriptProjects

📌 Daily Learning Log — JavaScript DOM Manipulation by Mr. Rohit Negi Today I learned how to select and update elements in the DOM and understood the difference between: 🔹 innerHTML → Reads/writes HTML (includes tags) 🔹 innerText → Reads visible text only (ignores hidden elements) 🔹 textContent → Reads all text (hidden + visible, no HTML formatting) 📍 Example from my console: const temp = document.getElementById("first"); temp.innerHTML // returns text + HTML tags temp.innerText // returns only visible text temp.textContent // returns all text even if hidden 🧠 Takeaway: DOM isn’t just about selecting elements — it’s about choosing the right property based on what we want to show or update in the browser. Leveling up step-by-step. 🚀 #Javascript #DOM #WebDevelopment #frontend #DailyLearning #CoderArmy #rohitnegi

If you’re learning JavaScript, here’s one thing you must understand clearly: 👉 The DOM — Document Object Model It may look confusing at first, but think of it like this: 🗂️ Your entire webpage becomes a tree of objects. Every tag becomes a node. Every text becomes a child node. Every element can be searched, updated, removed or styled using JavaScript. When you write: document.querySelector("h1").innerText = "Hello, DOM"; You’re not changing HTML. You’re interacting with the DOM object that the browser created from your HTML. Once you understand this, JavaScript becomes 10x easier — because now you're not "manipulating HTML"… you’re controlling the structure of the page itself. 🔥 Master the DOM and you master the browser. 💡✨ #JavaScript #DOM #WebDevelopment #FrontendDeveloper #LearnToCode #HTML #CodingBasics #SoftwareEngineering #ProgrammingTips #WebDevCommunity #FullStackDeveloper #TechEducation #DeveloperJourney #CodeNewbie #TechLearning

Why learn HTML/CSS if "Elementor" exists? Builders are great for speed, but knowing the code gives you control. Teaching Moment: When a page builder breaks or aligns an image wrongly, knowing CSS allows you to inspect the element and force the fix. You are not at the mercy of the software. #Coding #HTML #CSS #TechSkills

To automatically detect and display the current year, you can use a small piece of JavaScript code that you embed directly into your HTML. This eliminates the need to manually update the copyright date every year. html <script> document.getElementById("currentYear").textContent = new Date().getFullYear(); </script> Now your footer automatically stays updated, and I never have to explain why my site says © 2022 in 2025. 😅 Lesson: Let computers do the repetitive tasks. You’ve got better things to build. #WebDev #Coding #JavaScript #WebDesign #TechTips #Automation #LazyButSmart #DeveloperHumor #Bhaskarsnote

I just built a fully interactive Quiz Game using HTML, CSS, and JavaScript. Key features: Three-screen flow managed through CSS display classes ->Dynamic question rendering with answer buttons created via JavaScript ->Visual feedback system using CSS classes for correct/incorrect answers ->Score tracking and progress bar that updates in real-time ->Responsive design with mobile-friendly media queries The project reinforced fundamental web development concepts: ->DOM manipulation without frameworks ->CSS class toggling for UI state changes ->Clean separation of structure (HTML), presentation (CSS), and logic (JS) ->Array methods like forEach for iterating through questions and answers This was a great exercise in building a complete, functional application with plain JavaScript. Sometimes going back to basics is the best way to strengthen core development skills. #JavaScript #WebDevelopment #HTML #CSS #Programming #Coding #QuizApp #WebDevelopmentProjects

✨ Just wrapped up building a simple JavaScript calculator from scratch! It takes two inputs and lets you choose your operation: ➕ Addition ➖ Subtraction ✖️ Multiplication ➗ Division This project helped me sharpen my DOM manipulation skills and reminded me how small fixes (like handling user choice correctly) can make a big difference. 💡 Key takeaway: Debugging isn’t just about fixing errors—it’s about learning how each piece interacts and grows your confidence as a developer. #coding #html #css #javascript #consistency #calculatordesign #frontend

Tech tip - setting the 'class' of an #svg element from #javascript I could not set the 'class' of an SVG element using the 'className' property in JavaScript. For example:   var bfyvSVG =        document.createElementNS('http://www.w3.org/2000/svg', 'svg');   bfyvSVG.id = 'bfyvSVG';   bfyvSVG.className = 'bfyvSvg-defs'; One answer is to use 'setAttribute':   bfyvSVG.setAttribute("class","bfyvSvg-defs"); I found the answer on 'stackoverflow.com':   https://lnkd.in/exgUCdtG For an SVG, 'className' means something a little different. I could have used 'className.baseVal'

Seeing something many times and knowing its name or concept are two different things. Today, I learned the concept of higher-order functions. Had I used them before? Definitely. I use them in almost every analysis — I just didn't know they had a name. Higher-order functions are functions that take other functions as input or return functions as output. Once you learn the name, everything suddenly clicks. Sometimes learning isn't about something new — it's about putting a name on what you've already been doing. 📌 What is a Higher-Order Function? A higher-order function is a function that takes another function as an argument, returns a function, or both. It lets you pass behavior (logic) instead of hard-coding it. 🔹 Short examples JavaScript [1, 2, 3].map(x => x * 2); R sapply(c(1, 2, 3), function(x) x * 2) ➡️ map / sapply are higher-order functions because they receive a function that defines what to do with each element. #R #JavaScript #higherOrderFunctions #learningmustgoon 2:31 "He taught Adam the names of all things..."

💡 Understanding .innerHTML in JavaScript As I continue learning JavaScript, I explored the purpose of .innerHTML and how it helps in DOM manipulation. 👉 .innerHTML is used to get or set the HTML content inside an element. It allows JavaScript to dynamically update text or even insert HTML elements on the page without reloading it. 📌 Example use cases: Updating UI content dynamically Rendering HTML elements using JavaScript Creating interactive user experiences ⚠️ Important note: Avoid using .innerHTML with user input directly, as it can lead to security issues (XSS attacks). In such cases, .textContent is a safer option. Learning these small concepts step by step is helping me build a stronger foundation in front-end development 🚀 #JavaScript #WebDevelopment #Frontend #LearningJourney #DOM #Programming #JuniorDeveloper #Coding