- Display 2024 Olympics top 3 Countries
- Search Medal Count (by Country Code)
- Add Page Layouts
- Home Page - General Information
- 2024 Olympics Results Page (By Event)
- Medal Count Leaderboard
- Countries (Top 50)
- Redesign Webpage (Cross-Browser Compatibility)
- Change Font/Logo
- Add Light/Dark Theme
- Switch from Codante to Wikipedia API (mwn bot framework)
- Refactor to MVC Architecture
- Build OlympicSearch API
- Save Olympics data to DB
- Add Historical Olympics Search Page
- Add Caching (Lazy Loading)
- Deploy to Render
You can make a contribution and build the next available feature on the roadmap or request a new feature here. Any contributions you make are appreciated! You can also fork the repo locally to use as a template for your own project. Making significant design or functional changes can be a great way to learn and get hands-on practice. Start with the node-intro.js file to review the core concepts below.
- Server-Side JavaScript with Node.js
- Asynchronous Programming
- Building API's (URL Endpoints & Serving Files)
- Public API's (Using Fetch & Handling JSON Data)
Working on this project helped me understand what servers are and how API's work. I learned how to create a server using the native node modules, and configure the API to respond with files that allow the website to be seen in the browser. Getting the data to display correctly when the page loads was a challenge, but going through that frustration definitely helped solidify my general knowledge of how JavaScript is used with the event loop to handle asynchronous operations in the browser and the server.
If you run into trouble, you can click any of the badges above to reference documentation or reach out in the [🕒 catchup-crew] or [❓code-help] channels in the #100Devs Discord. It's an amazing community space filled with supportive developers happy to answer any questions you may have!
1. To get started, open this link in a new tab to fork this repository
- NOTE: You may find it easier to keep the same name, but you can change it if you like!
2. Click the code button to open the dropdown and copy the URL (make sure HTTPS is selected).
3. Open the terminal in your editor, type 'git clone' and paste the URL (the command should follow one of the formats below).
git clone https://github.com/YOUR-GITHUB-USERNAME/olympics-search
git clone https://github.com/YOUR-GITHUB-USERNAME/YOUR-REPOSITORY-NAME
4. Run the command (Press Enter)
5. Navigate to the project folder
cd olympics-search
cd YOUR-REPOSITORY-NAME
Done! You are now able to make changes or completely rebuild the project. Happy coding!
Contributions are ultimately what makes the open source community such an amazing place to learn, inspire, and create. My goal for this project is to provide a useful resource for people to get hands-on coding practice and learn by doing!!! If you want to build a feature from the roadmap or have any ideas for a new feature, you can clone the repository (see step 1 below) and create a pull request. If you find a bug, you can open an issue here. Thank you for contributing to the project!
1. To get started, open your editor and run the command below in the terminal to clone the project locally
git clone https://github.com/RjayBrown/olympics-search
2. Type this command in the terminal to create a branch for your new feature
git checkout -b feature/new-feature
3. Build the new feature!
4. Add and commit your changes
git add .
git commit -m 'Adding a new feature'
5. Push your changes
git push origin feature/new-feature
6. Open the main repository in a new tab: Open Repo
7. Click the main drop-down and choose your created branch
8. Click Compare & pull request
9. Click the base branch dropdown and select the main branch
10. Click the compare branch dropdown and select your branch
11. Type a title and description for your pull request
12. Click Create Pull Request
Congratulations! Now you wait for your completed feature to be merged and added to the main branch. Once it's merged, you have officially made your first contribution!!!
A big thanks to #100Devs for the community support, Roland Vasarhelyi for helping build this project and Leon Noel for the project inspiration.
If you found some value here and would like to support, feel free to give the project a ⭐️!
- HTML/CSS - Semantic Elements & Basic CSS Styles
- HTML/CSS - Containers & Responsive Design
- HTML/CSS - Forms & More CSS Styles
- JavaScript (Client-side) - The DOM(Introduction): User Interaction & Changing the DOM
- JavaScript (Client-side) - Fetch API(Introduction): Promise Chains & Handling JSON
- JavaScript (Client-side) - Fetch API(Advanced): Async/Await & Handling JSON
- JavaScript (Server-side) - URL Endpoints with NodeJS(Introduction)
- JavaScript (Full-Stack) - MVC Architecture(Introduction)
- JavaScript (Full-Stack) - MVC Architecture(Advanced): Authentication - Coming Soon!
- JavaScript (Full-Stack) - MVC Architecture(Advanced): PostgreSQL - Coming Soon!
- JavaScript (Full-Stack) - MVC Architecture(Advanced): ReactJS - Coming Soon!
This project is distributed under the MIT License. Click here for more information.