🚀 30 Days of JavaScript – Day 17 Today I moved from basic JavaScript programs to building a real frontend feature using HTML, CSS, and JavaScript. 💡 Project: Signup Form with Validation This form is not just UI — it includes real user interaction and validation logic. ✅ Features: • Validates name, email, and password • Shows error messages near input fields • Prevents page reload on submit • Displays success message after valid submission • Automatically clears the form 🧠 Concepts Used: • DOM manipulation • event handling (addEventListener) • form validation logic • conditional statements • basic UI styling with CSS 📌 This helped me understand how real websites handle user input and validation. 🎥 Demo below 👇 👉 Source code in first comment (only JS Code). #JavaScript #FrontendDevelopment #HTML #CSS #WebDevelopment #LearningJavaScript #CodingJourney

Just built a simple modal popup using HTML, CSS, and JavaScript. Features: • Open and close buttons • Close on Escape key • Click outside to close • Clean UI with background image This helped me understand DOM manipulation, event handling, and class toggling in JavaScript. Still learning and improving step by step. #HTML #CSS #JavaScript #WebDevelopment #LearningByDoing

🚀 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

Advanced Password Generator I just built a dynamic password generator using HTML, CSS & JavaScript! 💻 Features include: Choose letters, numbers, and symbols Set your preferred password length Strength indicator shows Weak / Medium / Strong Copy to clipboard with one click It’s a simple tool but a great exercise in: DOM manipulation & event handling in JavaScript Styling interactive UI components with CSS Enhancing user experience with instant feedback A little project with big learning value. Always experimenting and leveling up! #JavaScript #WebDevelopment #Frontend #HTML #CSS #UIUX #CodingFun #InteractiveDesign #PasswordSecurity

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

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

Image Swap Functionality using JavaScript (getAttribute & setAttribute): I’m excited to share another JavaScript DOM project where I implemented an image swapping feature using getAttribute() and setAttribute(). In this project, there are two images, and when the “Swap Image” button is clicked: * The first image moves to the second position * The second image moves to the first position * This swapping continues on every click This project helped me understand how we can access and update element attributes dynamically to create interactive UI behavior. Key concepts I practiced: 1. DOM Manipulation – Selecting and updating elements dynamically 2. getAttribute() – Retrieving current image source values 3. setAttribute() – Swapping the src attributes between images 4. Event Handling – Performing actions on button click 5. Logic Building – Implementing swap functionality step by step Through this project, I clearly understood how getAttribute() and setAttribute() work and further strengthened my DOM manipulation and problem-solving skills. Building small projects like this is helping me gain more confidence in JavaScript. Checkout my full project code on github: https://lnkd.in/gqPQptPS Feedback and Suggestions are always welcome! 😊 #JavaScript #DOMManipulation #FrontendDevelopment #WebDevelopment #JavaScriptProjects #CodingJourney #LearningByDoing #BeginnerDeveloper #UIInteraction

🎮 Just built a simple Tic-Tac-Toe game using HTML, CSS, and JavaScript. Nothing too complex — just wanted to strengthen my fundamentals and understand how things work behind the scenes without using any frameworks. What I worked on: • Handling game logic (win conditions, turns) • Updating UI with DOM manipulation • Reset functionality Honestly, small projects like this help a lot in getting comfortable with core concepts. Thinking of improving it next by adding an AI opponent or better UI. Open to suggestions 👀 #JavaScript #HTML #CSS #WebDevelopment #Learning

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

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