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

Michal Szymanski
staffpropremiumpriority posted 3 years ago
Introduction
In this tutorial, you will learn how to launch an animation in a creative way.
SEE THE FINAL RESULTYou 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 CHALLENGERequirements
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 TUTORIALSTART MDBOOTSTRAP TUTORIALUseful resources
MDBOOTSTRAP ANIMATIONS EXAMPLESLet'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.
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.
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)
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.
Step 5 - newValue
Now we need a statement, which will be executed every 0.2 sec and decrement the initialValue
by 1.
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.
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).
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.
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
.
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- Category: Miscellaneous
- Specification: MDBootstrap + pure JavaScript