~timharek/5545.no

8731049fb65a5c667d8bb0441b552a9430cb5893 — Tim 4 years ago e732f1b
Updated my github username
1 files changed, 140 insertions(+), 139 deletions(-)

M index.html
M index.html => index.html +140 -139
@@ 1,138 1,134 @@
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>5545.no</title>
    <link rel="stylesheet" href="css/style.css">
    <script src="https://kit.fontawesome.com/4904f970d2.js" crossorigin="anonymous"></script>
    <link rel="stylesheet" href="css/style.css" />
    <script
      src="https://kit.fontawesome.com/4904f970d2.js"
      crossorigin="anonymous"
    ></script>
    <script src="src/vue.js"></script>
</head>
<body>
  </head>
  <body>
    <div class="wrapper">
      <div id="app">
        <h1>Været på Vormedal</h1>
        <h2 class="date">{{ date }}</h2>
        <div class="now">
          <img :src="weatherImg" />
          <span>
            {{ temperature.toLocaleString('no-NB') }} &deg;C
            <span v-if="rainMax > 0">
              - <i class="fas fa-umbrella"></i> {{
              rainMin.toLocaleString('no-NB') }}-{{
              rainMax.toLocaleString('no-NB') }} mm
            </span>
            - <i class="fas fa-wind"></i> {{ wind }} m/s
          </span>
        </div>

        <div id="app">
            <h1>Været på Vormedal</h1>
            <h2 class="date">{{ date }}</h2>
            <div class="now">
                <img :src="weatherImg">
                <span>
                    {{ temperature.toLocaleString('no-NB') }} &deg;C 
                    <span v-if="rainMax > 0">
                        - <i class="fas fa-umbrella"></i> {{ rainMin.toLocaleString('no-NB') }}-{{ rainMax.toLocaleString('no-NB') }} mm
                    </span> 
                    - <i class="fas fa-wind"></i> {{ wind }} m/s
                </span>
            </div>

            <div class="forecast">
                <h2>De neste 3 timene</h2>
                <table class="three-hours">
                    <thead>
                        <tr>
                            <th>
                                <i class="far fa-clock"></i>
                            </th>
                            <th>
                                Vær
                            </th>
                            <th>
                                <i class="fas fa-thermometer-three-quarters"></i> Temp.
                            </th>
                            <th>
                                <i class="fas fa-umbrella"></i> Nedbør
                            </th>
                            <th>
                                <i class="fas fa-wind"></i> Vind m/s
                            </th>
                            <th>
                                Vindbeskrivelse
                            </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="hourSlot in nextThreeHours">
                            <td>
                                {{ hourSlot.time }}
                            </td>
                            <td>
                                <img :src="hourSlot.weather">
                            </td>
                            <td>
                                {{ hourSlot.temp.toLocaleString('no-NB') }} &deg;C
                            </td>
                            <td>
                                <span v-if="hourSlot.rain > 0">{{ hourSlot.rain.toLocaleString('no-NB') }} mm</span>
                            </td>
                            <td>
                                {{ hourSlot.wind }}
                            </td>
                            <td>
                                {{ hourSlot.wind_desc }}
                            </td>
                        </tr>
                    </tbody>
                </table>
                <h2>Dagene framover</h2>
                <table class="next-days">
                    <thead>
                        <tr>
                            <th>
                                <i class="far fa-calendar-alt"></i>
                            </th>
                            <th>
                                <i class="far fa-clock"></i>
                            </th>
                            <th>
                                Vær
                            </th>
                            <th>
                                <i class="fas fa-thermometer-three-quarters"></i> Temp.
                            </th>
                            <th>
                                <i class="fas fa-umbrella"></i> Nedbør
                            </th>
                            <th>
                                <i class="fas fa-wind"></i> Vind m/s
                            </th>
                            <th>
                                Vindbeskrivelse
                            </th>
                        </tr>
                    </thead>
                    <tbody v-for="hourSlot in forecastNextDays">
                        <tr>
                            <td>
                                {{ hourSlot.date }}
                            </td>
                            <td>
                                {{ hourSlot.time }}
                            </td>
                            <td>
                                <img :src="hourSlot.weather">
                            </td>
                            <td>
                                {{ hourSlot.tempMax.toLocaleString('no-NB') }} &deg;C
                            </td>
                            <td>
                                <span v-if="hourSlot.rain > 0">{{ hourSlot.rain.toLocaleString('no-NB') }} mm</span>
                            </td>
                            <td>
                                {{ hourSlot.wind }}
                            </td>
                            <td>
                                {{ hourSlot.wind_desc }}
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        <div class="forecast">
          <h2>De neste 3 timene</h2>
          <table class="three-hours">
            <thead>
              <tr>
                <th>
                  <i class="far fa-clock"></i>
                </th>
                <th>
                  Vær
                </th>
                <th><i class="fas fa-thermometer-three-quarters"></i> Temp.</th>
                <th><i class="fas fa-umbrella"></i> Nedbør</th>
                <th><i class="fas fa-wind"></i> Vind m/s</th>
                <th>
                  Vindbeskrivelse
                </th>
              </tr>
            </thead>
            <tbody>
              <tr v-for="hourSlot in nextThreeHours">
                <td>
                  {{ hourSlot.time }}
                </td>
                <td>
                  <img :src="hourSlot.weather" />
                </td>
                <td>
                  {{ hourSlot.temp.toLocaleString('no-NB') }} &deg;C
                </td>
                <td>
                  <span v-if="hourSlot.rain > 0"
                    >{{ hourSlot.rain.toLocaleString('no-NB') }} mm</span
                  >
                </td>
                <td>
                  {{ hourSlot.wind }}
                </td>
                <td>
                  {{ hourSlot.wind_desc }}
                </td>
              </tr>
            </tbody>
          </table>
          <h2>Dagene framover</h2>
          <table class="next-days">
            <thead>
              <tr>
                <th>
                  <i class="far fa-calendar-alt"></i>
                </th>
                <th>
                  <i class="far fa-clock"></i>
                </th>
                <th>
                  Vær
                </th>
                <th><i class="fas fa-thermometer-three-quarters"></i> Temp.</th>
                <th><i class="fas fa-umbrella"></i> Nedbør</th>
                <th><i class="fas fa-wind"></i> Vind m/s</th>
                <th>
                  Vindbeskrivelse
                </th>
              </tr>
            </thead>
            <tbody v-for="hourSlot in forecastNextDays">
              <tr>
                <td>
                  {{ hourSlot.date }}
                </td>
                <td>
                  {{ hourSlot.time }}
                </td>
                <td>
                  <img :src="hourSlot.weather" />
                </td>
                <td>
                  {{ hourSlot.tempMax.toLocaleString('no-NB') }} &deg;C
                </td>
                <td>
                  <span v-if="hourSlot.rain > 0"
                    >{{ hourSlot.rain.toLocaleString('no-NB') }} mm</span
                  >
                </td>
                <td>
                  {{ hourSlot.wind }}
                </td>
                <td>
                  {{ hourSlot.wind_desc }}
                </td>
              </tr>
            </tbody>
          </table>
        </div>

            <!-- <span class="refresh-btn" @click="getWeather('59.355091', '5.323378')">
        <!-- <span class="refresh-btn" @click="getWeather('59.355091', '5.323378')">
                🔁
            </span> -->

            <!-- <h2>Custom værvarsel</h2>
        <!-- <h2>Custom værvarsel</h2>
            <form>
                <input type="text" ref="lat" placeholder="Lat">
                <input type="text" ref="lon" placeholder="Lon">


@@ 140,24 136,29 @@
                    Oppdater
                </button>
            </form> -->
        </div>
      </div>
    </div>
    <footer>
        <span>
            Av <a href="https://github.com/adipid" target="_blank">Adipid</a>
        </span>
        <span> 
            <a href="https://github.com/adipid/5545.no" target="_blank">
                <i class="fab fa-github" aria-hidden="true"></i>
            </a>
        </span>
        <span>
            Laget med <a href="https://api.met.no/weatherapi/locationforecast/1.9/documentation" target="_blank">Yr.no API</a>
        </span>
      <span>
        Av <a href="https://github.com/timharek" target="_blank">Adipid</a>
      </span>
      <span>
        <a href="https://github.com/timharek/5545.no" target="_blank">
          <i class="fab fa-github" aria-hidden="true"></i>
        </a>
      </span>
      <span>
        Laget med
        <a
          href="https://api.met.no/weatherapi/locationforecast/1.9/documentation"
          target="_blank"
          >Yr.no API</a
        >
      </span>
    </footer>

    <script src="src/index.js"></script>
</body>
  </body>
</html>
<!-- Bergen: 60.388068, 5.331854 -->
<!-- Thailand: 13.753939, 100.501289 -->
\ No newline at end of file
<!-- Thailand: 13.753939, 100.501289 -->