Last month, I completed a demo project called English Janala using HTML, CSS, and Vanilla JavaScript. The main focus of the project was understanding how JavaScript interacts with HTML. JavaScript makes web pages dynamic through DOM manipulation. Key feather: 1. Design using Tailwind CSS 2. Static card data display 3. Tab toggle (lesson-1, lesson-2, lesson-3) 4. Display searched word 5. Functional search button (using quarry API) 6. Empty card message 7. DasiyUI loading/spinner 8. details modals 9. sound API What I learned: 1. DOM manipulation → core of frontend development 2. Event handling → user interaction 3. State updates → using just vanilla JavaScript 4. Toggle button → using JavaScript #js #DOM #API #fullstuck #MERN #programing

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

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

Day 3 of 30 Days of JavaScript........#Javascript30 Today I built an Interactive CSS Variables Controller 🎛️ This helped me understand how JavaScript can directly interact with CSS in real-time. By using input sliders, I was able to dynamically update: • Image spacing 📏 • Blur effect 🌫️ • Base color 🎨 💡 What I learned today: - Working with dataset for dynamic values. - How small mistakes in template literals can completely break functionality. - Understanding the :root selector and how it acts like a global storage for CSS variables. - Realizing how CSS variables (--variable) are similar to variables in programming and can be reused across the UI. This was a simple project, but it gave me a deeper understanding of how JavaScript + CSS work together to create interactive UI. Looking forward to building more and improving step by step 💻🔥 #JavaScript #WebDevelopment #FrontendDevelopment #Javascript30

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

🪄 Stop writing JavaScript for your accordions. For years, animating height: auto meant one thing: JavaScript hacks. Measure scrollHeight. Run requestAnimationFrame. Add a helper library. All just to animate an accordion. Now there’s a single CSS property that changes this: interpolate-size: allow-keywords Add one line and the browser can finally animate between numbers and keywords like auto. That means smooth accordions with pure CSS. Even better: it’s progressive enhancement. If the browser doesn’t support it, the accordion still works — it just snaps open. Less JavaScript. Simpler UI code. What JavaScript workaround are you most excited to replace with CSS? 👇

Project Title : Rock Paper Scissors Game A Rock Paper Scissors game built with vanilla HTML, CSS,  and JavaScript. Features: - Player vs Computer mode - Random computer choice generation - Real-time score tracking for both player and computer - Dynamic result messages with color feedback - Clean and responsive UI with image-based choices Built this to practice JavaScript fundamentals —  random number generation, DOM manipulation,  conditional logic, and event handling.

Day 13 of 30 Of #M4ACELearningChallenge Today I got introduced to Bootstrap. Bootstrap is a collection of pre-written HTML, CSS and JavaScript that developers can use to quickly build modern-looking interfaces without starting from zero every time. Instead of writing this: border-radius: 5px; padding: 8px 16px; background-color: blue; You just write: class="btn btn-primary" #LearningInPublic Mentorship for Acceleration

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

Dynamic Image Generation using JavaScript (createElement & setAttribute): I’m excited to share another JavaScript DOM project where I implemented dynamic image generation on button click. In this project, when the button is clicked, multiple images are created dynamically and displayed at different random positions on the screen. This creates a fun and interactive visual effect. Key concepts I practiced in this project: 1. createElement() – Dynamically creating image elements 2. setAttribute() – Setting attributes like src and positioning 3. DOM Manipulation – Adding elements to the webpage in real time 4. Event Handling – Triggering actions using button clicks 5. Dynamic UI Behavior – Generating multiple elements with different positions Through this project, I clearly understood how to create and insert elements dynamically into the DOM, and also strengthened my knowledge of setAttribute() and interactive UI design. Building projects like this is helping me improve my creativity and 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