Conversation
camcron
left a comment
camcron
left a comment
There was a problem hiding this comment.
Great job this week Irro! I know it was an exhausting one. Love the cute theme and way you managed to get all of your conditionals to work in the result.
Would suggest to just look over the naming of components and classes to make it more clear for an outsider to follow along in the code.
Awesome job this week! Keep it up, you're a star!
| {(counter === 1 && !name) | ||
| || (counter === 2 && !prefers) | ||
| || (counter === 3 && !color) | ||
| || (counter === 4 && !things) ? ( | ||
| <p className="answer">Please answer the current question before proceeding.</p> |
There was a problem hiding this comment.
Maybe there could be either just a comment here or it could be turned into a function that explains it's purpose
| @@ -0,0 +1,49 @@ | |||
| import React from 'react'; | |||
|
|
|||
| export const Thing = ({ things, setThing, counterFromApp, setCounter }) => { | |||
There was a problem hiding this comment.
It was a bit difficult to understand the purpose and functionality of this component because ot it's name. Maybe it could be named something like Location, PickLocation, or FavouriteLocation.
| .StartPage{ | ||
| display: grid; | ||
| grid-template-columns: 1fr; | ||
| justify-items: center; | ||
| justify-content: center; | ||
| background-color: white; | ||
| margin: 40px; | ||
| padding: 20px; | ||
| } | ||
|
|
||
| .start-container{ | ||
| margin: 40px; | ||
| } | ||
| .start-container h1{ | ||
| font-size: 40px; | ||
| padding-bottom: 20px; | ||
|
|
||
|
|
||
| } | ||
| .startBtn{ |
There was a problem hiding this comment.
Take a look at how classes are named. It seems like they are both kebab-case, camelCase and PascalCase.
|
|
||
| .StartPage{ | ||
| display: grid; | ||
| grid-template-columns: 1fr; |
There was a problem hiding this comment.
Is this Grid needed, since it's takes up the whole page(1 fraction)?
|
|
||
| } | ||
|
|
||
| .black{ |
There was a problem hiding this comment.
Consider using a more descriptive name for the class that is being styled
| <option value="books" className="books">Books & plants 🪴📚</option> | ||
| <option value="surf" className="surf">Surf &palmtrees 🏄🏿♀️ 🏝️</option> | ||
| <option value="people" className="people">People, fika & walks 👨🏻🦽🚶🏾♀️</option> |
| import React from 'react'; | ||
| import dogsurfer from './images/dogiesurf.png' | ||
| import shark from './images/shark.png' | ||
| import jelly from './images/jelly.png' | ||
| import crab from './images/krabba.png' | ||
| import goat from './images/goat.png' | ||
| import nakedcat from './images/nakedcat.png' | ||
| import nakeddog from './images/nakenhund.png' | ||
| import dogshark from './images/sharkdoggie.png' | ||
| import dove from './images/Duva.png' | ||
|
|
||
| export const QuizResult = ({ prefer, color, thing, name, setResults, results }) => { | ||
| const quiz = () => { | ||
| if (prefer === 'surf') { | ||
| if (color === 'black') { | ||
| if (thing === 'ocean') { | ||
| return ( | ||
| <div className="Results"> | ||
| Dum dum dum dum Shark <img src={shark} alt="Shark" /> | ||
| </div> | ||
| ); | ||
| } else if (thing === 'city') { | ||
| return ( | ||
| <div className="Results"> | ||
| Its a dog surfing <img src={dogsurfer} alt="Dog surfing" /> | ||
| </div> | ||
| ); | ||
| } else if (thing === 'mountain') { |
There was a problem hiding this comment.
I definitely understand that it was difficult having to figure out how to handle so many conditionals, so awesome job getting that to work!! I would just look into how to use ternary operators to able shorten the code and if there would be another way to organise it.
| } else if (thing === 'ocean') { | ||
| return ( | ||
| <div className="Results"> | ||
| Holy moly its a dog... no a shark no a dog shark <img src={dogshark} alt="Dog dressed as a shark" /> |
| || (counter === 2 && !prefers) | ||
| || (counter === 3 && !color) | ||
| || (counter === 4 && !things) ? ( | ||
| <p className="answer">Please answer the current question before proceeding.</p> |
There was a problem hiding this comment.
Awesome job having a reminder here to answer the question before even showing the next-button. Really impressed!
|
|
||
| <p> Hey {name}, your favorite animal is: {results}</p> | ||
| <button onClick={handleResults} type="button" className="calculate"> <span>Whats my animal?</span></button> | ||
| <button className="playAgain" type="button" onClick={() => window.location.reload(false)}> |
There was a problem hiding this comment.
Really good job putting a reload here to able to start the quiz over again
2 participants
This was a hard week and I overcomplicated things! , needs some work if you press enter after writing your name the game restarts and its not responsive