Grid of Colors by @Dhilaan - Codewith.it

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

Referenze

typeSpecifica la tipologia/funzione di un elemento.
srcIndica la provenienza di una risorsa esterna (tramite URL).
sizeDetermina le dimensioni dell'elemento in base al valore contenuto
getDefinisce un metodo di invio di dati al server
<option>Serve ad inserire una voce in un menu di selezione.
<select>Usato per creare un menu a tendina.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Riprova verifica di progr

educazione civica 2

Perch Oslo una Smart City 1

informatica|inglese

Il Piccolo Principe

One Magic Moment - Eventi Unici

Scuola G.Galilei.html

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>
	<!-- DISPLAY COLORS IN MAIN TAG -->
	<main>

	</main>
</body>

</html>

.circles{
  border: rgb(0, 0, 0) solid 5px ;
  border-radius: 150px;
  height: 150px;
  width: 150px;
  margin: 25px;
  display: inline-block;
  text-align: center;
  font-size: 18px;
}

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


/*for (var start = 0; start <= names.length; += 1 {
  console.log(start + " " + names[ start ]));
 } */

/*
 colors.forEach( function(value, index ) {
  document.querySelector("main").insertAdjacentHTML("beforeend", `- <div class="circles">${index}</div> - ${value} <br/>`);
 });*/

 for(var i = 0; i < 146; i++){
  let html = `<div class="circles" style="background-color: ${colors[i]};"> <br><br><br>${colors[i]}</div>`;
  document.querySelector("main").insertAdjacentHTML("beforeend", html);

 };