-
Notifications
You must be signed in to change notification settings - Fork 159
Added 10 beginner-friendly JavaScript project ideas with images #273
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Merged
Merged
Changes from 2 commits
Commits
Show all changes
3 commits
Select commit
Hold shift + click to select a range
File filter
Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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! |
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| # ⏰ Digital Clock | ||
|
|
||
|  | ||
|
|
||
| ## 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. | ||
|
|
||
|
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| # 🥁 Drum Kits | ||
|
|
||
|  | ||
|
|
||
| ## 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. | ||
|
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| # 🔍 Image Search App | ||
|
|
||
|  | ||
|
|
||
| ## 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. | ||
|
|
||
|
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,21 @@ | ||
| # 📅 Month Calendar | ||
|
|
||
|  | ||
|
|
||
| ## 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. |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| # 📸 Random Photos | ||
|
|
||
|  | ||
|
|
||
| ## 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. | ||
|
|
||
|
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| # ✊✋✌️ Rock Paper Scissors Game | ||
|
|
||
|  | ||
|
|
||
| ## 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. | ||
|
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| # ⏱️ Stopwatch | ||
|
|
||
|  | ||
|
|
||
| ## 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. | ||
|
|
||
|
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| # 💸 Tip Calculator | ||
|
|
||
|  | ||
|
|
||
| ## 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. | ||
|
|
||
|
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,23 @@ | ||
| # 📽️ Video Trailer Popup | ||
|
|
||
|  | ||
|
|
||
| ## 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. | ||
|
|
||
|
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,22 @@ | ||
| # ☁️ Weather App | ||
|
|
||
|  | ||
|
|
||
| ## 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. | ||
|
|
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Uh oh!
There was an error while loading. Please reload this page.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
@aminasaeed223 I believe the correct way to access
beginner-projectsis by using a single./beginner-projects, since theresources.mdfile is at the same directory level. Could you update all the relevant links accordingly?