Objects

What you'll learn

In this activity, you will:

• Create JavaScript objects with properties
• Access object properties using dot notation
• Modify object values dynamically
• Create object methods using arrow functions
• Build an interactive light bulb toggle using objects

:warning: IMPORTANT: Before You Start

DO NOT DELETE the existing files in the template:

• Package files
• Any other files you didn't create

ONLY EDIT the necessary files.

• In each exercise below, click the Stackblitz link and and familiarize yourself with the interface.

Steps to Create Your Object Projects

Total Activity Time: 45-60 minutes

• Exercise One: 10-15 minutes
• Exercise 2: 15-20 minutes
• Exercise 3: 20-25 minutes

:computer: Exercise One: Basic Object Creation and Property Access

Time: 10-15 minutes

1. Open StackBlitz and access the template: Exercise 1
2. Alternative: Download the source code template from Stackblitz using the Download Project button if you prefer to use your IDE.

Steps to complete:

1. Create an object called myPet with 2 properties:
   • animal (e.g., "dog", "cat", "hamster")
   • name (e.g., "Buddy", "Whiskers", "Nibbles")
2. Use console.log() to display the animal property
3. Use console.log() to display the name property

tip Use dot notation to access object properties: myPet.animal or myPet.name

Example object structure:

var myPet = {
  animal: "your_choice",
  name: "your_choice"
};

If you have done it correctly, it should look like this in the browser console (F12):

Assuming the value of the animal property is "pug" and the name is "Maya".

:computer: Exercise 2: Object Property Modification

Time: 15-20 minutes

1. Open StackBlitz and access the template: Exercise 2
2. Alternative: Download the source code template from Stackblitz using the Download Project button if you prefer to use your IDE.

Challenge: Change the values in an object without directly changing the given object code

script.js

var movie = {
  name: "Luca",
  release: "June 18, 2021",
  genre: "Comedy/Adventure",
  duration: "1h 35m",
  director:"Enrico Casarosa"
};

Steps to complete:

1. Copy the above code to your script.js file
2. Choose another movie you enjoy
3. Change all property values after the object is created:
   • name
   • release
   • genre
   • duration
   • director
4. Use console.log(movie) to display the modified object

tip Modify properties using dot notation after the object is created:

movie.name = "Your New Movie";
movie.release = "New Release Date";
// ... and so on

If you have done it correctly, it should look like this in the browser console (F12):

Assuming the movie is "Raya and the Last Dragon".

tip If there are multiple directors for the movie, you can assign an array:

movie.director = ["Director 1", "Director 2"];

:computer: Exercise 3: Object with Methods - Light Bulb Toggle

Time: 20-25 minutes

1. Open StackBlitz and access the template: Exercise 3
2. Alternative: Download the source code template from Stackblitz using the Download Project button if you prefer to use your IDE.

Goal: Create a light bulb object with a toggle method that switches between On/Off states

Steps to complete:

1. Select the button element:

   javascript

   var lightBtn = document.querySelector('button');
   

2. Create the light object with these properties:

   • Property on: set to false
   • Property toggle: an arrow function that:
     • Toggles the state: light.on = !light.on;
     • Updates button text and styling based on state

3. Inside the toggle arrow function:

   javascript

   if (light.on) {
     lightBtn.textContent = "On";
     lightBtn.classList.replace("btn-dark", "btn-warning");
   } else {
     lightBtn.textContent = "Off";
     lightBtn.classList.replace("btn-warning", "btn-dark");
   }
   

4. In index.html, add onclick to the button:

   html

   <button onclick="light.toggle()">Off</button>
   

tip Arrow function syntax for object methods:

var light = {
  on: false,
  toggle: () => {
    // your code here
  }
};

:information_source: Info Helpful Resources

• classList.replace(): Replaces one CSS class with another - MDN Documentation
• onclick attribute: Runs JavaScript when an element is clicked - W3Schools Reference

It should look like this before you click on the button:

After you click on the button:

If you click on the button again:

Required Elements

Make sure your Object projects include:

• Exercise 1: Object creation with properties and proper property access using dot notation
• Exercise 2: Object property modification without changing original object code
• Exercise 3: Object with method using arrow function, DOM manipulation, and interactive button toggle
• All objects should use proper syntax with curly braces
• Use of dot notation to access and modify object properties
• Object methods should be callable and functional
• Integration with HTML elements and CSS class manipulation

Troubleshooting Common Issues

• Object properties not displaying: Check that you're using dot notation correctly (e.g., myPet.name not myPet[name])
• Button not toggling: Ensure you've added onclick="light.toggle()" to your HTML button
• CSS classes not changing: Verify that both btn-dark and btn-warning classes exist in your CSS
• Console errors: Open browser console (F12) to check for syntax errors in your object declaration

Project Submission

:warning: Important! Test all your exercises before submitting:

• Exercise One: Both properties should log to console
• Exercise 2: All movie properties should be updated
• Exercise 3: Button should toggle between On/Off states

When you have completed all three Object exercises, submit them using the link below:

Submit Your Projects Here