Teaching / Intro to Creative Web Dev / If Statements - Week 04

If Statements - Week 04


Welcome to week 4 of Intro to Creative Web Dev!

Now you know how to create your own variables. This week you’ll learn about if statements, which let you make decisions in your code.

Work through the activities in this page to complete the week!


If Statements

First, read through this tutorial:


Project

Now you know how to use if statements to make decisions in your code.

To practice that, create a p5.js sketch that contains at least five if, else if, or else statements.

Try using the month() and day() functions to draw different things based on the current date, or the hour() and minute() functions to draw different things based on the current time.


Your sketch must run without any errors. Your sketch must contain at least five if, else if, or else statements.

For example:

function setup() {
  createCanvas(400, 400);
  textAlign(CENTER);
  textSize(36);
}

function draw() {
  background(220);

  let currentSecond = second();

  if(currentSecond == 0) {
    text('New minute!', width / 2, height / 2);
  } else if(currentSecond == 30) {
    text('Halfway there!', width / 2, height / 2 );
  } else {
    text(currentSecond, width / 2, height / 2);
  }
}

This code contains an if statement, an else if statement, and an else statement that draws different things based on the seconds in the current time. That’s 3 out of the 5 required statements.

Get your code working with hard-coded variables first. Test that your if, else if, and else statements work with different values for your variables. When you get that working, set your variables based on the date or time functions.