JavaScript animation Workshop Le Wagon Melbourne

1. wifi
name 👉 Inspire9
password 👉 community9
set-up
Install Google Chrome / Firefox 💪
(no Internet Explorer / Safari)

2. Modify a web page
with Javascript
@juliet_tech

3. Objectives
- Understand the differences
between JS and other
programming languages
- Run JS in the console
- Understand what the DOM is and
how you can modify it

4. So…
What is Javascript?

5. JS is executed in the browser.
It is the only language that does this.

6. How does the web work?

7. The browser parses the
HTML and creates the DOM
from it

8. The DOM is a tree, with a root,
leaves and nodes

9. JS can change the DOM

10. You can run JS code in your
browser

11. Let’s change the Google DOM

12. (1) Find the element you need in
the inspector - HTML

13. (2) Select the elements you want in
the console - JS
document.getElementById(“”)
document.querySelectorAll(“”)
document.querySelector(“”)

14. Selectors
HTML JS
<tag></tag> ‘tag’
id=“id-name” ‘#id-name’
class=“class-name” ‘.class-name’
class=“class1 class2” ‘.class1.class2’

15. Change the style
document.getElementById(“TZA4S”).style.background
Color=“red”;

16. 1. declaring the
variable
firstName
2. assigning a
value
“Julie”
firstName
3. Using the
variable
firstName
“Julie”
Variables?
const firstName = “Julie”

17. Use variables
background.style.backgroundColor=“red”;
const background = document.getElementById(“TZA4S”);

18. Change the content
Have a look at the documentation:
- innerText
- insertAdjacentHTML
- href

19. 2 ways to change the DOM
Dynamic:
- Select elements
- Put listeners
- Trigger actions
Static:
- Select elements
- Change the style
- Change the content

20. Functions /
Methods?

21. Example 💪
function sayHey(firstName, lastName) {
const hello = “Hey there “ + firstName
+ “ “ + lastName;
return hello;
};
sayHey(“Juliette”, “Chevalier”)
=> “Hey there Juliette Chevalier”

22. Syntax for EventListeners

23. Change the color on click

24. arrays

25. arrays
students[0] = ?
students[1] = ?
students[2] = ?

26. Select several elements and store
them in an array

27. const inputs =
document.querySelectorAll(‘input’)
inputs.forEach((input) => {
input.style.backgroundColor = ‘red’
}
Add design for each item inside
the array

28. Your turn!
The following slides are
resources for pair
programming.
@juliet_tech

29. Go to https://www.lewagon.com/
and change:
- the backgroundColor of the main
title to ‘red’ or any HEX color
- the “Change your life…” to “I am
changing your website”
Exercise 1

30. Now let’s try:
- Changing the main image to
another image of your choice
- Increasing the size of the font of
the main title and sub-title
Exercise 2

31. Change all the titles of the cards in
the next section so that they all say
“Same thing” rather than “#1”,
“4170+” & “1110+”.
Exercise 3

32. Put an event listener on an element
• change the backgroundColor of
an element to “purple” when you
hover it (check ‘mouseover’
listener in the JS documentations)
Exercise 4

33. Change a bit your function, so that
when you hover an element that is
already red you turn it back to blue,
and viceversa.
* check out ‘mouseenter’ in JS docs
Exercise Bonus

34. Create a function that give you a
random color. Then, call this
function in many eventListeners
around your page to change the
color of their font and/or
backgroundColor.
Exercise Bonus

35. Brings technical skills
to creative people
@juliet_tech
@lewagonmelbourne