Simple Web Apps using Basic CSS and JavaScript

The World Wide Web used to be a place where documents and texts were stored and viewed by anyone in the world. As we all know the World Wide Web is one of the best inventions of all time.

In about 2004 a termed the Web 2.0 was used. This caused Web pages to change from static to dynamic. The Web 2.0 also has Web Apps like YouTube or Facebook. Web Apps are powerful and dynamic.

Web Apps are becoming popular among average users. More and more Web developers are making Web Apps for either themselves or for a corporation. I tried making a Web App of mine own, I called it Country capitals quiz. Country Capitals Quiz is a simple Web App using basic CSS and JavaScript. The code for this Web App is simple yet it’s quite long.

screenshot of country capitals quiz app — Country Capitals Quiz Web App.

Since my understanding of JavaScript is limited, this Web App is very simple and can be created by anyone. I was more focused on the JavaScript code and not the CSS as a result, the interface doesn’t have the best look.

css styles — To display the button the class .mainButton is applied and to hide the button the class .mainButtonHidden is applied.

CSS was used to show and hide elements on the page. This was accomplished by changing the class names of the HTML tags using JavaScript.

At first everything is hidden except the title and a button that says start. At this point, the JavaScript is just sitting in the background and a few variables have been created. Three variables are very important. These important variables are arrays. The first array is a list of all the correct answers, the second array is a list of all the countries you will be asked about, and the third array is a longer list of random cities.

JavaScript variables — Variables for the JavaScript file.

Once you click on the start button, four buttons appear with text of your score and the number of questions left. The score and number of questions left are tracked by a variable. Each time you move on to a new question, the number of questions left decreases by 1. For the score, a function is activated to check if you got the correct answer, if you did you get plus 10 points or else you get 0 points.

The answer boxes are a little different. After the four boxes are displayed using CSS, a function chooses 4 random cities from the random cities array and adds them to the screen.

JavaScript functions for capitals app — Function that displays the buttons and displays the score and number of questions left.

In the same function one of the answers is replaced by the correct answer. This was the only way I could think of adding the correct answer. This is also the only place where I encountered a problem that couldn’t be solved. The problem is that the same random answer could be picked more than once and appear on the page. I search for a solution on stack overflow and many had the same issue and the solution requires more advance JavaScript knowledge.

JavaScript setAnswers function — Gives each button a value and displays the correct text. The function then overrides one of the answers as the correct answer.

When a button is clicked, a function gets the answer you picked. The answer is then changed into a string and is returned to the page to let you know exactly what you picked. A button also appears at the bottom that says continue. When the continue, button is clicked a pop up message appears and tells you if you got the question right or wrong.

screenshot of app's users feedback — Screenshot after clicking the continue button. The continue button only appears once the users clicks on an answer.

The quiz continues until there isn’t any more questions to answer. This runs the end function where it returns your final score in a pop up message. At the end of the function it makes a retry button. The retry button calls the retry function which sets everything back to zero and starts with the first question and the answers are random again.

screenshot of the end of the app — Function that hides everything at the end of the quiz.

screenshot of ending user feedback — Screenshot of the result of the endQuiz() function.

This Web App is very simple but I had to think about how each part had to work. I am satisfied with this Web App and as I learn JavaScript I will be able to make more complex and dynamic Apps. Even though my JavaScript skills are limited, I am using what I know to create simple Web Apps. Web Apps can be created by anyone, they don’t need to be complex like Pinterest. Even if it’s as simple as a quiz it’s a step into the Web 2.0.

Links:

Country Capitals Quiz