Color Assigment by @romniya - Codewith.it

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

Referenze

_topApre collegamenti ipertestuali nell'elemento parent assoluto
<strong>Definisce una parte del testo importante con formattazione in grassetto.
<base>Specifica l'URL di base per tutti gli URL relativi all'interno della pagina.
<tr>Definisce le righe di una tabella (rows)
_selfApre collegamenti ipertestuali nella stessa pagina del browser
<link>Collega il documento corrente con una risorsa esterna

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Quiz ristrutturazione

Favola dei tre porcellini(2)

tabella html(2)

esercizio 04 pagina beep

\\\"Il Razzismo - Un Tema Importa

Lola Harrel CSS Styling Assignment

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>

<head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width">
	<title>Grid of Colors</title>
	<link href="style.css" rel="stylesheet" type="text/css" />
</head>

<body>
	<main>
  <div class="colors_grid"></div>
	</main>
   <script src="script.js"></script>
</body>
</html>

.colors_grid{
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
      gap: 10px;
}

.color-blocks {
      width: 125px;
      height: 125px;
      border-radius: 50px;
      border: 2px solid black;
      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"
]; // List of colors 

const grid = document.querySelector(".colors_grid");

colors.forEach(color => {
  const colorBlocks = document.createElement("div");
  colorBlocks.className = "color-blocks";
  colorBlocks.style.backgroundColor = color; // makes a new div for each color on the array mentioned, with it's width and height, etc. The "div" will have it's correct color 
  
  const span = document.createElement('span');
    span.style.color = (color === 'Black' || color === 'DarkBlue' || color === 'MidnightBlue' || color === 'Navy' || color === 'Maroon' || color === 'Indigo' || color === 'MediumBlue' || color === 'DarkRed ')  ? 'white' : 'black';
    span.textContent = color;
    colorBlocks.appendChild(span); //aims the darker color - had to list out some of them since it's part of the array and if that color is called out then the text will change to white 

  grid.appendChild(colorBlocks); // puts the colors into an array 
});