Bouwen

Conventies

Ik werk aan de hand van 5 gekozen code conventions uit deze bron. Daarnaast gebruik ik standaard een indentation van één tab.

3.1.4 Multimedia Fallback:

"For images that means use of meaningful alternative text (alt) and for video and audio transcripts and captions, if available."

3.2.1 General Formatting:

"Use a new line for every block, list, or table element, and indent every such child element."

3.2.3 HTML Quotation Marks:

"When quoting attributes values, use double quotation marks."

4.1.10 Leading 0's:

"Put 0s in front of values or lengths between -1 and 1."

4.2.6 Selector and Declaration Separation:

"Always start a new line for each selector and declaration."

Process

🗓️ 28 september 2023

Aan de hand van de nieuwe breakdownschets die ik vandaag gemaakt heb, ben ik begonnen met het bouwen van de website. Met de OBA website van Amber als uitgangspunt, heb ik al mijn Html geschreven in een nieuwe Html-file voor bij het tabje 'reserveringen'. Deze heb ik ook gelinkt vanuit de index.html.

🗓️ 3 oktober 2023

Vandaag ben ik begonnen met de css voor mobile-first.

Ik heb op de main gebruik gemaakt van flex met de flex-direction: column; omdat ik de content op een smal scherm onder elkaar wil hebben. Daarnaast heb ik op de andere elementen justify-content: center; en align-text: center; omdat ik ook de content op een smal scherm in het midden wil hebben.

🗓️ 4 oktober 2023

Na mijn layout op een smal scherm afgemaakt te hebben ben ik verder gegaan naar grotere schermen via media queries. Deze keer heb gebruik gemaakt van min-width in plaats van max-width omdat ik nu van klein naar groot werk.

Bij bovenstaande media query heb ik gekeken naar vanaf waar mijn layout niet meer klopte/ mooi was. In dit geval kwam vanaf 520px de lightbulb foto naast de titel te staan terwijl ik hem nog eronder wilde. Met deze code zet ik hem weer onder de titel.

Vanaf grotere schermen, in dit geval 850px, wil ik niet meer dat de content in één kolom in het midden staat dus maak ik nu gebruik van flex en grid om de content naast elkaar te zetten.

🗓️ 5 oktober 2023

Onder de h1 heb ik een paar filter opties toegevoegd. Hier zou je eventueel later op kunnen klikken zodat alleen de uitleengeschiedenis van het geselecteerde filter te zien is.

Ik heb voor de filters een div gemaakt met de class "buttons" en daarin de 3 buttons voor de filter-opties gezet. Deze heb ik vervolgens de juiste styling gegeven door de class selector .buttons en element selector button te gebruiken.

Ook heb ik bij de media queries de pixels veranderd naar een EM unit. Nu is 520px 32em, en 850px 53em.

🗓️ 9 oktober 2023

Ik heb de kleur van de filter buttons veranderd naar een rode achtergrond met witte tekst zodat ze meer opvallen dan de andere buttons.

background: var(--primary-color);
font-family: AvenirMedium;
font-size: 1rem;
color: white;

Ook heb ik doorgelinkt naar de websites van mijn groepsgenoten.

<li class="nav-link">
  <a href="https://lisagjh.github.io/the-client-website/">
    <i class='bx bx-bookmark icon'></i> 
      <p class="text nav-text">Diensten en Producten</p>
  </a>
</li>

🗓️ 11 oktober 2023

Na feedback van onze opdrachtgever dat het fijn is om op elke pagina een zoekfunctie te hebben, heb ik een zoekbalk aan mijn pagina toegevoegd. Dit heb ik gedaan met een form element en daarna styling in CSS gegeven met hetzelfde design als de rest van mijn pagina.

<form action="#">
  <input type="text" placeholder="Zoek..." name="search">
  <i class='bx bx-search'></i>
</form>

form {
  margin-bottom: 2rem;
  padding-left: 1rem;
  text-align: center;
}

form i {
  border-radius: 1rem;
  color: var(--text-color);
  font-size: 1.2rem;
}

input {
  padding: 0.5rem 0.5rem;
  border-radius: 1rem;
  border: none;
  font-family: AvenirMedium;
  color: var(--text-color);
  font-size: 1rem;
  outline: 0;
}

Ook heb ik een pop-upvenster toegevoegd als je op de info knop onder de boeken klikt. Hier kan je meer informatie lezen over wanneer je de boeken hebt uitgeleend en weer ingeleverd. Dit heb ik gedaan met een div met daarop de class .overlay, die ik gebruik om de popup te positioneren. De div daarin met de class .popup, gebruik ik om de popup met alle tekst erin daadwerkelijk ook weer te geven. In de button (a href="#popup1") link ik naar de popup zodat hij verschijnt als je erop klikt.

<div id="popup1" class="overlay">
  <div class="popup">
     <h2>Informatie</h2>
     <a class="close" href="#">&times;</a>
     <p>Uitgeleend op 1 oktober juni 2023</p>
     <p>Ingelevered op 10 oktober 2023</p>
  </div>
</div>

body:has(.overlay:target) main {
    overflow: hidden;
    height: 100vh;
}

.overlay {
  position: absolute;
  display: flex;
  align-items: center;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.2);
  visibility: hidden;
  opacity: 0;
}

.overlay:target {
  visibility: visible;
  opacity: 1;
  z-index: 1;
}

.popup {
  position: relative;
  margin: 6em auto;
  padding: 2em;
  background: #fff;
  border-radius: 1rem;
  width: 90%;
}

.popup .close {
  position: absolute;
  top: 20px;
  right: 30px;
  font-size: 30px;
  font-weight: bold;
  text-decoration: none;
  color: var(--primary-color);
  transition: all 200ms;
}