forecast

In this example below you will see how to do a forecast with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by 0319AM, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright 0319AM ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>forecast</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <html>
  <head>
    <link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
    <link rel="stylesheet" href="https://s3.amazonaws.com/codecademy-content/projects/bootstrap.min.css">
    <link rel='stylesheet' href='style.css'/>
  
  </head>
  <body>
    <div class="main">
      <div class="container">
        <div class="row">
          <div class="col-sm-5 col-sm-offset-7">
            <h1>70&deg;</h1>
            <h2>5-day forecast</h2>
            <div class="forecast">
              
              <div class="day row">
                <div class="weekday col-xs-4">
                  <span class="glyphicon glyphicon-plus"></span>
                  <p>today</p>
                </div>
                <div class="weather col-xs-3">
                  <img src="https://s3.amazonaws.com/codecademy-content/projects/2/forecast/sun.svg">
                </div>
                <div class="weather col-xs-1">
                </div>
                <div class="high col-xs-2">
                  <p>68&deg;</p>
                </div>
                <div class="low col-xs-2">
                  <p>37&deg;</p>
                </div>
              </div>
              <div class="hourly row">
                <div class="col-xs-4">
                </div>
                <div class="col-xs-2">
                  <p class="hour">7AM</p>
                  <p><img src="https://s3.amazonaws.com/codecademy-content/projects/2/forecast/clouds.svg"></p>
                  <p class="temp">44&deg;</p>
                </div>
                <div class="col-xs-2">
                  <p class="hour">12PM</p>
                  <p><img src="https://s3.amazonaws.com/codecademy-content/projects/2/forecast/sun.svg"></p>
                  <p class="temp">68&deg;</p>
                </div>
                <div class="col-xs-2">
                  <p class="hour">5PM</p>
                  <p><img src="https://s3.amazonaws.com/codecademy-content/projects/2/forecast/sun.svg"></p>
                  <p class="temp">59&deg;</p>
                </div>
                <div class="col-xs-2">
                  <p class="hour">10PM</p>
                  <p><img src="https://s3.amazonaws.com/codecademy-content/projects/2/forecast/sun.svg"></p>
                  <p class="temp">46&deg;</p>
                </div>
              </div>


              <div class="day row">
                <div class="weekday col-xs-4">
                  <span class="glyphicon glyphicon-plus"></span>
                  <p>tomorrow</p>
                </div>
                <div class="weather col-xs-4">
                  <img src="https://s3.amazonaws.com/codecademy-content/projects/2/forecast/clouds.svg">
                </div>
                <div class="high col-xs-2">
                  <p>68&deg;</p>
                </div>
                <div class="low col-xs-2">
                  <p>37&deg;</p>
                </div>
              </div>
              <div class="hourly row">
                <div class="col-xs-4">
                </div>
                <div class="col-xs-2">
                  <p class="hour">7AM</p>
                  <p><img src="https://s3.amazonaws.com/codecademy-content/projects/2/forecast/clouds.svg"></p>
                  <p class="temp">44&deg;</p>
                </div>
                <div class="col-xs-2">
                  <p class="hour">12PM</p>
                  <p><img src="https://s3.amazonaws.com/codecademy-content/projects/2/forecast/clouds.svg"></p>
                  <p class="temp">68&deg;</p>
                </div>
                <div class="col-xs-2">
                  <p class="hour">5PM</p>
                  <p><img src="https://s3.amazonaws.com/codecademy-content/projects/2/forecast/clouds.svg"></p>
                  <p class="temp">59&deg;</p>
                </div>
                <div class="col-xs-2">
                  <p class="hour">10PM</p>
                  <p><img src="https://s3.amazonaws.com/codecademy-content/projects/2/forecast/clouds.svg"></p>
                  <p class="temp">46&deg;</p>
                </div>
              </div> 


              <div class="day row">
                <div class="weekday col-xs-4">
                  <span class="glyphicon glyphicon-plus"></span>
                  <p>wednesday</p>
                </div>
                <div class="weather col-xs-4">
                  <img src="https://s3.amazonaws.com/codecademy-content/projects/2/forecast/rain.svg">
                </div>
                <div class="high col-xs-2">
                  <p>46&deg;</p>
                </div>
                <div class="low col-xs-2">
                  <p>14&deg;</p>
                </div>
              </div>
              <div class="hourly row">
                <div class="col-xs-4">
                </div>
                <div class="col-xs-2">
                  <p class="hour">7AM</p>
                  <p><img src="https://s3.amazonaws.com/codecademy-content/projects/2/forecast/clouds.svg"></p>
                  <p class="temp">38&deg;</p>
                </div>
                <div class="col-xs-2">
                  <p class="hour">12PM</p>
                  <p><img src="https://s3.amazonaws.com/codecademy-content/projects/2/forecast/rain.svg"></p>
                  <p class="temp">44&deg;</p>
                </div>
                <div class="col-xs-2">
                  <p class="hour">5PM</p>
                  <p><img src="https://s3.amazonaws.com/codecademy-content/projects/2/forecast/rain.svg"></p>
                  <p class="temp">32&deg;</p>
                </div>
                <div class="col-xs-2">
                  <p class="hour">10PM</p>
                  <p><img src="https://s3.amazonaws.com/codecademy-content/projects/2/forecast/clouds.svg"></p>
                  <p class="temp">19&deg;</p>
                </div>
              </div>


              <div class="day row">
                <div class="weekday col-xs-4">
                  <span class="glyphicon glyphicon-plus"></span>
                  <p>thursday</p>
                </div>
                <div class="weather col-xs-4">
                  <img src="https://s3.amazonaws.com/codecademy-content/projects/2/forecast/clouds.svg">
                </div>
                <div class="high col-xs-2">
                  <p>46&deg;</p>
                </div>
                <div class="low col-xs-2">
                  <p>28&deg;</p>
                </div>
              </div>
              <div class="hourly row">
                <div class="col-xs-4">
                </div>
                <div class="col-xs-2">
                  <p class="hour">7AM</p>
                  <p><img src="https://s3.amazonaws.com/codecademy-content/projects/2/forecast/sun.svg"></p>
                  <p class="temp">20&deg;</p>
                </div>
                <div class="col-xs-2">
                  <p class="hour">12PM</p>
                  <p><img src="https://s3.amazonaws.com/codecademy-content/projects/2/forecast/sun.svg"></p>
                  <p class="temp">38&deg;</p>
                </div>
                <div class="col-xs-2">
                  <p class="hour">5PM</p>
                  <p><img src="https://s3.amazonaws.com/codecademy-content/projects/2/forecast/clouds.svg"></p>
                  <p class="temp">34&deg;</p>
                </div>
                <div class="col-xs-2">
                  <p class="hour">10PM</p>
                  <p><img src="https://s3.amazonaws.com/codecademy-content/projects/2/forecast/clouds.svg"></p>
                  <p class="temp">31&deg;</p>
                </div>
              </div>


              <div class="day row">
                <div class="weekday col-xs-4">
                  <span class="glyphicon glyphicon-plus"></span>
                  <p>friday</p>
                </div>
                <div class="weather col-xs-4">
                  <img src="https://s3.amazonaws.com/codecademy-content/projects/2/forecast/sun.svg">
                </div>
                <div class="high col-xs-2">
                  <p>59&deg;</p>
                </div>
                <div class="low col-xs-2">
                  <p>32&deg;</p>
                </div>
              </div>
              <div class="hourly last row">
                <div class="col-xs-4">
                </div>
                <div class="col-xs-2">
                  <p class="hour">7AM</p>
                  <p><img src="https://s3.amazonaws.com/codecademy-content/projects/2/forecast/clouds.svg"></p>
                  <p class="temp">38&deg;</p>
                </div>
                <div class="col-xs-2">
                  <p class="hour">12PM</p>
                  <p><img src="https://s3.amazonaws.com/codecademy-content/projects/2/forecast/sun.svg"></p>
                  <p class="temp">56&deg;</p>
                </div>
                <div class="col-xs-2">
                  <p class="hour">5PM</p>
                  <p><img src="https://s3.amazonaws.com/codecademy-content/projects/2/forecast/clouds.svg"></p>
                  <p class="temp">45&deg;</p>
                </div>
                <div class="col-xs-2">
                  <p class="hour">10PM</p>
                  <p><img src="https://s3.amazonaws.com/codecademy-content/projects/2/forecast/clouds.svg"></p>
                  <p class="temp">40&deg;</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <script src="https://s3.amazonaws.com/codecademy-content/projects/jquery.min.js"></script>
    <script src='script.js'></script>
  </body>
</html>
  
  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/0319AM/forecast-gxYBRq */
html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
}

body {
  color: #211f1e;
  background: url(https://s3.amazonaws.com/codecademy-content/projects/2/forecast/bg.jpg) no-repeat center center fixed; 
  background-size: cover;
  font-family: "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif; 
  height: 100%;
}

.main {
  height: 100%;
}

.container {
  position: relative;
  padding-top: 100px;
  min-height: 100%;
}

h1 {
  font-family: "HelveticaNeue-UltraLight", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 80px;
  font-weight: normal;
  margin: 0;
  text-align: right;
}

h2 {
  border-top: 1px solid #211f1e;
  font-size: 24px;
  font-weight: bold;
  margin: 10px 0 40px 0;
  padding: 30px 0 0 0;
  text-align: right;
}

.day {
  cursor: pointer;
}

.day > div {
  line-height: 48px;
}

.weekday span {
  font-size: 10px;
}

.weekday p {
  display: inline-block;
  font-size: 16px;
  font-weight: bold;
}

.weather img {
  width: 48px;
}

.high p,
.low p,
.hourly .temp {
  font-size: 16px;
}

.hourly {
  text-align: center;
  display: none;
}

.hourly .hour {
  font-weight: bold;
  font-size: 16px;
}

.hourly img {
  width: 24px;
}

.hourly p {
  margin: 16px 0;
}

.last {
  margin-bottom: 100px;
}

@media (max-width: 720px) {
  .container {
    background: rgba(255,255,255,0.8);
  }
}




/*Downloaded from https://www.codeseek.co/0319AM/forecast-gxYBRq */
var main = function() {
  $(".day").click(function() {
    $(this).next().toggle();
    $(this).find(".weekday span").toggleClass(".glyphicon-minus");
  })
};

$(document).ready(main);

Comments