Array of Colors by @keanee - Codewith.it

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

Referenze

sizeDetermina le dimensioni dell'elemento in base al valore contenuto
targetDetermina il comportamento di un collegamento ipertestuale alla sua apertura
<tbody>Definisce il contenuto principale di una tabella.
langSpecifica la lingua del contenuto di un elemento
srcIndica la provenienza di una risorsa esterna (tramite URL).
rowspanDefinisce il numero di righe su cui una cella di una tabella deve estendersi.

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Autovalutazione.it

round - social bar

form per il torneo misto disfor s

Album-Reccomendations

Ufficio FSL [Fumetto Toastmasters]

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>
<title>Keane's Array of Color</title>
<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>
<div class="color-grid" id="colorGrid"></div>
	</main>
</body>

</html>

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    background-color: #f0f0f0;
}

.color-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(125px, 1fr));
    gap: 10px;
    max-width: calc(125px * 5 + 10px * 4); 
}

.color-box {
    width: 125px;
    height: 125px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-weight: bold;
    color: white; 
    text-align: center;
      border-radius: 50%;
      overflow: auto;
}

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"

];

const colorGrid = document.getElementById('colorGrid');

colors.forEach(color => {
    const bgColor = color.toLowerCase();
    const textColor = (bgColor === 'black' || bgColor === 'navy' || bgColor === 'purple') ? 'white' : 'black';
    
    const colorDiv = `
        <div class="color-box" style="background-color: ${bgColor}; color: ${textColor}">
            ${color}
        </div>
    `;
    
    colorGrid.insertAdjacentHTML('beforeend', colorDiv);
});