shotgun hihi

oops

helpers/fetch-json.js

@@ -0,0 +1,20 @@
+/**
+ * An asynchronous helper function that wraps the standard node.js fetch API.
+ * This function calls an API url passed as the first and mandatory parameter,
+ * there is an optional payload parameter to send a json object, eg. a filter.
+ * It then calls the API and returns the response body parsed  as a json object.
+ * @example <caption>fetchJson as returning function using the await keyword</caption>
+ * const data = await fetchJson('https://api-url.com/endpoint/')
+ * @example <caption>fetchJson as oneliner using the then() structure.</caption>
+ * fetchJson('https://api-url.com/endpoint/').then((data)=>{
+ *  // use data...
+ * })
+ * @param {string} url the api endpoint to address
+ * @param {object} [payload] the payload to send to the API
+ * @returns the response from the API endpoint parsed as a json object
+ */
+export default async function fetchJson(url, payload = {}) {
+  return await fetch(url, payload)
+    .then((response) => response.json())
+    .catch((error) => error)
+}

public/script.js

@@ -0,0 +1,67 @@
+// elements selecteren
+let hamburger = document.querySelector('.hamburger')
+let navMenu = document.querySelector('.desktop')
+let body = document.querySelector('body')
+var likedCircle = document.querySelector('.liked-circle')
+var sugCircle = document.querySelector('.sug-circle')
+var hiddenHeader = document.querySelectorAll('.hidden-header')
+var prevBTN = document.querySelector('.prevBTN')
+var nextBTN = document.querySelector('.nextBTN')
+
+// hamburger menu addeventlistener
+hamburger.addEventListener('click', () => {
+  navMenu.classList.toggle('nav-active')
+  navMenu.classList.toggle('desktop')
+  hamburger.classList.toggle('active-bar')
+})
+
+// PE suggested + liked playlist section
+// JS code added & removing styling without JS
+body.classList.remove('liked-no-js', 'sug-no-js')
+body.classList.add('has-js')
+// hide content no function w/o JS
+likedCircle.hidden = false
+sugCircle.hidden = false
+nextBTN.hidden = false
+prevBTN.hidden = false
+
+// Carousel liked + suggested playlist
+// external JS file GSAP
+document.addEventListener('DOMContentLoaded', (event) => {
+  gsap.registerPlugin(Draggable)
+})
+
+// GSAP draggable
+Draggable.create('.slayrousel', {
+  type: 'rotation',
+  inertia: true,
+})
+
+// Clientside fetch
+let forms = document.querySelectorAll('form.like-form')
+// loop door forms
+forms.forEach(function (form) {
+  form.addEventListener('submit', function (event) {
+    // leest data form + geeft extra eigenschap mee
+    let data = new FormData(this)
+    data.append('enhanced', true)
+
+    // client-side fetch
+    fetch(this.action, {
+      method: this.method,
+      body: new URLSearchParams(data),
+    })
+      // return html
+      .then(function (response) {
+        return response.text()
+      })
+      .then(function (responseHTML) {
+        document.querySelector('.art-slayrousel').innerHTML = responseHTML
+        console.log(responseHTML)
+      })
+
+    event.preventDefault()
+  })
+})
+
+// Allstories carousel

public/styleM.css

@@ -0,0 +1,162 @@
+.poppins-regular {
+    font-family: "Poppins", sans-serif;
+    font-weight: 400;
+    font-style: normal;
+  }
+
+  .poppins-medium {
+    font-family: "Poppins", sans-serif;
+    font-weight: 500;
+    font-style: normal;
+  }
+
+:root {
+--primary-font: "Poppins", sans-serif;
+  /* colourpalette */
+  /*--------b---w------ */
+  --white: #F5FAFF;
+  --black: hsla( 0, 0%, 0%,1);
+}
+
+/* generiek */
+body{
+    background: rgb(255,255,255);
+    background: linear-gradient(4deg, rgba(255,255,255,1) 2%, rgba(34,74,136,1) 57%);
+    display: grid;
+    grid-template-columns: 1fr;
+    grid-template-rows: .5fr 1fr 3fr 1fr 2fr; 
+
+
+    & p{
+        color: white;
+        text-align: center;
+        font-family: "Poppins", sans-serif;
+    }
+
+    & nav{
+        background-color: white;
+        border-radius: .5em;
+    }
+
+    & .first{
+        position: absolute;
+        bottom: 50vh;
+        left: 60vw;
+    }
+
+    & .second{
+        position: absolute;
+        bottom: 43vh;
+        right: 60vw;
+
+    }
+
+    & .maan{
+        position: absolute;
+        bottom: 45vh;
+        left: 25vw;
+    }
+
+    .time{
+        position: relative;
+        z-index: 1;
+
+        & p:nth-child(1){
+            font-size: 40px;
+            font-weight: 600;
+            margin-bottom: 0;
+        }
+    }
+}
+
+
+
+header{
+    font-family: "Poppins", sans-serif;
+
+    & h1{
+        color: white;
+        font-size: 48px;
+        margin: 0;
+        text-align: center;
+    }
+}
+
+body .first,
+body .second,
+body .maan {
+    position: absolute;
+    z-index: 0;
+}
+
+
+.message {
+    background-color: #F5FAFF;
+    border-radius: .5em;
+    margin: auto;
+    padding: .5em;
+    grid-area: 4/1/5/2;
+
+    & p{
+        color: black;
+        max-width: 60vw;
+        text-align: left;
+        margin-top: 0;
+    }
+
+    & a{
+       background-color: #954BE2;
+       color: white;
+       border: none;
+       border-radius: .5em;
+       padding: 1em;
+       text-decoration: none;
+       font-family: "Poppins", sans-serif;
+       width: 100%;
+    }
+}
+
+
+.time{
+    grid-area: 3/1/4/2;
+}
+
+.message{
+    grid-area: 4/1/5/2;
+}
+
+/* animations */
+
+/* right to left */
+@keyframes moveSideToSide {
+    0% {
+        transform: translateX(0);
+    }
+    50% {
+        transform: translateX(100px);
+    }
+    100% {
+        transform: translateX(0);
+    }
+}
+
+/* left to right + little delay */
+@keyframes moveSideToSide2 {
+    0% {
+        transform: translateX(0);
+    }
+    40% {
+        transform: translateX(-100px);
+    }
+    100% {
+        transform: translateX(0);
+    }
+}
+
+#moving-svg {
+    animation: moveSideToSide 4s ease-in-out ;
+}
+
+#moving-svg2 {
+    animation: moveSideToSide2 4s ease-in-out ;
+}