Array of Colors by @Yasnirih - Codewith.it

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

Referenze

<cite>Inserisce citazioni e menzioni riguardo un'opera creativa.
valueValore alfanumerico o booleano contenuto in un elemento
accept-charsetAttribuisce un tipo di codifica dei caratteri per l'invio dei dati di un form HTML
selectedPre-seleziona un elemento di input
<h4>Titolo di intestazione di quarto livello
styleDefinisce regole e stili CSS all'interno di un tag HTML (inline CSS)

Utenti

Accedi per cercare utenti

Esplora

Trova ispirazione

Il mio primo sito(2)

tabella html(2)

calcola tempo di lettura

Esercitazione n. 2

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>

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Color Grid</title>
  <link rel="stylesheet" href="style.css">
</head>

<body>
<div id="controls">
    <input type="text" id="new-color" placeholder="Enter a color name or hex code">
    <button id="add-color">Add Color</button>
  </div>

  
  <div id="color-grid"> </div>

  <script src="script.js"></script>
</body>

</html>

body {
  font-family: Arial, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  align-items: center;
  height: 100vh;
  margin: 0;
}

#controls {
  margin-bottom: 20px;
}

#new-color {
  padding: 10px;
  font-size: 14px;
}

#add-color {
  padding: 10px;
  font-size: 14px;
  margin-left: 10px;
}

#color-grid {
  display: grid;
  grid-template-rows: repeat(auto-fill, 125px);
  grid-gap: 10px;
  justify-content: center;
}

.color-block {
  width: 125px;
  height: 125px;
  display: flex;
  justify-content: center;
  align-items: center;
  color: black;
  font-size: 14px;
  font-weight: bold;
  text-transform: capitalize;
  text-align: center;
}

.light-text {
  color: black;
}

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 gridContainer = document.querySelector('#color-grid');
const newColorInput = document.querySelector('#new-color');
const addColorButton = document.querySelector('#add-color');

function isLightColor(color) {
  const hexColor = getComputedStyle(document.documentElement).getPropertyValue('--dummy-color', color) || color;
  const rgb = hexToRgb(hexColor);
  if (!rgb) return false; // Default to dark text if invalid color
  const luminance = (0.299 * rgb.r + 0.587 * rgb.g + 0.114 * rgb.b) / 255;
  return luminance > 0.5;
}

function hexToRgb(hex) {
  let shorthandRegex = /^#?([a-f\d])([a-f\d])([a-f\d])$/i;
  hex = hex.replace(shorthandRegex, function(m, r, g, b) {
    return r + r + g + g + b + b;
  });
  let result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}

// Function to render the colors
function renderColors() {
  gridContainer.innerHTML = ''; // Clear the existing grid
  colors.forEach(color => {
    const lightClass = isLightColor(color) ? 'light-text' : '';
    const colorBlock = `
      <div class="color-block ${lightClass}" style="background-color: ${color};">
        ${color}
      </div>
    `;
    gridContainer.insertAdjacentHTML('beforeend', colorBlock);
  });
}

// Add color to the array and update the grid
addColorButton.addEventListener('click', () => {
  const newColor = newColorInput.value.trim();
  if (newColor) {
    colors.push(newColor); // Add new color to the array
    renderColors(); // Re-render the grid
    newColorInput.value = ''; // Clear input field
  }
});

// Initial render
renderColors();