const EMOJIS = ["😀","😎","🥳","😍","🤖","🐶","🐱","🦄","🌈","🌟","🍕","🍔","🍩","🎂","⚽","🎸","🚀","🎨","🔥","💎"];
const e1 = document.getElementById("e1");
const e2 = document.getElementById("e2");
const result = document.getElementById("result");
const historyEl = document.getElementById("history");
const KEY = "emoji_history";

EMOJIS.forEach(em => {
  e1.insertAdjacentHTML("beforeend", `<option>${em}</option>`);
  e2.insertAdjacentHTML("beforeend", `<option>${em}</option>`);
});
e2.selectedIndex = 1;

function loadHistory() {
  const h = JSON.parse(localStorage.getItem(KEY) || "[]");
  historyEl.innerHTML = h.slice(-10).map(m => `<span>${m}</span>`).join("");
}

document.getElementById("mixBtn").onclick = () => {
  const mix = e1.value + e2.value;
  result.textContent = mix;
  const h = JSON.parse(localStorage.getItem(KEY) || "[]");
  h.push(mix);
  localStorage.setItem(KEY, JSON.stringify(h));
  loadHistory();
};

loadHistory();