diff --git a/en/beginner-projects/assets/calendar.PNG b/en/beginner-projects/assets/calendar.PNG new file mode 100644 index 00000000..c30a98d5 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 00000000..5e701a3f 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 00000000..481f5013 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 00000000..7247209f 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 00000000..a4888a47 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 00000000..07031cab 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 00000000..ef95263a 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 00000000..1a1c245c 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 00000000..3430c155 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 00000000..e5ce1a54 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 00000000..ad5fa1e3 --- /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 00000000..25aeafee --- /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 00000000..d4dba22d --- /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 00000000..8be216ac --- /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 00000000..620b4014 --- /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 00000000..d7aaa55d --- /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 00000000..bd1981b0 --- /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 00000000..974648ab --- /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 00000000..2ad43ed5 --- /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 00000000..4b1b0bee --- /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 89260088..b3196a59 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