// ========== ОПРЕДЕЛЕНИЕ ТИПА ДАННЫХ ==========
// Создаем тип Product, который описывает структуру объекта товара
type Product = {
id: number; // Уникальный идентификатор товара (число)
name: string; // Название товара (строка)
price: number; // Цена товара в рублях (число)
category: string; // Категория товара (строка)
inStock: boolean; // Доступность товара на складе (true/false)
rating: number; // Рейтинг товара (число, обычно от 0 до 5)
};
// ========== МАССИВ ТОВАРОВ ==========
// Создаем массив products, который содержит объекты типа Product[]
let products: Product[] = [
{
// Первый товар - смартфон
id: 1,
name: 'iPhone 15 Pro',
price: 129990,
category: 'Смартфоны',
inStock: true, // Товар есть в наличии
rating: 4.8
},
{
// Второй товар - ноутбук
id: 2,
name: 'MacBook Air M2',
price: 109990,
category: 'Ноутбуки',
inStock: false, // Товара нет в наличии
rating: 4.9
},
{
// Третий товар - планшет
id: 3,
name: 'iPad Pro',
price: 89990,
category: 'Планшеты',
inStock: true, // Товар есть в наличии
rating: 4.7
}
];
// ========== ФУНКЦИЯ ПОИСКА ТОВАРА ПО ID ==========
// Функция принимает массив товаров и id, возвращает найденный товар или undefined
function findProduct(products: Product[], id: number): Product | undefined {
// Используем метод find для поиска товара с нужным id
// Метод find проходит по массиву и возвращает первый элемент, где условие истинно
return products.find(product => product.id === id);
}
// ========== ФИЛЬТРАЦИЯ ТОВАРОВ В НАЛИЧИИ ==========
// Создаем новый массив, содержащий только товары, которые есть в наличии (inStock === true)
// Метод filter проходит по всем элементам и оставляет только те, где условие истинно
let availableProducts = products.filter(product => product.inStock);
// ========== ВЫВОД РЕЗУЛЬТАТА ==========
// Выводим в консоль количество доступных товаров
// availableProducts.length возвращает количество элементов в отфильтрованном массиве
console.log(`Товаров в наличии: ${availableProducts.length}`);
HTML (HyperText Markup Language) определяет структуру и содержимое веб-страниц с помощью тегов. Каждая HTML-страница имеет базовую структуру:
<!DOCTYPE html>
<html lang="ru">
<head>
<!-- Устанавливаем кодировку UTF-8 для правильного отображения русских символов -->
<meta charset="UTF-8" />
<!-- Настраиваем адаптивность для мобильных устройств -->
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<!-- Заголовок страницы, отображается во вкладке браузера -->
<title>To-Do Список</title>
<!-- Подключаем внешний файл со стилями CSS -->
<link rel="stylesheet" href="styles.css" />
</head>
<body>
<header>Шапка сайта</header>
<main>Основное содержимое</main>
<footer>Подвал сайта</footer>
</body>
</html>
<!-- Заголовки (от самого важного к менее важному) -->
<h1>Главный заголовок страницы</h1>
<h2>Заголовок раздела</h2>
<h3>Подзаголовок</h3>
<!-- Параграфы и текст -->
<p>Это обычный параграф текста.</p>
<p>Текст может быть <strong>жирным</strong> или <em>курсивным</em>.</p>
<!-- Списки -->
<ul>
<li>Первый пункт</li>
<li>Второй пункт</li>
</ul>
<ol>
<li>Первый по порядку</li>
<li>Второй по порядку</li>
</ol>
<!-- Ссылки -->
<a href="https://google.com">Ссылка на Google</a>
<a href="about.html">Ссылка на другую страницу</a>
<!-- Изображения -->
<img src="logo.png" alt="Логотип компании" width="200">
<!-- Кнопки -->
<button>Нажми меня</button>
<!-- Поля ввода -->
<input type="text" placeholder="Введите текст">
<input type="email" placeholder="Email">
<!-- Контейнеры -->
<div class="container">Блочный контейнер</div>
<span class="highlight">Строчный контейнер</span>
Атрибуты предоставляют дополнительную информацию об элементах. Самые важные - id, class:
<!-- ID - уникальный идентификатор -->
<h1 id="main-title">Заголовок</h1>
<!-- CLASS - для CSS стилей -->
<p class="description important">Важное описание</p>
<div class="card product-card">Карточка товара</div>
<!-- Атрибуты для изображений -->
<img src="photo.jpg" alt="Описание фото" class="photo large">
<!-- Атрибуты для ссылок -->
<a href="contact.html" class="nav-link" title="Свяжитесь с нами">Контакты</a>
/* Шпаргалка по базовым CSS свойствам */
/* color - Цвет текста */
color: red; /* название цвета */
color: #FF0000; /* HEX формат */
color: rgb(255, 0, 0); /* RGB формат */
/* font-family - Шрифт */
font-family: Arial, sans-serif; /* название шрифта, fallback */
/* font-size - Размер шрифта */
font-size: 16px; /* в пикселях */
/* font-weight - Жирность */
font-weight: bold; /* жирный текст */
/* text-align - Выравнивание текста */
text-align: left; /* влево */
text-align: center; /* по центру */
text-align: right; /* вправо */
/* padding - Внутренние отступы внутри элемента */
padding: 10px; /* все стороны */
padding: 10px 20px; /* верх/низ и лево/право */
padding: 10px 20px 15px 5px; /* верх право низ лево */
/* margin - Внешние отступы снаружи элемента */
margin: 10px; /* все стороны */
margin: 10px 20px; /* верх/низ и лево/право */
/* border - Граница вокруг элемента */
border: 1px solid black; /* толщина стиль цвет */
border-radius: 5px; /* скругление углов */
border-width: 2px; /* толщина границы */
/* background - Фон элемента */
background-color: #f0f0f0; /* цвет фона */
background-image: url(image.jpg); /* фоновое изображение */
/* width/height - Размеры элемента */
width: 200px; /* ширина */
height: 100px; /* высота */
/* display - Тип отображения элемента */
display: block; /* блочный элемент */
display: flex; /* flex-контейнер */
/* position - Способ позиционирования */
position: relative; /* относительное позиционирование */
position: absolute; /* абсолютное позиционирование */
position: fixed; /* фиксированное на экране */
/* opacity - Прозрачность элемента */
opacity: 0.5; /* от 0 (невидимо) до 1 (видимо) */
/* transition - Плавный переход при изменении свойств */
transition: all 0.3s ease; /* все свойства за 0.3 сек */
/* box-shadow - Тень элемента */
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* смещение размер цвет */
/* ========== FLEXBOX КОНТЕЙНЕР ========== */
.container {
display: flex; /* Включает Flexbox для контейнера */
/* Направление главной оси (main axis) */
flex-direction: row; /* по умолчанию: слева направо */
/* flex-direction: row-reverse; */ /* справа налево */
/* flex-direction: column; */ /* сверху вниз */
/* flex-direction: column-reverse; */ /* снизу вверх */
/* Выравнивание по главной оси (горизонталь для row) */
justify-content: flex-start; /* по умолчанию: к началу */
/* justify-content: flex-end; */ /* к концу */
/* justify-content: center; */ /* по центру */
/* justify-content: space-between; */ /* крайние к краям, остальные равномерно */
/* justify-content: space-around; */ /* равные отступы вокруг элементов */
/* justify-content: space-evenly; */ /* одинаковые расстояния между всеми */
/* Выравнивание по поперечной оси (вертикаль для row) */
align-items: flex-start; /* к началу поперечной оси */
/* align-items: flex-end; */ /* к концу поперечной оси */
/* align-items: center; */ /* по центру поперечной оси */
/* Перенос элементов на новую строку */
flex-wrap: nowrap; /* по умолчанию: без переноса */
/* flex-wrap: wrap; */ /* переносит на новую строку */
/* flex-wrap: wrap-reverse; */ /* переносит снизу вверх */
}
/* ========== ЧАСТЫЕ ПАТТЕРНЫ ========== */
/* Центрирование элемента */
.center {
display: flex;
justify-content: center;
align-items: center;
}
/* Равномерное распределение */
.equal-columns {
display: flex;
}
/* Выравнивание по краям */
.space-between {
display: flex;
justify-content: space-between;
align-items: center;
}