Middle School Project

Welcome to the “Future Innovators: Cool STEM Projects to Change the World” series! Today, we’re going to create a Smart Mirror using Scratch or a simple web browser-based tool that will show you the time, weather, and even give you a compliment. This project is perfect for middle school students who want to explore cool technology but without needing complicated coding. You’ll learn how to build a virtual smart mirror right on your computer!

By the end of this project, you’ll have a virtual assistant-style mirror that’s fun to customize. You can use it to see the time, get real-time weather updates, and even get a compliment while you get ready for school.

What You Will Learn

  • How to use Scratch or a simple web-based tool to create a virtual mirror.
  • How to fetch live data, such as the weather, using easy online tools.
  • How to customize your Smart Mirror by adding different features like time and compliments.

STEM Learning Process

1. Science: Explore how computers display data like weather and time from the internet.
2. Technology: Learn how to create an interactive virtual mirror that fetches real-world data.
3. Engineering: Build a functional digital mirror interface that looks sleek and futuristic.
4. Math: Practice organizing information like time and weather and displaying it in a logical way.

What You Need

  • A computer with internet access.
  • Scratch account (free): Sign up at scratch.mit.edu.
  • Weather API: We’ll use a simple web tool to get real-time weather data for your virtual mirror.

Option 1: Build Your Smart Mirror Using Scratch

Step 1: Sign Up for Scratch

If you don’t have a Scratch account yet, visit scratch.mit.edu, click Join Scratch, and sign up for a free account. This will allow you to save your projects and share them.

Step 2: Create a New Project

Click Create to start a new project in Scratch.

Step 3: Choose a Sprite

The “sprite” in Scratch is your character or object. For your Smart Mirror, you can use any sprite, but it would be cool to make your own mirror-themed sprite (like a rectangle or a screen). If you want, you can also use the default Cat sprite and pretend it’s your mirror assistant.

Building the Smart Mirror in Scratch

Step 1: Set Up the Time

We want our Smart Mirror to display the time just like a real mirror assistant. You can use Scratch blocks to keep track of the time.

  1. Go to the Events section and drag the “When [green flag] clicked” block onto the workspace. This will make sure the program starts when the green flag is clicked.
  2. Go to the Sensing section and drag the “current [hour]” block onto the workspace. This block tells Scratch to keep track of the current hour.
  3. Create a new variable (under the Variables section) called time to store the current time.
  4. Use the “Set [time] to [current hour]” block to set the current hour, then display it using a “say [ ] for 2 seconds” block from the Looks section.

You can now display the current time when the program starts!

Step 2: Fetch the Weather

For now, we’ll simulate weather using a simple dropdown list in Scratch to choose from different weather conditions (sunny, cloudy, rainy). Later, you can learn how to fetch live weather data.

  1. Create a new variable called weather.
  2. Set the weather to a random condition using the “pick random [1] to [3]” block. For example:
  • 1 = sunny
  • 2 = cloudy
  • 3 = rainy
  1. Use an if-else block to say the weather based on the value of the weather variable:
  • If weather = 1, say “It’s sunny today!”
  • If weather = 2, say “It’s cloudy today!”
  • If weather = 3, say “It’s rainy today!”

Step 3: Add a Compliment

We’ll make the Smart Mirror give you a compliment every time you start the program.

  1. Go to the Looks section and use the “say [ ] for 2 seconds” block to display a compliment like:
  • “You look awesome today!”
  1. Add this block right after the weather block, so you get the compliment after checking the weather.

Step 4: Add an Interactive Button

You can create a button that lets you refresh the time and weather at any moment!

  1. Create a new sprite for the button (a simple rectangle with the word “Refresh”).
  2. Use the “When this sprite clicked” block to refresh the time, weather, and compliment when the button is clicked.

Option 2: Build Your Smart Mirror Using a Web-Based Tool

If you prefer not to use Scratch, you can create a virtual smart mirror in your browser using simple HTML, CSS, and JavaScript.

Step 1: Open an Online HTML Editor

Visit a free online HTML editor like CodePen or JSFiddle.

Step 2: Create the Smart Mirror Interface

We’ll create a simple web page that acts as a smart mirror by showing the time, weather, and a compliment.

  1. HTML Code:
    In the HTML section, write the structure for your mirror:
HTML
   <div class="mirror">
       <h1 id="clock">12:00</h1>
       <h2 id="weather">Weather: Sunny</h2>
       <h3 id="compliment">You look great today!</h3>
   </div>
  1. CSS Code:
    Style the mirror with some simple CSS to make it look sleek and modern:
CSS
   body {
       background-color: black;
       color: white;
       font-family: Arial, sans-serif;
       text-align: center;
       padding-top: 50px;
   }
   #clock {
       font-size: 60px;
   }
   #weather, #compliment {
       font-size: 40px;
   }
  1. JavaScript Code:
    Add functionality to display the current time and update the compliment every time the page is refreshed:
JavaScript
   function updateTime() {
       const clock = document.getElementById('clock');
       const now = new Date();
       clock.textContent = now.toLocaleTimeString();
   }

   function getCompliment() {
       const compliments = [
           "You look great today!",
           "You're awesome!",
           "Keep shining!",
           "You're doing amazing!"
       ];
       const compliment = compliments[Math.floor(Math.random() * compliments.length)];
       document.getElementById('compliment').textContent = compliment;
   }

   setInterval(updateTime, 1000); // Update time every second
   getCompliment(); // Display a random compliment when the page loads

Testing Your Smart Mirror

Test the Scratch Version

  1. Click the Green Flag in Scratch to start your Smart Mirror.
  2. Watch as the current time is displayed, followed by the weather and a compliment.

Test the Web-Based Version

  1. If you’re using an online HTML editor like CodePen, simply click Run to see the Smart Mirror in action.
  2. The current time will update every second, and you’ll get a new compliment each time you refresh the page.

Customize and Expand Your Smart Mirror

Here are some ideas to make your Smart Mirror even cooler:

1. Add a Temperature Display:

  • In Scratch, you can add another variable for the temperature and randomly set it between 15°C and 30°C.
  • In the web version, you can add a line to display the temperature using the Math.random() function for a random temperature.

2. Change the Background Based on Weather:

  • In Scratch, you can change the backdrop to match the weather (e.g., a sunny background for sunny weather).
  • In the web version, you can change the background color or image based on the weather conditions.

3. Add More Compliments:

  • Add a bigger list of compliments so you get a new one every time you interact with the mirror.

What’s Next?

Great job! You’ve built your very own Smart Mirror that displays the time, weather, and gives compliments. Keep experimenting with new features and make your mirror even smarter!

In our next project, we’ll build a virtual pet that you can feed, play with, and take care of, using Scratch. Stay tuned for more cool and fun STEM projects, released every week!

Resources and Additional Help

Categorized in:

STEM