https://github.com/khushi2706/javascript-projects-for-beginner
I had plan to create 10 javascript project within 10 days and this is all that projects
https://github.com/khushi2706/javascript-projects-for-beginner
boot budget-app css form-validation html html-css-javascript javascript javascriptproject movie-database movies portfolio-website quote-generator speech-to-text todolist
Last synced: 4 months ago
JSON representation
I had plan to create 10 javascript project within 10 days and this is all that projects
- Host: GitHub
- URL: https://github.com/khushi2706/javascript-projects-for-beginner
- Owner: khushi2706
- Created: 2022-01-19T17:59:57.000Z (over 3 years ago)
- Default Branch: master
- Last Pushed: 2024-02-28T06:26:56.000Z (over 1 year ago)
- Last Synced: 2025-06-08T08:05:06.596Z (4 months ago)
- Topics: boot, budget-app, css, form-validation, html, html-css-javascript, javascript, javascriptproject, movie-database, movies, portfolio-website, quote-generator, speech-to-text, todolist
- Language: CSS
- Homepage: https://khushi2706.github.io/Javascript-projects-for-beginner/
- Size: 8.85 MB
- Stars: 13
- Watchers: 0
- Forks: 2
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# 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! 🚀