Coding challenge #2 (beginner level)

Topic: Coding challenge #2 (beginner level) - Creative launch of animation

Published 04.03.2019 Updated 18.02.2019

Michal Szymanski pro posted 7 months ago

Introduction

In this tutorial, you will learn how to launch an animation in a creative way.

You will learn how to create a timer, launch an animation, changing the attributes and styles via JavaScript and you will practice your javascript fundamentals - like variables, functions and conditional statements.

Note 1: This particular animation isn't the most important here. We will use it as a practical example, which let you practice your basic javascript knowledge.

Note 2: For purpose of this tutorial, I have complicated a bit this example. There are ways to write it faster, shorter and simpler. But then you wouldn't learn a many important things.

MDB Coding Challenge

This tutorial is part of the MDB Coding Challenge.

It is an initiative that helps novice programmers learn programming through practical examples and creative challenges.

LEARN MORE ABOUT MDB CODING CHALLENGE

Requirements

To follow this tutorial you need a basic knowledge of HTML, CSS, JavaScript and MDBootstrap .

If you don't know these technologies or you would like to repeat the knowledge about them, I recommend you to read our previous tutorials first.

They are short, simple and free.

START HTML TUTORIAL START CSS TUTORIAL START JAVASCRIPT TUTORIAL START MDBOOTSTRAP TUTORIAL

Useful resources

MDBOOTSTRAP ANIMATIONS EXAMPLES

Let's get started!

Step 1 - creating a basic HTML structure

Add the following HTML code to your project. There is nothing special here - just a few HTML elements with specified ID's that we will use later in our JavaScript code.

Note: If you need a detailed explanation of this HTML code, that means that you should go back to the basic tutorials that I have listed above.

HTML

<!-- Container element which holds all the other elements and which will receive an animation class -->
<div id="containerID" class="text-center p-5">

    <!-- Button which launch the entire logic of our program -->
    <button type="button" class="btn btn-info" id="boomButton">It looks a gift. Click it.<i class="fas fa-gift ml-2"></i></button>

    <!-- Hidden div which holds a progress bar, text and bomb image -->
    <div id="hiddenBomb" class="d-none mt-5">

      <!-- Progress bar with the initial value = 10 -->
      <progress id="progressBar" value="10" max="10" style="width: 100%;"></progress>

      <!-- Simple text within the <h2> heading -->
      <h2 class="my-4">OMG IT WAS A BOMB!</h2>

      <!-- An image of the bomb -->
      <img id="bombImg" src="http://www.kzwafm.com/wp-content/uploads/sites/6/2017/04/bomb-clipart-171-bomb-clipart-1864_1864.jpg"
        class="img-fluid" alt="" style="max-width: 500px;">

    </div>

  </div>

Step 2 - onClick event

At the beginning we catch an ID of the #boomButton. Then we use onClick event to launch all the other code.

JavaScript

// Launch a function with onClick event
document.getElementById('boomButton').onclick = function () {


}

Step 3 - initialValue

The concept of this animation is as follows:

In the beginning there is a huge button, which will launch the animation
When the button is clicked, on the screen appear progress bar with an initial value 10
With every 0.2 sec the value of the progress bar decrements by 1.
When the value of the progress bar is equal 0 then the entire screen shakes, background changes to red and the image of the explosion appears.

So at the beginning we need an initial value of the progress bar (which is equal 10 and we set it via HTML attribute)

JavaScript

// Launch a function with onClick event
document.getElementById('boomButton').onclick = function () {

  // Get an initial value of progress bar
  let initialValue = document.getElementById('progressBar').value;

}

Note: We declare a variable with a keyword let, what is feature of ECMAScript 2015 (which is a version of JavaScript). If you want to learn more about it read our tutorial JavaScript let variable.

Step 4 - setInterval() method

We use a setInterval() method to execute the code inside our function every 0.2 sec (200 milliseconds).

1000 ms = 1 second.

That means we want the value of the progress bar decrements by 1 every 200 milliseconds.

JavaScript

// Launch a function with onClick event
document.getElementById('boomButton').onclick = function () {

  // Get an initial value of progress bar
  let initialValue = document.getElementById('progressBar').value;

  // Interval function which decrease the value of the progress bar by 1 every 200 milliseconds
  let z = setInterval(function () {

  }, 200);

}

Step 5 - newValue

Now we need a statement, which will be executed every 0.2 sec and decrement the initialValue by 1.

JavaScript

// Launch a function with onClick event
document.getElementById('boomButton').onclick = function () {

  // Get an initial value of progress bar
  let initialValue = document.getElementById('progressBar').value;

  // Interval function which decrease the value of the progress bar by 1 every 200 milliseconds
  let z = setInterval(function () {
    // Decrement the initialValue by 1 every 0.2 sec
    initialValue -= 1;

    // Assigning the new value to the "progresBar" element
    let newValue = document.getElementById('progressBar').value = initialValue;

  }, 200);

}

Step 6 - conditional statement

To define when the bomb should to explode and when to launch the animation, we will use conditional statement.

We want that all of this happens when newValue == 0 (so when the counter of the progress bar finish its counting.

JavaScript

// Launch a function with onClick event
document.getElementById('boomButton').onclick = function () {

  // Get an initial value of progress bar
  let initialValue = document.getElementById('progressBar').value;

  // Interval function which decrease the value of the progress bar by 1 every 200 milliseconds
  let z = setInterval(function () {
    // Decrement the initialValue by 1 every 0.2 sec
    initialValue -= 1;

    // Assigning the new value to the "progresBar" element
    let newValue = document.getElementById('progressBar').value = initialValue;

    // Conditional statement which changes the image and add adds an animation
    if (newValue == 0) {



    }

  }, 200);

}

Step 7 - changing the image and the background color

When the counting is finished we want to replace the image of the bomb with the image of the explosion. We will do it by changing the src attribute of the image.

We also want the change the color of the background to red (for more dramatic effect of course).

JavaScript

// Launch a function with onClick event
document.getElementById('boomButton').onclick = function () {

  // Get an initial value of progress bar
  let initialValue = document.getElementById('progressBar').value;

  // Interval function which decrease the value of the progress bar by 1 every 200 milliseconds
  let z = setInterval(function () {
    // Decrement the initialValue by 1 every 0.2 sec
    initialValue -= 1;

    // Assigning the new value to the "progresBar" element
    let newValue = document.getElementById('progressBar').value = initialValue;

    // Conditional statement which changes the image and add adds an animation
    if (newValue == 0) {

      // Change src attribute of the image
      let img = document.getElementById('bombImg').src = 'https://pixfeeds.com/uploads/images/1/44/5296534-1280_936338912-nuclear-bomb-detonation.jpg';

      // Change the background color of the body
      document.body.style.backgroundColor = "red";

    }

  }, 200);

}

Step 8 - animation

To animate any HTML element (in this case an element with an ID "containerID") we just need to add a specific classes to it.

JavaScript

// Launch a function with onClick event
document.getElementById('boomButton').onclick = function () {

  // Get an initial value of progress bar
  let initialValue = document.getElementById('progressBar').value;

  // Interval function which decrease the value of the progress bar by 1 every 200 milliseconds
  let z = setInterval(function () {
    // Decrement the initialValue by 1 every 0.2 sec
    initialValue -= 1;

    // Assigning the new value to the "progresBar" element
    let newValue = document.getElementById('progressBar').value = initialValue;

    // Conditional statement which changes the image and add adds an animation
    if (newValue == 0) {

      // Change src attribute of the image
      let img = document.getElementById('bombImg').src = 'https://pixfeeds.com/uploads/images/1/44/5296534-1280_936338912-nuclear-bomb-detonation.jpg';

      // Change the background color of the body
      document.body.style.backgroundColor = "red";

      // Add an shake animation to the 'containerID' element
      let element = document.getElementById("containerID");
      element.classList.add("animated", "shake");

    }

  }, 200);

}

Note: If you have finished MDBootstrap tutorial you should be already familiar with MDB Animations. However, if you haven't, have a look at MDB Animations docs and examples. There you can find all the available animations and detailed instructions how they work.

Step 9 - displaying hidden elements

If you click on the button you will notice that our progress bar and image aren't visible. That's because its parent element is hidden. It has .d-none class which makes it invisible.

To make it visible we have to add a class d-block.

JavaScript

// Launch a function with onClick event
document.getElementById('boomButton').onclick = function () {

  // Get an initial value of progress bar
  let initialValue = document.getElementById('progressBar').value;

  // Interval function which decrease the value of the progress bar by 1 every 200 milliseconds
  let z = setInterval(function () {
    // Decrement the initialValue by 1 every 0.2 sec
    initialValue -= 1;

    // Assigning the new value to the "progresBar" element
    let newValue = document.getElementById('progressBar').value = initialValue;

    // Conditional statement which changes the image and add adds an animation
    if (newValue == 0) {

      // Change src attribute of the image
      let img = document.getElementById('bombImg').src = 'https://pixfeeds.com/uploads/images/1/44/5296534-1280_936338912-nuclear-bomb-detonation.jpg';

      // Change the background color of the body
      document.body.style.backgroundColor = "red";

      // Add an shake animation to the 'containerID' element
      let element = document.getElementById("containerID");
      element.classList.add("animated", "shake");

    }

  }, 200);

  // Display an image by adding 'd-block' class
  let element = document.getElementById("hiddenBomb");
  element.classList.add("d-block");
}

Note: If you are not familiar with Bootstrap display and hidden classes, have a look at our Display utilities docs.

That's it! Congratulations, you have finished the tutorial

The entire code is available here:

FINAL CODE

Write

Details of the article

Category: Miscellaneous
Specification: MDBootstrap + pure JavaScript

About author

Michal Szymanski

20 6 projects

69 articles score 7 topics

Pro