Array of Colors by @matmat - Codewith.it

#main, .loader-cont { display: none; } JavaScript disabilitato.
Non puoi usare Codewith.it senza JavaScript.

Referenze

<p>Serve a definire paragrafi di testo
<meta>Definisce i meta dati di una pagina web.
minlengthDetermina il numero minimo di caratteri per un elemento input
_selfApre collegamenti ipertestuali nella stessa pagina del browser
animation-directionProprietà CSS per definire la direzione di esecuzione di un'animazione
formmethodDefinisce il metodo di invio dei dati oltre a method

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Tabella esercizi

Creatore Badge Aziendale

Adobe PDF Shared 4

tabella ricetta esame

Lola Harrel Project 2

Simple Calculator

Comunicare sul Web [Template HTML]

HTML

CSS

JS

terminal console

feedback

add_box Nuovo

cookie Informativa

Informativa privacy e cookies

Utilizziamo cookie o tecnologie per finalità tecniche e, con il tuo consenso, anche per altre finalità come specificato nella cookie policy. Il rifiuto del consenso può rendere non disponibili alcune funzioni. Leggi di più sull'informativa privacy

Clicca su “Accetta” per acconsentire.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Color Grid</title>
  <link rel="stylesheet" href="styles.css">
</head>
<body>
  <h1>Color Grid</h1>
  <div id="color-grid" class="grid-container"></div>
  <script src="script.js"></script>
</body>
</html>

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 0;
  background-color: rgb(192, 157, 157);
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(10, 125px); 
  grid-gap: 10px;
  grid-auto-rows: 125px; 
  margin-top: 20px;
}


.color-box {
  width: 125px;
  height: 125px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 14px;
  text-align: center;
  border-radius: 50%;
  border-color: black;
  border-style: solid;
}

const colors = [
  "AliceBlue", "AntiqueWhite", "Aqua", "Aquamarine", "Azure", "Beige", "Bisque", "Black", "BlanchedAlmond", 
  "Blue", "BlueViolet", "Brown", "BurlyWood", "CadetBlue", "Chartreuse", "Chocolate", "Coral", 
  "CornflowerBlue", "Cornsilk", "Crimson", "Cyan", "DarkBlue", "DarkCyan", "DarkGoldenRod", "DarkGray", 
  "DarkGrey", "DarkGreen", "DarkKhaki", "DarkMagenta", "DarkOliveGreen", "Darkorange", "DarkOrchid", 
  "DarkRed", "DarkSalmon", "DarkSeaGreen", "DarkSlateBlue", "DarkSlateGray", "DarkSlateGrey", 
  "DarkTurquoise", "DarkViolet", "DeepPink", "DeepSkyBlue", "DimGray", "DimGrey", "DodgerBlue", 
  "FireBrick", "FloralWhite", "ForestGreen", "Fuchsia", "Gainsboro", "GhostWhite", "Gold", "GoldenRod", 
  "Gray", "Grey", "Green", "GreenYellow", "HoneyDew", "HotPink", "IndianRed", "Indigo", "Ivory", 
  "Khaki", "Lavender", "LavenderBlush", "LawnGreen", "LemonChiffon", "LightBlue", "LightCoral", 
  "LightCyan", "LightGoldenRodYellow", "LightGray", "LightGrey", "LightGreen", "LightPink", 
  "LightSalmon", "LightSeaGreen", "LightSkyBlue", "LightSlateGray", "LightSlateGrey", "LightSteelBlue", 
  "LightYellow", "Lime", "LimeGreen", "Linen", "Magenta", "Maroon", "MediumAquaMarine", "MediumBlue", 
  "MediumOrchid", "MediumPurple", "MediumSeaGreen", "MediumSlateBlue", "MediumSpringGreen", 
  "MediumTurquoise", "MediumVioletRed", "MidnightBlue", "MintCream", "MistyRose", "Moccasin", 
  "NavajoWhite", "Navy", "OldLace", "Olive", "OliveDrab", "Orange", "OrangeRed", "Orchid", "PaleGoldenRod", 
  "PaleGreen", "PaleTurquoise", "PaleVioletRed", "PapayaWhip", "PeachPuff", "Peru", "Pink", "Plum", 
  "PowderBlue", "Purple", "Red", "RosyBrown", "RoyalBlue", "SaddleBrown", "Salmon", "SandyBrown", 
  "SeaGreen", "SeaShell", "Sienna", "Silver", "SkyBlue", "SlateBlue", "SlateGray", "SlateGrey", 
  "Snow", "SpringGreen", "SteelBlue", "Tan", "Teal", "Thistle", "Tomato", "Turquoise", "Violet", 
  "Wheat", "White", "WhiteSmoke", "Yellow", "YellowGreen"
];

const gridColors = document.querySelector("#color-grid");

function displayColors(color) {
  const canvasContext = document.createElement("canvas").getContext("2d");
  canvasContext.fillStyle = color;
}

function displayGridColors(colorArray) {
  colorArray.forEach((color) => {
    const textColor = displayColors(color);
    const colorBoxHTML = `
      <div class="color-box" style="background-color: ${color}; color: ${textColor};">
        ${color}
      </div>
    `;
    gridColors.insertAdjacentHTML("beforeend", colorBoxHTML);
  });
}

displayGridColors(colors);