This is my solution to the React Quizzical Solo Project on Scrimba. The solo projects are part of the Scrimba Platform's Courses. All the trivia data used in this app is pulled from the Open Trivia DB API
- To conditionally render two screens (start screen & quiz questions screen)
- To pull 5 questions from the The Open Trivia Database(OTDB) API
- Tally correct answers after check answers button is clicked
- Style and polish the app as in the figma design.
- HTML
- CSS
- JavaScript
- React (create-react-app)
I learned and practiced the following concepts:
- React Props
- React State
- React Hooks
- useState
- useEffect
- Conditional Rendering
A snippet of the code I used:
import React from "react";
import blobTop from "./images/blobs1.png";
import blobBottom from "./images/blob5.png";
function Opening(props) {
return (
<div className="opening">
<h1 className="opening-title">Quizzical</h1>
<p className="opening-desc">Some description if needed</p>
<button className="start-btn btn" onClick={props.initGame}>
Start quiz
</button>
{/* Decorative Elements(blobs) */}
<img src={blobTop} alt="" aria-hidden="true" className="opening-blob-top" />
<img src={blobBottom} alt="" aria-hidden="true" className="opening-blob-bottom" />
</div>
);
}
export default Opening;- Github - @ZaidMarrie
- Twitter - @LeKoels27
Pull requests are very welcome and you may freely fork this repository.
Since 2017, scrimba has created over 20 free courses and continue's launching free courses. If you perhaps are interested in learning or maybe just would like to up your skills try out their courses at scrimba.com.