Projects (মিনি-প্রজেক্ট)

<input id="display" disabled />
<button data-num="7">7</button>
<button data-op="+">+</button>

<script>
  const display = document.getElementById("display");
  let current = "";

  document.addEventListener("click", (e) => {
    const num = e.target.dataset.num;
    const op = e.target.dataset.op;
    if (num) {
      current += num;
      display.value = current;
    }
    if (op) {
      current += op;
      display.value = current;
    }
  });
</script>

const form = document.querySelector("#todo-form");
const list = document.getElementById("list");

const todos = JSON.parse(localStorage.getItem("todos") || "[]");

function render() {
  list.innerHTML = "";
  todos.forEach((todo) => {
    const li = document.createElement("li");
    li.textContent = todo.text;
    list.appendChild(li);
  });
  localStorage.setItem("todos", JSON.stringify(todos));
}

form.addEventListener("submit", (e) => {
  e.preventDefault();
  const input = document.querySelector("#input");
  todos.push({ text: input.value });
  input.value = "";
  render();
});

// delete: delegation + data-id
render();

const questions = [
  { q: "JavaScript-এ কতপ্রকার primitive?", a: 7 },
  { q: "`==` চেয়ে কে ভালো?", a: "===", options: ["==", "===", "একই"] },
];

let score = 0;
let idx = 0;

function showQuestion() {
  const q = questions[idx];
  const container = document.getElementById("quiz");
  container.textContent = q.q;
}

// উত্তর check → score++ → পরের প্রশ্ন
showQuestion();

async function getWeather(city) {
  const key = "YOUR_API_KEY";
  const url = `https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${key}`;
  try {
    const res = await fetch(url);
    if (!res.ok) throw new Error(`HTTP ${res.status}`);
    const data = await res.json();
    return `${data.name}: ${Math.round(data.main.temp - 273.15)}°C`;
  } catch (err) {
    return "লোড ব্যর্থ: " + err.message;
  }
}

// getWeather("Dhaka").then(console.log);

const toggle = document.getElementById("theme");

function applyTheme(theme) {
  document.documentElement.dataset.theme = theme;
  localStorage.setItem("theme", theme);
}

// প্রথম ভিজিট/আগের থিম
applyTheme(localStorage.getItem("theme") || "light");

toggle.addEventListener("click", () => {
  const current = document.documentElement.dataset.theme;
  applyTheme(current === "dark" ? "light" : "dark");
});

const bar = document.getElementById("progress");

window.addEventListener("scroll", () => {
  const h = document.documentElement;
  const scrolled = h.scrollTop;
  const total = h.scrollHeight - h.clientHeight;
  bar.style.width = (scrolled / total) * 100 + "%";
});