Javascript-projects-for-beginner

KO | EN

gitlite — search

#python #java #python3 #arduino #golang #machine-learning #rust #html #flask #javascript #seismology #nodejs

Javascript-projects-for-beginner

★ 13 Open GitHub ↗

I had plan to create 10 javascript project within 10 days and this is all that projects

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# 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! 🚀

Javascript-projects-for-beginner

Explore Similar Repositories

Was this content helpful?

Recent Feedback

Download README