Winkeldisplay

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Winkeldisplay</title>

    <link href="https://fonts.googleapis.com/css?family=Lato" rel="stylesheet">

    <style>
      body {
        margin: 0;
        color: #ecf0f1;
        font-family: 'Lato', sans-serif;
        height: 100vh;
      }

      #boven {
        height: calc(100% / 3);
      }

      #boven > * {
        display: inline-block;
        height: 100%;
        width: calc(100vw / 3);
      }

      #weer {
        background-color: #f1c40f;
        float: left;
        text-align: center;
        font-size: 3vh;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
      }

      #weer > * {
        display: block;
      }

      #icoon {
        height: 48px;
        display: inline-block;
        vertical-align: middle;
      }

      #zin {
        display: inline-block;
      }

      #temperatuur {
        font-size: 6vh;
      }

      #nieuws {
        background-color: #3498db;
        float: left;
        font-size: 2vh;
      }

      #nieuws ul {
        height: 100%;
        margin: 0;
        overflow: hidden;
      }

      #klok {
        background-color: #9b59b6;
        float: left;
        text-align: center;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-direction: column;
      }

      #tijd {
        font-size: 8vh;
      }

      #datum {
        font-size: 3vh;
      }

      #beneden {
        height: calc(100% / 1.5);
      }

      #artikelen {
        height: 100%;
        background-color: #2ecc71;
        display: flex;
        justify-content: center;
        align-items: center;
      }

      #artikelen img {
        max-height: 100%;
        max-width: 100%;
      }
    </style>
  </head>
  <body>
    <div id="boven">
      <div id="weer">
        <div id="actueel">
          <img id="icoon">
          <span id="zin"></span>
        </div>
        <span id="temperatuur"></span>
        <span id="luchtvochtigheid"></span>
        <span id="windrichting"></span>
      </div>
      <div id="nieuws"></div>
      <div id="klok">
        <div id="tijd"></div>
        <div id="datum"></div>
      </div>
    </div>

    <div id="beneden">
      <div id="artikelen">
        <img src="https://upload.wikimedia.org/wikipedia/commons/5/53/Apple_in_lightbox.png">
        <img src="https://upload.wikimedia.org/wikipedia/commons/0/0d/Yet_another_pear.jpg">
      </div>
    </div>


    <script>
      function weatherReqListener () {
        var oParser = new DOMParser()
        var oDOM = oParser.parseFromString(this.responseText, 'text/xml')
        var weerstation = oDOM.getElementById('6375') // verander nummer voor een ander weerstation

        var luchtvochtigheid = weerstation.querySelector('luchtvochtigheid').textContent
        var temperatuurGC = weerstation.querySelector('temperatuurGC').textContent
        var temperatuur10cm = weerstation.querySelector('temperatuur10cm').textContent
        var windrichting = weerstation.querySelector('windrichting').textContent
        var zin = weerstation.querySelector('icoonactueel').getAttribute('zin')
        var icoon = weerstation.querySelector('icoonactueel').textContent

        var DOMicoon = document.getElementById('icoon')
        var DOMzin = document.getElementById('zin')
        var DOMtemperatuur = document.getElementById('temperatuur')
        var DOMluchtvochtigheid = document.getElementById('luchtvochtigheid')
        var DOMwindrichting = document.getElementById('windrichting')

        DOMicoon.setAttribute('src', icoon)
        DOMzin.textContent = zin
        DOMtemperatuur.textContent = `${temperatuurGC} °C / ${temperatuur10cm} °C`
        DOMluchtvochtigheid.textContent = `Luchtvochtigheid: ${luchtvochtigheid} %`
        DOMwindrichting.textContent = `Windrichting: ${windrichting}`
      }

      function weatherReq () {
        var oReq = new XMLHttpRequest()
        oReq.addEventListener('load', weatherReqListener)
        oReq.open('GET', 'http://xml.buienradar.nl/')
        oReq.send()
      }

      weatherReq()
      setInterval(weatherReq, 60000)

      function newsReqListener () {
        var oParser = new DOMParser()
        var oDOM = oParser.parseFromString(this.responseText, 'text/xml')

        var toAppend = ['<ul>']

        oDOM.querySelectorAll('title').forEach((title, index) => {
          if (index !== 0) {
            toAppend.push(`<li>${title.textContent}</li>`)
          }
        })

        toAppend.push('<ul>')

        document.getElementById('nieuws').innerHTML = toAppend.join('')
      }

      function newsReq () {
        var oReq = new XMLHttpRequest()
        oReq.addEventListener('load', newsReqListener)
        oReq.open('GET', 'http://www.rtlnieuws.nl/service/rss/nederland/index.xml')
        oReq.send()
      }

      newsReq()
      setInterval(newsReq, 60000)

      function clock () {
        var date = new Date()

        var tijd = `${date.getHours()}:${date.getMinutes()}`
        var datum = `${['maandag', 'dinsdag', 'woensdag', 'donderdag', 'vrijdag', 'zaterdag', 'zondag'][date.getDay()]} ${date.getDate()} ${['januari', 'februari', 'maart', 'april', 'mei', 'juni', 'juli', 'augustus', 'september', 'oktober', 'november', 'december'][date.getMonth()]} ${date.getFullYear()}`

        var DOMtijd = document.getElementById('tijd')
        var DOMdatum = document.getElementById('datum')

        DOMtijd.textContent = tijd
        DOMdatum.textContent = datum
      }

      clock()
      setInterval(clock, 1000)

      function articles () {
        if (window.article === undefined) {
          window.article = -1
        }

        var articles = document.querySelectorAll('#artikelen img')

        if (window.article === articles.length - 1) {
          window.article = 0
        } else {
          window.article += 1
        }

        articles.forEach((article, index) => {
          if (index !== window.article) {
            article.style.display = 'none'
          } else {
            article.style.display = 'block'
          }
        })
      }

      articles()
      setInterval(articles, 5000)
    </script>
  </body>
</html>