This repository contains 4 beginner-friendly JavaScript projects focused on learning and applying DOM (Document Object Model) manipulation. Each project is built using HTML, CSS, and Vanilla JavaScript.
These projects are ideal for practicing how JavaScript interacts with webpage elements in real-time.
-
Color Changer
- Click buttons to change the background color of the page.
- Learn how to use
querySelector,querySelectorAll,addEventListener, andstyleproperties.
-
BMI Generator
- Input height and weight to calculate and display Body Mass Index (BMI).
- Practice with form inputs, calculations, and dynamic DOM updates.
-
Digital Clock
- Display real-time clock with hours, minutes, and seconds updating every second.
- Learn about setInterval() and dynamic text rendering in the DOM.
-
Image Slider
- Switch between multiple images using buttons or auto-play.
- Use
srcmanipulation and basic logic to cycle through an image array.
-
Guess The Number
- Enter a number to guess a randomly generated secret number.
- Use conditionals and user input to give feedback and reset the game.
- HTML5 for structure
- CSS3 for basic styling
- JavaScript (ES6) for functionality
- Selecting DOM elements (
getElementById,querySelector, etc.) - Handling events (
click,input, etc.) - Updating styles dynamically
- Manipulating attributes and inner content
- Writing cleaner and modular JavaScript code
-
Clone the repository:
git clone https://github.com/your-username/js