Grid of Colors by @Nahzir2007 - Codewith.it

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

Referenze

<hr>Inserisce una linea orizzontale
getDefinisce un metodo di invio di dati al server
<tfoot>Definisce il footer o sezione inferiore di una tabella.
autocompleteIndica l'opzione di auto completamento delle aree di input e/o di un form
<head>Tag primario di un documento HTML
mediaSpecifica a quale dispositivo/display/documento è ottimizzata una risorsa.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

HTML OR. LISTA TAGS TEST

Riprova verifica di progr(2)

Le avventure di Peter Pan

spese universitarie

esercizio perfetto

Caps Lock Checker

Heads Or Tails Random Tally

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>

<h1>color grid</h1>
<div class ="colorgrid"></div>
	</main>
</body>

</html>

.colorgrid {
  display: grid;
  justify-content: center;
  align-item: center;
}

.color-circles {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 125px;
  width: 125;
  border: 1px dashed black;
  border-radius: 50%;
}

h1 {
  font-size: 24px;
  text-align: center;
  color: black;

}

body {
  font-family:Impact, Haettenschweiler, 'Arial Narrow Bold', sans-serif;
  dislpay: flext;
  justify-content: center;
  align-items: center;
}

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

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"];

function CreateCanvas(canvas) {
  const context = document.createElement("canvas").getContext("2d");
  context.fillStyle = canvas;
}

function addColorstoScreen(colorArray) {
    colorArray.forEach((color) => {
        const textColor = "black";
        const colorDisplay = `<div class="color-circles" style="background-color:${color}; color: ${textColor}">
        ${color}
        </div>`;
        grid.insertAdjacentHTML("beforeend", colorDisplay);
    });
}

addColorstoScreen(colors);