Array of Colors by @matmat - Codewith.it

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

Referenze

hrefDefinisce l'URL della risorsa/pagina di destinazione.
multipleConverte in lista a selezione multipla
<table>Tag primario per la creazione di tabelle
<audio>Il tag <audio> HTML permette di inserire contenuti musicali e suoni nel documento
disabledImpedisce la modifica di un input
<embed>Tag per l'incorporamento di contenuti multimediali

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

ESERCIZIO CON META TAG ROBOTS

schwebish gemund

test js coinmarketcap

LEZIONE 1 AULAB

altro esercizio tabella

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);