Chapter 17 - Weather Forecast

The project for Chapter 17 of JavaScript for Kids For Dummies by Chris Minnick and Eva Holland.

by Phoebe Jeske

HTML

<div id="5DayWeather"></div>

CSS

#Monday, #Tuesday, #Wednesday, #Thursday, #Friday {
    width: 18%;
    height: 200px;
    float: left;
    border: 1px solid black;
    padding: 2px;
    font-family: sans-serif;
    font-size: 12px;
}
.Sunny {
    background-color: skyblue;
}
.Raining {
    background-color: lightgrey;
}
.Cloudy {
    background-color: #eee;
}
.Thunderstorm {
    background-color: #333;
    color: #fff;
}

JavaScript

var days = ["Monday", "Tuesday", "Wednesday", "Thursday", "Friday"];
var weather = ["Sunny", "Partly Sunny", "Partly Cloudy", "Cloudy", "Raining", "Snowing", "Thunderstorm", "Foggy"];
var maxTemp = 100;
var minTemp = 0;

generateWeather();

function generateWeather() {
    for (var i = 0; i < days.length; i++) {
        var weatherToday = weather[Math.floor(Math.random() * weather.length)];
        var tempToday = Math.floor(Math.random() * (maxTemp - minTemp) + minTemp);
        document.getElementById("5DayWeather").innerHTML += "<div id='" + days[i] + "' class='" + weatherToday + "'><b>Forecast for " + days[i] + ":</b><br><br>" + weatherToday + " and " + tempToday + " degrees.</div>";
    }
}