# Berry Good Friends 🍓🍓🍓🍓🍓  --- ## Demo  --- ## APIs we used - https://jsonplaceholder.typicode.com/ - this is a fake API 🤭 it just generates imaginary users with imaginary info  --- - https://robohash.org/ - put ANY text attached after the site url and get back a pretty image for your site!   --- ## Process  --- After we decided the concept, we did a very quick first design in `Miro`  --- ## What we learned & Mistakes :books: :bug: --- ### href in React - href are automatically relative to server (it thinks it's a sub-route). It's a big topic online! - Would send you :slightly_frowning_face: to <www.berry.com/user-website> :smile: instead of<www.user-website.com> ```jsx= // These don't work: <a href={props.user.website}>... <a href="https://{props.user.website}">... // This works (Thanks Antonio!!!): <a href={`https://${props.user.website}`}>... ``` --- ### Attach a class - Matter of personal preference #### Version 1: .querySelector ```javascript= <button onClick={(e) => document.querySelector('.card-container').classList.toggle('flipped') }> Surprise 😉 </button>; ``` #### Version 2: React state ```javascript= const [flipped, setFlipped] = useState(''); <article className={`card-container ${flipped}`}> <button onClick={() => setFlipped('')}>Surprise 😉</button> </article>; ``` --- *That prompted some quick research 🔎* ## Declarative UI vs Imperative UI <span style="color:lightblue"><b>React is a declarative UI ⚛</b></span> --- 💡 In a declarative UI framework, *you should never find yourself writing code that manipulates your UI*. Events (user interaction, pushed server events) only mutate the application state, which is then reflected in the UI. --- pros ➕: the behaviour of declarative UI is *easier to predict* and test. It’s easy to predict the effect of new code at compile time, because the UI defines *precisely* how it responds to the state of the application, and also how it mutates that state ✅ --- ## but, moving on... 🎴 --- ### Card Flip  --- ### Card flip: We used ```css= .card{ backface-visibility: hidden; } .card-b { transform: rotateY(180deg); } ``` - Click Surprise button :arrow_right: event :arrow_right: attach class to card ```css= .card-container.flipped { transform: rotateY(180deg); } ``` --- ### :construction: Card flip doesn't always work :construction: - Sometimes you get a <span style="color:green; font-weight: bold;">blank</span> backside - Sometimes you see the <span style="color:green; font-weight: bold;">backside</span> (Firefox) - <span style="color:green; font-weight: bold;">Absolute/relative</span> positions were a bit confusing :arrow_right: We should probably investigate <span style="color:green; font-weight: bold;">backface-visibility: hidden</span> further --- ## If we had more time :alarm_clock: - Use a <span style="color:green; font-weight: bold;">database</span>: store score between <span style="color:green; font-weight: bold;">devices</span> - <span style="color:green; font-weight: bold;">Sort</span> cards by score - <span style="color:green; font-weight: bold;">More foods</span>: :strawberry::green_salad: :candy::grapes: - Each card has <span style="color:green; font-weight: bold;">individual</span> - <span style="color:green; font-weight: bold;">Intervals</span> - <span style="color:green; font-weight: bold;">Preferences:</span> like :strawberry:, dislike :green_salad: ---  ---  🍓🍓🍓🍓🍓 ---