Love JS Challenge

EVA GACHIRWA
Draft · 5 min read

The month of love is over. Some of us celebrated the valentines, some didn’t. At Developers in Vogue, we decided to show love in the best way we know how. A challenge was organized for the community and was posted on community’s timeline on twitter.

I love coding. I also loved the prize and was going to do my best to get it. Guess what? I did!! In this post, I will show you how I worked on the challenge.

Since the challenge allowed us to use any framework, I went for my ‘go-to’ framework, bootstrap. Bootstrap takes care of almost all CSS needs. For static files e.g images and music, I used cloudinary file management system. The rest of the functionalities and design, I used vanilla Javascript and CSS.

Solution

I first created the landing page using HTML. I like the simple design concept. All I wanted on the landing page was the timer and button to take the test. To make the page look better I added a love-heart and a love quote as shown below:

Main page
HTML code

For the styling, I started by giving the body background colour. I decided to go with gradient colours since they are recently rocking in the design community. I used a tool called UIGradient to generate the colour. UIGradient has a range of colour gradients and I decided to go with “King Yna”.

Body Styling

I wanted all my elements in the middle. So I created a div container with a class heart, the aligned the class and its text in the middle.

CSS for heart class

To give the page more life when it loads, I used CSS to make the love quote bouncing in and down.

Animation bounce in and down

The Count Down Timer

I used javascript to implement the count down timer, as shown below,

Javascript count down timer

First, create a countDownDate variable which holds the time to the count down date. The getTime() method from Date() object in javascript gets time in milliseconds since January 1, 1970. var countDownDate = new Date(“Feb 14, 2019 00:00:00”).getTime();

Then get the current time in milliseconds and store in variable now. var now = new Date().getTime();

To get the time difference between the count down date and the current time, take var countDownDate minus var now. The result of the difference is in milliseconds and is stored in a variable called distance. var distance = countDownDate — now;

The next step is to convert distance(which is time difference in milliseconds) to days, hours, minutes and seconds and then display the result on the HTML page. var days = Math.floor(distance / (1000 * 60 * 60 * 24)); var hours = Math.floor((distance % (1000 * 60 * 60 * 24)) / (1000 * 60 * 60)); var minutes = Math.floor((distance % (1000 * 60 * 60)) / (1000 * 60)); var seconds = Math.floor((distance % (1000 * 60)) / 1000);

document.getElementById(“theTimer”).innerHTML = days + “d “ + hours + “h “ +minutes + “m “ + seconds + “s “;

To make sure negative days are not displayed, check whether the countDownDate is passed by checking whether the distance is less than zero. If it the count down date is in the past, “EXPIRED” is displayed in the place of time remaining to the count down date. if (distance < 0) { clearInterval(x); document.getElementById(“theTimer”).innerHTML = “EXPIRED”; } }

Valentines Day Quiz

I used a form to implement the quiz. The form is displayed only after clicking the “Take Quiz” button. I therefore, make the button and the modal that contain the form accessible to JS by creating the variables, btn and modal as follows: var modal = document.getElementById(‘myModal’); var btn = document.getElementById(“myBtn”);

HTML code for the modal

In CSS the modal is hidden, using display:none.

modal styling

On clicking the “Take Test” button, the modal is displayed.

displaying modal

The modal contains the quizzes. Quizes have multiple choices. Since a user can only choose one answer radio buttons were used.

Quiz

When the user has selected all the answers, the results are computed in javascript. Scores are awarded depending on the user’s choice.

Calculating scores
Results and displaying results

The results are then displayed below the form.

The full code is accessible on github and codepen. The following video contains the demo.

https://res.cloudinary.com/dioamq4tm/video/upload/v1551361057/final.mp4