Skip to content

3. Bouwen

Jump to bottom
OniWithTheHoodie edited this page May 17, 2024 · 7 revisions

CODE VAN LESLEY

index.ejs

In deze code heb ik kaarten gemaakt de kaarten die zijn gemaakt word data opgehaald vanuit directus uit het tabel f_houses en f_feedback.

  • F_HOUSES haal ik de foto's, prijzen, 4kanten meters etc. Deze data heb ik gebruikt om de kaarten te maken in de index pagina
  • F_feedback gebruik ik voor de ratings waar de users, ratings etc. Deze data heb ik gebruikt om de popup te maken.
HTML 
<%- include('./partials/head') %>
<%- include('./partials/navigation') %>
 
<body>
  <main>
    <header>
      <h1>Favorieten</h1>
      <hr />
      <p>In dit overzicht vind je al jouw favoriete huizen terug.</p>
    </header>
 
    <div class="container">
      <div class="grid-container">
        <% alleHuizen.forEach((huis, index) => { %>
        <div class="card-favorites">
          <picture>
            <source
              srcset="https://fdnd-agency.directus.app/assets/<%= huis.poster_image %>?format=webp"
              type="image/webp" />
            <source
              srcset="https://fdnd-agency.directus.app/assets/<%= huis.poster_image %>?format=avif"
              type="image/avif" />
            <img
              src="https://fdnd-agency.directus.app/assets/<%= huis.poster_image %>"
              alt="foto huis"
              width="400"
              height="400"
              class="card-image" />
          </picture>
 
          <article>
            <ol>
              <h2><a class="card-link" href="./huis/<%= huis.id %>"><%= huis.street %> <%= huis.house_nr %></a></h2>
              <li>€ <%- huis.price %></li>
              <li><%- huis.postal_code %> <%- huis.city %></li>
              <li><%- huis.m2 %> m² • <%- huis.rooms %> Kamers</li>
              <li><%- huis.m2 %></li>
              <li><%- huis.agent %></li>
 
              <div class="btn__container">
                <a class="btn-popup" href="#popup1_<%= huis.id %>">Rate dit huis</a>
              </div>
            </ol>
          </article>
        </div>
 
        <!-- Popup for each house -->
        <div id="popup1_<%= huis.id %>" class="overlay">
          <article class="popup">
            <h2>Rate dit huis</h2>
            <a class="close" href="#">
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
                <path
                  d="M256 48a208 208 0 1 1 0 416 208 208 0 1 1 0-416zm0 464A256 256 0 1 0 256 0a256 256 0 1 0 0 512zM175 175c-9.4 9.4-9.4 24.6 0 33.9l47 47-47 47c-9.4 9.4-9.4 24.6 0 33.9s24.6 9.4 33.9 0l47-47 47 47c9.4 9.4 24.6 9.4 33.9 0s9.4-24.6 0-33.9l-47-47 47-47c9.4-9.4 9.4-24.6 0-33.9s-24.6-9.4-33.9 0l-47 47-47-47c-9.4-9.4-24.6-9.4-33.9 0z"/>
              </svg>
            </a>
            <form action="/" method="post" class="ratingsFavorieten">
              <%- include('./partials/detailed-rating', { huis: huis }) %>
            </form>
            <div class="container__rating">
              <a href="" class="btn__rating"></a>
            </div>
          </article>
        </div>
        <% }) %>
      </div>
    </div>
  </main>
</body>
 
<%- include('./partials/foot') %>
  • Er is een partial in de index.ejs die doorverwijst naar de ratings die ik heb gemaakt met radio buttons. wel heb ik hierin een fout gemaakt omdat ik het in een foreach loop heb geschreven met een object geschreven waarbij ik de data van detailed-ratings.ejs kan gebruiken.

Detailed-ratings.ejs

detailed-ratings.ejs 
<input type="hidden" name="id" value="<%- huis.id %>" />
<input type="radio" id="1star" name="stars" value="1">
<label for="1star"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <!-- Outer path for star outline -->
  <path fill="none" stroke="var(--ci-primary-color, currentColor)" stroke-width="32" d="M494,198.671a40.536,40.536,0,0,0-32.174-27.592L345.917,152.242,292.185,47.828a40.7,40.7,0,0,0-72.37,0L166.083,152.242,50.176,171.079a40.7,40.7,0,0,0-22.364,68.827l82.7,83.368-17.9,116.055a40.672,40.672,0,0,0,58.548,42.538L256,428.977l104.843,52.89a40.69,40.69,0,0,0,58.548-42.538l-17.9-116.055,82.7-83.368A40.538,40.538,0,0,0,494,198.671Z"/>
  <!-- Inner path for star fill -->
  <path fill="var(--ci-secondary-color, currentColor)" d="M461.469,217.37,367.4,312.2l20.364,132.01a8.671,8.671,0,0,1-12.509,9.088L256,393.136,136.744,453.3a8.671,8.671,0,0,1-12.509-9.088L144.6,312.2,50.531,217.37a8.7,8.7,0,0,1,4.778-14.706L187.15,181.238,248.269,62.471a8.694,8.694,0,0,1,15.462,0L324.85,181.238l131.841,21.426A8.7,8.7,0,0,1,461.469,217.37Z"/>
</svg></label>
 
<input type="radio" id="2star" name="stars" value="2" checked>
<label for="2star"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <!-- Outer path for star outline -->
  <path fill="none" stroke="var(--ci-primary-color, currentColor)" stroke-width="32" d="M494,198.671a40.536,40.536,0,0,0-32.174-27.592L345.917,152.242,292.185,47.828a40.7,40.7,0,0,0-72.37,0L166.083,152.242,50.176,171.079a40.7,40.7,0,0,0-22.364,68.827l82.7,83.368-17.9,116.055a40.672,40.672,0,0,0,58.548,42.538L256,428.977l104.843,52.89a40.69,40.69,0,0,0,58.548-42.538l-17.9-116.055,82.7-83.368A40.538,40.538,0,0,0,494,198.671Z"/>
  <!-- Inner path for star fill -->
  <path fill="var(--ci-secondary-color, currentColor)" d="M461.469,217.37,367.4,312.2l20.364,132.01a8.671,8.671,0,0,1-12.509,9.088L256,393.136,136.744,453.3a8.671,8.671,0,0,1-12.509-9.088L144.6,312.2,50.531,217.37a8.7,8.7,0,0,1,4.778-14.706L187.15,181.238,248.269,62.471a8.694,8.694,0,0,1,15.462,0L324.85,181.238l131.841,21.426A8.7,8.7,0,0,1,461.469,217.37Z"/>
</svg></label>
 
<input type="radio" id="3star" name="stars" value="3">
<label for="3star"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <!-- Outer path for star outline -->
  <path fill="none" stroke="var(--ci-primary-color, currentColor)" stroke-width="32" d="M494,198.671a40.536,40.536,0,0,0-32.174-27.592L345.917,152.242,292.185,47.828a40.7,40.7,0,0,0-72.37,0L166.083,152.242,50.176,171.079a40.7,40.7,0,0,0-22.364,68.827l82.7,83.368-17.9,116.055a40.672,40.672,0,0,0,58.548,42.538L256,428.977l104.843,52.89a40.69,40.69,0,0,0,58.548-42.538l-17.9-116.055,82.7-83.368A40.538,40.538,0,0,0,494,198.671Z"/>
  <!-- Inner path for star fill -->
  <path fill="var(--ci-secondary-color, currentColor)" d="M461.469,217.37,367.4,312.2l20.364,132.01a8.671,8.671,0,0,1-12.509,9.088L256,393.136,136.744,453.3a8.671,8.671,0,0,1-12.509-9.088L144.6,312.2,50.531,217.37a8.7,8.7,0,0,1,4.778-14.706L187.15,181.238,248.269,62.471a8.694,8.694,0,0,1,15.462,0L324.85,181.238l131.841,21.426A8.7,8.7,0,0,1,461.469,217.37Z"/>
</svg></label>
 
<input type="radio" id="4star" name="stars" value="4">
<label for="4star"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <!-- Outer path for star outline -->
  <path fill="none" stroke="var(--ci-primary-color, currentColor)" stroke-width="32" d="M494,198.671a40.536,40.536,0,0,0-32.174-27.592L345.917,152.242,292.185,47.828a40.7,40.7,0,0,0-72.37,0L166.083,152.242,50.176,171.079a40.7,40.7,0,0,0-22.364,68.827l82.7,83.368-17.9,116.055a40.672,40.672,0,0,0,58.548,42.538L256,428.977l104.843,52.89a40.69,40.69,0,0,0,58.548-42.538l-17.9-116.055,82.7-83.368A40.538,40.538,0,0,0,494,198.671Z"/>
  <!-- Inner path for star fill -->
  <path fill="var(--ci-secondary-color, currentColor)" d="M461.469,217.37,367.4,312.2l20.364,132.01a8.671,8.671,0,0,1-12.509,9.088L256,393.136,136.744,453.3a8.671,8.671,0,0,1-12.509-9.088L144.6,312.2,50.531,217.37a8.7,8.7,0,0,1,4.778-14.706L187.15,181.238,248.269,62.471a8.694,8.694,0,0,1,15.462,0L324.85,181.238l131.841,21.426A8.7,8.7,0,0,1,461.469,217.37Z"/>
</svg></label>
 
<input type="radio" id="5star" name="stars" value="5">
<label for="5star"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
  <!-- Outer path for star outline -->
  <path fill="none" stroke="var(--ci-primary-color, currentColor)" stroke-width="32" d="M494,198.671a40.536,40.536,0,0,0-32.174-27.592L345.917,152.242,292.185,47.828a40.7,40.7,0,0,0-72.37,0L166.083,152.242,50.176,171.079a40.7,40.7,0,0,0-22.364,68.827l82.7,83.368-17.9,116.055a40.672,40.672,0,0,0,58.548,42.538L256,428.977l104.843,52.89a40.69,40.69,0,0,0,58.548-42.538l-17.9-116.055,82.7-83.368A40.538,40.538,0,0,0,494,198.671Z"/>
  <!-- Inner path for star fill -->
  <path fill="var(--ci-secondary-color, currentColor)" d="M461.469,217.37,367.4,312.2l20.364,132.01a8.671,8.671,0,0,1-12.509,9.088L256,393.136,136.744,453.3a8.671,8.671,0,0,1-12.509-9.088L144.6,312.2,50.531,217.37a8.7,8.7,0,0,1,4.778-14.706L187.15,181.238,248.269,62.471a8.694,8.694,0,0,1,15.462,0L324.85,181.238l131.841,21.426A8.7,8.7,0,0,1,461.469,217.37Z"/>
</svg></label>
 
<input type="submit" value="Rate" />
 
<a href="">Bekijk hier de overzicht van de score </a>

styles.css

  • In de styles heb ik de styling voor de button gemaakt en een overlay over de kaarten. Deze overlay is op hidden en de close button ook die alleen getoond word als er op de button geklikt wordt. Door een ID mee te geven is dit mogelijk waarbij je de ratings kunt zien.
CSS 
/****************************************************************
                                                                *
                    Button Pop up index.EJS                     *                        
                                                                *
*****************************************************************/
    .btn__container {
      margin-top: 20px;
    }


    .btn-popup {
      font-size: 1em;
      padding: 10px;
      background-color: var(--regent-blue-primary-color);
      color: var(--color-main-text);
      border: 2px solid var(--web-orange-primary-color);
      border-radius: 20px/50px;
      text-decoration: none;
      cursor: pointer;
      transition: all 0.3s ease-out;
      position: relative;
      z-index: 1; 
    }


    .btn-popup:hover {
      background-color: var(--web-orange-primary-color);
      z-index: 1;
    }


  




/****************************************************************
                                                                *
                          POPUP RATINGS                         *                        
                                                                *
*****************************************************************/


.overlay { 
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background-color: var(--regent-blue-primary-color);
  transition: opacity 500ms;
  visibility: hidden;
  opacity: 0;
}


.overlay:target {
  visibility: visible;
  opacity: 1;
}


.popup {
  margin: 70px auto;
  padding: 20px;
  background-color: var(--regent-blue-primary-color);
  border-radius: 5px;
  width: 70%;
  position: relative;
  /* transition: all 5s ease-in-out; */
}


.popup h2 {
  margin-top: 0;
  color: var(--color-main-text);
}


.popup .close {
  position: absolute;
  bottom: 5em;
  left: 110%;
  transition: all 200ms;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: var(--color-main-text);
}


.popup .close:hover {
  color: var(--web-orange-primary-color);
}


@media (min-width: 45rem) {
  .popup {
    margin: 70px auto;
    padding: 20px;
    background-color: var(--regent-blue-primary-color);
    border-radius: 5px;
    width: 100%;
    position: relative;
  }


  .popup .close {
    position: absolute;
    bottom: 5em;
    left: 90%;
    font-size: 30px;
    font-weight: bold;
    text-decoration: none;
    color: var(--color-main-text);
  }
}


@media (min-width:55rem) {
  .popup .close {
    position: absolute;
    bottom: 5em;
    left: 95%;
    font-size: 30px;
    font-weight: bold;
    text-decoration: none;
    color: var(--color-main-text);
  }
}

JS

  • In de server.js heb ik een apiURL variable waarbij f_houses of f_feedback meegegeven kan worden met de apiURL
  • let = ratings variable gemaakt waarbij de post rating in wordt opgeslagen
JS 
const apiUrl = 'https://fdnd-agency.directus.app/items/'
const huizenHome = await fetchJson(apiUrl + 'f_houses')
const feedback = await fetchJson(apiUrl + 'f_feedback')


// 
// let ratings = ''
let ratings = []
// Get Route voor de index
app.get('/', function (request, response) {
  // fetch data directus table f_feedback
  fetchJson(apiUrl + 'f_feedback').then((BeoordelingData) => {
    // console.log(BeoordelingData)


    response.render('index', {
      alleHuizen: huizenHome.data,
      alleRatings: feedback.data,
      ratings: ratings,
    })
    // console.log(ratings)
  })
})


app.post('/', function (request, response) {
  console.log(request.body)


  // posten naar directus..
  fetch(`${apiUrl}f_feedback/`, {
    method: 'POST',
    body: JSON.stringify({
      house: request.body.id,
      list: 12,
      user: 7,
      rating: {
        stars: request.body.stars,
      },
    }),
    headers: {
      'Content-Type': 'application/json; charset=UTF-8',
    },
  }).then((postResponse) => {
    console.log(postResponse)
    response.redirect(303, '/')
  })
})
Clone this wiki locally