Grid of Colors by @stayzin - Codewith.it

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

Referenze

<th>Definisce una cella di intestazione di una tabella HTML.
autocompleteIndica l'opzione di auto completamento delle aree di input e/o di un form
getDefinisce un metodo di invio di dati al server
<option>Serve ad inserire una voce in un menu di selezione.
idIdentifica univocamente un elemento HTML
<h5>Titolo di intestazione di quinto livello

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

sito_donne_afghane

angoli e shadow

esercitazione6.html

Esercizi 05/03/2024 es8

Il museo di Leonardo

spotify dashboard

cpa continuing professional educat

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>Grid of colors</title>

</head>
<body>
  <div class="color-grid"></div>
  <script src="script.js"></script>
</body>
</html>

/* Creates a column */
.color-grid {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
      gap: 10px;
    }
    
    /* Sets each block height, wdith and alignment */
    .color-block {
      width: 100%;
      height: 125px;
      display: flex;
      justify-content: center;
      align-items: center;
    }

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"
]; // Creates a variable of listed colors

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

colors.forEach(color => {
  const colorBlock = document.createElement("div");
  colorBlock.className = "color-block";
  colorBlock.style.backgroundColor = color; // Creates a new div tag with a class name of "color-block" for each of the listed colors in the "colors" variable. Then sets the background color of the div to the name of the color

  const textColor = color === "black" || color === "white" ? "black" : "white";
  colorBlock.innerHTML = `<span>${color}</span>`; // Sets the text to be the name of the color block

  colorGrid.appendChild(colorBlock); // puts the color blocks into a new array that is then showcased in the "color-grid" div in the HTML
});