matheusmv/index.html

## index.html
<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Color Transition</title>
    <style>
      * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
      }

      body {
        background-color: #f2f2f2;
      }

      .container {
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        height: 100vh;
      }

      input {
        margin: 10px;
        padding: 10px;
        border-radius: 5px;
        border: none;
        box-shadow: 0px 0px 5px #888;
        background-color: white;
        width: 200px;
        text-align: center;
      }

      .color-div {
        height: 100px;
        width: 100%;
        display: flex;
        flex-wrap: wrap;
        align-items: center;
        justify-content: center;
      }

      .color-box {
        height: 50px;
        width: 50px;
        border: 1px solid black;
        margin: 5px;
      }
    </style>
  </head>

  <body>
    <div class="container">
      <label for="color1">Cor inicial:</label>
      <input
        type="color"
        id="color1"
        name="color1"
        value="#ff0000"
        onchange="updateColor(this)"
      />

      <label for="color2">Cor final:</label>
      <input
        type="color"
        id="color2"
        name="color2"
        value="#0000ff"
        onchange="updateColor(this)"
      />

      <label for="numDivs">Número de divs:</label>
      <input
        type="number"
        id="numDivs"
        name="numDivs"
        min="1"
        value="5"
        onchange="createDivs()"
      />

      <section id="colorSection" class="color-div"></section>
    </div>
  </body>

  <script defer>
    // inicia as div's color1 e color2 com as cores padrão
    (async () => {
      document.getElementById("color1").style.backgroundColor = "#ff0000";
      document.getElementById("color2").style.backgroundColor = "#0000ff";
      createDivs();
    })();

    // Função para atualizar a cor das caixas de cores com base nos valores dos inputs
    function updateColor(input) {
      input.style.backgroundColor = input.value;
      // chama a função createDivs para atualizar as cores das caixas de cores
      createDivs();
    }

    // Função para criar as caixas de cores
    function createDivs() {
      const color1 = document.getElementById("color1").value;
      const color2 = document.getElementById("color2").value;
      const numDivs = document.getElementById("numDivs").value;
      const colorSection = document.getElementById("colorSection");

      // limpa o conteúdo da div colorSection
      colorSection.innerHTML = "";

      // Loop para criar as caixas de cores
      for (let i = 0; i < numDivs; i++) {
        const colorBox = document.createElement("div");
        colorBox.classList.add("color-box");
        // define a cor de fundo da caixa de cores
        colorBox.style.backgroundColor = interpolateColor(
          color1,
          color2,
          // proporção em que as duas cores serão combinadas
          // indicando a distância da cor intermediária em relação às duas cores originais
          // posição / (quantidade de div's - 1)
          i / (numDivs - 1)
        );
        colorSection.appendChild(colorBox);
      }
    }

    // Função para interpolar um valor intermediário entre dois valores
    function lerp(start, end, amount) {
      return (1 - amount) * start + amount * end;
    }

    // Função para converter um valor hexadecimal para inteiro
    function hexToInt(hexValue) {
      return parseInt(hexValue, 16);
    }

    // Função para interpolar os valores de duas cores
    // Calcula os valores R, G e B intermediários com base nas cores
    // color1 (#ffffff) e color2 (#ffffff) e no ratio [0, 1]
    function interpolateColor(color1, color2, ratio) {
      const r = Math.round(
        lerp(
          hexToInt(color1.substring(1, 3)),
          hexToInt(color2.substring(1, 3)),
          ratio
        )
      );
      const g = Math.round(
        lerp(
          hexToInt(color1.substring(3, 5)),
          hexToInt(color2.substring(3, 5)),
          ratio
        )
      );
      const b = Math.round(
        lerp(
          hexToInt(color1.substring(5, 7)),
          hexToInt(color2.substring(5, 7)),
          ratio
        )
      );

      // Retorna o resultado em um formato que pode ser aplicado diretamente no css
      return `rgb(${r}, ${g}, ${b})`;
    }
  </script>
</html>
	<!DOCTYPE html>
	<html lang="en-US">
	<head>
	<meta charset="UTF-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Color Transition</title>
	<style>
	* {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
	}

	body {
	background-color: #f2f2f2;
	}

	.container {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 100vh;
	}

	input {
	margin: 10px;
	padding: 10px;
	border-radius: 5px;
	border: none;
	box-shadow: 0px 0px 5px #888;
	background-color: white;
	width: 200px;
	text-align: center;
	}

	.color-div {
	height: 100px;
	width: 100%;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	}

	.color-box {
	height: 50px;
	width: 50px;
	border: 1px solid black;
	margin: 5px;
	}
	</style>
	</head>

	<body>
	<div class="container">
	<label for="color1">Cor inicial:</label>
	<input
	type="color"
	id="color1"
	name="color1"
	value="#ff0000"
	onchange="updateColor(this)"
	/>

	<label for="color2">Cor final:</label>
	<input
	type="color"
	id="color2"
	name="color2"
	value="#0000ff"
	onchange="updateColor(this)"
	/>

	<label for="numDivs">Número de divs:</label>
	<input
	type="number"
	id="numDivs"
	name="numDivs"
	min="1"
	value="5"
	onchange="createDivs()"
	/>

	<section id="colorSection" class="color-div"></section>
	</div>
	</body>

	<script defer>
	// inicia as div's color1 e color2 com as cores padrão
	(async () => {
	document.getElementById("color1").style.backgroundColor = "#ff0000";
	document.getElementById("color2").style.backgroundColor = "#0000ff";
	createDivs();
	})();

	// Função para atualizar a cor das caixas de cores com base nos valores dos inputs
	function updateColor(input) {
	input.style.backgroundColor = input.value;
	// chama a função createDivs para atualizar as cores das caixas de cores
	createDivs();
	}

	// Função para criar as caixas de cores
	function createDivs() {
	const color1 = document.getElementById("color1").value;
	const color2 = document.getElementById("color2").value;
	const numDivs = document.getElementById("numDivs").value;
	const colorSection = document.getElementById("colorSection");

	// limpa o conteúdo da div colorSection
	colorSection.innerHTML = "";

	// Loop para criar as caixas de cores
	for (let i = 0; i < numDivs; i++) {
	const colorBox = document.createElement("div");
	colorBox.classList.add("color-box");
	// define a cor de fundo da caixa de cores
	colorBox.style.backgroundColor = interpolateColor(
	color1,
	color2,
	// proporção em que as duas cores serão combinadas
	// indicando a distância da cor intermediária em relação às duas cores originais
	// posição / (quantidade de div's - 1)
	i / (numDivs - 1)
	);
	colorSection.appendChild(colorBox);
	}
	}

	// Função para interpolar um valor intermediário entre dois valores
	function lerp(start, end, amount) {
	return (1 - amount) * start + amount * end;
	}

	// Função para converter um valor hexadecimal para inteiro
	function hexToInt(hexValue) {
	return parseInt(hexValue, 16);
	}

	// Função para interpolar os valores de duas cores
	// Calcula os valores R, G e B intermediários com base nas cores
	// color1 (#ffffff) e color2 (#ffffff) e no ratio [0, 1]
	function interpolateColor(color1, color2, ratio) {
	const r = Math.round(
	lerp(
	hexToInt(color1.substring(1, 3)),
	hexToInt(color2.substring(1, 3)),
	ratio
	)
	);
	const g = Math.round(
	lerp(
	hexToInt(color1.substring(3, 5)),
	hexToInt(color2.substring(3, 5)),
	ratio
	)
	);
	const b = Math.round(
	lerp(
	hexToInt(color1.substring(5, 7)),
	hexToInt(color2.substring(5, 7)),
	ratio
	)
	);

	// Retorna o resultado em um formato que pode ser aplicado diretamente no css
	return `rgb(${r}, ${g}, ${b})`;
	}
	</script>
	</html>