How to complicate your developer life? It is enough to do more than what the lecturer suggests during the course. During the Modern JavaScript course, I was supposed to do a simple quiz in the console, but I found that if I was to do a quiz, it must display normally in the browser. Ultimately, what was supposed to take me half an hour, take almost 18 hours.
React’s JS advantage over Vanilla Java Script
Of course, I learned some new things, mostly related to logic in JavaScript. As long as the script is executed once per page, you don’t encounter problems with data processing and storage between page reloads.
This was the first time I missed React.JS. There, all elements refresh repeatedly on the page and you don’t need to worry about the current data on which the code works. In Vanilla JavaScript, components don’t update until you reload the page. Therefore, it was necessary to use sessionStorage to keep the information somewhere about the current result and the number of questions asked.
Securing the loop against endless execution
Another challenge in the project was to ensure that the questions during the quiz were not repeated. Like a simple loop checking whether the object already has the number of the question we want to ask, but finally, I got a little tired with this topic.
The code had to be looped so that it would always execute when the question was duplicated. On the other hand, it was necessary to prevent the code from running forever. In the end, it turned out like this:
It was also quite a challenge to pass the values from the form to JavaScript. Not because it’s a complicated feature, but mainly because the internet is full of conflicting information on this topic, and I had to test a few ways to find the one that works:
I had also some problems with passing numeric data from HTML form to JavaScript, and I wrote more about this problem here: “How to use data from HTML form in JavaScript”.
Graphically, the project isn’t complicated and the only know-how is to use an additional CSS class to set the display: none property; in conjunction with the JS code adding and removing this class from the css file.
This week I spent a total of 20 hours on programming, of which 18 hours was spent preparing a quiz, the source code of this project is available at: FrontendQuiz