Weather

by Kanatantsin

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 Cloudly", "Cloudly", "Raining", "Snowing", "Thunderstorm", "Foggy"];

var minTemp = 0;
var maxTemp = 100;

generateWeather();

function generateWeather() {
  for (var i = 0; i < days.length; i++) {
    var weatherToday = weather[Math.floor(Math.random() * weather.length)];
    
let 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>";
  }
}