diff --git a/en/beginner-projects/README.md b/en/beginner-projects/README.md new file mode 100644 index 0000000..29d513f --- /dev/null +++ b/en/beginner-projects/README.md @@ -0,0 +1,36 @@ +--- +layout: editorial +chapter: Beginner Projects +pageNumber: 1 +description: Beginner-friendly JavaScript projects to practice concepts like DOM, events, and more. Each project is simple and practical for hands-on learning. +--- + +# Beginner JavaScript Projects + +Welcome to the **Beginner Projects** chapter! + +This chapter includes a curated list of beginner-friendly JavaScript projects, perfect for hands-on learning and practicing key concepts like: + +- DOM manipulation +- Event handling +- API calls +- JavaScript logic and syntax + +Each project includes: +- A description of the project +- A live image preview +- Helpful hints (if needed) + +## Projects Included: +- [Digital Clock](../beginner-projects/digital-clock.md) +- [Drum Kits](../beginner-projects/electronic-drum-kit.md) +- [Image Search App](../beginner-projects/image-search.md) +- [Month Calendar](../beginner-projects/monthly-calendar.md) +- [Random Photos](../beginner-projects/random-photos-generator.md) +- [Rock Paper Scissors Game](../beginner-projects/rock-paper-scissors-game.md) +- [Stopwatch](../beginner-projects/simple-stopwatch.md) +- [Tip Calculator](../beginner-projects/tip-calculator.md) +- [Video Trailer Popup](../beginner-projects/video-trailer-popup.md) +- [Weather App](../beginner-projects/weather-app.md) + +Happy Coding! diff --git a/en/beginner-projects/assets/calendar.PNG b/en/beginner-projects/assets/calendar.PNG new file mode 100644 index 0000000..c30a98d Binary files /dev/null and b/en/beginner-projects/assets/calendar.PNG differ diff --git a/en/beginner-projects/assets/digital-clock.PNG b/en/beginner-projects/assets/digital-clock.PNG new file mode 100644 index 0000000..5e701a3 Binary files /dev/null and b/en/beginner-projects/assets/digital-clock.PNG differ diff --git a/en/beginner-projects/assets/drum-kit.PNG b/en/beginner-projects/assets/drum-kit.PNG new file mode 100644 index 0000000..481f501 Binary files /dev/null and b/en/beginner-projects/assets/drum-kit.PNG differ diff --git a/en/beginner-projects/assets/image-search.PNG b/en/beginner-projects/assets/image-search.PNG new file mode 100644 index 0000000..7247209 Binary files /dev/null and b/en/beginner-projects/assets/image-search.PNG differ diff --git a/en/beginner-projects/assets/random-photos.PNG b/en/beginner-projects/assets/random-photos.PNG new file mode 100644 index 0000000..a4888a4 Binary files /dev/null and b/en/beginner-projects/assets/random-photos.PNG differ diff --git a/en/beginner-projects/assets/rps-game.PNG b/en/beginner-projects/assets/rps-game.PNG new file mode 100644 index 0000000..07031ca Binary files /dev/null and b/en/beginner-projects/assets/rps-game.PNG differ diff --git a/en/beginner-projects/assets/stopwatch.PNG b/en/beginner-projects/assets/stopwatch.PNG new file mode 100644 index 0000000..ef95263 Binary files /dev/null and b/en/beginner-projects/assets/stopwatch.PNG differ diff --git a/en/beginner-projects/assets/tip-calculator.PNG b/en/beginner-projects/assets/tip-calculator.PNG new file mode 100644 index 0000000..1a1c245 Binary files /dev/null and b/en/beginner-projects/assets/tip-calculator.PNG differ diff --git a/en/beginner-projects/assets/video-trailer.PNG b/en/beginner-projects/assets/video-trailer.PNG new file mode 100644 index 0000000..3430c15 Binary files /dev/null and b/en/beginner-projects/assets/video-trailer.PNG differ diff --git a/en/beginner-projects/assets/waether-app.PNG b/en/beginner-projects/assets/waether-app.PNG new file mode 100644 index 0000000..e5ce1a5 Binary files /dev/null and b/en/beginner-projects/assets/waether-app.PNG differ diff --git a/en/beginner-projects/digital-clock.md b/en/beginner-projects/digital-clock.md new file mode 100644 index 0000000..ad5fa1e --- /dev/null +++ b/en/beginner-projects/digital-clock.md @@ -0,0 +1,23 @@ +# โฐ Digital Clock + +![Digital Clock Preview](./assets/digital-clock.png) + +## Description +A live digital clock that shows the current time in hours, minutes, and seconds. + +## Features +- Displays real-time hours, minutes, and seconds +- Updates every second automatically +- AM/PM format toggle +- Responsive and clean UI + +## Concepts Practiced +- Working with JavaScript `Date` object +- `setInterval` for real-time updates +- DOM manipulation +- Time formatting + +## Bonus Challenge +Add different time zones or a stopwatch feature. + + diff --git a/en/beginner-projects/electronic-drum-kit.md b/en/beginner-projects/electronic-drum-kit.md new file mode 100644 index 0000000..25aeafe --- /dev/null +++ b/en/beginner-projects/electronic-drum-kit.md @@ -0,0 +1,22 @@ +# ๐Ÿฅ Drum Kits + +![Drum Kits Preview](./assets/drum-kit.png) + +## Description +Create a fun interactive drum kit that plays sounds when you click buttons or press keys. + +## Features +- Play drum sounds on button click or key press +- Visual feedback with button animations +- Multiple drum sounds to play +- Responsive and engaging UI + +## Concepts Practiced +- Event listeners for clicks and keyboard input +- Audio playback in JavaScript +- DOM manipulation and animations +- Handling multiple events efficiently + +## Bonus Challenge +Add the ability to record and play back drum sequences. + diff --git a/en/beginner-projects/image-search.md b/en/beginner-projects/image-search.md new file mode 100644 index 0000000..d4dba22 --- /dev/null +++ b/en/beginner-projects/image-search.md @@ -0,0 +1,23 @@ +# ๐Ÿ” Image Search App + +![Image Search App Preview](./assets/image-search.png) + +## Description +Build an app that lets users search for images using keywords and displays results dynamically. + +## Features +- Search images by keyword +- Fetches images from a public API (e.g., Unsplash) +- Displays results in a grid layout +- Responsive and user-friendly interface + +## Concepts Practiced +- Fetch API and asynchronous JavaScript +- Handling API responses and errors +- DOM manipulation +- Responsive design with CSS Grid or Flexbox + +## Bonus Challenge +Add infinite scroll or pagination for more images. + + diff --git a/en/beginner-projects/monthly-calendar.md b/en/beginner-projects/monthly-calendar.md new file mode 100644 index 0000000..8be216a --- /dev/null +++ b/en/beginner-projects/monthly-calendar.md @@ -0,0 +1,21 @@ +# ๐Ÿ“… Month Calendar + +![Month Calendar Preview](./assets/calendar.png) + +## Description +Create a simple interactive calendar that displays the days of a selected month and year. + +## Features +- Displays all days of the chosen month and year +- Highlights the current date +- Navigate between months and years +- Responsive design for different screen sizes + +## Concepts Practiced +- Date and time manipulation in JavaScript +- DOM manipulation +- Event handling +- Dynamic rendering of calendar grid + +## Bonus Challenge +Add the ability to mark important dates or events. diff --git a/en/beginner-projects/random-photos-generator.md b/en/beginner-projects/random-photos-generator.md new file mode 100644 index 0000000..620b401 --- /dev/null +++ b/en/beginner-projects/random-photos-generator.md @@ -0,0 +1,23 @@ +# ๐Ÿ“ธ Random Photos + +![Random Photos Preview](./assets/random-photos.png) + +## Description +Create a fun app that displays random photos from a collection each time you click a button. + +## Features +- Click a button to show a new random photo +- Loads images dynamically from a predefined list +- Smooth image transition effects +- Responsive layout for all devices + +## Concepts Practiced +- Arrays and random selection +- DOM manipulation +- Event handling +- CSS transitions and animations + +## Bonus Challenge +Fetch random photos from an external API like Unsplash. + + diff --git a/en/beginner-projects/rock-paper-scissors-game.md b/en/beginner-projects/rock-paper-scissors-game.md new file mode 100644 index 0000000..d7aaa55 --- /dev/null +++ b/en/beginner-projects/rock-paper-scissors-game.md @@ -0,0 +1,22 @@ +# โœŠโœ‹โœŒ๏ธ Rock Paper Scissors Game + +![Rock Paper Scissors Preview](./assets/rps-game.png) + +## Description +Build a classic Rock Paper Scissors game where you play against the computer. Choose your move and see who wins! + +## Features +- User can select Rock, Paper, or Scissors +- Computer randomly selects its move +- Shows the winner of each round +- Keeps track of the score + +## Concepts Practiced +- Random number generation +- Conditional statements +- Event listeners +- DOM manipulation + +## Bonus Challenge +Add animations and sound effects to make the game more interactive. + diff --git a/en/beginner-projects/simple-stopwatch.md b/en/beginner-projects/simple-stopwatch.md new file mode 100644 index 0000000..bd1981b --- /dev/null +++ b/en/beginner-projects/simple-stopwatch.md @@ -0,0 +1,23 @@ +# โฑ๏ธ Stopwatch + +![Stopwatch Preview](./assets/stopwatch.png) + +## Description +Create a simple stopwatch app that lets users start, stop, and reset a timer to track elapsed time. + +## Features +- Start the timer +- Pause/Stop the timer +- Reset the timer to zero +- Displays time in minutes, seconds, and milliseconds + +## Concepts Practiced +- Working with JavaScript `setInterval` and `clearInterval` +- DOM manipulation +- Event handling +- Time calculation and formatting + +## Bonus Challenge +Add lap functionality to record and display multiple time splits. + + diff --git a/en/beginner-projects/tip-calculator.md b/en/beginner-projects/tip-calculator.md new file mode 100644 index 0000000..974648a --- /dev/null +++ b/en/beginner-projects/tip-calculator.md @@ -0,0 +1,22 @@ +# ๐Ÿ’ธ Tip Calculator + +![Tip Calculator Preview](./assets/tip-calculator.png) + +## Description +Create a project where users can calculate tips based on a given bill amount and tip percentage. + +## Features +- Input field for bill amount +- Buttons for selecting tip percentage (10%, 20%, 30%) +- Display of calculated tip and total amount + +## Concepts Practiced +- Basic math operations +- DOM manipulation +- Event listeners +- Input validation + +## Bonus Challenge +Add a โ€œSplit Billโ€ feature to divide the total between multiple people. + + diff --git a/en/beginner-projects/video-trailer-popup.md b/en/beginner-projects/video-trailer-popup.md new file mode 100644 index 0000000..2ad43ed --- /dev/null +++ b/en/beginner-projects/video-trailer-popup.md @@ -0,0 +1,23 @@ +# ๐Ÿ“ฝ๏ธ Video Trailer Popup + +![Video Trailer Popup Preview](./assets/video-trailer.png) + +## Description +Create a popup modal that plays a video trailer when triggered. Perfect for movie or product previews! + +## Features +- Click a button or image to open the video popup +- Video plays inside the popup modal +- Close button to stop video and close the popup +- Responsive design for all screen sizes + +## Concepts Practiced +- Modal creation and toggling visibility +- Embedding and controlling HTML5 video +- Event handling for open/close actions +- CSS for overlays and animations + +## Bonus Challenge +Add autoplay and pause video when popup is closed. + + diff --git a/en/beginner-projects/weather-app.md b/en/beginner-projects/weather-app.md new file mode 100644 index 0000000..4b1b0be --- /dev/null +++ b/en/beginner-projects/weather-app.md @@ -0,0 +1,22 @@ +# โ˜๏ธ Weather App + +![Weather App Preview](./assets/waether-app.png) + +## Description +A simple app that fetches and displays weather information based on user location or search. + +## Features +- Search weather by city name +- Shows temperature, humidity, wind speed, and weather conditions +- Fetches data from a weather API (e.g., OpenWeatherMap) +- Responsive and clean UI + +## Concepts Practiced +- API fetching with async/await +- Handling JSON data +- DOM manipulation +- Error handling and user feedback + +## Bonus Challenge +Add weather icons and background changes based on weather conditions. + diff --git a/en/resources.md b/en/resources.md index 8926008..6ad3cc9 100644 --- a/en/resources.md +++ b/en/resources.md @@ -3,6 +3,19 @@ pageNumber: V chapter: --- # Learning Resources +## Projects to Practice + +- [Digital Clock](./beginner-projects/digital-clock.md) +- [Drum Kits](./beginner-projects/electronic-drum-kit.md) +- [Image Search App](./beginner-projects/image-search.md) +- [Month Calendar](./beginner-projects/monthly-calendar.md) +- [Random Photos](./beginner-projects/random-photos-generator.md) +- [Rock Paper Scissors Game](./beginner-projects/rock-paper-scissors-game.md) +- [Stopwatch](./beginner-projects/simple-stopwatch.md) +- [Tip Calculator](./beginner-projects/tip-calculator.md) +- [Video Trailer Popup](./beginner-projects/video-trailer-popup.md) +- [Weather App](./beginner-projects/weather-app.md) + ## Articles for learning JavaScript