Олимпиадный тренинг

Задача . JavaScript: DOM


Задача

Темы:

Скачайте файл и работайте в нем. В качестве ответа загрузите этот же файл. В файле необходимо записать только JS скрипт к каждому заданию (внизу страницы)

1. Визитные карточки

Дан массив учеников. Для каждого ученика создайте карточку <div class="card"> с именем (<h3>), возрастом и классом (<p>). Вставьте все карточки в <div id="result1">.
var students = [
  {name: "Алиса", age: 16, grade: "11А"},
  {name: "Борис", age: 15, grade: "10Б"},
  {name: "Вера",  age: 16, grade: "11А"},
  {name: "Глеб",  age: 15, grade: "10Б"}
];

Ожидаемый результат ↓

 
image.png

2. Раскрашенный список 

Дан массив цветов. Создайте элемент <li> для каждого цвета и установите ему цвет фона (style.backgroundColor) равный значению из массива. Текст — название цвета. Вставьте все <li> в <ul id="result2">.
var colors = [
  {name: "Томат",    hex: "#e74c3c"},
  {name: "Изумруд",  hex: "#2ecc71"},
  {name: "Океан",    hex: "#3498db"},
  {name: "Солнце",   hex: "#f1c40f"},
  {name: "Аметист",  hex: "#9b59b6"},
  {name: "Мандарин", hex: "#e67e22"}
];

Ожидаемый результат ↓

image.png

3 Таблица рекордов

Дан массив игроков. Постройте HTML-таблицу <table> с заголовками «Игрок», «Очки», «Уровень». Если очки ≥ 900 — выделите строку золотым фоном (style.backgroundColor = "#fff3cd").
var players = [
  {name: "xXx_Destroyer", score: 1250, level: 15},
  {name: "CoolCat42",      score: 870,  level: 12},
  {name: "ProGamer",        score: 1580, level: 18},
  {name: "Newbie_01",       score: 230,  level: 3},
  {name: "ShadowNinja",     score: 940,  level: 13},
  {name: "PixelQueen",      score: 1100, level: 14}
];

Ожидаемый результат ↓

image.png

4. Прогноз погоды 

Дан массив с прогнозом на неделю. Создайте карточку для каждого дня. Используйте условие для выбора иконки: температура ≥ 25 → ☀️, от 15 до 24 → ⛅, от 5 до 14 → 🌧️, ниже 5 → ❄️. Также если rain — true, добавьте к карточке класс "rainy" (серый фон).
var forecast = [
  {day: "Пн", temp: 28, rain: false},
  {day: "Вт", temp: 22, rain: true},
  {day: "Ср", temp: 18, rain: false},
  {day: "Чт", temp: 12, rain: true},
  {day: "Пт", temp: 8,  rain: false},
  {day: "Сб", temp: 3,  rain: true},
  {day: "Вс", temp: 30, rain: false}
];

Ожидаемый результат ↓

 
image.png

5. Каталог товаров с итогом 

Дан массив товаров. Создайте карточку для каждого товара, а внизу — блок «Итого» с общей суммой (price × quantity для каждого товара). Числа форматируйте с разделителем тысяч: число.toLocaleString("ru-RU") → "12 500".
var products = [
  {name: "Ноутбук",      price: 89990, quantity: 2, emoji: "💻"},
  {name: "Мышь",         price: 1500,  quantity: 5, emoji: "🖱️"},
  {name: "Клавиатура",   price: 3200,  quantity: 3, emoji: "⌨️"},
  {name: "Монитор",      price: 32000, quantity: 2, emoji: "🖥️"},
  {name: "Наушники",     price: 4500,  quantity: 4, emoji: "🎧"}
];

Ожидаемый результат ↓

image.png

 

6. Расписание уроков

Дан объект с расписанием на неделю. Постройте таблицу, где столбцы — дни недели, а строки — номера уроков (1–6). Если урок — «Физ-ра», выделите зелёным фоном. Если ячейка пустая (""), покажите «—».
var schedule = {
  days: ["Пн", "Вт", "Ср", "Чт", "Пт"],
  lessons: [
    ["Матем.",  "Русский", "Физика",  "Матем.",  "Химия"],
    ["Русский", "Англ.",   "Информ.", "Русский", "Физика"],
    ["Физика",  "Матем.",  "Русский", "Информ.", "Матем."],
    ["Физ-ра",  "Химия",   "Англ.",   "Физ-ра",  "Русский"],
    ["История", "Физ-ра",  "Матем.",  "История", ""],
    ["",        "История", "",        "",        ""]
  ]
};

Ожидаемый результат ↓

image.png

7. Статистика класса

Дан массив учеников с оценками. Нужно: 1) Для каждого ученика вычислить средний балл. 2) Вывести карточки с именем, оценками и средним баллом. 3) Средний балл ≥ 4.5 — зелёный, ≥ 3.5 — жёлтый, ниже — красный. 4) Внизу — общая статистика: «Отличников: N, Хорошистов: N, Остальных: N».
var classData = [
  {name: "Алиса",   grades: [5, 4, 5, 5, 4]},
  {name: "Борис",   grades: [3, 4, 3, 4, 3]},
  {name: "Вера",    grades: [5, 5, 5, 5, 5]},
  {name: "Глеб",    grades: [3, 2, 3, 3, 4]},
  {name: "Дина",    grades: [4, 5, 4, 5, 5]},
  {name: "Евгений", grades: [4, 4, 4, 3, 4]},
  {name: "Жанна",   grades: [5, 5, 4, 5, 5]},
  {name: "Захар",   grades: [2, 3, 3, 2, 3]}
];

Ожидаемый результат ↓

image.png

 

time 1000 ms
memory 256 Mb
Правила оформления программ и список ошибок при автоматической проверке задач

Статистика успешных решений по компиляторам
Комментарий учителя

Ваш ответ

Последний прикрепленный файл:
     

Загруженные файлы
Нет