Mid-Unit Practice
So far we can...
Load a JavaScript code file in the browser using the HTML code <script src="main.js" defer></script>
Print output to the console with console.log();
Store and manipulate data using variables let my_name = "Mr. Squirrel";
Understand that Strings and Numbers are two different things
Strings can be concatenated using the `+` operator
We can make templates to insert values into sentences: `I am ${age} years old.`
Get user input with let my_variable = prompt("Message");
Do all sorts of maths like x**3, Math.round(x); and Math.floor(Math.random() * 10) + 1;
Potentially convert a string to a number with Number(x); or the shortcut +x;
Create our own functions to use whenever we want!
function circle_area() {
let radius = +prompt("What is the radius of the circle?");
let area = Math.PI * radius**2;
console.log(`The area of the circle is ${area}`);
}
Practice! (use your 2.4 playground for this)
The best way to learn is to be curious and practice. Here are some ideas to try:
Create a function that asks the user for a top value to generate a random number from 1 to their value.
Declare a variable volume and set it to 5. Declare it at the top of the code file, not inside any function.
Create the function show_volume() that prints the current value of volume to the console.
Create the function volume_up() that increase the volume by 1
Create the function volume_down() that decreases the volume by 1
Go to the console and run volume_up() and/or volume_down() a few times and then call show_volume()
Modify your volume_up() and volume_down() functions so that the new volume is printed to the console using the show_volume() function.
Create the function random_volume() that sets volume to a random value from 1 to some number you choose (maybe 10 or whatever).
3. Create the function born_in() that asks the user for their current age and prints out the year that they were (probably) born - it depends on the month of their birthday, but let's just assume...
4. Reach ahead in the course by connecting your HTML to your JavaScript!
Write some roll_dX() functions that roll dice of size 4, 6, 8, 10, 12, 20 (etc)
Find pictures of these dice and add them to your HTML page (using the appropriate images folder, etc)
Inside your <img> tag for the 6-sided die, add the option onclick="roll_d6()" like this:
<img src="images/d6.png" onclick="roll_d6()">
Go click the image of the d6 a few times and check your console.