A quiz web application that uses the Open Trivia Database API to retrieve trivia questions renders only five questions, and the player's score is displayed along with the correct answers.
- 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 Vitejs
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 blobTop from "../assets/blobTop.svg";
import blobBottom from "../assets/blobBottom.svg";
export default function OpeningPage(props) {
console.log("Developed & Designed by Vikas Chauhan");
return (
<div className="openingpage-container">
<h1>Quizzical</h1>
<p>Test your knowledge</p>
<button onClick={props.isGameStarted}>Start Quiz</button>
<img className="blob-top" src={blobTop} alt="" />
<img className="blob-bottom" src={blobBottom} alt="" />
</div>
);
}- Github - @A-4-Atom
- Twitter - @Vikas Chauhan
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.