High School Project

Welcome to another exciting project in the “Future Innovators: Cool STEM Projects to Change the World” series! In this tutorial, we’ll guide you through building a Smart Mirror—a futuristic device that not only reflects your image but also displays the weather, calendar events, news, and even gives you a compliment as you get ready for your day.

By the end of this project, you’ll have created an interactive home assistant embedded in a mirror, similar to what you see in sci-fi movies. This project involves coding, hardware setup (optional), and customizing the mirror’s interface. Let’s get started!

What You Will Learn

  • How to use HTML, CSS, and JavaScript to create a dynamic web interface for your Smart Mirror.
  • How to fetch and display live data such as weather, calendar events, and news headlines using public APIs.
  • Optionally, how to integrate the Smart Mirror with a Raspberry Pi to build a physical version.
  • How to customize the look and functionality of your Smart Mirror.

STEM Learning Process

1. Science: Explore how computer displays and sensors can interact with real-world data.
2. Technology: Learn how to code in HTML, CSS, and JavaScript to create a web-based smart device.
3. Engineering: Build a functional smart home assistant with a sleek user interface.
4. Math: Use basic data manipulation techniques to display weather, time, and other real-time information.

What You Need

Software Requirements:

  • A text editor (like VS Code, Sublime Text, or Notepad++).
  • A modern web browser (like Chrome or Firefox).
  • (Optional) Raspberry Pi to turn your project into a real smart mirror.

APIs and Libraries:

  • OpenWeatherMap API: For displaying weather data.
  • Google Calendar API: For integrating calendar events.
  • News API: For fetching news headlines.

Sign up for these free APIs:

How the Smart Mirror Works

At its core, the Smart Mirror is a simple web page that:

  1. Fetches real-time data like weather and news using APIs.
  2. Displays the time, date, and user information.
  3. Runs in full-screen mode on a computer or Raspberry Pi connected to a display behind a one-way mirror.

Step-by-Step Guide to Building Your Smart Mirror

Step 1: Set Up Your Project Folder

Start by creating a new folder on your computer called “SmartMirror”. Inside that folder, create three files:

  1. index.html – Your HTML file for structure.
  2. style.css – Your CSS file for styling.
  3. script.js – Your JavaScript file for functionality.

Step 2: Create the HTML Structure

Open the index.html file and add the basic structure for the mirror interface.

HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Smart Mirror</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class="container">
        <div class="time">
            <h1 id="clock"></h1>
        </div>
        <div class="weather">
            <h2 id="weather"></h2>
        </div>
        <div class="news">
            <h3>News Headlines</h3>
            <ul id="news"></ul>
        </div>
        <div class="compliment">
            <h2 id="compliment">You look amazing today!</h2>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

This file contains a basic layout with sections for the time, weather, news, and a daily compliment.

Step 3: Style the Mirror with CSS

Next, open your style.css file to add some styling for a clean and modern look.

CSS
body {
    background-color: black;
    color: white;
    font-family: 'Arial', sans-serif;
    margin: 0;
    overflow: hidden;
}

.container {
    text-align: center;
    padding-top: 50px;
}

.time h1 {
    font-size: 60px;
}

.weather h2, .compliment h2 {
    font-size: 40px;
}

.news h3 {
    font-size: 30px;
}

#news {
    list-style-type: none;
    padding: 0;
}

#news li {
    font-size: 24px;
    padding: 5px 0;
}

This makes the interface look sleek and modern, with a simple, minimalistic design that suits the futuristic style of a smart mirror.

Step 4: Add Functionality with JavaScript

Now for the fun part—let’s make the mirror dynamic. Open your script.js file to add JavaScript that will fetch data from APIs and update the interface in real time.

1. Displaying the Current Time

Let’s start by displaying the current time, updated every second.

JavaScript
function updateTime() {
    const clock = document.getElementById('clock');
    const now = new Date();
    const hours = now.getHours().toString().padStart(2, '0');
    const minutes = now.getMinutes().toString().padStart(2, '0');
    clock.textContent = `${hours}:${minutes}`;
}

setInterval(updateTime, 1000); // Update the time every second
updateTime(); // Initial call to set the time

2. Fetching the Weather

To display the weather, we’ll use the OpenWeatherMap API. Make sure you sign up for a free API key at OpenWeatherMap.

JavaScript
function getWeather() {
    const apiKey = 'YOUR_OPENWEATHERMAP_API_KEY';
    const city = 'New York'; // Change to your city
    const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&appid=${apiKey}`;

    fetch(url)
        .then(response => response.json())
        .then(data => {
            const weatherElement = document.getElementById('weather');
            const temperature = data.main.temp;
            const description = data.weather[0].description;
            weatherElement.textContent = `${city}: ${temperature}°C, ${description}`;
        })
        .catch(error => console.error('Error fetching weather:', error));
}

getWeather();

3. Fetching News Headlines

Use the News API to fetch the latest headlines.

JavaScript
function getNews() {
    const apiKey = 'YOUR_NEWS_API_KEY';
    const url = `https://newsapi.org/v2/top-headlines?country=us&apiKey=${apiKey}`;

    fetch(url)
        .then(response => response.json())
        .then(data => {
            const newsList = document.getElementById('news');
            newsList.innerHTML = ''; // Clear old news
            data.articles.slice(0, 5).forEach(article => {
                const li = document.createElement('li');
                li.textContent = article.title;
                newsList.appendChild(li);
            });
        })
        .catch(error => console.error('Error fetching news:', error));
}

getNews();

4. Adding a Daily Compliment

Finally, let’s give the user a random compliment each time they look at the mirror.

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

getCompliment();

Step 5: Testing Your Smart Mirror

Run Your Project:

  • Open your index.html file in a web browser (just double-click the file).
  • You should see the time, weather, news headlines, and a compliment displayed.
  • Every second, the time will update automatically.
  • Weather and news will be fetched in real-time from the APIs.

Customizing Further:

  • Change the city for weather updates by modifying the city variable in getWeather().
  • Change the number of news articles shown by modifying data.articles.slice(0, 5) to a different number.

Optional: Making a Physical Smart Mirror

To turn your project into a physical Smart Mirror, you can:

  1. Buy a One-Way Mirror: Purchase a two-way mirror (like the ones used in interrogation rooms) or make one using one-way film.
  2. Attach a Monitor: Place a computer monitor behind the mirror and run the Smart Mirror interface full-screen.
  3. Use a Raspberry Pi: If you want to make your Smart Mirror more compact and portable, you can use a Raspberry Pi to display your web interface on a monitor.

What’s Next?

Congratulations! You’ve built a Smart Mirror that displays the time, weather, news, and even compliments. You can continue customizing the mirror by adding new features like Google Calendar integration, to-do lists, or even voice commands.

That’s your high school Smart Mirror project—have fun building and customizing your very own futuristic mirror!

Categorized in:

STEM