Welcome back to {Kids: Code} for another week of our free newsletter! In this issue we’re going to talk about how to add animations to our JavaScript code from last week. Later on, we also have some fun resources from Scratch to help celebrate Juneteenth, a great deal from Humble Bundle, and a couple of interesting news stories from the world of computers.
As always, if you have any questions you can feel free to reach out to us or check us out on Twitter!
Last week, we took a look at how to add some JavaScript to our page to change the color of our header text when a button is clicked. This week is a short (but fun) tutorial: let's animate the change!
The HTML
When we left off in our last issue, we had built our website using the following HTML code:
<!DOCTYPE HTML>
<html>
<head>
<title>My Website</title>
<link rel="stylesheet" type="text/css" href="styles.css" />
</head>
<body>
<h1 id="header">Welcome to my Website!</h1>
<p>Your own text here</p>
<button id="button">Show Message</button>
<script src="scripts.js"></script>
</body>
</html>
And our CSS code, in styles.css:
h1 {
color: red;
background-color: blue;
}
.bluetext {
color: blue;
}
And our JavaScript, in scripts.js:
var button = document.getElementById('button');
var h1 = document.getElementById('header');
button.addEventListener('click', function() {
h1.classList.toggle("bluetext");
}, false);
Animating in CSS
CSS is full of tricks and tools, and one of the most fun to play around with is animations. You can animate most CSS properties, and the amount of code needed is often just a few lines. We'll go over writing some basic animations here, and in next week's issue, we'll cover more advanced animation topics.
Writing an Animation
Animation code has a few pieces. The ones we need to write some basic animations are:
transition-duration
, or how long it goes on for.transition-property
, which is the property we want to animate.
So, what should we animate? Like we said earlier, we're able to animate most CSS properties. Let's animate the background color change that happens when we click our button!
When defining an animation, we want to define it on the base class - that way, anything that gets applied afterwards will animate. This means we want to set our background-color
animation on our <h1>
, by adding transition-duration
and transition-property
, like so:
h1 {
color: red;
background-color: blue;
transition-duration: 1s;
transition-property: background-color;
}
Save your changes, reload your browser, and click your button. Your background color change should be smoothly animated now!
In celebration of Juneteenth, Scratch Studio has made a page dedicated to all the different projects have made to honor the holiday! You can check out the different projects here and even think of making your own.
From now until June 30th, Humble Bundle is offering a great deal on the Learn Coding to Build Games 2021 bundle made by Zenva. This offer gets you $1,250 worth of wonderful tools to build games and scratch that coding itch for only $25! Plus, money spent on this bundle will go towards such organizations and charities like Code.org, Girls Who Code, and It Gets Better Project.
A K-12 school gets an e-sports team
The Southern University Laboratory School (SULS), located in Baton Rouge, Louisiana, has put together a rather interesting program in the past year - an e-sports team! If you’re not familiar, e-sports is a popular hobby dedicated to competing with and against others in video games. One such video game enthusiast ended up working at SULS and not only teaching about video games but also coaching their e-sports team by promoting teamwork, health and exercise, and supporting the students’ love for STEM and media. You can read more about this experiment here!
How computers are changing the future of… tractors?
In a recent article at The Verge, Nilay Patel talked with the Chief Technology Officer of John Deere (you’ve probably seen their green and yellow tractors around!) about what the future of the company looks like with the rise of technology. You can read or listen to the interview here (it’s a bit of a long one!) and see an example of how one company that has usually been very mechanical with their products is now learning to use computers, artificial intelligence, and more to keep up with our changing world. If you look around, you’re likely to find a lot more examples of this, too!
This Week’s Vocabulary Word
Animation
Gradually changing the appearance of an element over time.