London 10 | Shahid Amin | cyf-react-challenges

README.md

@@ -1,3 +1,18 @@
-# cyf-react-challenges
+# CodeYourFuture React Challenges
 
 A collection of introductory React challenges.
+
+There are also some larger projects at https://github.com/CodeYourFuture/group-projects#react-only-projects
+
+## Contribution Guide
+Want to add a challenge?
+
+A good challenge consists of
+
+- A real world application for what the student is building
+- Uses real world data to make the application interesting
+- Has multiple levels that a student can complete
+- Is well definined
+- Is targetted at begineer developers
+
+Everyone is welcome to raise a Pull Request on this repository - please share with volunteers and/or students before merging.

challenge-baby-name-picker/README.md

@@ -123,6 +123,7 @@ If there is also a search term in effect, your app should apply any name gender
 - Add the ability for the user to shuffle the list of names
 - Add the ability for the user to be presented with one or two randomly chosen names.
 - Find an attractive way to differentiate names by gender that doesn't use blue/pink stereotypes.
+- Add some suitably-themed sound effects for the UI.  Josh W Comeau's [useSound hook](https://www.joshwcomeau.com/react/announcing-use-sound-react-hook/) can help here, as can [freesound.org](https://freesound.org/)
 
 ## Further resources
 

challenge-image-carousel/README.md

@@ -16,7 +16,8 @@ Level 1 challenge screenshot example.
 
 ## Difficulty Level
 
-This is an intermediate challenge.
+* Level 1 is an intermediate challenge.  
+* Level 2's auto-play functionality is advanced if you have learned React hooks.
 
 # Level 1 Challenge
 
@@ -36,6 +37,8 @@ Make auto-forward and auto-back buttons to _automatically_ move in that directio
 
 Here's a screenshot example from a completed level 2 challenge.
 
+Warning: This quite hard to do using React Hooks. See [here](https://overreacted.io/making-setinterval-declarative-with-react-hooks/) for an explantion!
+
 ![Example Screenshot](./example-screenshots/example-level2.png)
 
 # Try to finish the rest by yourself

challenge-job-listing/README.md

@@ -0,0 +1,40 @@
+# Job Listing with Filtering
+
+Complete the Frontend Mentor challenge "Job Listings with Filtering", with the rule changes below:
+
+https://www.frontendmentor.io/challenges/job-listings-with-filtering-ivstIPCt
+
+You will have to refer to the "brief" on that web page AND download the "starter" zip file and explore its contents.
+
+## Rule changes and additions
+
+- Use React!
+- Ignore "Option 1" from the challenge document.
+- Load the jobs data file as mentioned in "Option 2".
+- DO NOT implement any filtering functionality at this point.
+- Build only the desktop version - do not worry about responsive design at this point
+- Name your GitHub repo exactly: `job-listings-react`
+- Host on Netlify as usual
+- Your Netlify site name must be in this format: cyf-USERNAME-jobs(.netlify.app)
+- You may work in teams of maximum 2 people if you wish.
+- This is also a CSS practice exercise, not only React. Your result should be laid out correctly.
+
+## More Notes
+
+- You do NOT need to buy anything to do this challenge. (The frontendmentor website also offers a "sketch file" for sale - you can ignore this.)
+- You will need to log in to frontendmentor.io with github and download the "starter" file.
+- There is no starting project repo provided by CYF for this challenge - you will make your own.
+
+## Optional Extra
+
+### Give feedback on the challenge
+
+The author of the challenge (and the "countries" one) is interested in your feedback.
+
+If you want to, take notes on anything in the challenge statement that you find unclear, and anything that you particularly enjoy in the challenge.
+
+This feedback will help them improve this and other challenges for other students.
+
+## Submission:
+
+Please add links here to your deployed site and your repo, and submit, when you have finished this task.

challenge-quiz/README.md

@@ -0,0 +1,113 @@
+# Challenge: Trivia Quiz
+
+![example](https://i.ibb.co/Byyss7c/Screenshot-2020-07-02-at-20-00-51.png)
+
+## Introduction
+
+Welcome to the React Quiz challenge! This is what we need to build:
+
+### [>>> Click here for Game Demo <<<](https://csb-qmydz-9dm8xvx98.vercel.app/)
+
+You will require a strong understanding of React+Hooks to complete this challenge.
+
+## The rules
+
+Every player has 3 lives: The logic and rules are simple. When the player loads the app:
+
+1. We fetch a question and display it.
+2. The player guesses the answer.
+3. If the player is right, they get a point 🥇. If wrong, they lose a life 🖤.
+4. We fetch a new question and repeat.
+
+When the player makes a wrong guess and has no remaining lives, it's game over and the player will be shown their final score. (My best score is 9).
+
+## Challenge
+
+1. Easy part: Recreate the game demo above.
+
+If you are looking to work out how to approach the problem, do this without checking the "Steps" section below. If you're more trying to practice React implementation than design, feel free to read the Steps section for guidance.
+
+2. Hard part: The goal here is not to add features, the goal is to write the code for the game above in the **cleanest way possible**. That means:
+
+- [ ] No errors or warnings in the console
+- [ ] Variable/function/component names must make sense and be properly spelled
+- [ ] No unused or commented-out code
+- [ ] A code structure that you understand and can clearly explain.
+
+Once the demo is working you are only **half finished**, you must go back and refactor the code to remove anything unnecessary and fix anything confusing.
+
+Completing the challenge is not enough, this should be the cleanest code you have ever written.
+
+## Things that will help
+
+### The API
+
+```js
+const api = `https://opentdb.com/api.php?amount=1&difficulty=easy&encode=url3986`;
+```
+
+Fetch data from here 👆👆👆. This is the Open Trivia Database, they have thousands of questions. The documentation for this api is [here](https://opentdb.com/api_config.php). Fetching from the url above will return one single question (inside an array).
+
+### Encoding
+
+When you fetch from the api, you will notice that all strings returned all look like this:
+
+```
+## A%20slug%E2%80%99s%20blood%20is%20green.
+```
+
+What's going on here? This is a _[url encoded string](https://en.wikipedia.org/wiki/Percent-encoding)_. We don't want to display our strings like that to our players. Javascript has a way to convert a string like this to a normal string, using the function below. You might find this useful.
+
+```js
+const decoded = decodeURIComponent("A%20slug%E2%80%99s%20blood%20is%20green");
+console.log(decoded);
+// A slug's blood is green
+```
+
+### Shuffle
+
+You may need to shuffle an array at some point (the game must show the possible answers in a random order). There are many ways to do a random shuffle, here is one:
+
+```js
+const unshuffled = [1, 2, 3];
+const shuffled = unshuffled.sort(() => Math.random() - 0.5);
+console.log(shuffled);
+// [2, 1, 3]
+```
+
+### React Guidelines
+
+You do not necessarily need to use useEffect to complete this challenge but it may be cleaner to do so.
+
+You do not need to use multiple components to complete this challenge but it may be cleaner to do so.
+
+### Styling & CSS
+
+This challenge is all about clean code so there are no extra points for styling. (If you decide to include syling anyway, your CSS must be every bit as beautiful and clean as your javascript code!).
+
+## Advanced challenge
+
+When this was sent to the top-secret Code Your Future QA team for testing they noticed a serious bug. I will include their report below.
+
+```
+From: Quality Assurance Team
+Subject: Quiz demo bug CRITICAL!!
+
+We have noticed that if a player clicks a correct answer
+two times VERY QUICKLY they can get an extra point.
+
+We have noticed some players using this to cheat, this
+bug must be fixed urgently!! CHEATING IS NOT ACCEPTABLE!
+```
+
+If you can fix the bug they will very pleased. Good luck.
+
+## Steps
+
+Ignore this section if you'd like to work out the steps yourself, these are just a suggestion to help out if you need.
+
+1. Get a single question working, without fetch. We've provided one example question in the question.json file, which you can import. It has the same structure as the API returns. Your app should tell the user "You got the answer right" or "You got the answer wrong".
+2. Implement the "lives" logic. If they get the question wrong, they lose a life. Show them how many lives they have left. Instead of telling the user right/wrong, tell them "You got the answer right" or "You got the answer wrong, you have (number) lives remaining: try again", or "You ran out of lives".
+3. Switch your implementation to fetch questions using the API, rather than from the JSON file.
+4. Implement the "score" logic. Count how many questions they got right, and show them, both as they play, and when they die.
+5. Make sure your code is perfect!

challenge-quiz/question.json

@@ -0,0 +1 @@
+{"response_code":0,"results":[{"category":"Art","type":"multiple","difficulty":"easy","question":"Who%20painted%20%22Swans%20Reflecting%20Elephants%22%2C%20%22Sleep%22%2C%20and%20%22The%20Persistence%20of%20Memory%22%3F","correct_answer":"Salvador%20Dali","incorrect_answers":["Jackson%20Pollock","Vincent%20van%20Gogh","Edgar%20Degas"]}]}

challenge-tfl-lines/README.md

@@ -0,0 +1,141 @@
+# Challenge: "Transport for London (TfL) Line Information"
+
+![TfL Line Information app](example-screenshots/level-300-screenshot.png)
+
+## Challenge overview
+
+Make a React app that shows Transport for London (TfL) data from their API about tubes, buses, trains, etc.
+
+## Difficulty level
+
+This is a more advanced challenge. Level 100 can be completed by any student has done Week 2 of the CYF React module. Level 200 can be completed by anyone who has done Week 3 of the CYF React module.
+
+## Pre-requisites - what do I need to know to finish this challenge?
+
+Level 100:
+
+- `useState` Hook
+- `useEffect` Hook to fetch data on load (with empty dependencies array)
+- The `array.map` method and its use in React JSX
+
+Later levels:
+
+- `useEffect` dependencies array (the second argument)
+
+## Getting started
+
+**Don't** clone this repo.
+
+Make your own React app using `create-react-app`.  See [this guide](https://docs.codeyourfuture.io/students/guides/creating-a-react-app) if you have forgotten how.
+
+Write a plain HTML prototype (e.g. on CodePen). THEN, once you know the HTML you're attempting to create, work on the React version! This is not mandatory but it is recommended.
+
+### Fetching data
+
+Data for this project will need to be fetched from the TfL API. [Here is a link to their documentation](https://api.tfl.gov.uk/swagger/ui/index.html).
+
+There will be more detail in the challenge levels below.
+
+## GitHub & Hosting:
+
+Add your project to GitHub and host it on Netlify.
+
+The GitHub repo name should be exactly: `tfl-lines-react`.
+
+The Netlify site suffix should be `-tfl-lines`, so something like...
+
+```
+cyf-YOUR_GITHUB_USERNAME-tfl-lines
+```
+
+## Level 100 challenge
+
+Write a React app that shows a selector for the different modes of transport available from TfL (for example bus, tube, rail).
+
+- The app should fetch data from `https://api.tfl.gov.uk/Line/Meta/Modes` **when the page loads**. The documentation for this API is available [here](https://api.tfl.gov.uk/swagger/ui/index.html?url=/swagger/docs/v1#!/Line/Line_MetaModes)
+
+- Using this data, the app should show a `<select>` with all of the `modeName`s returned from the API
+
+- When an option in the `<select>` is selected, it should show that `modeName` on screen
+
+- Your project should be on GitHub and Netlify with correct names (see GitHub & Hosting section above)
+
+### Example screenshots
+
+Mode selector:
+
+![Level 100 mode selector](example-screenshots/level-100-screenshot-1.png)
+
+Selected mode:
+
+![Level 100 selected mode shown](example-screenshots/level-100-screenshot-2.png)
+
+[CLICK HERE TO SEE A VIDEO](example-screenshots/level-100-video.gif)
+
+## Level 200 challenge
+
+Show another selector for the different lines available for the selected mode of transport. So for example, if tube is selected, the second selector shows all of the tube lines.
+
+- The app should fetch data from `https://api.tfl.gov.uk/Line/Mode/${SELECTED_MODE_OF_TRANSPORT}` **when a mode of transport is selected**. The documentation for this API is available [here](https://api.tfl.gov.uk/swagger/ui/index.html?url=/swagger/docs/v1#!/Line/Line_GetByMode)
+
+- Using this data, the app should show second `<select>` with all of the line `id`s returned from the API
+
+- When an option in this `<select>` is selected, it should show that `id` on screen
+
+### Example screenshots
+
+Line selector:
+
+![Level 200 line selector](example-screenshots/level-200-screenshot-1.png)
+
+Selected line:
+
+![Level 200 selected line shown](example-screenshots/level-200-screenshot-2.png)
+
+[CLICK HERE TO SEE A VIDEO](example-screenshots/level-200-video.gif)
+
+## Level 300 challenge
+
+Show the start and end locations for the selected line. So for example, if the Victoria line is selected, display Walthamstow Central Underground Station and Brixton Underground Station.
+
+- The app should fetch data from `https://api.tfl.gov.uk/Line/${SELECTED_LINE}/Route` **when a line is selected**. The documentation for this API is available [here](https://api.tfl.gov.uk/swagger/ui/index.html?url=/swagger/docs/v1#!/Line/Line_LineRoutesByIds).
+
+- Using this data, the app show the `originationName` (start of the line) and `destinationName` (end of the line) from the **first** item in the `routeSections` array.
+
+### Example screenshots
+
+![Level 300](example-screenshots/level-300-screenshot.png)
+
+[CLICK HERE TO SEE A VIDEO](example-screenshots/level-300-video.gif)
+
+## Level 999 challenge
+
+This challenge is **OPTIONAL**!
+
+Here are some additional ideas for improving your app:
+
+- If a mode of transport is **changed** reset the line selector and the line start/end so that they do not show out-of-date information (see video below)
+
+- Improve the styling. Try to make it match the screenshots as closely as possible. Or, even better, try to improve the design with your own ideas
+
+- Install the [aXe Browser Extension](https://www.deque.com/axe/axe-for-web/) in your browser.
+  - This extension allows you to test for [*accessibility* problems](https://developer.mozilla.org/en-US/docs/Learn/Accessibility/What_is_accessibility) in your application. It adds a new tab inside your Dev Tools called axe. Navigate to this tab, then click Analyze
+  - Try to solve any accessibility problems it tells you about. It may be useful to enable the Highlight mode so that you can see more easily which element are causing the problem. The Learn more link is also a useful resource
+
+### Example screenshots
+
+Resetting the line selector and line start/end:
+
+[CLICK HERE TO SEE A VIDEO](example-screenshots/level-999-video.gif)
+
+Running the aXe extension:
+
+![aXe extension analyze button](example-screenshots/level-999-screenshot-1.png)
+
+aXe extension results:
+
+![aXe extention results](example-screenshots/level-999-screenshot-2.png)
+
+## Credits
+
+Inspired by Ahmad Ali's original TfL exercise.

challenges-mars/README.md

@@ -38,8 +38,6 @@ _Note: Earth dates and Mars dates (“sols”) are slightly different. For the U
 
 Make your own React app using `create-react-app`. See [(this guide)](https://docs.codeyourfuture.io/students/guides/creating-a-react-app) if you have forgotten how.
 
-Copy across the names file (or its contents) from this repo to your app, and then import from that file.
-
 Write a plain HTML prototype (e.g. on codepen). THEN, once you know the HTML you're attempting to create, work on the React version! This is not mandatory but it is recommended.
 
 ## Levels