DOM Manipulation with JavaScript

Day 14 - JavaScript DOM Manipulation (Selecting & Updating Elements) We're moving forward in our 30 Days Web Development Learning Series by exploring JavaScript DOM Manipulation! DOM Manipulation is where JavaScript truly comes to life — it allows us to dynamically access and update the content, structure, and style of a webpage without reloading it. In this post, we break down: What is DOM: The Document Object Model is a tree-like representation of your HTML page that JavaScript can access and modify through its nodes and elements. getElementById & querySelector: Two powerful methods to select HTML elements — getElementById targets a unique ID while querySelector works with any CSS selector like a class or tag name. innerText vs innerHTML: innerText updates only the visible plain text of an element, while innerHTML allows you to insert and render actual HTML content inside it. Changing Styles: Learn how to dynamically modify the CSS properties of any element directly through JavaScript using the style property. Mastering DOM Manipulation is the bridge between static HTML pages and fully interactive web applications. #WebDevelopment #JavaScript #DOMManipulation #FrontendDevelopment #CodingSeries #TryunitySolutions #LearnToCode #ProgrammingBasics

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 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

You fix an HTML issue… and it takes minutes. You debug CSS… and it tests your patience. But when it comes to JavaScript… that’s where things get real. Because it’s not just about what you see… it’s about logic, flow, and hidden bugs. One small mistake… and everything breaks silently. That’s why: HTML feels simple, CSS feels tricky, but JavaScript challenges your thinking. Debugging isn’t just fixing code… it’s understanding how everything connects. So the real question is — which one slows you down the most? 👇 #WebDevelopment #JavaScript #CSS #HTML #Debugging #DevLife

🎇 JavaScript Object Methods Objects are everywhere in JavaScript, but many devs don’t take full advantage of the built-in tools available. Here are some essential object methods to level up your code: 🔹 𝗢𝗯𝗷𝗲𝗰𝘁.𝗸𝗲𝘆𝘀(𝗼𝗯𝗷): get all the keys 🔹 𝗢𝗯𝗷𝗲𝗰𝘁.𝘃𝗮𝗹𝘂𝗲𝘀(𝗼𝗯𝗷): get all the values 🔹 𝗢𝗯𝗷𝗲𝗰𝘁.𝗲𝗻𝘁𝗿𝗶𝗲𝘀(𝗼𝗯𝗷): convert to an array of [key, value] 🔹 𝗢𝗯𝗷𝗲𝗰𝘁.𝗳𝗿𝗼𝗺𝗘𝗻𝘁𝗿𝗶𝗲𝘀(): convert back from entries to object 🔹 𝗢𝗯𝗷𝗲𝗰𝘁.𝗵𝗮𝘀𝗢𝘄𝗻(): check for a property (modern & safer) 🔹 𝗢𝗯𝗷𝗲𝗰𝘁.𝗮𝘀𝘀𝗶𝗴𝗻(): shallow merge objects 🔹 𝗢𝗯𝗷𝗲𝗰𝘁.𝗳𝗿𝗲𝗲𝘇𝗲(): make an object immutable 🔹 𝗢𝗯𝗷𝗲𝗰𝘁.𝘀𝗲𝗮𝗹(): prevent adding/removing properties 🔹 𝗢𝗯𝗷𝗲𝗰𝘁.𝗱𝗲𝗳𝗶𝗻𝗲𝗣𝗿𝗼𝗽𝗲𝗿𝘁𝘆(): fine-grained control over properties 🔹 𝗢𝗯𝗷𝗲𝗰𝘁.𝗴𝗲𝘁𝗣𝗿𝗼𝘁𝗼𝘁𝘆𝗽𝗲𝗢𝗳(): peek under the hood Save & share with your team! Download Our Free Full-Stack Developer Starter Kit ➡️ https://buff.ly/JbI0Qof --- If you found this guide helpful, follow TheDevSpace | Dev Roadmap, w3schools.com, and JavaScript Mastery for more tips, tutorials, and cheat sheets on web development. Let's stay connected! 🚀 #React #JavaScript #CheatSheet #WebDevelopment

Today I practiced JavaScript DOM Manipulation using HTML, CSS, and JavaScript in Google Colab. In this small hands-on project, I implemented a few beginner-level interactive features: 🔹 Adding two numbers using input fields and displaying the result dynamically 🔹 Built a simple “Guess the Number” game using JavaScript logic 🔹 Changed the color of a box using a button click with CSS and JavaScript 🔹 Dynamically resized elements using class manipulation 🔹 Created and appended HTML elements (<h1>) dynamically using JavaScript These exercises helped me understand: • How to use DOM Manipulation • Handling button click events • Updating HTML content dynamically with JavaScript • Basic interactive web development concepts Learning step by step and building small projects every day. Looking forward to learning more about frontend development and JavaScript. #JavaScript #HTML #CSS #WebDevelopment #DOMManipulation #CodingJourney #LearningInPublic

Day 20 of my JavaScript journey 🚀 Built a Password Generator with advanced features using HTML, CSS, and JavaScript. Features: 🔐 Custom password length (8–20 characters) 🔤 Include/exclude uppercase, lowercase, numbers, and symbols 📋 One-click copy to clipboard 📊 Password strength indicator This project helped me dive deeper into logic building, user input handling, and creating practical tools. 💻 GitHub Repo: https://lnkd.in/g7kFznGK Focused on building projects that are not just functional, but actually useful. 💻 #JavaScript #WebDevelopment #FrontendDeveloper #100DaysOfCode #CodingJourney

Day 4/100 of JavaScript 🚀 Today’s focus: Functions in JavaScript Functions are reusable blocks of code used to perform specific tasks Some important types with example code: 1. Parameterized function → takes input function greet(name) { return "Hello " + name; } greet("Apsar"); 2. Pure function → same input always gives same output, no side effects function add(a, b) { return a + b; } add(2, 3); 3. Callback function → function passed into another function function processUser(name, callback) { callback(name); } processUser("Apsar", function(name) { console.log("User:", name); }); 4.Function expression → function stored in a variable const multiply = function(a, b) { return a * b; }; 5.Arrow function → shorter syntax const square = (n) => n * n; Key understanding: Functions are first-class citizens in JavaScript — they can be passed, returned, and stored like values #Day4 #JavaScript #100DaysOfCode

🧠 JavaScript Hoisting Explained Simply Hoisting is one of those JavaScript concepts that can feel confusing — especially when your code behaves unexpectedly. Here’s a simple way to understand it 👇 🔹 What is Hoisting? Hoisting means JavaScript moves declarations to the top of their scope before execution. But there’s a catch 👇 🔹 Example with var console.log(a); var a = 10; Output: undefined Why? Because JavaScript internally treats it like: var a; console.log(a); a = 10; 🔹 What about let and const? console.log(b); let b = 20; This throws a ReferenceError. Because "let" and "const" are hoisted too — but they stay in a “temporal dead zone” until initialized. 🔹 Function hoisting Functions are fully hoisted: sayHello(); function sayHello() { console.log("Hello"); } This works because the function is available before execution. 🔹 Key takeaway • "var" → hoisted with "undefined" • "let/const" → hoisted but not initialized • functions → fully hoisted 💡 One thing I’ve learned: Many “weird” JavaScript bugs come from not understanding hoisting properly. Curious to hear from other developers 👇 Did hoisting ever confuse you when you started learning JavaScript? #javascript #frontenddevelopment #webdevelopment #reactjs #softwareengineering #developers

Day 15 of My JavaScript Journey 🚀 Today, I was introduced to the basics of HTML. HTML (HyperText Markup Language) is used to structure the content of a web page not to style or add functionality, but to define elements like text, images, and links. I also learned about attributes, classes, and IDs. Classes and IDs are used to name elements so they can be selected in CSS for styling and in JavaScript for DOM manipulation. Key differences: • ID: It must be unique (used once per page) • Class: It's reusable (can be used multiple times) One important insight: HTML provides the structure, CSS handles the design, and JavaScript adds interactivity. Key takeaway: Understanding HTML is the foundation for building and manipulating web pages with JavaScript. #JavaScript #HTML #WebDevelopment #LearningInPublic #100DaysOfCode