Array of Colors by @Yasnirih - Codewith.it

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

References

<base>Specifica l'URL di base per tutti gli URL relativi all'interno della pagina.
<link>Collega il documento corrente con una risorsa esterna
<th>Definisce una cella di intestazione di una tabella HTML.
preloadL'attributo preload indica se precaricare un contenuto audio e video con il documento HTML
<form>Crea un modulo/form HTML per consentire all'utente di inviare dati al server
postDefinisce un metodo di invio di dati al server

Users

Log in to search for users

Explore

Find inspiration

portfolio_marco_mantovani.html

5/10/24 es. 4 - Password

Calcolo Costo Totale

La magica storia di Peter Pan_Laura

Portfolio Web Developer

Cubo 3D animato

INFORMATICA - ESERCIZIO 2 RISOLTO

UX / Web Design, Freelance – Pro

Tracker delle attività 2

\\\"Il Razzismo - Un Tema Importa

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