Quizzical

A quiz app that allows user to select category, level of difficulty and number of questions.

Table of contents

• Overview
  • Features
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Continued development
• Author
• Acknowledgments

Overview

Features

• Qustions are pulled from API
• User can select answers
• App highlights incorrect answers
• App displays a final score
• Fully responsive design

Screenshot

Links

• Code: Github
• Live Site URL: Github Pages

My process

Built with

• HTML5
• CSS
• React
• API

What I learned

This project allowed me to practice many aspect of React: creating JSX and custom components, using props, event listeners, mapping data, handling state and side effects, conditional rendering and designing forms. It was also a good exercise on pulling data from API and creating responsive design with CSS.

const [quizData, setQuizData] = React.useState([])
    const [gameComplete, setGameComplete] = React.useState(false)

React.useEffect(() => {
         //Stop effect from running twice
        if (dataFetchedRef.current) return;
        dataFetchedRef.current = true;
        fetch(`https://opentdb.com/api.php?amount=${props.formData.number}&category=${props.formData.category}&difficulty=${props.formData.difficulty}&type=multiple`)
            .then(res => res.json())
            .then(data => {
                    setQuizData(getQuizItems(data.results))
            })       
    }, [clicks])

 return (<button 
             key={nanoid()}
             data-id={props.elId}
             className={["answer", colorStyling].join(" ")}
             onClick={event => props.selectAnswer(event)}
             value={answer}
         >
             {he.decode(answer)}
        </button>)

Continued development

I'm learning more advanced react concepts such as: class components, re-usability (higher order components, render props), performance, hooks and React Router.

Author

• Github - Arniss5

Acknowledgments

Quiz API