aont/0 Interactive Color Picker with Visual History Preview.md

## 0 Interactive Color Picker with Visual History Preview.md

      
    Raw
  

              0 Interactive Color Picker with Visual History Preview.md
            
          
    Interactive Color Picker with Visual History Preview


Color selection and storage: Users choose a color via an <input type="color"> control and click “Add” to append that color to a history list.
Rich visual samples per history item: Each history entry displays a 50×50 color box, text styled in the color, and three line samples (1px, 3px, 5px) to preview how the color looks in different uses.
Clickable history for re-selection: Clicking any history item sets the picker back to that color, enabling quick reuse and comparison of previously selected colors.


## main.html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Color Picker</title>
  <style>
    body {
      font-family: sans-serif;
      padding: 20px;
    }

    /* Preview box (50x50) */
    /* .preview {
      width: 50px;
      height: 50px;
      border: 1px solid #ccc;
      margin-top: 20px;
    } */

    #history {
      padding: 0;
      margin: 0;
    }

    /* Layout for each history item */
    #history li {
      cursor: pointer;
      list-style: none;
      margin: 8px 0;
      padding: 8px;
      border: 1px solid #ddd;
      border-radius: 4px;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    /* Color box sample (50x50) */
    .box-sample {
      width: 50px;
      height: 50px;
      border: 1px solid #ccc;
      box-sizing: border-box;
      flex-shrink: 0;
    }

    /* Text color sample */
    .text-sample {
      min-width: 80px;
      font-weight: bold;
    }

    /* Container holding line samples vertically */
    .line-samples {
      display: flex;
      flex-direction: column;
      gap: 4px;
      flex-grow: 1;
    }

    /* Single line area */
    .line-sample {
      width: 100%;
      height: 0;
    }

    /* Color code text */
    .color-code {
      font-family: monospace;
      margin-left: auto;
    }
  </style>

  <script>
window.addEventListener("load", () => {
  const picker = document.getElementById("colorPicker");
  // const preview = document.getElementById("preview");
  const history = document.getElementById("history");
  const addToHistoryBtn = document.getElementById("addToHistory");

  // Apply the selected color to the preview box
  // function updatePreview() {
  //   preview.style.backgroundColor = picker.value;
  // }

  // Add the current color into the history list
  function addCurrentColorToHistory() {
    const color = picker.value;

    const li = document.createElement("li");
    li.dataset.color = color; // Store color for click selection

    // Background color box sample
    const boxSample = document.createElement("div");
    boxSample.className = "box-sample";
    boxSample.style.backgroundColor = color;

    // Text color sample
    const textSample = document.createElement("span");
    textSample.className = "text-sample";
    textSample.textContent = "Text";
    textSample.style.color = color;

    // Line samples container
    const lineSamples = document.createElement("div");
    lineSamples.className = "line-samples";

    // 1px line sample
    const line1 = document.createElement("div");
    line1.className = "line-sample";
    line1.style.borderTop = `1px solid ${color}`;

    // 3px line sample
    const line3 = document.createElement("div");
    line3.className = "line-sample";
    line3.style.borderTop = `3px solid ${color}`;

    // 5px line sample
    const line5 = document.createElement("div");
    line5.className = "line-sample";
    line5.style.borderTop = `5px solid ${color}`;

    lineSamples.appendChild(line1);
    lineSamples.appendChild(line3);
    lineSamples.appendChild(line5);

    // Color code text
    const colorCode = document.createElement("span");
    colorCode.className = "color-code";
    colorCode.textContent = color;

    // Append all samples to the history entry
    li.appendChild(boxSample);
    li.appendChild(textSample);
    li.appendChild(lineSamples);
    li.appendChild(colorCode);

    history.appendChild(li);
  }

  // Update preview when color picker changes (disabled)
  // picker.addEventListener("input", updatePreview);

  // Add button → add color to history
  addToHistoryBtn.addEventListener("click", addCurrentColorToHistory);

  // When clicking on a history item, re-select the color
  history.addEventListener("click", (event) => {
    // Traverse to the LI element even if clicking inner element
    let target = event.target;
    while (target && target.tagName.toLowerCase() !== "li") {
      target = target.parentElement;
    }
    if (target && target.dataset.color) {
      const color = target.dataset.color;
      picker.value = color;
      // updatePreview();
    }
  });

  // Initial preview update (disabled)
  // updatePreview();
});
  </script>
</head>
<body>
  <h1>Color Picker</h1>
  <input type="color" id="colorPicker" value="#ff0000" />
  <button id="addToHistory">Add</button>

  <!-- <div class="preview" id="preview"></div> -->

  <h2>History</h2>
  <ul id="history"></ul>
</body>
</html>
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Color Picker</title>
	<style>
	body {
	font-family: sans-serif;
	padding: 20px;
	}

	/* Preview box (50x50) */
	/* .preview {
	width: 50px;
	height: 50px;
	border: 1px solid #ccc;
	margin-top: 20px;
	} */

	#history {
	padding: 0;
	margin: 0;
	}

	/* Layout for each history item */
	#history li {
	cursor: pointer;
	list-style: none;
	margin: 8px 0;
	padding: 8px;
	border: 1px solid #ddd;
	border-radius: 4px;
	display: flex;
	align-items: center;
	gap: 12px;
	}

	/* Color box sample (50x50) */
	.box-sample {
	width: 50px;
	height: 50px;
	border: 1px solid #ccc;
	box-sizing: border-box;
	flex-shrink: 0;
	}

	/* Text color sample */
	.text-sample {
	min-width: 80px;
	font-weight: bold;
	}

	/* Container holding line samples vertically */
	.line-samples {
	display: flex;
	flex-direction: column;
	gap: 4px;
	flex-grow: 1;
	}

	/* Single line area */
	.line-sample {
	width: 100%;
	height: 0;
	}

	/* Color code text */
	.color-code {
	font-family: monospace;
	margin-left: auto;
	}
	</style>

	<script>
	window.addEventListener("load", () => {
	const picker = document.getElementById("colorPicker");
	// const preview = document.getElementById("preview");
	const history = document.getElementById("history");
	const addToHistoryBtn = document.getElementById("addToHistory");

	// Apply the selected color to the preview box
	// function updatePreview() {
	// preview.style.backgroundColor = picker.value;
	// }

	// Add the current color into the history list
	function addCurrentColorToHistory() {
	const color = picker.value;

	const li = document.createElement("li");
	li.dataset.color = color; // Store color for click selection

	// Background color box sample
	const boxSample = document.createElement("div");
	boxSample.className = "box-sample";
	boxSample.style.backgroundColor = color;

	// Text color sample
	const textSample = document.createElement("span");
	textSample.className = "text-sample";
	textSample.textContent = "Text";
	textSample.style.color = color;

	// Line samples container
	const lineSamples = document.createElement("div");
	lineSamples.className = "line-samples";

	// 1px line sample
	const line1 = document.createElement("div");
	line1.className = "line-sample";
	line1.style.borderTop = `1px solid ${color}`;

	// 3px line sample
	const line3 = document.createElement("div");
	line3.className = "line-sample";
	line3.style.borderTop = `3px solid ${color}`;

	// 5px line sample
	const line5 = document.createElement("div");
	line5.className = "line-sample";
	line5.style.borderTop = `5px solid ${color}`;

	lineSamples.appendChild(line1);
	lineSamples.appendChild(line3);
	lineSamples.appendChild(line5);

	// Color code text
	const colorCode = document.createElement("span");
	colorCode.className = "color-code";
	colorCode.textContent = color;

	// Append all samples to the history entry
	li.appendChild(boxSample);
	li.appendChild(textSample);
	li.appendChild(lineSamples);
	li.appendChild(colorCode);

	history.appendChild(li);
	}

	// Update preview when color picker changes (disabled)
	// picker.addEventListener("input", updatePreview);

	// Add button → add color to history
	addToHistoryBtn.addEventListener("click", addCurrentColorToHistory);

	// When clicking on a history item, re-select the color
	history.addEventListener("click", (event) => {
	// Traverse to the LI element even if clicking inner element
	let target = event.target;
	while (target && target.tagName.toLowerCase() !== "li") {
	target = target.parentElement;
	}
	if (target && target.dataset.color) {
	const color = target.dataset.color;
	picker.value = color;
	// updatePreview();
	}
	});

	// Initial preview update (disabled)
	// updatePreview();
	});
	</script>
	</head>
	<body>
	<h1>Color Picker</h1>
	<input type="color" id="colorPicker" value="#ff0000" />
	<button id="addToHistory">Add</button>

	<!-- <div class="preview" id="preview"></div> -->

	<h2>History</h2>
	<ul id="history"></ul>
	</body>
	</html>
No results found