In this project, I used the most updated React Js futures with Styled Components; I used React Transition Group to animate when to mount or unmount something from DOM. I took data from OPEN TRIVIA DATABASE and showed users different data in different situations with beautiful animations conditionally. The project has a responsive design for all devices with the most updated CSS features.
Netlify Link: https://vigilant-allen-2ab416.netlify.com/#/
Let's start to talk about handling data from API and how I bring it to ready to use. Firstly I am checking whether the user selected a category or difficulty or not. If there is no selection, questions come randomly. At the endpoint, the correct answer was separate from the wrong answers. I put it among the wrong answers randomly with the help of 'Math.random()' and 'splice()' methods. And then, I added 'isCorrect' and 'isSelected' values for each answer. Lastly, I created my ready to use object with a question, answers, category and difficulty values.
Result :
I provide the user three lifeline chances. I want to show how I created the logic for deleting two wrong answers as an example. I created a clone for every variable for setting the state with immutable way and safely. Firstly I detected wrong answers; according to their length, I deleted 2 of them with the help of 'Math.random()', 'splice()' and 'filter()' methods and then sat the state. If there are fewer then three answers, I selected the correct answer right away without waiting for the user's selection. Also, I have 'playSound()' function for playing sound after the user used lifeline chance and 'wrongAnswersDeleted' state for styling button and making it disabled.
When I handle data from API, there was a character problem; I solved it with replace function.
I showed the user question's category and difficulty level for each question. When I took data from API, some of them had 'Category: ' part some of them not. I removed 'Category: ' conditionally if they have and added to all of them. With this technic I prevented duplication of 'Category: '. The difficulty level had not capitalized; I made it capitalized with the help of 'toUpperCase()' and 'slice()' methods.
At the end of the quiz, I needed to calculate the answered questions. I did it with nested map functions for all questions and their answers if the answer's 'isSelected === true'
If the user doesn't fill the name input area, app fires alert.
If the user doesn't select the category or the difficulty level, the app brings random questions for the unselected section.
After the user fill up the input name area app doesn't ask username until the user clicks the rename icon.
The Previous button for the first question, the Next button for the last question, lifeline chance buttons if the user doesn't have any unclickable.
If only one answer remains after the user has used the lifeline chances, the application directly selects that answer and prevents using the 'Select Correct Answer' lifeline.
If less than 10 seconds remaining for the quiz, remaining time and it's line change the color, remaining time increases fint-size.
User can see quiz summary at the and of the quiz with selected and correct answers.
For UI design I used 'font-size: 62.5%' technic. Because it is effortless to use and make your design responsive. Now see the picture below.
After I made 0 all margins and paddings for whole dom elements, including before and after elements, I sat the font size to %62.5 with the help of Styled Components createGlobalStyle. It means every one rem equal 10px now. Of course, I could use 10px instead of 1rem. But if you use for your whole parameters; when I start to make the website responsive for small screen devices, all I have to do just decrease the font size and now whole 1rems 8.5px instead of 10. I reached this result with just decreasing HTML font size. Font sizes, margins, paddings, height and widths and even box-shadows have rem value. With a small decrease of HTML font-size value, my website almost full responsive for I tablet except a couple of little things. See the gif below...
Curved header with adding the Header '::after' pseudo element.
With the power of the Styled Components, you can see how I animated when the user selects a category or difficulty. For conditional animation I used Styled Components 'css' helper.
As you can see, remained time connected with the pseudo-element of the header. It changes color and font size if the user has fewer than 10 seconds.
I created this beautiful hover-select animation with the help of Styled Components again. I have different transition timings for different CSS properties. Also, with the 'cubic-bezier' property, I made animation more sweeter.
I made this animation with different animation properties and different animations timings.
I accomplished this style and animation with the help of React Transition Group. I could animate while unmounting stats. Also, I showed the user correct and wrong answers with different color and background colors. If the user selects the answer and it is correct or if the user selects the answer and it is incorrect or if the user doesn't select an answer, style changes. With the nested Ternary Operator, I accomplished this result with just one line code.
