Grid of Colors by @Hizaora - Codewith.it

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

Referenze

<form>Crea un modulo/form HTML per consentire all'utente di inviare dati al server
styleDefinisce regole e stili CSS all'interno di un tag HTML (inline CSS)
srcIndica la provenienza di una risorsa esterna (tramite URL).
<link>Collega il documento corrente con una risorsa esterna
maxlengthDetermina il numero massimo di caratteri consentiti in un elemento input
titleIndica informazioni aggiuntive riguardo un elemento HTML

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Media ponderata

Pascal Landriscina

Inserimento di un\'immagine

LEZIONE 1 AULAB

Esercizio 1 3ASC

Eleganza Gioielli (Ufficiale)

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>

  <h1>All Colors in the Array</h1>
    
        <!-- DISPLAY COLORS IN MAIN TAG -->
        <main>
            <div id="color-grid" class="color-grid"></div>
        </main>
</body>

</html>

body {
  font-family: 'Poppins', sans-serif;
  margin: 0;
  padding: 20px;
  background-color: #f2f2d8;
  color: black;
}

h1 {
  color: #333;
  text-align: center;
  margin-bottom: 30px;
}

.color-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 20px;
  padding: 20px;
  max-width: 1200px;
  margin: 0 auto;
  justify-items: center;
}

.color-box {
  height: 120px;
  width: 120px;
  border-radius: 50%;
  border: 3px solid #333;
  display: flex;
  align-items: flex-end;
  justify-content: center;
;

.color-label {
  background: white;
  color: #333;
  padding: 6px 8px;
  border-radius: 12px;
  font-size: 10px;
  font-weight: 600;
  text-align: center;
}

.total-count {
  text-align: center;
  font-size: 18px;
  margin-top: 20px;
  color: #333;
}

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

// Display colors in the grid
const colorGrid = document.getElementById('color-grid');
if (colorGrid) {
  colors.forEach(color => {
    console.log(color);
    let template = `<div class="color-box" style="background-color:${color}"><div class="color-label">${color}</div></div>`;
    colorGrid.insertAdjacentHTML("beforeend", template);
  });
}