Bouwen - KaanKalmi/S12-proof-of-concept GitHub Wiki

Prototype 1 (08/06)

image

Prototype 1.5 (11/06)

Mobile

image

image

Tablet

image

image

Desktop

image

image

Complexe front-end code dat ik heb gebruikt deze sprint:

Dynamisch inladen van de artikelen

// GET ROUTES
// maak route aan met /articles en haal de data op van de api, hierdoor kan ik de data herladen op de pagina zonder de server te herstarten
app.get('/articles', async function(req, res) {
  const articles = await fetchJson('https://api.mobile.bnr.nl/v1/articles');
  res.json(articles);
})

// maak route aan waarbij de data van de route hierboven word opgehaald, laad vervolgens de index in met de 2 variabelen.
app.get('/', async function(req, res){
  const response = await fetch('http://localhost:' + app.get('port') + '/articles');
  const articles = await response.json();

  res.render('index', {
      articles: articles,
      mp3: mp3
  })
  console.log('if you see this message the page loaded correctly')
});
// Articles inladen met interval
setInterval(function() {
    fetch('/articles')
        .then(response => response.json())
        .then(articles => {
            console.log(articles); // Log de artikels in console, zodat ik weet dat het uberhaupt update
        });
}, 30 * 60 * 1000); // update de artikels elke 30 minuten

PE radio

<section class="audio-player">
    <h2>Live radio</h2>
    <audio id="audio" src="http://playerservices.streamtheworld.com/api/livestream-redirect/BNR_BUSINESS_BEATS.mp3?<%= Date.now() %>" controls preload="none"></audio>
    <div class="hidden">
    <div class="play-btn-container">
        <button id="play-pause-button">
            <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="#FFD200" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="icon icon-tabler icons-tabler-outline icon-tabler-player-play">
                <path stroke="none" d="M0 0h24v24H0z" fill="none"/>
                <path d="M7 4v16l13 -8z"/>
                <title> Play </title>
            </svg>
        </button>
    </div>
    <div id="current-time">
        0:00
    </div>
    <div class="controls">
        <img src="/sound.svg" height="30">
        <label for="volume-control">
        <input type="range" name="volume-control" id="volume-control" min="0" max="1" step="0.01" value="1">
        </label>
    </div>
    </div>
</section>
.hidden{
    display: none;
}
.audio-player {
    position: fixed;
    bottom: 0;
    margin: auto;
    background-color: var(--accent);
    padding-top: 24px;
    width: 100vw;
    height: 8vh;
    color: var(--accent-text);

    h2 {
        margin-top: -20px;
        margin-bottom: 0;
        margin-left: 10px;
        font-size: 18px;
        text-align: left;
    }

    .play-btn-container {
        position: absolute;
        bottom: 20px;
        left: 42%;
        margin: auto;
    }

    #play-pause-button {
        animation: pulse 4s 1s infinite linear;
        cursor: pointer;
        margin: auto;
        border: none;
        border-radius: 1000px;
        padding: 12px;
    }

    .controls {
        display: flex;
        position: absolute;
        right: 20px;
        bottom: 30px;
        justify-content: end;
        align-items: end;
    
        #volume-control {
            width: 80px;
            height: 15px;
            margin-block: 8px;
            background-color: var(--accent);
        }
    }

    #current-time {
        position: absolute;
        bottom: 10px;
        margin-left: 10px;
    }
// radio
const audio = document.getElementById("audio");
const playPauseButton = document.getElementById("play-pause-button");
const volumeControl = document.getElementById("volume-control");
const currentTimeDisplay = document.getElementById("current-time");
let isPlaying = false;

const visibilityToggle = document.getElementsByClassName("hidden")[0];
visibilityToggle.style.display= "block";
audio.style.display='none';

playPauseButton.addEventListener("click", () => {
    if (isPlaying) {
        audio.pause();
        playPauseButton.innerHTML = "<svg  xmlns='http://www.w3.org/2000/svg'  width='24'  height='24'  viewBox='0 0 24 24'  fill='#FFD200'  stroke='currentColor'  stroke-width='2'  stroke-linecap='round'  stroke-linejoin='round'  class='icon icon-tabler icons-tabler-outline icon-tabler-player-play'><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M7 4v16l13 -8z' /></svg>";
    } else {
        audio.play();
        playPauseButton.innerHTML = "<svg  xmlns='http://www.w3.org/2000/svg'  width='24'  height='24' viewBox='0 0 24 24'  fill='#FFD200'  stroke='currentColor'  stroke-width='2'  stroke-linecap='round'  stroke-linejoin='round'  class='icon icon-tabler icons-tabler-outline icon-tabler-player-pause'><path stroke='none' d='M0 0h24v24H0z' fill='none'/><path d='M6 5m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z' /><path d='M14 5m0 1a1 1 0 0 1 1 -1h2a1 1 0 0 1 1 1v12a1 1 0 0 1 -1 1h-2a1 1 0 0 1 -1 -1z' /></svg>";
    }
    isPlaying = !isPlaying;
});

volumeControl.addEventListener("input", () => {
    audio.volume = volumeControl.value;
});

audio.addEventListener("timeupdate", () => {
    const currentTime = audio.currentTime;

    const currentMinutes = Math.floor(currentTime / 60);
    const currentSeconds = Math.floor(currentTime % 60);

    currentTimeDisplay.textContent = `${currentMinutes}:${currentSeconds < 10 ? '0' : ''}${currentSeconds}`;
});
⚠️ **GitHub.com Fallback** ⚠️