diff --git a/challenge-baby-name-picker/README.md b/challenge-baby-name-picker/README.md new file mode 100644 index 000000000..e1a32a35a --- /dev/null +++ b/challenge-baby-name-picker/README.md @@ -0,0 +1,121 @@ +# Challenge: "Baby Name Picker (React)" + +![Example Screenshot from the finished challenge](./example-screenshots/finished.png) + +## Challenge Overview + +Make a React app which shows some baby names and lets you pick your favourites. The names data is provided for you. + +## Difficulty Level + +This is a beginner challenge, suitable from students who have completed at least week 2 of the CYF React module. + +(Level one can be completed by any student who has started the React module.) + +## Pre-requisites - what do I need to know to finish this challenge? + +- React `props` +- The `array.map` method as used in React JSX +- Event handlers: onClick for buttons +- Event handlers: onChange for input fields +- The `useState` hook + +## Getting Started + +Don't clone this repo. + +Make your own React app using create-react-app. + +### The data: + +The data is available in the file [./babyNamesData.json](./babyNamesData.json). + +Copy across this file to your src/ directory, and then import it. + +## Hosting: + +Add your project in github and host it on Netlify. + +The github repo name should be exactly: +`baby-names-react` + +The netlify site suffix should be `-baby-names` + +so... + +`cyf-YOURGITHUBUSERNAME-baby-names` + +# Level 1 Challenge + +Write a react app which lists baby names from the given file. + +It should display boys' and girls' names differently. + +The names should be displayed in alphabetical order, ascending. + +Your project should be on GitHub and hosted with correct names (see Hosting, above). + +### Example Screenshot + +Note only the list of names is important here. The other elements in the screenshot can be ignored. + +![Level 1 Example Screenshot](./example-screenshots/level-1.png) + +# Level 2 challenge + +Add a search bar. + +When someone types into it, your app should update the displayed list of baby names to only show matches. + +Matches should be case-insensitive. + +When the search bar is clear, all names should be shown. + +### Example Screenshot + +![Level 2 Example Screenshot](./example-screenshots/level-2.png) + +# Level 3 challenge + +Add "favourites". + +When the user clicks a name from the main list, it should be moved to a "favourites" list, displayed separately. + +When the user clicks a name from the _favourites_ list, it should be moved back to the main list. + +### Example Screenshot + +![Level 3 Example Screenshot](./example-screenshots/level-3.png) + +# Level 4 challenge + +Add "name gender" filter buttons. + +Add buttons that allow the user to only see boy or girl names (or all names). + +The buttons should operate as "radio" buttons - exactly one should be active at any time. + +The app should start by showing all names. + +The app should make it clear which filter is in effect. + +_How it works with search:_ + +If there is also a search term in effect, your app should apply any name gender filter to those search results. + +### Example Screenshot + +![Level 4 Example Screenshot](./example-screenshots/level-4.png) + +# Beyond - ideas for more work + +- Find a way to persist the favourites even after the browser tab is closed +- 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. + +## Further resources + +# Credits + +This application idea, and look, were taken from [Simon Vrachliotis'](https://simonswiss.com/) app, found via [react.rocks](https://react.rocks/example/Baby_name_inspiration). diff --git a/challenge-baby-name-picker/babyNamesData.json b/challenge-baby-name-picker/babyNamesData.json new file mode 100644 index 000000000..6267493ee --- /dev/null +++ b/challenge-baby-name-picker/babyNamesData.json @@ -0,0 +1,857 @@ +[ + { + "id": 0, + "name": "Zahra", + "sex": "f" + }, + { + "id": 1, + "name": "Parsa", + "sex": "m" + }, + { + "id": 2, + "name": "Avah", + "sex": "f" + }, + { + "id": 3, + "name": "Lala", + "sex": "f" + }, + { + "id": 4, + "name": "Jamshed", + "sex": "m" + }, + { + "id": 5, + "name": "Yasir", + "sex": "m" + }, + { + "id": 6, + "name": "Damiya", + "sex": "f" + }, + { + "id": 7, + "name": "Abbas", + "sex": "m" + }, + { + "id": 8, + "name": "Sahar", + "sex": "f" + }, + { + "id": 9, + "name": "Neo", + "sex": "m" + }, + { + "id": 10, + "name": "Damali", + "sex": "f" + }, + { + "id": 11, + "name": "Olajuwon", + "sex": "m" + }, + { + "id": 12, + "name": "Elinda", + "sex": "f" + }, + { + "id": 13, + "name": "Emoni", + "sex": "f" + }, + { + "id": 14, + "name": "Nabil", + "sex": "m" + }, + { + "id": 15, + "name": "Kheri", + "sex": "f" + }, + { + "id": 16, + "name": "Kidus", + "sex": "m" + }, + { + "id": 17, + "name": "Aiyana", + "sex": "f" + }, + { + "id": 18, + "name": "Ayana", + "sex": "f" + }, + { + "id": 19, + "name": "Makoa", + "sex": "m" + }, + { + "id": 20, + "name": "Cyrus", + "sex": "m" + }, + { + "id": 21, + "name": "Mina", + "sex": "f" + }, + { + "id": 22, + "name": "Zia", + "sex": "f" + }, + { + "id": 23, + "name": "Roshan", + "sex": "m" + }, + { + "id": 24, + "name": "Taja", + "sex": "f" + }, + { + "id": 25, + "name": "Naveed", + "sex": "m" + }, + { + "id": 26, + "name": "Suri", + "sex": "f" + }, + { + "id": 27, + "name": "Farah", + "sex": "f" + }, + { + "id": 28, + "name": "Shirin", + "sex": "f" + }, + { + "id": 29, + "name": "Navid", + "sex": "m" + }, + { + "id": 30, + "name": "Azra", + "sex": "f" + }, + { + "id": 31, + "name": "Adonai", + "sex": "m" + }, + { + "id": 32, + "name": "Livna", + "sex": "f" + }, + { + "id": 33, + "name": "Sheran", + "sex": "f" + }, + { + "id": 34, + "name": "Mayar", + "sex": "f" + }, + { + "id": 35, + "name": "Magdalene", + "sex": "f" + }, + { + "id": 36, + "name": "Areli", + "sex": "f" + }, + { + "id": 37, + "name": "Or", + "sex": "m" + }, + { + "id": 38, + "name": "Josiah", + "sex": "m" + }, + { + "id": 39, + "name": "Zetta", + "sex": "f" + }, + { + "id": 40, + "name": "Rohin", + "sex": "m" + }, + { + "id": 41, + "name": "Vilas", + "sex": "m" + }, + { + "id": 42, + "name": "Isha", + "sex": "f" + }, + { + "id": 43, + "name": "Shlok", + "sex": "m" + }, + { + "id": 44, + "name": "Setia", + "sex": "f" + }, + { + "id": 45, + "name": "Surya", + "sex": "m" + }, + { + "id": 46, + "name": "Arushi", + "sex": "f" + }, + { + "id": 47, + "name": "Aditi", + "sex": "f" + }, + { + "id": 48, + "name": "Rachana", + "sex": "f" + }, + { + "id": 49, + "name": "Vadhir", + "sex": "m" + }, + { + "id": 50, + "name": "Mohammad", + "sex": "m" + }, + { + "id": 51, + "name": "Shaan", + "sex": "m" + }, + { + "id": 52, + "name": "Arathi", + "sex": "m" + }, + { + "id": 53, + "name": "Ashwin", + "sex": "m" + }, + { + "id": 54, + "name": "Rudra", + "sex": "m" + }, + { + "id": 55, + "name": "Loma", + "sex": "f" + }, + { + "id": 56, + "name": "Patrick", + "sex": "m" + }, + { + "id": 57, + "name": "Sriram", + "sex": "m" + }, + { + "id": 58, + "name": "Aayan", + "sex": "m" + }, + { + "id": 59, + "name": "Shakila", + "sex": "f" + }, + { + "id": 60, + "name": "Iran", + "sex": "m" + }, + { + "id": 62, + "name": "Dara", + "sex": "f" + }, + { + "id": 63, + "name": "Jama", + "sex": "f" + }, + { + "id": 64, + "name": "Yasmina", + "sex": "f" + }, + { + "id": 65, + "name": "Mikah", + "sex": "m" + }, + { + "id": 66, + "name": "Aram", + "sex": "m" + }, + { + "id": 67, + "name": "Arash", + "sex": "m" + }, + { + "id": 69, + "name": "Aashi", + "sex": "f" + }, + { + "id": 70, + "name": "Zamir", + "sex": "m" + }, + { + "id": 71, + "name": "Mostafa", + "sex": "m" + }, + { + "id": 72, + "name": "Yasin", + "sex": "m" + }, + { + "id": 73, + "name": "Zaki", + "sex": "m" + }, + { + "id": 74, + "name": "Ammar", + "sex": "m" + }, + { + "id": 76, + "name": "An", + "sex": "f" + }, + { + "id": 77, + "name": "Shira", + "sex": "f" + }, + { + "id": 78, + "name": "Yaron", + "sex": "m" + }, + { + "id": 79, + "name": "Noam", + "sex": "m" + }, + { + "id": 80, + "name": "Shalom", + "sex": "f" + }, + { + "id": 81, + "name": "Ester", + "sex": "f" + }, + { + "id": 82, + "name": "Aharon", + "sex": "m" + }, + { + "id": 83, + "name": "Ahuva", + "sex": "f" + }, + { + "id": 84, + "name": "Shomron", + "sex": "m" + }, + { + "id": 85, + "name": "David", + "sex": "m" + }, + { + "id": 86, + "name": "Michal", + "sex": "m" + }, + { + "id": 88, + "name": "Ahmed", + "sex": "m" + }, + { + "id": 89, + "name": "Abdul", + "sex": "m" + }, + { + "id": 90, + "name": "Ahmad", + "sex": "m" + }, + { + "id": 91, + "name": "Noor", + "sex": "f" + }, + { + "id": 92, + "name": "Wira", + "sex": "m" + }, + { + "id": 93, + "name": "Malik", + "sex": "m" + }, + { + "id": 96, + "name": "Hakim", + "sex": "m" + }, + { + "id": 97, + "name": "Samar", + "sex": "m" + }, + { + "id": 98, + "name": "Raniya", + "sex": "f" + }, + { + "id": 99, + "name": "Nader", + "sex": "m" + }, + { + "id": 100, + "name": "Bahar", + "sex": "f" + }, + { + "id": 101, + "name": "Gibran", + "sex": "m" + }, + { + "id": 102, + "name": "Alysia", + "sex": "f" + }, + { + "id": 104, + "name": "Nadiyya", + "sex": "f" + }, + { + "id": 105, + "name": "Najah", + "sex": "f" + }, + { + "id": 106, + "name": "Basil", + "sex": "m" + }, + { + "id": 107, + "name": "Yasmin", + "sex": "f" + }, + { + "id": 109, + "name": "Salma", + "sex": "f" + }, + { + "id": 111, + "name": "Rahim", + "sex": "m" + }, + { + "id": 112, + "name": "Ibrahim", + "sex": "m" + }, + { + "id": 113, + "name": "Samira", + "sex": "f" + }, + { + "id": 114, + "name": "Sabir", + "sex": "m" + }, + { + "id": 115, + "name": "Suhana", + "sex": "f" + }, + { + "id": 116, + "name": "Rasheed", + "sex": "m" + }, + { + "id": 117, + "name": "Osman", + "sex": "m" + }, + { + "id": 118, + "name": "Irania", + "sex": "f" + }, + { + "id": 120, + "name": "Rasheen", + "sex": "m" + }, + { + "id": 121, + "name": "Estie", + "sex": "f" + }, + { + "id": 122, + "name": "Armaan", + "sex": "m" + }, + { + "id": 123, + "name": "Lela", + "sex": "f" + }, + { + "id": 124, + "name": "Malikah", + "sex": "f" + }, + { + "id": 125, + "name": "Gulzar", + "sex": "m" + }, + { + "id": 126, + "name": "Maryam", + "sex": "f" + }, + { + "id": 127, + "name": "Adrian", + "sex": "m" + }, + { + "id": 128, + "name": "Blenda", + "sex": "f" + }, + { + "id": 129, + "name": "Kasandra", + "sex": "f" + }, + { + "id": 130, + "name": "Hubert", + "sex": "m" + }, + { + "id": 131, + "name": "Deniel", + "sex": "m" + }, + { + "id": 132, + "name": "Konrad", + "sex": "m" + }, + { + "id": 133, + "name": "Mateusz", + "sex": "m" + }, + { + "id": 134, + "name": "Leon", + "sex": "m" + }, + { + "id": 135, + "name": "Kamila", + "sex": "f" + }, + { + "id": 136, + "name": "Albin", + "sex": "m" + }, + { + "id": 137, + "name": "Cezar", + "sex": "m" + }, + { + "id": 138, + "name": "Gabriel", + "sex": "m" + }, + { + "id": 139, + "name": "Maria", + "sex": "f" + }, + { + "id": 141, + "name": "Ina", + "sex": "f" + }, + { + "id": 142, + "name": "Eduard", + "sex": "m" + }, + { + "id": 143, + "name": "Claudia", + "sex": "f" + }, + { + "id": 144, + "name": "Paul", + "sex": "m" + }, + { + "id": 145, + "name": "Ileana", + "sex": "f" + }, + { + "id": 146, + "name": "Lucian", + "sex": "m" + }, + { + "id": 147, + "name": "Aida", + "sex": "f" + }, + { + "id": 149, + "name": "Fatoumata", + "sex": "f" + }, + { + "id": 150, + "name": "Fatou", + "sex": "f" + }, + { + "id": 151, + "name": "Musa", + "sex": "m" + }, + { + "id": 152, + "name": "Mariama", + "sex": "f" + }, + { + "id": 153, + "name": "Oumar", + "sex": "m" + }, + { + "id": 154, + "name": "Agata", + "sex": "f" + }, + { + "id": 156, + "name": "Aminata", + "sex": "f" + }, + { + "id": 157, + "name": "Asante", + "sex": "f" + }, + { + "id": 158, + "name": "Zakiyah", + "sex": "f" + }, + { + "id": 159, + "name": "Kwasi", + "sex": "m" + }, + { + "id": 160, + "name": "Jina", + "sex": "f" + }, + { + "id": 163, + "name": "Kwanza", + "sex": "m" + }, + { + "id": 164, + "name": "Imani", + "sex": "f" + }, + { + "id": 165, + "name": "Milly", + "sex": "f" + }, + { + "id": 166, + "name": "Saskia", + "sex": "f" + }, + { + "id": 167, + "name": "Lyuba", + "sex": "f" + }, + { + "id": 168, + "name": "Laszlo", + "sex": "m" + }, + { + "id": 169, + "name": "Nika", + "sex": "f" + }, + { + "id": 170, + "name": "Yana", + "sex": "f" + }, + { + "id": 171, + "name": "Vlasta", + "sex": "f" + }, + { + "id": 172, + "name": "Ivan", + "sex": "m" + }, + { + "id": 173, + "name": "Milana", + "sex": "f" + }, + { + "id": 174, + "name": "Marica", + "sex": "f" + }, + { + "id": 175, + "name": "Marko", + "sex": "m" + }, + { + "id": 176, + "name": "Petra", + "sex": "f" + }, + { + "id": 177, + "name": "Arica", + "sex": "f" + }, + { + "id": 178, + "name": "Zainab", + "sex": "f" + }, + { + "id": 179, + "name": "Attila", + "sex": "f" + }, + { + "id": 180, + "name": "Eren", + "sex": "f" + }, + { + "id": 182, + "name": "Demir", + "sex": "m" + }, + { + "id": 183, + "name": "Angus", + "sex": "m" + }, + { + "id": 184, + "name": "Temür", + "sex": "m" + }, + { + "id": 185, + "name": "Sulaiman", + "sex": "m" + }, + { + "id": 186, + "name": "Ozella", + "sex": "f" + } +] diff --git a/challenge-baby-name-picker/example-screenshots/finished.png b/challenge-baby-name-picker/example-screenshots/finished.png new file mode 100644 index 000000000..d77ed520f Binary files /dev/null and b/challenge-baby-name-picker/example-screenshots/finished.png differ diff --git a/challenge-baby-name-picker/example-screenshots/level-1.png b/challenge-baby-name-picker/example-screenshots/level-1.png new file mode 100644 index 000000000..29f986116 Binary files /dev/null and b/challenge-baby-name-picker/example-screenshots/level-1.png differ diff --git a/challenge-baby-name-picker/example-screenshots/level-2.png b/challenge-baby-name-picker/example-screenshots/level-2.png new file mode 100644 index 000000000..493de7b32 Binary files /dev/null and b/challenge-baby-name-picker/example-screenshots/level-2.png differ diff --git a/challenge-baby-name-picker/example-screenshots/level-3.png b/challenge-baby-name-picker/example-screenshots/level-3.png new file mode 100644 index 000000000..7aac783b6 Binary files /dev/null and b/challenge-baby-name-picker/example-screenshots/level-3.png differ diff --git a/challenge-baby-name-picker/example-screenshots/level-4.png b/challenge-baby-name-picker/example-screenshots/level-4.png new file mode 100644 index 000000000..705272fac Binary files /dev/null and b/challenge-baby-name-picker/example-screenshots/level-4.png differ diff --git a/challenge-high-score-tables/README.md b/challenge-high-score-tables/README.md index b53e5ce35..e1fe3ec17 100644 --- a/challenge-high-score-tables/README.md +++ b/challenge-high-score-tables/README.md @@ -2,7 +2,7 @@ ## Challenge Overview -Make a React app which lists some high score tables +Make a React app which lists some high score tables. The scores data is provided for you. ## Difficulty Level @@ -10,8 +10,8 @@ This is a beginner challenge. ## Pre-reqs -* react `props` -* `array.map` method as used in React JSX +- react `props` +- `array.map` method as used in React JSX ### Example Screenshot @@ -19,19 +19,26 @@ Level 1 challenge screenshot example. ![Example Screenshot](./example-screenshots/react-high-score-tables-example-layout.png) - # Level 1 Challenge Write a react app which displays high score tables. Each country should have its own High Score table displayed. +### Getting Started + +Don't clone this repo. + +Make your own React app using create-react-app. + +Copy across the score file (or the score file's contents) to your app, and then import from that file. + ### Components: For this challenge you should make AT LEAST: -* HighScoreTable - a table with a country name and a list of scores -* PlayerScore - component responsible for displaying one player's score (e.g. as one line of the table) (e.g. `Neill 5000`) +- HighScoreTable - a table with a country name and a list of scores +- PlayerScore - component responsible for displaying one player's score (e.g. as one line of the table) (e.g. `Neill 5000`) (In the real world you could choose what components to make) @@ -40,11 +47,24 @@ For this challenge you should make AT LEAST: The data is available in the file [./scores.js](./scores.js). You can copy this array of data into your App.js or you can import it. - # Bonus: -* Present the High Score Tables sorted alphabetically by country name -* Within one table, sort the player score lines by score, numerically, descending. (This is NOT pictured in the example) -* add some old-skool icons or animations +- Present the High Score Tables sorted alphabetically by country name +- Within one table, sort the player score lines by score, numerically, descending. (This is NOT pictured in the example) +- add some old-skool videogame icons or animations +- add a _single_ button which toggles the sort order of every scores table between ascending and descending by scores. + +## Hosting: + +Add your project in github and host it on Netlify. + +The github repo name should be: +`high-scores-react` + +The netlify site suffix should be `-scores` + +so... + +`cyf-YOURGITHUBUSERNAME-scores` ## Further resources