Illustrate the concepts of synchronous and asynchronous execution with callbacks and promises.
This exercise also introduces build tools like jshint, browserify and node-sass and the package.json
script object.
An asynchronous execution happens when the result of a function call is not immediatly returned (e.g.: fetch() or XMLHttpRequest). In those case, the script needs an other function to handle the rest of the process. It is a very common thing in modern JavaScript because it always happens when you make a request to a server or ask a user the permission to access some browser features.
In this exercise, we will simulate the asynchronous execution by using setTimeout()
and setInterval()
.
Sometimes, you have to work with events, which will use object.addEventListener('<name-of-the-event>', callbackFunction)
.
It has some similarities in the sense of that the callbackFunction
is called when an event happens.
Note: after the completion of each steps, you should make a commit with the name of the step (and push it).
- Create a new repository called
loader-simulation
, in the.gitignore
option, select "Node", and clone it locally. - With your terminal, go in the folder of the exercise and initialize a npm package (using the
npm init
command). - Once the npm initialization wizard is finished, edit the
package.json
which has been created by npm and add"private": true,
at the beginning of the file. - Create the
index.js
,style.scss
and anindex.html
file.
In your HTML file, instead of includingindex.js
, you will usebundle.js
Don't forget to add a link tag to loadstyle.css
(notstyle.scss
!). - Install browserify, jshint, mkdirp and cp with npm using the command
npm i --save-dev node-sass browserify mkdirp cp
- In your
package.json
add ascript
calledprebuild
withmkdirp docs && cp index.html docs/
. - Again, in your
package.json
, add ascript
calledbuild
withbrowserify index.js -o docs/bundle.js && node-sass style.scss docs/style.css
. - Run the following command to create the
bundle.js
file:npm run build
.
- In your
style.scss
file add a selector.loader
with- a
#999
background color. - a maximal width of
300px
- a height of
24px
- rounded corners (so that the left and right sides of the element look like 2 half circles)
- a
- Again in your
style.scss
, inside the declaration of.loader
, add declaration for the.progress
selector with:- a
#333
background color - margins of
2px
- a
- In your HTML file, create a
div
element with the classloader
. - Inside the
div.loader
, create an otherdiv
element with the classprogress
Result CSS
The resulting CSS should look like:
.loader {
/* loader styles */
}
.loader .progress {
/* loader progress styles */
}
- Edit your
package.json
and add"simulate-progress": "zeropaper/xt-simulate-progress"
to thedevDependencies
- Run
npm i
(this will install the install the new dependency) - In your
index.js
add loadsimulateProgress
usingvar simulateProgress = require('simulate-progress');
. - Build your project (
npm run build
)
_Note: It is rare (but it happens) that you will have to add a dependency like that (GitHub "username/repository-name").
- Create a function called
progressCallback
.
This function takes 1 argument calledpercent
and changes the side of the.progress
(to reflect the percentage loaded). - Create a function called
finishCallback
which adds a classfinished
to the.loader
. - Create a function called
startSimulation
which- Removes the
finished
class on the.loader
- Calls the
simulateProgress
function with theprogressCallback
andfinishCallback
functions as arguments.
- Removes the
- Call the
startSimulation
function.
The styles are not so great, change them to:
- Make it so that the
.loader
takes the same shape as.progress
but slightly smaller so that 2px of the.progress
element are visible (on every sides). - Add a
.finished
rule so that it turns the background color of the.progress
to green. - Set the width of the
.progress
to0%
by default
- Add the
jshint
(versionlatest
) to thedevDependency
of yourpackage.json
and runnpm i
. - Add
jshint
to yourprebuild
script (beforemkdirp
using&&
) - In your
index.js
add the following comment at the top of your file:/* jshint browserify: true */
.
This comment instructs jshint to consider the file to be used with browserify.
- Create a
.travis.yml
file with the following contentdist: trusty language: node_js node_js: - "8"
- Change the
test
script of yourpackage.json
tojshint index.js
(normally, we would using a testing tool, but for now, we only do linting). - Go on travis-ci site, register and add the repository of this exercise.
- Add the
uglify-js
to thedevDependency
of yourpackage.json
and runnpm i
. - Add a
postbuild
script to yourpackage.json
in which you you useuglify
to minify the compileddocs/bundle.js
.
- Remove the
startSimulation
function call. - Put the
.loader
element inside adiv
- Add a button next tho the
.loader
element (inside thediv
you just created). - Add a
click
event listener to the button which will call thestartSimulation
. - Duplicate the
div
you created and make changes to your JavaScript so that when the buttons are clicked they animate their respective progress bar.
UsequerySelectorAll
andforEach
, use IDs is NOT ALLOWED 😋
It is not really elegant to have your source files (index.js
, index.html
and style.scss
) at the root of your project.
- Create a folder
src
and move your source files inside it. - Make the necessary changes to your
package.json
.