JavaScript Webpage Workout - M1 Lesson 2 Warm-up

This lesson follows Lesson 1. Please do that lesson first for this exercise to make more sense.

📺 Also available as a video.

Let’s keep practicing the sequence of creating something, accessing its location on the webpage then manipulating it via user interaction. Let’s play around with a simple DIV element by altering its shape with buttons.

Create

Make a div with an id of myShape and a class of shape.

<div id="myShape" class="shape"></div>

Add some CSS to style the div into a square shape centered on the web page.

body {
  width: 100vw;
  height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background-color: #000;
}

#myShape {
  width: 200px;
  height: 200px;
  margin: 1rem;
  background-color: goldenrod;
  border: 1px solid white;
  cursor: pointer;
}

Access

Next, access the div with Javascript, store it in a variable myShape, then console.log the variable.

querySelector() and getElementById()

In Lesson 1 you learned the method getElementById() but here’s another method you can use called querySelector(). It has a similar effect as getElementById() but its more flexible because it can ACCESS the element we created <div id="myShape" class="shape"></div> by its HTML tag name, id, class name, and other attributes. It uses the same syntax as CSS! For example, we can style this element with CSS by making a CSS rule for div or #myShape or .shape.

div {
  background-color: goldenrod;
}

/*or*/
 
#myShape {
  background-color: goldenrod;
}

/*or*/
 
.shape {
  background-color: goldenrod;
}

We can access this element with JavaScript by doing the same but with this JS syntax below.

const myShape = document.querySelector('#myShape');

// or

const myShape = document.querySelector('div');

//or

const myShape = document.querySelector('.shape');

For this project, we’ll use the querySelector() method with the argument #myShape.

With getElementById() we don’t need to use the # just the name of the id getElementById('myShape). But with querySelector() you have to include the id or class characters (i.e. # or .).

const myShape = document.querySelector('#myShape');

console.log(myShape);
// returns "<div id='myShape' class="shape"></div>"

Go back to the CSS and add a border-radius of 50% to the #myShape rule. You’ll see the square turn into a circle.

#myShape {
  width: 200px;
  height: 200px;
  margin: 1rem;
  background-color: goldenrod;
  border: 1px solid white;
  border-radius: 50%; /* You will later use this in your JS */
}

Our goal is to click on the square and make it change to a circle. So remove the border-radius property you just added to #myShape. We will add this property with Javascript. Just remember to change border-radius to borderRadius and replace the colon with the assignment operator =.

MANIPULATE

Begin with the myShape variable then add and assign the style of the border-radius property to ‘50%‘.

const myShape = document.querySelector('#myShape');

myShape.style.borderRadius = "50%";

You should see it change to a circle on the web page.

Now, we just need to add this expression to a function we will call makeCircle. We’ll cut and paste our borderRadius expression into the function’s code block.

function makeCircle() {
  myShape.style.borderRadius = "50%";
}

The circle on the web page should be back to a square again.

Now, use the addEventListener() method on the myShape variable with a click event and the event handler makeCircle as the arguments.

myShape.addEventListener('click', makeCircle);

Click the square and it should quickly change to a circle.

Create (again)

Now, back to the HTML section, let’s add two more buttons under the DIV section: one with an id of ‘circle’ and text content of ‘CIRCLE’ and another with an id of ‘square’ and text content of ‘SQUARE’. Give both buttons a class attribute with a value of ‘btn’.

<!-- make a button to make square -->
<button class="btn" id="square-btn">SQUARE</button>

<!-- make a button to make circle -->
<button class="btn" id="circle-btn">CIRCLE</button>

Let’s add some CSS to our button. Make a rule for the btn class and its pseudo classes hover and active states with the following:

.btn {
  width: 12.5rem;
  padding: .5rem 1.5rem;
  margin: .5rem;
  border: 1px solid white;
  background-color: #c5b95f;
  cursor: pointer;
  font-size: 1.3rem;
  font-weight: bold;
  outline: none;
}

.btn:hover {
  background-color: #f9f19c;
  box-shadow: inset 0 0 5px black;
}

.btn:active {
  background-color: black;
  color: #f9f99c;
  box-shadow: inset 0 0 5px white;
}

ACCESS (again)

Next, access the buttons with Javascript, storing one in a variable circleBtn and the other in the variable squareBtn. console.log both to see what you get.

const circleBtn = document.querySelector('#circle-btn');
const squareBtn = document.querySelector('#square-btn');

console.log(circleBtn);
console.log(squareBtn);
// returns "<button class='btn' id='circle-btn'>CIRCLE</button>"
// returns "<button class='btn' id='square-btn'>SQUARE</button>"

MANIPULATE (again)

You’ve already made the event handler function for makeCircle so just create the makeSquare event handler function which will undo the borderRadius of “50%” and assign it back to “0%“.

function makeSquare() {
  myShape.style.borderRadius = "0%";
}

Use the addEventListener() methods with the two buttons you created both listening for click events to invoke the two handler functions you created.

circleBtn.addEventListener('click', makeCircle);
squareBtn.addEventListener('click', makeSquare);

Note about organizing your code

• Your ACCESS expressions can go at the top of the page
• all of the MANIPULATE stuff (event handler functions) can be in the center of the Javascript file

• all of the EVENTS AND LISTENERS can be at the bottom of your Javascript file.

  ---

Now, click both buttons and watch the DIV element quickly change from square to circle back to square.

Let’s add a property to the #myShape CSS rule to help make the transition smoother. Add a transition property set to ‘border 1s ease-in’.

#myShape {
  width: 200px;
  height: 200px;
  margin: 1rem;
  background-color: goldenrod;
  border: 1px solid black;
  transition: all 1s ease-out; /* Add this */
}

It looks a lot better with the slower, smoother transition.

Keep practicing! Go on to Lesson 2 exercise 1.

This blog lesson in video format.

Keep practicing! Go on to exercise 1 of Lesson 2.