JavaScript Webpage Workout - M1 L1 Exercise 2

July 09, 2020

This exercise follows exercise 1 of Lesson 1. Please do that exercise first for this exercise to make more sense. You can find the beginning of Lesson 1 here.

📺 This lesson also available as a video.

Now that you’re understanding the CAMEL sequence more, here’s another exercise to help get it under your fingers.

But first, a quick note about using the style property. It’s very straight-forward how to use single word style properties: style.color, style.width, style.margin, etc. As you know in CSS there are also hyphenated properties such as text-shadow, text-transform, background-color. When using those properties in JavaScript, they must be camelCased: style.textShadow, style.textTransform, style.backgroundColor, etc.

Lastly, all these style properties evaluate to a string using JavaScript, even the shorthand properties where we may list 2 or more values. If your styles are not working in JavaScript then check to see if you included the "".

#text {
  margin: 20px 10px 5px 3px;
  box-shadow: 2px 0 5px black;
}

  myParagraph.style.margin = "20px 10px 5px 3px";
  myParagraph.style.boxShadow = "2px 0 5px black";

Try these exercises.

make a button that when clicked adds a 1px solid black border around the paragraph
make a button to remove the black border around the paragraph

CREATE - ACCESS - MANIPULATE - EVENTS - LISTENERS

This blog post lesson in video format.

Lesson 1 Exercise 2

You can compare your work with mine here at CodePen or watch the video.

Keeping practicing! Go on to Exercise 3.