---

<!DOCTYPE html>
<html lang="ru">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Выбор курсов</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h1>Выбери курс для обучения</h1>

    <input id="search" type="search" placeholder="Поиск курса...">

    <select id="category">
      <option value="all">Все категории</option>
      <option value="code">Программирование</option>
      <option value="design">Дизайн</option>
      <option value="marketing">Маркетинг</option>
    </select>

    <div id="courses" class="grid"></div>

    <div class="total">
      Выбрано: <span id="count">0</span> |
      Сумма: <span id="sum">0 ₽</span>
    </div>
  </div>

  <script src="script.js"></script>
</body>
</html>



* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  font-family: Arial, sans-serif;
}

body {
  background: #f4f6fb;
  color: #222;
  padding: 30px 15px;
}

.container {
  max-width: 900px;
  margin: auto;
}

h1 {
  text-align: center;
  margin-bottom: 20px;
}

input, select {
  width: 100%;
  padding: 12px;
  margin-bottom: 12px;
  border: 1px solid #ddd;
  border-radius: 10px;
  font-size: 16px;
}

.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 15px;
}

.card {
  background: #fff;
  padding: 18px;
  border-radius: 14px;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.07);
}

.card h3 {
  margin-bottom: 8px;
}

.card p {
  color: #666;
  font-size: 14px;
  margin-bottom: 12px;
}

button {
  width: 100%;
  padding: 10px;
  border: none;
  border-radius: 8px;
  background: #4f46e5;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
}

button.active {
  background: #16a34a;
}

.total {
  margin-top: 20px;
  text-align: center;
  font-size: 18px;
  font-weight: bold;
}




const courses = [
  { id: 1, title: "Python с нуля", category: "code", price: 9900 },
  { id: 2, title: "Веб-разработка", category: "code", price: 14900 },
  { id: 3, title: "UI/UX дизайн", category: "design", price: 12900 },
  { id: 4, title: "SMM и реклама", category: "marketing", price: 7900 }
];

const selected = new Set();
const coursesEl = document.getElementById("courses");
const searchEl = document.getElementById("search");
const categoryEl = document.getElementById("category");

function render() {
  const search = searchEl.value.toLowerCase();
  const category = categoryEl.value;

  coursesEl.innerHTML = "";

  courses
    .filter(c =>
      c.title.toLowerCase().includes(search) &&
      (category === "all" || c.category === category)
    )
    .forEach(course => {
      const card = document.createElement("div");
      card.className = "card";

      const isSelected = selected.has(course.id);

      card.innerHTML = `
        <h3>${course.title}</h3>
        <p>${course.price.toLocaleString("ru-RU")} ₽</p>
        <button class="${isSelected ? "active" : ""}">
          ${isSelected ? "Выбрано ✓" : "Выбрать"}
        </button>
      `;

      card.querySelector("button").onclick = () => {
        isSelected ? selected.delete(course.id) : selected.add(course.id);
        render();
        updateTotal();
      };

      coursesEl.appendChild(card);
    });
}

function updateTotal() {
  const total = courses
    .filter(c => selected.has(c.id))
    .reduce((sum, c) => sum + c.price, 0);

  document.getElementById("count").textContent = selected.size;
  document.getElementById("sum").textContent = total.toLocaleString("ru-RU") + " ₽";
}

searchEl.addEventListener("input", render);
categoryEl.addEventListener("change", render);

render();
updateTotal();