Update project_ideas.md

project_ideas.md

@@ -1,139 +1,5 @@
-# Project examples
-Project examples from [Frontendmentor](https://www.frontendmentor.io/challenges)
-
-## 1. Interactive rating component
-*Level: 1 NEWBIE* </br>
-Detailed description: https://www.frontendmentor.io/challenges/interactive-rating-component-koxpeBUmI </br>
-This is a nice, small project to practice handling user interactions and updating the DOM. Perfect for anyone who has learned the basics of JavaScript!
-### Brief
-- Your challenge is to build out this interactive rating component and get it looking as close to the design as possible.
-- You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.
-### Learning Outcomes
-Your users should be able to:
-- Select and submit a number rating
-- See the "Thank you" card state after submitting a rating
-- See hover and focus states for all interactive elements on the page
-
-## 2. Intro component with sign-up form
-*Level: 1 NEWBIE* </br>
-Detailed description: https://www.frontendmentor.io/challenges/intro-component-with-signup-form-5cf91bd49edda32581d28fd1 </br>
-Practice building out a sign-up form complete with client-side validation using JavaScript.
-### Brief
-- Your challenge is to build out this landing page and get it looking as close to the design as possible.
-- You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.
-### Learning Outcomes
-Your users should be able to:
-- View the optimal layout for the site depending on their device's screen size
-- See hover states for all interactive elements on the page
-- Receive an error message when the form is submitted if:
-  - Any input field is empty
-  - The email address is not formatted correctly
-
-## 3. Tip calculator app
-*Level: 2 JUNIOR* </br>
-Detailed description: https://www.frontendmentor.io/challenges/tip-calculator-app-ugJNGbJUX </br>
-This small app is perfect for anyone starting to get to grips with JavaScript. The calculator functionality will be a nice test!
-### Brief
-- Your challenge is to build out this tip calculator app and get it looking as close to the design as possible.
-- You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.
-### Learning Outcomes
-Your users should be able to:
-- View the optimal layout for the app depending on their device's screen size
-- See hover states for all interactive elements on the page
-- Calculate the correct tip and total cost of the bill per person
-
-## 4. Expenses chart component
-*Level: 2 JUNIOR* </br>
-Detailed description: https://www.frontendmentor.io/challenges/expenses-chart-component-e7yJBUdjwt </br>
-In this challenge, you'll create a bar chart component from scratch. We provide a local JSON file, so you can add the chart data dynamically if you choose.
-### Brief
-- Your challenge is to build out this bar chart component and get it looking as close to the design as possible.
-- You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.
-### Learning Outcomes
-Your users should be able to:
-- View the bar chart and hover over the individual bars to see the correct amounts for each day
-- See the current day's bar highlighted in a different colour to the other bars
-- View the optimal layout for the content depending on their device's screen size
-- See hover states for all interactive elements on the page
-- Bonus: See dynamically generated bars based on the data provided in the local JSON file
-
-## 5. Interactive card details form
-*Level: 2 JUNIOR* </br>
-Detailed description: https://www.frontendmentor.io/challenges/interactive-card-details-form-XpS8cKZDWw </br>
-This fun project will be an excellent way to practice DOM manipulation and form validation while also putting your HTML and CSS skills to the test.
-### Brief
-- Your challenge is to build out this interactive card details form and get it looking as close to the design as possible.
-- You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.
-### Learning Outcomes
-Your users should be able to:
-- Fill in the form and see the card details update in real-time
-- Receive error messages when the form is submitted if:
-  - Any input field is empty
-  - The card number, expiry date, or CVC fields are in the wrong format
-- View the optimal layout depending on their device's screen size
-- See hover, active, and focus states for interactive elements on the page
-
-## 6. Job listings with filtering
-*Level: 3 INTERMEDIATE* </br>
-Detailed description: https://www.frontendmentor.io/challenges/job-listings-with-filtering-ivstIPCt </br>
-Now that you've got a bit more comfortable with JavaScript, let's practice some filtering. In this challenge, you'll need to filter the job listings by the categories selected. There are two options to choose from for how to approach it:
-- *Option 1:* Filter job listings based on the categories using the HTML data- attribute. In this option, you'd use the hardcoded content that already exists in the index.html file.
-- *Option 2:* Use the local data.json file to pull the data and then dynamically add the content. This would be perfect if you're looking to practice a JS library/framework like React, Vue, or Svelte.
-### Brief
-- Your challenge is to build out this landing page and get it looking as close to the design as possible.
-- You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.
-### Learning Outcomes
-Your users should be able to:
-- View the optimal layout for the site depending on their device's screen size
-- See hover states for all interactive elements on the page
-- Filter job listings based on the categories selected
-
-## 7. Interactive comments section
-*Level: 3 INTERMEDIATE* </br>
-Detailed description: https://www.frontendmentor.io/challenges/interactive-comments-section-iG1RugEG9 </br>
-This is project will put your JavaScript skills to the test. We provide a JSON file to pull the data, but it's also a perfect project to build as a full-stack CRUD app!
-### Brief
-- Your challenge is to build out this interactive comments section and get it looking as close to the design as possible.
-- You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.
-### Learning Outcomes
-Your users should be able to:
-- View the optimal layout for the app depending on their device's screen size
-- See hover states for all interactive elements on the page
-- Create, Read, Update, and Delete comments and replies
-- Upvote and downvote comments
-- Bonus: If you're building a purely front-end project, use localStorage to save the current state in the browser that persists when the browser is refreshed
-- Bonus: Build this project as a full-stack application
-
-## 8. E-commerce product page
-*Level: 3 INTERMEDIATE* </br>
-Detailed description: https://www.frontendmentor.io/challenges/ecommerce-product-page-UPsZ9MJp6 </br>
-In this challenge, you'll build a beautiful product page. We'll be putting your JS skills to the test with a lightbox product gallery and cart functionality!
-### Brief
-- Your challenge is to build out this interactive comments section and get it looking as close to the design as possible.
-- You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.
-### Learning Outcomes
-Your users should be able to:
-- View the optimal layout for the site depending on their device's screen size
-- See hover states for all interactive elements on the page
-- Open a lightbox gallery by clicking on the large product image
-- Switch the large product image by clicking on the small thumbnail images
-- Add items to the cart
-- View the cart and remove items from it
-
-## 9. Launch countdown timer
-*Level: 3 INTERMEDIATE* </br>
-Detailed description: https://www.frontendmentor.io/challenges/launch-countdown-timer-N0XkGfyz- </br>
-This will be a fun one! Your challenge is to build this countdown timer. There are lots of small CSS tests in the design as well. So it should keep you busy!
-### Brief
-- Your challenge is to build out this tip calculator app and get it looking as close to the design as possible.
-- You can use any tools you like to help you complete the challenge. So if you've got something you'd like to practice, feel free to give it a go.
-### Learning Outcomes
-Your users should be able to:
-- See hover states for all interactive elements on the page
-- See a live countdown timer that ticks down every second
-- Bonus: When a number changes, make the card flip from the middle
-
-## 10. Rock, Paper, Scissors game
+# Project
+## Rock, Paper, Scissors game
 *Level: 4 ADVANCED* </br>
 Detailed description: https://www.frontendmentor.io/challenges/rock-paper-scissors-game-pTgwgvgH </br>
 This challenge will test your HTML, CSS and JavaScript skills. There's even a Rock, Paper, Scissors, Lizard, Spock version if you really want to challenge yourself.