JavaScript 10-Day Challenge Projects

Welcome to the JavaScript 10-Day Challenge! This challenge is designed to help beginners enhance their JavaScript skills by building ten different projects over the course of ten days. Each day, you will work on a new project that focuses on various aspects of JavaScript development, gradually increasing in complexity as you progress through the challenge!😄🤟

You can check it all live here!!🔥

https://khushi2706.github.io/Javascript-projects-for-beginner/

Project List:

Day 1: Character and Words Counter

• Description: Build a simple web application that counts the number of characters and words in a given text input.
• Technologies: HTML, CSS, JavaScript
• Features:
  • Input field for entering text
  • Display for character count
  • Display for word count

Day 2: Speech to Text

• Description: Develop a web application that converts spoken words into text using browser-based speech recognition.
• Technologies: HTML, CSS, JavaScript
• Features:
  • Button to start/stop speech recognition
  • Display area to show the transcribed text

Day 3: To-Do List

• Description: Create a to-do list application that allows users to add, remove, and mark tasks as complete.
• Technologies: HTML, CSS, JavaScript
• Features:
  • Input field for adding new tasks
  • List to display tasks
  • Checkbox to mark tasks as complete
  • Button to delete tasks

Day 4: Quotes Generator

• Description: Build an application that generates random quotes and displays them to the user.
• Technologies: HTML, CSS, JavaScript
• Features:
  • Array of pre-defined quotes
  • Button to generate and display a random quote

Day 5: Menu List

• Description: Develop a menu list application that showcases various food items with descriptions.
• Technologies: HTML, CSS, JavaScript
• Features:
  • Display of food items with images and descriptions
  • Filter options to categorize food items (e.g., appetizers, main courses, desserts)

Day 6: Form Validation

• Description: Implement form validation to ensure that user-submitted data meets specified criteria.
• Technologies: HTML, CSS, JavaScript
• Features:
  • Input fields with validation rules (e.g., required fields, email format)
  • Error messages for invalid input

Day 7: Recipe

• Description: Create a recipe application that allows users to view and search for recipes.
• Technologies: HTML, CSS, JavaScript
• Features:
  • Display of recipes with images and instructions
  • Search functionality to filter recipes by name or ingredients

Day 8: Movie App

• Description: Build a movie application that fetches data from an API and displays information about movies.
• Technologies: HTML, CSS, JavaScript, API (e.g., OMDB API)
• Features:
  • Search bar to search for movies
  • Display of movie details (title, year, plot, etc.)

Day 9: Budget App

• Description: Develop a budget tracking application that helps users manage their expenses and incomes.
• Technologies: HTML, CSS, JavaScript
• Features:
  • Input fields for adding expenses and incomes
  • Display of total budget, expenses, and remaining balance
  • Visualization of budget data (e.g., charts)

Day 10: Portfolio

• Description: Create a personal portfolio website to showcase your projects and skills.
• Technologies: HTML, CSS, JavaScript
• Features:
  • Home page with introduction and profile picture
  • Projects section with descriptions and links
  • Contact form for inquiries

Getting Started

• Each project folder contains the necessary files (HTML, CSS, JavaScript) to get started.
• Open the index.html file in your web browser to view and interact with the project.
• Follow the instructions provided in the comments of the code to implement additional features or make modifications.

Happy Coding!

Start your journey to becoming a JavaScript pro by completing these ten projects. Feel free to customize and expand upon each project to further challenge yourself and improve your skills. Good luck, and happy coding! 🚀