Ik zorg ervoor als de input een focus heeft dat de label zichtbaar is. Ik doe dit door de label onder de input te zetten en met css en order om te draaien.

.placeholder-input-field input ~ label {
   order: 0;
 }

.placeholder-input-field input{
   order: 1;
 }

Als de input dan een focus heeft, omdat je met je muis erin staat dan veranderd de opacity van de label van 0 naar 1. Als je muis weer weg haalt dan gebeurd het omgekeerde.

De gehele code

.placeholder-input-field input ~ label {
  opacity: 0;
  order: 0;
  transition: .5s;
  font-size: 11px;
 }

.placeholder-input-field input:focus ~ label  {
  opacity: 1 !important;
  transition: .5s;
  font-size: 11px;
}

.placeholder-input-field input:focus::placeholder  {
  color: transparent;
}

.placeholder-input-field input{
  order: 1;
  padding: 10px;
}  

Om required te geven aan de HTML betekent dat je het formulier niet kan verzenden als je required input niet hebt voldaan of juist hebt voldaan.

Als je hebt voldaan aan de input dan wordt het input field groen.

Voorbeeld code:

.placeholder-input-field input[type=text]:invalid {
  background-color: var(--color-input);
}

.placeholder-input-field input[type=text]:valid {
  background-color: #ddffdd;
} 

Ik wilde dat de achtergrond groen werd wanneer iemand kon oppassen op een bepaalde dag. Daarom heb ik data gezet in een class. Zo wordt de achtergrond van de achtergrond bij een bepaalde data groen.

Voorbeeld code:

HTML

<p><strong>Zondag:</strong> <span `class="{{this.sunday}}"`>{{this.sunday}}</span></p>

Css

.grid-3 .Avond, .grid-3 .Middag, .grid-3 .Ochtend, .grid-3 .Gehele{
   background-color: #b4ffb4;
 }

De input Input type="file" is lastig te stijlen. Daarom heb ik de input op hidden gezet en met een :before zichtbaar gemaakt, zodat ik hem kon style.

.custom-file-input::-webkit-file-upload-button {
  visibility: hidden;
}

.custom-file-input::before {
  content: 'Voeg een profiel foto toe (jpg)';
  display: inline-block;
  background: linear-gradient(top, #f9f9f9, #e3e3e3);
  border: 1px solid #999;
  border-radius: 3px;
  padding: 5px 8px;
  outline: none;
  white-space: nowrap;
  -webkit-user-select: none;
  cursor: pointer;
  text-shadow: 1px 1px #fff;
  font-weight: 700;
  font-size: 10px;
}

.custom-file-input:hover::before {
  border-color: black;
}

.custom-file-input:active::before {
  background: -webkit-linear-gradient(top, #e3e3e3, #f9f9f9);
}

Ik heb een Javascript function gemaakt die met dark en light mode werk. Daarnaast werk die ook met localStorage. Dit zorgt ervoor dat je de gegevens van de vorige keer kan opslaan als de webbrowser het ondersteund.

1. Ik begin met variable

    const btn = document.querySelector(".btn-toggle");
    const prefersDarkScheme = window.matchMedia("(prefers-color-scheme: dark)");
    const bodyDarkLight = document.querySelector("body");
    const currentTheme = localStorage.getItem("theme");
    const lightTheme = "light-theme";
    const darkTheme = "dark-theme";
    let theme;
   

2. Bekijkt of die op light of dark mode die zit

    if (currentTheme == "dark") {
      bodyDarkLight.classList.toggle(darkTheme);
    } else if (currentTheme == "light") {
      bodyDarkLight.classList.toggle(lightTheme);
    }
   

3. De button function

    btn.addEventListener("click", () => {
      if (prefersDarkScheme.matches) {
        bodyDarkLight.classList.toggle(lightTheme);
        theme = bodyDarkLight.classList.contains(lightTheme) ? "light" : "dark";
      } else {
        bodyDarkLight.classList.toggle(darkTheme);
        theme = bodyDarkLight.classList.contains(darkTheme) ? "dark" : "light";
      }
      localStorage.setItem("theme", theme);
    });
   

4. de HTML

    <button class="btn-toggle">
        <p>Light & Dark</p>
    </button>
   

• Ik heb de code zo kort mogelijk proberen te houden.
• Data wordt opgeslagen in localStorage.
• ? "dark" : "light"; ? = if en : = else.
• es6 function van JavaScript.

1. Ik begin met variable

    const modal = document.querySelector('.modal');
    const overlay = document.querySelector('.overlay');
    const btnCloseModal = document.querySelector('.close-modal');
    const btnsOpenModal = document.querySelector('.show-modal');
   

2. Function maken de class hidden toe te voegen of te verwijderen

    btnsOpenModal.addEventListener("click", () => {
      modal.classList.remove('hidden');
      overlay.classList.remove('hidden');
    });
   
    btnCloseModal.addEventListener("click", () => {
      modal.classList.add('hidden');
      overlay.classList.add('hidden');
    });
   
    overlay.addEventListener("click", () => {
      modal.classList.add('hidden');
      overlay.classList.add('hidden');
    });
   

3. Function met een addEventListener met Key down

    document.addEventListener('keydown', (e) => {
      if (e.key === 'Escape' && !modal.classList.contains('hidden')) {
        modal.classList.add('hidden');
        overlay.classList.add('hidden');
      }
    });
   

• Het is responsive.
• Ik heb een addEventListener met Key down
• es6 function van JavaScript.

API in Browser - Fade in