Array of Colors by @keanee - Codewith.it

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

Referenze

<title>Definisce il titolo della pagina web.
<thead>Definisce un gruppo di intestazione all'interno di una tabella.
autofocusAttiva un elemento al caricamento della pagina.
<p>Serve a definire paragrafi di testo
<caption>Definisce didascalie all'interno di una tabella
preloadL'attributo preload indica se precaricare un contenuto audio e video con il documento HTML

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Il Piccolo Principe

Ethical hacking

Resiliant Material

Research Profiles

ES01a\\index.html

Taketori Monogatari

Page not found - Codewith.it

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);
});