Skip to content

6211 Сухова ЮС Лаб.4 #429

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
sukhovaay wants to merge 4 commits into from
Closed

6211 Сухова ЮС Лаб.4 #429

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
1c2d5e4
Add files via upload
sukhovaay Dec 18, 2025
623000d
Add files via upload
sukhovaay Dec 18, 2025
8228a3d
Add files via upload
sukhovaay Dec 18, 2025
2113c00
Add files via upload
sukhovaay Dec 18, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
70 changes: 70 additions & 0 deletions calculator.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,70 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Калькулятор - Лабораторная работа 4</title>
<link rel="stylesheet" href="calculator.css">
Copy link

@mxwrlld mxwrlld Dec 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Нет CSS - файла

</head>
<body>
<div class="calculator-container">
<h1 class="calculator-title">Лабораторная работа 4</h1>
<p class="calculator-subtitle">Интерактивный калькулятор на JavaScript</p>

<div class="calculator">
<div class="calculator__display" id="display">0</div>

<div class="calculator__controls">
<div class="calculator__input-group">
<label for="num1">Первое число:</label>
<input type="number" id="num1" class="calculator__input" placeholder="Введите число">
</div>

<div class="calculator__input-group">
<label for="operation">Операция:</label>
<select id="operation" class="calculator__select">
<option value="add">+ Сложение</option>
<option value="subtract">- Вычитание</option>
<option value="multiply">× Умножение</option>
<option value="divide">÷ Деление</option>
</select>
</div>

<div class="calculator__input-group">
<label for="num2">Второе число:</label>
<input type="number" id="num2" class="calculator__input" placeholder="Введите число">
</div>
</div>

<button id="calculate" class="calculator__button">Вычислить</button>
<button id="clear" class="calculator__button calculator__button_secondary">Очистить</button>

<div class="calculator__result">
<h3>Результат:</h3>
<div id="result" class="calculator__result-value">-</div>
</div>

<div id="error" class="calculator__error"></div>

<div class="calculator__features">
<h3>📋 Требования задания:</h3>
<ul>
<li>✓ Два поля для ввода числа</li>
<li>✓ Выпадающий список для выбора операции</li>
<li>✓ Кнопка "Вычислить"</li>
<li>✓ Поле с результатом действия</li>
<li>✓ Обработка ошибок (деление на ноль и др.)</li>
</ul>
</div>
</div>

<div class="navigation">
<a href="index.html" class="nav-link">← Лабораторная 1</a>
<a href="lab2.html" class="nav-link">← Лабораторная 2</a>
<a href="laba3veb.html" class="nav-link">← Лабораторная 3</a>
</div>
</div>

<script src="calculator.js"></script>
Copy link

@mxwrlld mxwrlld Dec 18, 2025

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Нет JS- файла

</body>
</html>
77 changes: 77 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,77 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Лабораторная работа 1</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1 class="main-title">Лабораторная работа 1</h1>

<section class="task-1">
<h2 class="section-title">Текстовый блок</h2>
<div class="text-block">
<p class="text-block__content">
JavaScript (аббр. JS) — мультипарадигменный язык программирования.
Поддерживает объектно-ориентированный, императивный и
функциональный стили. Является реализацией спецификации ECMAScript
(стандарт ECMA-262). JavaScript обычно используется как встраиваемый
язык для программного доступа к объектам приложений. Наиболее
широкое применение находит в браузерах как язык сценариев для
придания интерактивности веб-страницам.
</p>
</div>
</section>

<section class="task-2">
<h2 class="section-title">Картинки</h2>
<div class="images-container">
<img
src="https://img2.akspic.ru/crops/8/4/6/4/6/164648/164648-kot-kotenok-privlekatelnost-golova-glaz-3840x2160.jpg"
alt="Котенок"
class="image image_first"
/>
<img
src="https://i.pinimg.com/236x/cd/16/12/cd16121609a79d95dffbfa28a326331e.jpg"
alt="Еще котенок"
class="image image_second"
/>
</div>
</section>

<section class="task-3">
<h2 class="section-title">Светофор</h2>
<div class="traffic-light">
<div class="traffic-light__light traffic-light__light_red"></div>
<div class="traffic-light__light traffic-light__light_yellow"></div>
<div class="traffic-light__light traffic-light__light_green"></div>
</div>
</section>

<section class="task-4">
<h2 class="section-title">Лабиринт 3x3</h2>
<div class="maze">
<!-- Вход - верхняя левая клетка -->
<div class="maze__cell maze__cell_open-top maze__cell_open-right maze__cell--entry">
<span class="maze__label">Вход</span>
</div>
<div class="maze__cell maze__cell_open-top maze__cell_open-left"></div>
<div class="maze__cell maze__cell_open-top maze__cell_open-bottom"></div>

<div class="maze__cell maze__cell_open-right maze__cell_open-bottom"></div>
<div class="maze__cell maze__cell_open-left maze__cell_open-right"></div>
<div class="maze__cell maze__cell_open-top maze__cell_open-bottom"></div>

<div class="maze__cell maze__cell_open-right"></div>
<div class="maze__cell maze__cell_open-left maze__cell_open-bottom"></div>
<!-- Выход - нижняя правая клетка -->
<div class="maze__cell maze__cell_open-top maze__cell_open-left maze__cell--exit">
<span class="maze__label">Выход</span>
</div>
</div>
</section>
</div>
</body>
</html>
81 changes: 81 additions & 0 deletions lab2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,81 @@
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Лабораторная работа 2</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1 class="main-title">Лабораторная работа 2</h1>

<!-- Задание 1: Анимированный список видеоигр -->
<section class="task-1">
<h2 class="section-title">Популярные видеоигры</h2>
<ul class="games-list">
<li class="games-list__item">Minecraft</li>
<li class="games-list__item">Fortnite</li>
<li class="games-list__item">GTA V</li>
<li class="games-list__item">Call of Duty</li>
<li class="games-list__item">Among Us</li>
</ul>
</section>

<!-- Задание 2: Родители и дети (обновлено по БЭМ) -->
<section class="task-2">
<h2 class="section-title">Родители и дети</h2>
<div class="family-container">
<div class="parent parent_1">
<h3 class="parent__title">Первый родитель</h3>
<div class="parent__child">Ребенок 1</div>
<div class="parent__child">Ребенок 2</div>
<div class="parent__child">Ребенок 3</div>
</div>

<div class="parent parent_2">
<h3 class="parent__title">Второй родитель</h3>
<div class="parent__child">Ребенок 1</div>
<div class="parent__child">Ребенок 2</div>
<div class="parent__child">Ребенок 3</div>
</div>

<div class="parent parent_3">
<h3 class="parent__title">Третий родитель</h3>
<div class="parent__child">Ребенок 1</div>
<div class="parent__child">Ребенок 2</div>
<div class="parent__child parent__child_visitor">Ребенок в гостях</div>
<div class="parent__child">Ребенок 3</div>
</div>
</div>
</section>

<!-- Задание 3: Текст с языками программирования -->
<section class="task-3">
<h2 class="section-title">Языки программирования</h2>
<div class="programming-text">
<p>
Языки программирования — это инструменты, с помощью которых разработчики создают программное обеспечение,
веб-приложения, игры, алгоритмы и многое другое. Каждый язык имеет свои особенности, синтаксис и сферу применения.
Ниже представлены некоторые из наиболее известных языков:
</p>
<p>
<a href="#">Python</a> – высокоуровневый язык с простым синтаксисом, популярный в Data Science, веб-разработке и автоматизации.<br>
<a href="#">JavaScript</a> – основной язык для фронтенд-разработки, работает в браузерах и на сервере (Node.js).<br>
<a href="#">Java</a> – объектно-ориентированный язык, широко используется в корпоративных приложениях и Android-разработке.<br>
<a href="#">C++</a> – мощный язык для системного программирования, игр и высокопроизводительных приложений.<br>
<a href="#">C#</a> – язык от Microsoft, применяется в разработке под Windows, играх (Unity) и веб-приложениях.<br>
<a href="#">Go (Golang)</a> – созданный Google, язык для высоконагруженных сетевых сервисов и облачных технологий.<br>
<a href="#">Ruby</a> – известен благодаря фреймворку Ruby on Rails для веб-разработки.<br>
<a href="#">Swift</a> – язык Apple для разработки под iOS и macOS.<br>
<a href="#">Kotlin</a> – современный язык, официально поддерживаемый для Android-разработки.<br>
<a href="#">Rust</a> – язык системного программирования с акцентом на безопасность и производительность.
</p>
<p>
Это лишь малая часть из множества существующих языков, и выбор зависит от задач, которые нужно решить.
</p>
</div>
</section>
</div>
</body>
</html>
Loading