Array of Colors by @Yasnirih - Codewith.it

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

References

<meta>Definisce i meta dati di una pagina web.
hreflangConsente di dichiarare la lingua del documento collegato.
typeSpecifica la tipologia/funzione di un elemento.
forSpecifica a quale id è associato l'elemento in cui è dichiarato.
rowspanDefinisce il numero di righe su cui una cella di una tabella deve estendersi.
valueValore alfanumerico o booleano contenuto in un elemento

Users

Log in to search for users

Explore

Find inspiration

informazioni personali

GoUp Fitness Opz 2

esame noe e marti

Comunicare sul Web [Template CSS]

Review of Functions I

HTML

CSS

JS

terminal console

feedback

add_box New

cookie Policy

Privacy information and cookies

We use cookies or technologies for technical purposes and, with your consent, also for other purposes as specified in the cookie policy. Refusal of consent may make some functions unavailable. Read more about the privacy policy

Click on “Agree” to confirm.

<!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();