欧美一区二区三区,国内熟女精品熟女A片视频小说,日本av网,小鲜肉男男GAY做受XXX网站

天氣小工具圖標大小

CSS
洪振霞1年前7瀏覽0評論

我試著調整天氣預報圖標的大小，但是毫無收獲。我試著在預測圖標容器的HTML和CSS中編輯它，即使容器為25x25，它仍然保持默認的100x100。我正在使用一個天氣窗口小部件模板，特別是馬德的程序，所以我只做了微小的調整，我不擅長JS，所以我真的不知道如何嘗試編輯那里的大小，就像編輯當天的圖標一樣。

下面是代碼，JS在底部，你可以看到當天的圖標大小可以手動設置為80x80，但我沒有地方編輯預測圖標的大小。

我嘗試在div類預測圖標中手動輸入寬度和高度 我嘗試在預測圖標CSS中編輯大小 我嘗試在JS腳本中編輯img.setattribute，使其具有像當前日期圖標一樣的自定義大小

"use strict";
const city = "St. Louis, Missouri";
const units = "imperial";
const lang = "en";
const forecastDays = 6;

const temperature = document.getElementById("temperature");
const icon0 = document.getElementById("icon0");
const maxTemperature = document.getElementById("max-temperature");
const minTemperature = document.getElementById("min-temperature");
const summary = document.getElementById("summary");
const place = document.getElementById("place");

const forecastContainer = document.getElementById("forecast-container");

const message = document.getElementById("message");

const calendar = document.getElementById("firstrow");
const clock = document.getElementById("secondrow");

updateClock();
getWeather();
setInterval(getWeather, 600000);

function updateClock() {
  clock.innerHTML = moment().format("H:mm");
  calendar.innerHTML = moment().format("ddd MMM D");
  setTimeout(updateClock, 10000)
}

function getWeather() {
  fetch(
      `https://pisignage.com/api/getweather?place=${city}&units=${units}&lang=${lang}`, {
        method: "GET",
        headers: {
          "Content-Type": " application/json"
        },
        mode: "cors"
      }
    )
    .then(res => res.json())
    .then(data => {

      if (!(data && data.success)) {
        if (data.stat_message) message.textContent = data.stat_message;
        return console.log("Could not get weather data, reason: " + data.stat_message);
      }

      const weatherData = data.data.openweather; //console.log(weatherData);

      if (weatherData.cityName.indexOf(",") > -1) {
        weatherData.cityName = weatherData.cityName.slice(
          0,
          weatherData.cityName.indexOf(",")
        );
      } else {
        weatherData.cityName = weatherData.cityName;
      }

      if (place)
        place.textContent = weatherData.cityName;

      if (temperature)
        temperature.textContent = weatherData.main.temp.toFixed(0); //+ "°C";
      if (maxTemperature)
        maxTemperature.textContent = weatherData.daily[0].temp.max.toFixed(0);
      if (minTemperature)
        minTemperature.textContent = weatherData.daily[0].temp.min.toFixed(0);
      if (summary)
        summary.textContent = weatherData.weather[0].description;
      if (icon0) {
        let iconCode = document.getElementById('icon0');
        iconCode.innerHTML = '<img src="' + weatherData.weather[0].icon + '" height = "80" width="80">';
      }

      let days = weatherData.daily;

      if (forecastContainer) {
        while (forecastContainer.firstChild) {
          forecastContainer.removeChild(forecastContainer.firstChild);
        }
        for (let i = 1;
          (i <= forecastDays) && (i < days.length); i++) {
          const imgDiv = document.createElement("div");
          const img = document.createElement('img');
          img.setAttribute('src', days[i].weather[0].icon);
          imgDiv.setAttribute("class", "forecast-icon");
          imgDiv.appendChild(img);

          const numMaxDiv = document.createElement("div");
          numMaxDiv.textContent = days[i].temp.max.toFixed(0); //showing forecast max temp
          const numMinDiv = document.createElement("div");
          numMinDiv.textContent = days[i].temp.min.toFixed(0); //showing forecast min temp
          const tempMaxDiv = document.createElement("div");
          tempMaxDiv.setAttribute("class", "forecast-max-temp");
          tempMaxDiv.appendChild(numMaxDiv);
          const tempMinDiv = document.createElement("div");
          tempMinDiv.setAttribute("class", "forecast-min-temp");
          tempMinDiv.appendChild(numMinDiv);
          const forecastDayDiv = document.createElement("div");
          forecastDayDiv.textContent = convertToWeekday(days[i].dt);
          forecastDayDiv.setAttribute("class", "forecast-title");

          const coverDiv = document.createElement("div");
          coverDiv.setAttribute("class", "forecast-day");
          coverDiv.appendChild(forecastDayDiv);
          coverDiv.appendChild(imgDiv);
          coverDiv.appendChild(tempMaxDiv);
          coverDiv.appendChild(tempMinDiv);


          forecastContainer.appendChild(coverDiv);
        }
      }

    }).catch(function(error) {
      message.textContent = error;
    });
}

function convertToWeekday(sec) {
  const days = [
    "Sun",
    "Mon",
    "Tue",
    "Wed",
    "Thu",
    "Fri",
    "Sat"
  ];
  return days[(new Date(sec * 1000)).getDay()]
}

html,
body {
  font-size: 16px;
  color: white;
  font-family: "Lato", sans-serif;
  height: 432px;
  width: 176px;
  margin: 0;
  box-sizing: border-box;
  box-shadow: inset 0px 0px 0px 5px rgba(116, 164, 196, .8);
  background-color: rgba(106, 150, 186, 1);
}

.container {
  height: 432px;
  width: 176px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.temperature-container {
  display: flex;
  flex-direction: column;
  background-color: rgba(116, 164, 196, .8);
  border-radius: 10px;
  padding: 10px;
  align-items: center;
  text-align: center;
  font-weight: 600;
  justify-content: space-between;
}

.temperature {
  display: flex;
  color: black;
  align-items: center;
  justify-content: space-between;
}

.max-min-temperature {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  font-weight: 800;
  padding-left: 5px;
  height: 100%;
}

.description {
  display: flex;
  flex-direction: column;
  text-transform: capitalize;
  align-items: center;
  justify-content: space-between;
}

#place {
  font-weight: 800;
  font-size: 1rem;
}

#temperature {
  font-size: 2rem;
}

#max-temperature {
  color: white;
  font-size: 0.8rem;
}

#min-temperature {
  color: rgba(256, 256, 256, .5);
  font-size: 0.8rem;
}

#summary {
  font-weight: 600;
  font-size: 1rem;
  width: 80%;
  justify-content: center;
}

#forecast-container {
  width: 160px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
}

.forecast-day {
  align-items: center;
  height: 80px;
  width: 40px;
  background-color: rgba(116, 164, 196, .8);
  border-radius: 8px;
  margin-bottom: 5px;
  padding: 1px;
  text-align: center;
}

.forecast-title {
  height: 20px;
  color: white;
  font-weight: 600;
}

.forecast-icon {
  height: 25px;
  width: 25px;
  align-items: center;
  object-fit: contain;
}

.forecast-max-temp {
  display: inline-block;
  text-align: left;
  width: 8px;
  padding-top: 10px;
  color: white;
  font-size: 0.8rem;
  font-weight: 600;
}

.forecast-min-temp {
  display: inline-block;
  text-align: right;
  width: 8px;
  padding-top: 10px;
  color: rgba(256, 256, 256, .5);
  font-size: 0.8rem;
  font-weight: 600;
}

.citation {
  position: absolute;
  bottom: 2px;
  left: 2px;
  color: #ccc;
  font-size: 9px;
}

.datetime-container {
  width: auto;
  background-color: rgba(116, 164, 196, .8);
  border-radius: 10px;
  padding: 10px;
  text-align: center;
}

#firstrow {
  margin-bottom: 1vh;
  font-size: 1.2rem;
  font-weight: 600;
}

#secondrow {
  font-size: 1.2rem;
  font-weight: 600;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<link  rel="stylesheet" />


<div class="container">
  <div class="datetime-container">
    <div id="firstrow"></div>
    <div id="secondrow"></div>
  </div>
  <div class="temperature-container">
    <span id="place">Weather Today</span>
    <div class="temperature">
      <div class="image" id="icon0"></div>
      <span id="temperature"></span>
      <div class="max-min-temperature">
        <span id="max-temperature"></span>
        <span id="min-temperature"></span>
      </div>
    </div>
    <div class="description">
      <span id="summary"></span>
    </div>
  </div>

  <div id="forecast-container">
    <div class="forecast-day">
      <div class="forecast-title"></div>
      <div class="forecast-icon"></div>
      <div class="forecast-max-temp"></div>
      <div class="forecast-min-temp"></div>
    </div>
  </div>

</div>
<i id="message" class="citation"></i>

嘗試添加！重要聲明你的高度和寬度的CSS代碼。預測圖標。

.forecast-icon {
  height: 25px !important;
  width: 25px !important;
  align-items: center;
  object-fit: contain;
}

調整大小應該應用于。預測-圖標& gtimg，而不是修改。預測圖標類。

.forecast-icon > img {
  height: 25px;
  width: 25px;
  align-items: center;
  object-fit: contain;
}

"use strict";
const city = "St. Louis, Missouri";
const units = "imperial";
const lang = "en";
const forecastDays = 6;

const temperature = document.getElementById("temperature");
const icon0 = document.getElementById("icon0");
const maxTemperature = document.getElementById("max-temperature");
const minTemperature = document.getElementById("min-temperature");
const summary = document.getElementById("summary");
const place = document.getElementById("place");

const forecastContainer = document.getElementById("forecast-container");

const message = document.getElementById("message");

const calendar = document.getElementById("firstrow");
const clock = document.getElementById("secondrow");

updateClock();
getWeather();
setInterval(getWeather, 600000);

function updateClock() {
  clock.innerHTML = moment().format("H:mm");
  calendar.innerHTML = moment().format("ddd MMM D");
  setTimeout(updateClock, 10000)
}

function getWeather() {
  fetch(
      `https://pisignage.com/api/getweather?place=${city}&units=${units}&lang=${lang}`, {
        method: "GET",
        headers: {
          "Content-Type": " application/json"
        },
        mode: "cors"
      }
    )
    .then(res => res.json())
    .then(data => {

      if (!(data && data.success)) {
        if (data.stat_message) message.textContent = data.stat_message;
        return console.log("Could not get weather data, reason: " + data.stat_message);
      }

      const weatherData = data.data.openweather; //console.log(weatherData);

      if (weatherData.cityName.indexOf(",") > -1) {
        weatherData.cityName = weatherData.cityName.slice(
          0,
          weatherData.cityName.indexOf(",")
        );
      } else {
        weatherData.cityName = weatherData.cityName;
      }

      if (place)
        place.textContent = weatherData.cityName;

      if (temperature)
        temperature.textContent = weatherData.main.temp.toFixed(0); //+ "°C";
      if (maxTemperature)
        maxTemperature.textContent = weatherData.daily[0].temp.max.toFixed(0);
      if (minTemperature)
        minTemperature.textContent = weatherData.daily[0].temp.min.toFixed(0);
      if (summary)
        summary.textContent = weatherData.weather[0].description;
      if (icon0) {
        let iconCode = document.getElementById('icon0');
        iconCode.innerHTML = '<img src="' + weatherData.weather[0].icon + '" height = "80" width="80">';
      }

      let days = weatherData.daily;

      if (forecastContainer) {
        while (forecastContainer.firstChild) {
          forecastContainer.removeChild(forecastContainer.firstChild);
        }
        for (let i = 1;
          (i <= forecastDays) && (i < days.length); i++) {
          const imgDiv = document.createElement("div");
          const img = document.createElement('img');
          img.setAttribute('src', days[i].weather[0].icon);
          imgDiv.setAttribute("class", "forecast-icon");
          imgDiv.appendChild(img);

          const numMaxDiv = document.createElement("div");
          numMaxDiv.textContent = days[i].temp.max.toFixed(0); //showing forecast max temp
          const numMinDiv = document.createElement("div");
          numMinDiv.textContent = days[i].temp.min.toFixed(0); //showing forecast min temp
          const tempMaxDiv = document.createElement("div");
          tempMaxDiv.setAttribute("class", "forecast-max-temp");
          tempMaxDiv.appendChild(numMaxDiv);
          const tempMinDiv = document.createElement("div");
          tempMinDiv.setAttribute("class", "forecast-min-temp");
          tempMinDiv.appendChild(numMinDiv);
          const forecastDayDiv = document.createElement("div");
          forecastDayDiv.textContent = convertToWeekday(days[i].dt);
          forecastDayDiv.setAttribute("class", "forecast-title");

          const coverDiv = document.createElement("div");
          coverDiv.setAttribute("class", "forecast-day");
          coverDiv.appendChild(forecastDayDiv);
          coverDiv.appendChild(imgDiv);
          coverDiv.appendChild(tempMaxDiv);
          coverDiv.appendChild(tempMinDiv);


          forecastContainer.appendChild(coverDiv);
        }
      }

    }).catch(function(error) {
      message.textContent = error;
    });
}

function convertToWeekday(sec) {
  const days = [
    "Sun",
    "Mon",
    "Tue",
    "Wed",
    "Thu",
    "Fri",
    "Sat"
  ];
  return days[(new Date(sec * 1000)).getDay()]
}

html,
body {
  font-size: 16px;
  color: white;
  font-family: "Lato", sans-serif;
  height: 432px;
  width: 176px;
  margin: 0;
  box-sizing: border-box;
  box-shadow: inset 0px 0px 0px 5px rgba(116, 164, 196, .8);
  background-color: rgba(106, 150, 186, 1);
}

.container {
  height: 432px;
  width: 176px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.temperature-container {
  display: flex;
  flex-direction: column;
  background-color: rgba(116, 164, 196, .8);
  border-radius: 10px;
  padding: 10px;
  align-items: center;
  text-align: center;
  font-weight: 600;
  justify-content: space-between;
}

.temperature {
  display: flex;
  color: black;
  align-items: center;
  justify-content: space-between;
}

.max-min-temperature {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  font-weight: 800;
  padding-left: 5px;
  height: 100%;
}

.description {
  display: flex;
  flex-direction: column;
  text-transform: capitalize;
  align-items: center;
  justify-content: space-between;
}

#place {
  font-weight: 800;
  font-size: 1rem;
}

#temperature {
  font-size: 2rem;
}

#max-temperature {
  color: white;
  font-size: 0.8rem;
}

#min-temperature {
  color: rgba(256, 256, 256, .5);
  font-size: 0.8rem;
}

#summary {
  font-weight: 600;
  font-size: 1rem;
  width: 80%;
  justify-content: center;
}

#forecast-container {
  width: 160px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
}

.forecast-day {
  align-items: center;
  height: 80px;
  width: 40px;
  background-color: rgba(116, 164, 196, .8);
  border-radius: 8px;
  margin-bottom: 5px;
  padding: 1px;
  text-align: center;
}

.forecast-title {
  height: 20px;
  color: white;
  font-weight: 600;
}

.forecast-icon > img {
  height: 25px;
  width: 25px;
  align-items: center;
  object-fit: contain;
}

.forecast-max-temp {
  display: inline-block;
  text-align: left;
  width: 8px;
  padding-top: 10px;
  color: white;
  font-size: 0.8rem;
  font-weight: 600;
}

.forecast-min-temp {
  display: inline-block;
  text-align: right;
  width: 8px;
  padding-top: 10px;
  color: rgba(256, 256, 256, .5);
  font-size: 0.8rem;
  font-weight: 600;
}

.citation {
  position: absolute;
  bottom: 2px;
  left: 2px;
  color: #ccc;
  font-size: 9px;
}

.datetime-container {
  width: auto;
  background-color: rgba(116, 164, 196, .8);
  border-radius: 10px;
  padding: 10px;
  text-align: center;
}

#firstrow {
  margin-bottom: 1vh;
  font-size: 1.2rem;
  font-weight: 600;
}

#secondrow {
  font-size: 1.2rem;
  font-weight: 600;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<link  rel="stylesheet" />

<div class="container">
  <div class="datetime-container">
    <div id="firstrow"></div>
    <div id="secondrow"></div>
  </div>
  <div class="temperature-container">
    <span id="place">Weather Today</span>
    <div class="temperature">
      <div class="image" id="icon0"></div>
      <span id="temperature"></span>
      <div class="max-min-temperature">
        <span id="max-temperature"></span>
        <span id="min-temperature"></span>
      </div>
    </div>
    <div class="description">
      <span id="summary"></span>
    </div>
  </div>

  <div id="forecast-container">
    <div class="forecast-day">
      <div class="forecast-title"></div>
      <div class="forecast-icon"></div>
      <div class="forecast-max-temp"></div>
      <div class="forecast-min-temp"></div>
    </div>
  </div>
</div>

<i id="message" class="citation" />

將img定位在。預測圖標容器，并將寬度設置為100%，使其相對于容器:

.forecast-icon > img {
  width: 100%;
}

"use strict";
const city = "St. Louis, Missouri";
const units = "imperial";
const lang = "en";
const forecastDays = 6;

const temperature = document.getElementById("temperature");
const icon0 = document.getElementById("icon0");
const maxTemperature = document.getElementById("max-temperature");
const minTemperature = document.getElementById("min-temperature");
const summary = document.getElementById("summary");
const place = document.getElementById("place");

const forecastContainer = document.getElementById("forecast-container");

const message = document.getElementById("message");

const calendar = document.getElementById("firstrow");
const clock = document.getElementById("secondrow");

updateClock();
getWeather();
setInterval(getWeather, 600000);

function updateClock() {
  clock.innerHTML = moment().format("H:mm");
  calendar.innerHTML = moment().format("ddd MMM D");
  setTimeout(updateClock, 10000)
}

function getWeather() {
  fetch(
      `https://pisignage.com/api/getweather?place=${city}&units=${units}&lang=${lang}`, {
        method: "GET",
        headers: {
          "Content-Type": " application/json"
        },
        mode: "cors"
      }
    )
    .then(res => res.json())
    .then(data => {

      if (!(data && data.success)) {
        if (data.stat_message) message.textContent = data.stat_message;
        return console.log("Could not get weather data, reason: " + data.stat_message);
      }

      const weatherData = data.data.openweather; //console.log(weatherData);

      if (weatherData.cityName.indexOf(",") > -1) {
        weatherData.cityName = weatherData.cityName.slice(
          0,
          weatherData.cityName.indexOf(",")
        );
      } else {
        weatherData.cityName = weatherData.cityName;
      }

      if (place)
        place.textContent = weatherData.cityName;

      if (temperature)
        temperature.textContent = weatherData.main.temp.toFixed(0); //+ "°C";
      if (maxTemperature)
        maxTemperature.textContent = weatherData.daily[0].temp.max.toFixed(0);
      if (minTemperature)
        minTemperature.textContent = weatherData.daily[0].temp.min.toFixed(0);
      if (summary)
        summary.textContent = weatherData.weather[0].description;
      if (icon0) {
        let iconCode = document.getElementById('icon0');
        iconCode.innerHTML = '<img src="' + weatherData.weather[0].icon + '" height = "80" width="80">';
      }

      let days = weatherData.daily;

      if (forecastContainer) {
        while (forecastContainer.firstChild) {
          forecastContainer.removeChild(forecastContainer.firstChild);
        }
        for (let i = 1;
          (i <= forecastDays) && (i < days.length); i++) {
          const imgDiv = document.createElement("div");
          const img = document.createElement('img');
          img.setAttribute('src', days[i].weather[0].icon);
          imgDiv.setAttribute("class", "forecast-icon");
          imgDiv.appendChild(img);

          const numMaxDiv = document.createElement("div");
          numMaxDiv.textContent = days[i].temp.max.toFixed(0); //showing forecast max temp
          const numMinDiv = document.createElement("div");
          numMinDiv.textContent = days[i].temp.min.toFixed(0); //showing forecast min temp
          const tempMaxDiv = document.createElement("div");
          tempMaxDiv.setAttribute("class", "forecast-max-temp");
          tempMaxDiv.appendChild(numMaxDiv);
          const tempMinDiv = document.createElement("div");
          tempMinDiv.setAttribute("class", "forecast-min-temp");
          tempMinDiv.appendChild(numMinDiv);
          const forecastDayDiv = document.createElement("div");
          forecastDayDiv.textContent = convertToWeekday(days[i].dt);
          forecastDayDiv.setAttribute("class", "forecast-title");

          const coverDiv = document.createElement("div");
          coverDiv.setAttribute("class", "forecast-day");
          coverDiv.appendChild(forecastDayDiv);
          coverDiv.appendChild(imgDiv);
          coverDiv.appendChild(tempMaxDiv);
          coverDiv.appendChild(tempMinDiv);


          forecastContainer.appendChild(coverDiv);
        }
      }

    }).catch(function(error) {
      message.textContent = error;
    });
}

function convertToWeekday(sec) {
  const days = [
    "Sun",
    "Mon",
    "Tue",
    "Wed",
    "Thu",
    "Fri",
    "Sat"
  ];
  return days[(new Date(sec * 1000)).getDay()]
}

html,
body {
  font-size: 16px;
  color: white;
  font-family: "Lato", sans-serif;
  height: 432px;
  width: 176px;
  margin: 0;
  box-sizing: border-box;
  box-shadow: inset 0px 0px 0px 5px rgba(116, 164, 196, .8);
  background-color: rgba(106, 150, 186, 1);
}

.container {
  height: 432px;
  width: 176px;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;
}

.temperature-container {
  display: flex;
  flex-direction: column;
  background-color: rgba(116, 164, 196, .8);
  border-radius: 10px;
  padding: 10px;
  align-items: center;
  text-align: center;
  font-weight: 600;
  justify-content: space-between;
}

.temperature {
  display: flex;
  color: black;
  align-items: center;
  justify-content: space-between;
}

.max-min-temperature {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  font-weight: 800;
  padding-left: 5px;
  height: 100%;
}

.description {
  display: flex;
  flex-direction: column;
  text-transform: capitalize;
  align-items: center;
  justify-content: space-between;
}

#place {
  font-weight: 800;
  font-size: 1rem;
}

#temperature {
  font-size: 2rem;
}

#max-temperature {
  color: white;
  font-size: 0.8rem;
}

#min-temperature {
  color: rgba(256, 256, 256, .5);
  font-size: 0.8rem;
}

#summary {
  font-weight: 600;
  font-size: 1rem;
  width: 80%;
  justify-content: center;
}

#forecast-container {
  width: 160px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-around;
}

.forecast-day {
  align-items: center;
  height: 80px;
  width: 40px;
  background-color: rgba(116, 164, 196, .8);
  border-radius: 8px;
  margin-bottom: 5px;
  padding: 1px;
  text-align: center;
}

.forecast-title {
  height: 20px;
  color: white;
  font-weight: 600;
}

.forecast-icon {
  height: 25px;
  width: 25px;
  align-items: center;
  object-fit: contain;
}

.forecast-max-temp {
  display: inline-block;
  text-align: left;
  width: 8px;
  padding-top: 10px;
  color: white;
  font-size: 0.8rem;
  font-weight: 600;
}

.forecast-min-temp {
  display: inline-block;
  text-align: right;
  width: 8px;
  padding-top: 10px;
  color: rgba(256, 256, 256, .5);
  font-size: 0.8rem;
  font-weight: 600;
}

.citation {
  position: absolute;
  bottom: 2px;
  left: 2px;
  color: #ccc;
  font-size: 9px;
}

.datetime-container {
  width: auto;
  background-color: rgba(116, 164, 196, .8);
  border-radius: 10px;
  padding: 10px;
  text-align: center;
}

#firstrow {
  margin-bottom: 1vh;
  font-size: 1.2rem;
  font-weight: 600;
}

#secondrow {
  font-size: 1.2rem;
  font-weight: 600;
}
.forecast-icon > img {
 width: 100%;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.24.0/moment.min.js"></script>
<link  rel="stylesheet" />


<div class="container">
  <div class="datetime-container">
    <div id="firstrow"></div>
    <div id="secondrow"></div>
  </div>
  <div class="temperature-container">
    <span id="place">Weather Today</span>
    <div class="temperature">
      <div class="image" id="icon0"></div>
      <span id="temperature"></span>
      <div class="max-min-temperature">
        <span id="max-temperature"></span>
        <span id="min-temperature"></span>
      </div>
    </div>
    <div class="description">
      <span id="summary"></span>
    </div>
  </div>

  <div id="forecast-container">
    <div class="forecast-day">
      <div class="forecast-title"></div>
      <div class="forecast-icon"></div>
      <div class="forecast-max-temp"></div>
      <div class="forecast-min-temp"></div>
    </div>
  </div>

</div>
<i id="message" class="citation"></i>