Функциональность панели поиска ⇐ CSS

[Anonymous]

Я работаю над проектом. У меня есть панель поиска, и я хочу, чтобы, когда пользователь вводит цвет в строку поиска, он перенаправлялся на страницу color.html, и там отображался введенный пользователем цвет.Что я пробовал:
Мой HTML:

Код: Выделить всё

Search

Мой JavaScript:

Код: Выделить всё

document.addEventListener('DOMContentLoaded', function () {
const colors = [
{ color: "red", value: "#f00" },
{ color: "green", value: "#0f0" },
{ color: "blue", value: "#00f" },
{ color: "cyan", value: "#0ff" },
{ color: "magenta", value: "#f0f" },
{ color: "yellow", value: "#ff0" },
{ color: "black", value: "#000" }
];

const searchInput = document.getElementById('searchInput');
const colorList = document.getElementById('colorList');

// Function to render color cards
function renderColors(colors) {
colorList.innerHTML = ''; // Clear previous content
colors.forEach(color => {
const card = document.createElement('div');
card.classList.add('color-card');
card.innerHTML = `

${color.color}
`;
colorList.appendChild(card);
});
}

// Initial render
renderColors(colors);

// Event listener for search input
searchInput.addEventListener('input', function () {
const searchValue = this.value.toLowerCase();
const filteredColors = colors.filter(color =>
color.color.toLowerCase().includes(searchValue)
);
renderColors(filteredColors);
});
});

Еще один код JavaScript, который я пробовал ранее:

Код: Выделить всё

let colorDiv = document.getElementById("colorList")[0];
let searchInput = document.getElementById("searchInput")[0];

function showColor() {
colorDiv.innerHTML = `
style="color:${searchInput.value};height:100px;width:100px">

Your searched color ${searchInput.value}
`;
}

Мой цвет.html:

Код: Выделить всё

Document

Приведенный выше код JavaScript не работает.

Подробнее здесь: https://stackoverflow.com/questions/783 ... ctionality