Task Goal Learn how to filter numbers in an array and display the updated result in a list of DOM elements.
- Create a project folder named “Task 2” with the following files:
- index.html
- index.js
- style.css
- In index.html, create a basic HTML layout and connect the JavaScript and CSS files.
- Build a web application called “Student Height Tracker” with the following functionality:
- Display a list of numbers on the page, each representing a student's height from an array.
- Add a button labeled “Add Height”.
When clicked, it should open a prompt() window for entering a new height value. Before adding the value to the array, validate the input. If the user enters nothing, show an alert() with the message: “Height not entered!”
- Add a button labeled “Filter”. When clicked, it should open a prompt() window for entering a minimum height value. The list should be re-rendered in the DOM to show only the filtered results. If the user enters nothing, display the full list without filtering.
- Apply minimal CSS styling to the DOM elements.
Цель задания Научиться выполнять фильтрацию чисел в массиве и показывать обновлённый результат в списке DOM-элементов.
Что нужно сделать Создайте папку проекта «Задача 2»с файлами: index.html; index.js; style.css. В файле index.html создайте базовую HTML-разметку, подключите файл скрипта и файл CSS-стилей. Создайте веб-приложение «Рост учеников»со следующим функционалом: На странице из массива должен выводиться список чисел, которые определяют рост каждого ученика. Предусмотрите возможность добавления нового числа (роста ученика) в массив. Для этого создайте кнопку «Добавить рост». Ввод числа осуществляется в окне prompt(), которое отображается при клике на кнопку добавления. Перед добавлением роста в массив обязательно сделайте проверку ввода. Если пользователь ничего не ввёл, покажите alert() с сообщением: «Рост не введён!» Для фильтрации чисел в массиве по минимальному значению создайте кнопку «Фильтровать», при клике на которую отображается окно ввода prompt() c вводом числа. Список роста должен быть перерисован в DOM-дереве. Если пользователь ничего не ввёл, покажите весь список без учёта фильтрации. Выполните минимальную CSS-стилизацию DOM-элементов.
- HTML5
- CSS
- JavaScript
This project is for educational purposes only. Do not copy or redistribute without permission.
Этот проект предназначен исключительно для образовательных целей. Не копируйте и не распространяйте без разрешения.
