Grid of Colors by @stayzin - Codewith.it

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

References

_selfApre collegamenti ipertestuali nella stessa pagina del browser
colspanDefinisce il numero di colonne di una cella all'interno di una tabella.
formactionPermette di definire l'URL di una pagina web a cui inviare i dati di un form
<iframe>Crea un frame all'interno di una pagina HTML.
autoplayAttributo HTML autoplay per l'avvio automatico degli elementi audio e video
heightDetermina l'altezza di un elemento HTML in pixel

Users

Log in to search for users

Explore

Find inspiration

Italiano-Cinema [Bacheca]

Inizio gioco progetto di informati

spiagge limitrofe

Group 1 - Irregular Verbs

Batch versamento settimanale

Heads Or Tails Random Tally

le miniere di nuxis

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

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