30 JavaScript Projects

This repository contains 30 JavaScript projects, each demonstrating different JavaScript functionalities and web development techniques. These projects cover a wide range of concepts, from DOM manipulation and event handling to API integration and UI enhancements.

🚀 Projects Overview

Each project is organized in its own directory and includes essential files like index.html, script.js, and style.css. Below is a brief description of each project:

📌 List of Projects

1. Age Calculator

   • Calculates age based on user input.
   • index.html
   • script.js
   • style.css

2. Calculator

   • A basic arithmetic calculator.
   • index.html
   • style.css

3. Coming Soon Page

   • Countdown timer for an upcoming event.
   • index.html
   • script.js
   • style.css

4. Crypto Web Design

   • A simple cryptocurrency website UI.
   • index.html
   • script.js
   • style.css

5. Custom Select Menu

   • A dropdown menu with custom styling.
   • index.html
   • script.js
   • style.css

6. Daily Quote App

   • Fetches and displays random quotes from an API.
   • index.html
   • style.css

7. Dark Theme Web

   • Toggleable light/dark theme for a webpage.
   • index.html
   • script.js
   • style.css

8. Digital Clock

   • Displays the current time in a digital format.
   • index.html
   • script.js
   • style.css

9. Drag & Drop

   • Implements drag-and-drop functionality for list items.
   • index.html
   • script.js
   • style.css

10. Email Subscription Form

    • A simple email subscription form that saves data to Google Sheets.
    • index.html
    • style.css

11. Form Validation

    • Validates form inputs such as name, email, and phone.
    • index.html
    • script.js
    • style.css

12. Horizontal Scroll Slider

    • A horizontally scrolling image gallery.
    • index.html
    • script.js
    • style.css

13. Image Search

    • Searches for images using the Unsplash API.
    • index.html
    • script.js
    • style.css

14. Image Transition

    • Applies transition effects to images.
    • index.html
    • script.js
    • style.css

15. Mini Calendar

    • Displays the current date and month.
    • index.html
    • script.js
    • style.css

16. Music Player

    • A functional music player with play, pause, and volume control.
    • index.html
    • script.js
    • style.css

17. Notes App

    • A basic notes application with local storage support.
    • index.html
    • script.js
    • style.css

18. Password Strength Checker

    • Displays password strength in real time.
    • index.html
    • script.js
    • style.css

19. Popup Modal

    • A popup with a thank-you message.
    • index.html
    • script.js
    • style.css

20. Product Page

    • An interactive product page with a gallery and selection options.
    • index.html
    • script.js
    • style.css

21. Progress Bar

    • A circular progress indicator.
    • index.html
    • script.js
    • style.css

22. QR Code Generator

    • Generates QR codes from input text.
    • index.html
    • style.css

23. Quiz App

    • A simple interactive quiz application.
    • index.html
    • script.js
    • style.css

24. Stopwatch

    • A functional stopwatch with start, stop, and reset options.
    • index.html
    • script.js
    • style.css

25. Text to Speech Converter

    • Converts text input into speech.
    • index.html
    • script.js
    • style.css

26. To-Do List

    • A to-do list with local storage.
    • index.html
    • script.js
    • style.css

27. Toast Notification

    • Displays success, error, and invalid input messages.
    • index.html
    • style.css

28. Toggle Password Visibility

    • Allows users to show/hide password input.
    • index.html
    • script.js
    • style.css

29. Weather App

    • Fetches and displays weather data using the OpenWeatherMap API.
    • index.html
    • style.css

🛠 How to Run

Follow these steps to run the projects locally:

1. Clone the repository:

   git clone https://github.com/joelanarba/30-JavaScript-Projects.git

2. Navigate to a project directory:

   cd 30-JavaScript-Projects/30-JavaScript-Projects

3. Open index.html in a browser::

   start index.html
   

Alternatively, use a live server extension in VS Code for real-time updates.

📌 Contribution

Feel free to fork this repository, improve the projects, or add new features! Contributions are always welcome.

📜 License

This project is licensed under the MIT License.