Lasst uns einen Farbverlaufs Generator programmieren (HTML, CSS & Javascript Tutorial)

Wer regelmässig Webseiten macht der weiss ziemlich gut, dass grosse einfache Farbflächen sehr schnell langweilig wirken und aus diesem Grund verwendet man gerne einen Farbverlauf. Leider kann man sich so einen Farbverlauf nur schwer vorstellen – ich mag sowas am liebsten direkt visuell. Aus diesem Grund bauen wir heute gemeinsam einen Farbverlaufs-Generator. Mit dieser kleinen Übung lernen wir nämlich nicht nur neue HTML und CSS Skills sondern vergrössern unser Javascript Wissen ebenfalls.

Video

HTML

<div class="container">
        <div class="box"></div>
            <div class="row options">
                <div class="column direction">
                    <p>Verlauf:</p>
                    <div class="select-box">
                        <select>
                            <option value="to top">Top</option>
                            <option value="to right top">Right top</option>
                            <option value="to right">Right</option>
                            <option value="to right bottom">Right Bottom</option>
                            <option value="to bottom">Bottom</option>
                            <option value="to left bottom">Left Bottom</option>
                            <option value="to left">Left</option>
                            <option value="to left top" selected >Left Top</option>
                        </select>
                    </div>
                </div>
                <div class="column colors">
                    <p>Farben:</p>
                        <div class="inputs">
                            <input type="color" name="" id="" value="#fa2929">
                            <input type="color" name="" id="" value="#4d58f9">
                        </div>
                </div>
            </div>
            <textarea class="row" disabled></textarea>
            <div class="row buttons">
                <button class="copy">Kopieren</button>
            </div>
        
        </div>
        
    </div>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  background: #00509d;
}

.container {
  width: 450px;
  padding: 25px;
  border-radius: 7px;
  background: #fff;
}

.container .box {
  width: 100%;
  height: 220px;
  background: linear-gradient(to left top, #fa2929, #4d58f9);
  border-radius: 7px;
}

.container .row {
  display: flex;
  margin: 20px 0;
  justify-content: space-between;
}

.row :where(.column, button) {
  width: calc(100% / 2 - 12px);
}

.options p {
  font-size: 1.2rem;
  margin-bottom: 10px;
}

.options .select-box {
  border-radius: 5px;
  padding: 10px 15px;
  border: 1px solid #aaa;
}

.select-box select {
  width: 100%;
  border: none;
  outline: none;
  background: none;
  font-size: 0.8rem;
}

.options .colors {
  margin-left: 60px;
}

.colors input {
  height: 40px;
  width: calc(100% / 2 - 20px);
}

.colors input:last-child {
  margin-left: 10px;
}

.container textarea {
  width: 100%;
  resize: none;
  font-size: 1rem;
  color: #333;
  border-radius: 5px;
  padding: 10px 15px;
  border: 1px solid #ccc;
}

.buttons button {
  padding: 15px 0;
  font-size: 1rem;
  border: 1px solid #ccc;
  outline: none;
  border-radius: 5px;
  background: #fff;
  color: #000;
  width: 100%;
}

.buttons button:hover {
  background: #6c757d;
  color: #fff;
  border: 1px solid #ccc;
}

Javascript

const box = document.querySelector(".box");
const selectMenu = document.querySelector(".select-box select");
const colorInputs = document.querySelectorAll(".colors input");
const textarea = document.querySelector("textarea");
const copyButton = document.querySelector(".copy");

const generateGradient = () => {
  const gradient = `linear-gradient( ${selectMenu.value}, ${colorInputs[0].value}, ${colorInputs[1].value})`;
  box.style.background = gradient;
  textarea.value = `background: ${gradient}`;
};

const copyCode = () => {
  navigator.clipboard.writeText(textarea.value);
  copyButton.innerText = "Kopiert";
  setTimeout(() => (copyButton.innerText = "Kopieren"), 1600);
};

colorInputs.forEach((input) => {
  input.addEventListener("input", generateGradient);
});

selectMenu.addEventListener("change", generateGradient);

copyButton.addEventListener("click", copyCode);