Initial
This commit is contained in:
commit
55c7a7a9f9
2
.eslintignore
Normal file
2
.eslintignore
Normal file
@ -0,0 +1,2 @@
|
||||
node_modules
|
||||
dist
|
||||
16
.eslintrc.json
Normal file
16
.eslintrc.json
Normal file
@ -0,0 +1,16 @@
|
||||
{
|
||||
"env": {
|
||||
"browser": true,
|
||||
"es2021": true
|
||||
},
|
||||
"extends": ["airbnb-base", "prettier"],
|
||||
"plugins": ["prettier"],
|
||||
"parserOptions": {
|
||||
"ecmaVersion": 12,
|
||||
"sourceType": "module"
|
||||
},
|
||||
"rules": {
|
||||
"prettier/prettier": "error",
|
||||
"no-console": "off"
|
||||
}
|
||||
}
|
||||
42
.gitignore
vendored
Normal file
42
.gitignore
vendored
Normal file
@ -0,0 +1,42 @@
|
||||
# See http://help.github.com/ignore-files/ for more about ignoring files.
|
||||
|
||||
# Compiled output
|
||||
/dist
|
||||
/tmp
|
||||
/out-tsc
|
||||
/bazel-out
|
||||
|
||||
# Node
|
||||
/node_modules
|
||||
npm-debug.log
|
||||
yarn-error.log
|
||||
|
||||
# IDEs and editors
|
||||
.idea/
|
||||
.project
|
||||
.classpath
|
||||
.c9/
|
||||
*.launch
|
||||
.settings/
|
||||
*.sublime-workspace
|
||||
|
||||
# Visual Studio Code
|
||||
.vscode/*
|
||||
!.vscode/settings.json
|
||||
!.vscode/tasks.json
|
||||
!.vscode/launch.json
|
||||
!.vscode/extensions.json
|
||||
.history/*
|
||||
|
||||
# Miscellaneous
|
||||
/.angular/cache
|
||||
.sass-cache/
|
||||
/connect.lock
|
||||
/coverage
|
||||
/libpeerconnection.log
|
||||
testem.log
|
||||
/typings
|
||||
|
||||
# System files
|
||||
.DS_Store
|
||||
Thumbs.db
|
||||
7
.prettierrc
Normal file
7
.prettierrc
Normal file
@ -0,0 +1,7 @@
|
||||
{
|
||||
"tabWidth": 4,
|
||||
"singleQuote": false,
|
||||
"printWidth": 120,
|
||||
"trailingComma": "es5",
|
||||
"useTabs": false
|
||||
}
|
||||
8
.vscode/extensions.json
vendored
Normal file
8
.vscode/extensions.json
vendored
Normal file
@ -0,0 +1,8 @@
|
||||
{
|
||||
"recommendations": [
|
||||
"usernamehw.errorlens",
|
||||
"AndersEAndersen.html-class-suggestions",
|
||||
"dbaeumer.vscode-eslint",
|
||||
"esbenp.prettier-vscode"
|
||||
]
|
||||
}
|
||||
18
.vscode/launch.json
vendored
Normal file
18
.vscode/launch.json
vendored
Normal file
@ -0,0 +1,18 @@
|
||||
{
|
||||
"configurations": [
|
||||
{
|
||||
"type": "chrome",
|
||||
"name": "Debug",
|
||||
"request": "launch",
|
||||
"url": "http://localhost:5173"
|
||||
},
|
||||
{
|
||||
"type": "node",
|
||||
"name": "Start",
|
||||
"request": "launch",
|
||||
"runtimeExecutable": "npm",
|
||||
"runtimeArgs": ["run-script", "start"],
|
||||
"console": "integratedTerminal"
|
||||
}
|
||||
]
|
||||
}
|
||||
40
.vscode/settings.json
vendored
Normal file
40
.vscode/settings.json
vendored
Normal file
@ -0,0 +1,40 @@
|
||||
{
|
||||
"files.autoSave": "onFocusChange",
|
||||
"files.eol": "\n",
|
||||
"editor.detectIndentation": false,
|
||||
"editor.formatOnType": false,
|
||||
"editor.formatOnPaste": true,
|
||||
"editor.formatOnSave": true,
|
||||
"editor.tabSize": 4,
|
||||
"editor.insertSpaces": true,
|
||||
"editor.accessibilitySupport": "off",
|
||||
"editor.codeActionsOnSave": {
|
||||
"source.organizeImports": "explicit",
|
||||
"source.sortImports": "explicit"
|
||||
},
|
||||
"editor.snippetSuggestions": "bottom",
|
||||
"debug.toolBarLocation": "commandCenter",
|
||||
"debug.showVariableTypes": true,
|
||||
"errorLens.gutterIconsEnabled": true,
|
||||
"errorLens.messageEnabled": false,
|
||||
"prettier.tabWidth": 4,
|
||||
"prettier.singleQuote": false,
|
||||
"prettier.printWidth": 120,
|
||||
"prettier.trailingComma": "es5",
|
||||
"prettier.useTabs": false,
|
||||
"[json]": {
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||
},
|
||||
"[jsonc]": {
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||
},
|
||||
"[javascript]": {
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||
},
|
||||
"[css]": {
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||
},
|
||||
"[html]": {
|
||||
"editor.defaultFormatter": "esbenp.prettier-vscode"
|
||||
}
|
||||
}
|
||||
BIN
assets/banner1.png
Normal file
BIN
assets/banner1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 640 KiB |
BIN
assets/banner2.png
Normal file
BIN
assets/banner2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 812 KiB |
BIN
assets/banner3.png
Normal file
BIN
assets/banner3.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 767 KiB |
BIN
assets/logo.png
Normal file
BIN
assets/logo.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 12 KiB |
8
css/banner.css
Normal file
8
css/banner.css
Normal file
@ -0,0 +1,8 @@
|
||||
#banner {
|
||||
margin: 5px;
|
||||
}
|
||||
|
||||
#banner img {
|
||||
border: 1px solid #3c3c3f;
|
||||
border-radius: 5px;
|
||||
}
|
||||
35
css/style.css
Normal file
35
css/style.css
Normal file
@ -0,0 +1,35 @@
|
||||
header nav {
|
||||
background-color: #3c3c3c;
|
||||
}
|
||||
|
||||
@media (min-width: 768px) {
|
||||
header nav {
|
||||
height: 64px;
|
||||
}
|
||||
}
|
||||
|
||||
header nav a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
footer {
|
||||
background-color: #9c9c9c;
|
||||
height: 64px;
|
||||
color: #ffffff;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 1.5em;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.25em;
|
||||
}
|
||||
|
||||
h3 {
|
||||
font-size: 1.1em;
|
||||
}
|
||||
|
||||
.w-40 {
|
||||
width: 40% !important;
|
||||
}
|
||||
118
index.html
Normal file
118
index.html
Normal file
@ -0,0 +1,118 @@
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Моя страница</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<link href="./node_modules/bootstrap-icons/font/bootstrap-icons.min.css" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="./css/style.css" />
|
||||
</head>
|
||||
|
||||
<body class="h-100 d-flex flex-column">
|
||||
<header>
|
||||
<nav class="navbar navbar-expand-md navbar-dark">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="/">
|
||||
<i class="bi bi-app"></i>
|
||||
Мой сайт
|
||||
</a>
|
||||
<button
|
||||
class="navbar-toggler"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#navbarNav"
|
||||
aria-controls="navbarNav"
|
||||
aria-expanded="false"
|
||||
aria-label="Toggle navigation"
|
||||
>
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="navbar-collapse collapse justify-content-end" id="navbarNav">
|
||||
<div class="navbar-nav">
|
||||
<a class="nav-link active" href="./index.html">Главная страница</a>
|
||||
<a class="nav-link" href="./page2.html">Вторая страница</a>
|
||||
<a class="nav-link" href="./page3.html">Третья страница</a>
|
||||
<a class="nav-link" href="./page-js.html">JavaScript</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<div id="banner" class="carousel carousel-dark slide">
|
||||
<div class="carousel-indicators">
|
||||
<button
|
||||
type="button"
|
||||
data-bs-target="#banner"
|
||||
data-bs-slide-to="0"
|
||||
aria-current="true"
|
||||
aria-label="Slide 1"
|
||||
></button>
|
||||
<button type="button" data-bs-target="#banner" data-bs-slide-to="1" aria-label="Slide 2"></button>
|
||||
<button type="button" data-bs-target="#banner" data-bs-slide-to="2" aria-label="Slide 3"></button>
|
||||
</div>
|
||||
<div class="carousel-inner">
|
||||
<div class="carousel-item" data-interval="10000">
|
||||
<img class="d-block w-100" src="/assets/banner1.png" alt="banner1" />
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h5>First slide label</h5>
|
||||
<p>Some representative placeholder content for the first slide.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item" data-dark="true">
|
||||
<img class="d-block w-100" src="/assets/banner2.png" alt="banner2" />
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h5>Second slide label</h5>
|
||||
<p>Some representative placeholder content for the second slide.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="carousel-item" data-dark="true">
|
||||
<img class="d-block w-100" src="/assets/banner3.png" alt="banner3" />
|
||||
<div class="carousel-caption d-none d-md-block">
|
||||
<h5>Third slide label</h5>
|
||||
<p>Some representative placeholder content for the third slide.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<button class="carousel-control-prev" type="button" data-bs-target="#banner" data-bs-slide="prev">
|
||||
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Previous</span>
|
||||
</button>
|
||||
<button class="carousel-control-next" type="button" data-bs-target="#banner" data-bs-slide="next">
|
||||
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
||||
<span class="visually-hidden">Next</span>
|
||||
</button>
|
||||
</div>
|
||||
<main class="container-fluid p-3">
|
||||
<h1>Пример web-страницы.</h1>
|
||||
<h2>1. Структурные элементы</h2>
|
||||
<p>
|
||||
<b>Полужирное начертание <i>курсив</i></b>
|
||||
</p>
|
||||
<p>Абзац 2 <a href="page2.html">Ссылка</a></p>
|
||||
<h3>1.1. Списки</h3>
|
||||
<p>Список маркированный:</p>
|
||||
<ul>
|
||||
<li><a href="page2.html" target="_blank">Элемент списка 1</a></li>
|
||||
<li>Элемент списка 2</li>
|
||||
<li>...</li>
|
||||
</ul>
|
||||
<p>Список нумерованный:</p>
|
||||
<ol>
|
||||
<li>Элемент списка 1</li>
|
||||
<li>Элемент списка 2</li>
|
||||
<li>...</li>
|
||||
</ol>
|
||||
</main>
|
||||
<footer class="footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center">
|
||||
Автор, 2022
|
||||
</footer>
|
||||
<script type="module">
|
||||
import myBanner from "./js/banner";
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
myBanner("#banner");
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
106
js/banner.js
Normal file
106
js/banner.js
Normal file
@ -0,0 +1,106 @@
|
||||
// Модуль для смены изображения в баннере по таймеру
|
||||
|
||||
// Подключить CSS, который относится к данному модулю при подключении модуля
|
||||
import "../css/banner.css";
|
||||
|
||||
// указывается блок, в котором будет баннер
|
||||
// блок должен содержать изображения
|
||||
function myBanner(root) {
|
||||
console.info("Baner logic successfully loaded");
|
||||
|
||||
// Константы
|
||||
const DARK_CLASS = "carousel-dark";
|
||||
const TIMEOUT_ATTR = "data-interval";
|
||||
const THEME_ATTR = "data-dark";
|
||||
const TIMEOUT = 5000;
|
||||
|
||||
// Переменная для хранения текущего ID таймера
|
||||
let timerId;
|
||||
|
||||
// Получение всех необходимых элементов внутри блока с баннером
|
||||
// Блок с баннерами
|
||||
const bannerRoot = document.querySelector(root);
|
||||
// Баннеры
|
||||
const banners = Array.from(document.querySelectorAll(`${root} .carousel-item`));
|
||||
// Интерактивные элементы для переключения баннеров, в том числе надписи
|
||||
const indicators = Array.from(document.querySelectorAll(`${root} .carousel-indicators button`));
|
||||
const controls = Array.from(document.querySelectorAll(".carousel-control-prev, .carousel-control-next"));
|
||||
|
||||
// Последний индекс для баннеров
|
||||
const LAST_INDEX = banners.length - 1;
|
||||
|
||||
// Получить сведения о баннере для показа и его настройках
|
||||
const getBannerConfig = () => {
|
||||
// Получить текущий баннер
|
||||
const currentElement = banners.find((banner) => banner.classList.contains("active"));
|
||||
// Получить индекс текущего баннера
|
||||
const hideIndex = currentElement === undefined ? LAST_INDEX : banners.indexOf(currentElement);
|
||||
// Получить индекс следующего баннера
|
||||
const showIndex = hideIndex === LAST_INDEX ? 0 : hideIndex + 1;
|
||||
// Получить параметр времени показа баннера (значение атрибута data-interval)
|
||||
const interval = parseInt(banners[showIndex].getAttribute(TIMEOUT_ATTR) ?? TIMEOUT, 10);
|
||||
// Получить параметр темы надписи баннера (значение атрибута data-dark)
|
||||
const isDark = banners[showIndex].getAttribute(THEME_ATTR);
|
||||
|
||||
// Если требуется темная тема, то добавить класс carousel-dark к блоку баннеров,
|
||||
// иначе удалить его
|
||||
if (isDark) {
|
||||
bannerRoot.classList.add(DARK_CLASS);
|
||||
} else {
|
||||
bannerRoot.classList.remove(DARK_CLASS);
|
||||
}
|
||||
|
||||
// Вывести отладочные сведения
|
||||
console.debug(banners[showIndex], interval, hideIndex, showIndex);
|
||||
|
||||
// Возврат объекта
|
||||
return { hideIndex, showIndex, interval };
|
||||
};
|
||||
|
||||
// Функция для смены баннера
|
||||
const changeBanner = () => {
|
||||
// Получить сведения о текущем и следующем баннере
|
||||
const config = getBannerConfig();
|
||||
|
||||
// Скрыть текущий баннер и его надпись
|
||||
banners[config.hideIndex].classList.remove("active");
|
||||
indicators[config.hideIndex].classList.remove("active");
|
||||
// Показать следующий баннер и его надпись
|
||||
banners[config.showIndex].classList.add("active");
|
||||
indicators[config.showIndex].classList.add("active");
|
||||
|
||||
// Вывеси сообщение об автоматической смене баннера
|
||||
console.info("Banner changed automatically");
|
||||
|
||||
// Установка таймера на n секунд, после чего функция будет запущена повторно
|
||||
timerId = setTimeout(changeBanner, config.interval);
|
||||
};
|
||||
|
||||
// Функция для сброса текущего таймера и создания нового с учетом настроек баннера,
|
||||
// на который пользователь перешел с помощью элементов управления
|
||||
const resetTimer = () => {
|
||||
// Если таймер с указанным ID существует, то удалить его
|
||||
if (timerId) {
|
||||
clearTimeout(timerId);
|
||||
}
|
||||
// Получить сведения о текущем и следующем баннере
|
||||
const config = getBannerConfig();
|
||||
|
||||
// Вывеси сообщение о ручной смене баннера (пользователь нажал на кнопку)
|
||||
console.info("Banner changed manually");
|
||||
|
||||
// Установка таймера на n секунд, после чего функция будет запущена повторно
|
||||
timerId = setTimeout(changeBanner, config.interval);
|
||||
};
|
||||
|
||||
// Скрываем все баннеры
|
||||
banners.forEach((banner) => banner.classList.remove("active"));
|
||||
// Установка обработчика дополнительных событий для события click элементов ручного переключения баннеров
|
||||
[...indicators, ...controls].forEach((element) => element.addEventListener("click", () => resetTimer(timerId)));
|
||||
|
||||
// Показываем первый баннер, после чего будет создан цикл переключений через вызов таймеров
|
||||
changeBanner();
|
||||
}
|
||||
|
||||
// Экспорт функции myBanner
|
||||
export default myBanner;
|
||||
0
js/main.js
Normal file
0
js/main.js
Normal file
32
js/validation.js
Normal file
32
js/validation.js
Normal file
@ -0,0 +1,32 @@
|
||||
// Модуль используется для валидации форма на странице
|
||||
|
||||
// Функция для проверки элементов управления формы на заполненность и корректность
|
||||
const checkForm = (event) => {
|
||||
// Получаем ссылку на форму
|
||||
const form = event.target;
|
||||
|
||||
// https://learn.javascript.ru/bubbling-and-capturing
|
||||
// Если какой-либо элемент формы не заполнен или заполнен с ошибками, то
|
||||
if (!form.checkValidity()) {
|
||||
// Отменяем действие по умолчанию
|
||||
event.preventDefault();
|
||||
// Предотвратить всплытие события
|
||||
// Когда на элементе происходит событие, обработчики сначала срабатывают на нём,
|
||||
// потом на его родителе, затем выше и так далее, вверх по цепочке предков.
|
||||
// event.stopPropagation();
|
||||
}
|
||||
// добавляет к форме класс was-validated
|
||||
form.classList.add("was-validated");
|
||||
};
|
||||
|
||||
// Функция для привязки обработчика событий
|
||||
const myValidation = () => {
|
||||
// Поиск всех форма с классом .needs-validation
|
||||
const forms = document.querySelectorAll("form.needs-validation");
|
||||
|
||||
// Установка функции checkForm в качестве обработчика события submit
|
||||
forms.forEach((form) => form.addEventListener("submit", checkForm));
|
||||
};
|
||||
|
||||
// Экспорт функции myValidation
|
||||
export default myValidation;
|
||||
134
old/index.html
Normal file
134
old/index.html
Normal file
@ -0,0 +1,134 @@
|
||||
<!doctype html>
|
||||
<html lang="ru" data-bs-theme="light">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>My site</title>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
|
||||
/>
|
||||
<link
|
||||
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css"
|
||||
rel="stylesheet"
|
||||
integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
|
||||
crossorigin="anonymous"
|
||||
/>
|
||||
<link href="style.css" rel="stylesheet" />
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<nav class="navbar navbar-expand-lg bg-body-tertiary">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="#">Navbar</a>
|
||||
<button
|
||||
class="navbar-toggler"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#navbarNav"
|
||||
aria-controls="navbarNav"
|
||||
aria-expanded="false"
|
||||
aria-label="Toggle navigation"
|
||||
>
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="collapse navbar-collapse" id="navbarNav">
|
||||
<ul class="navbar-nav">
|
||||
<li class="nav-item">
|
||||
<a class="nav-link active" aria-current="page" href="#">Home</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Features</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link" href="#">Pricing</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a class="nav-link disabled" aria-disabled="true"><i class="bi bi-android"></i>Disabled</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<main class="container-fluid p-2">
|
||||
<table class="table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th scope="col">#</th>
|
||||
<th scope="col">First</th>
|
||||
<th scope="col">Last</th>
|
||||
<th scope="col">Handle</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<th scope="row">1</th>
|
||||
<td>Mark</td>
|
||||
<td>Otto</td>
|
||||
<td>@mdo</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">2</th>
|
||||
<td>Jacob</td>
|
||||
<td>Thornton</td>
|
||||
<td>@fat</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<th scope="row">3</th>
|
||||
<td colspan="2">Larry the Bird</td>
|
||||
<td>@twitter</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
|
||||
<div class="d-flex flex-md-row flex-column justify-content-center mt-2 p-5">
|
||||
<div class="card" style="width: 18rem">
|
||||
<img src="..." class="card-img-top" alt="..." />
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">
|
||||
Some quick example text to build on the card title and make up the bulk of the card's
|
||||
content.
|
||||
</p>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" style="width: 18rem">
|
||||
<img src="..." class="card-img-top" alt="..." />
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">
|
||||
Some quick example text to build on the card title and make up the bulk of the card's
|
||||
content.
|
||||
</p>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card" style="width: 18rem">
|
||||
<img src="..." class="card-img-top" alt="..." />
|
||||
<div class="card-body">
|
||||
<h5 class="card-title">Card title</h5>
|
||||
<p class="card-text">
|
||||
Some quick example text to build on the card title and make up the bulk of the card's
|
||||
content.
|
||||
</p>
|
||||
<a href="#" class="btn btn-primary">Go somewhere</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
<script
|
||||
src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.8/dist/umd/popper.min.js"
|
||||
integrity="sha384-I7E8VVD/ismYTF4hNIPjVp/Zjvgyol6VFvRkX/vR+Vc4jQkC+hVqc2pM8ODewa9r"
|
||||
crossorigin="anonymous"
|
||||
></script>
|
||||
<script
|
||||
src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.bundle.min.js"
|
||||
integrity="sha384-YvpcrYf0tY3lHB60NNkmXc5s9fDVZLESaAA55NDzOxhy9GkcIdslK1eN7N6jIeHz"
|
||||
crossorigin="anonymous"
|
||||
></script>
|
||||
</body>
|
||||
</html>
|
||||
3
old/style.css
Normal file
3
old/style.css
Normal file
@ -0,0 +1,3 @@
|
||||
.card {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
7081
package-lock.json
generated
Normal file
7081
package-lock.json
generated
Normal file
File diff suppressed because it is too large
Load Diff
26
package.json
Normal file
26
package.json
Normal file
@ -0,0 +1,26 @@
|
||||
{
|
||||
"name": "int-prog",
|
||||
"version": "1.0.0",
|
||||
"type": "module",
|
||||
"scripts": {
|
||||
"start": "vite",
|
||||
"serve": "http-server -p 3000 ./dist/",
|
||||
"build": "vite build",
|
||||
"prod": "npm-run-all build serve",
|
||||
"lint": "eslint . --ext js --report-unused-disable-directives --max-warnings 0"
|
||||
},
|
||||
"dependencies": {
|
||||
"bootstrap": "5.3.3",
|
||||
"bootstrap-icons": "1.11.3"
|
||||
},
|
||||
"devDependencies": {
|
||||
"http-server": "14.1.1",
|
||||
"vite": "5.4.8",
|
||||
"npm-run-all": "4.1.5",
|
||||
"eslint": "8.57.1",
|
||||
"eslint-config-airbnb-base": "15.0.0",
|
||||
"eslint-config-prettier": "9.1.0",
|
||||
"eslint-plugin-import": "2.31.0",
|
||||
"eslint-plugin-prettier": "5.2.1"
|
||||
}
|
||||
}
|
||||
92
page-js.html
Normal file
92
page-js.html
Normal file
@ -0,0 +1,92 @@
|
||||
<html lang="ru">
|
||||
|
||||
</html>
|
||||
|
||||
<head>
|
||||
<meta charset="utf-8">
|
||||
<title>Моя страница</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1">
|
||||
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<link href="./node_modules/bootstrap-icons/font/bootstrap-icons.min.css" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="./css/style.css">
|
||||
</head>
|
||||
|
||||
<body class="h-100 d-flex flex-column">
|
||||
<header>
|
||||
<nav class="navbar navbar-expand-md navbar-dark">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="/">
|
||||
<i class="bi bi-app"></i>
|
||||
Мой сайт
|
||||
</a>
|
||||
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav"
|
||||
aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="navbar-collapse collapse justify-content-end" id="navbarNav">
|
||||
<div class="navbar-nav">
|
||||
<a class="nav-link" href="./index.html">Главная страница</a>
|
||||
<a class="nav-link" href="./page2.html">Вторая страница</a>
|
||||
<a class="nav-link" href="./page3.html">Третья страница</a>
|
||||
<a class="nav-link active" href="./page-js.html">JavaScript</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<main class="container-fluid p-3">
|
||||
</main>
|
||||
<footer class="footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center">
|
||||
Автор, 2022
|
||||
</footer>
|
||||
<script type="module">
|
||||
function someFunc() {
|
||||
return "world!";
|
||||
}
|
||||
|
||||
const someFunc2 = function () {
|
||||
return "asdasd";
|
||||
}
|
||||
|
||||
const someFunc3 = () => "asdasd111";
|
||||
|
||||
const someFunc4 = (x, y) => x * y;
|
||||
|
||||
const TEST = `asdasd
|
||||
asdasdasd
|
||||
asdasdasd`;
|
||||
|
||||
const manufacturer = "lada";
|
||||
const car = {
|
||||
manufacturer,
|
||||
speed: 10,
|
||||
color: "red",
|
||||
price: 1000.2,
|
||||
print: () => `Color is`,
|
||||
}
|
||||
|
||||
let x = "hello!";
|
||||
console.log(x, someFunc(), someFunc2(), someFunc3(), someFunc4(3, 4));
|
||||
x = 3;
|
||||
console.log(`value is ${x} ${x * 2} price ${car.price}`, TEST, car, car.print());
|
||||
|
||||
let { speed, color, price } = car;
|
||||
|
||||
console.log(speed, color, price);
|
||||
|
||||
var arr = [1, 'asd', 'asd', false];
|
||||
console.log(arr);
|
||||
|
||||
let arr1 = [1, 2, 3, 4];
|
||||
let arr2 = ['a', 'b', 'c'];
|
||||
let arr3 = [arr1, arr2];
|
||||
|
||||
console.log(arr3);
|
||||
|
||||
let func = (a, b, c, d) => a + b + c + d
|
||||
console.log(func(...arr1))
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
80
page2.html
Normal file
80
page2.html
Normal file
@ -0,0 +1,80 @@
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Моя страница</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<link href="./node_modules/bootstrap-icons/font/bootstrap-icons.min.css" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="./css/style.css" />
|
||||
</head>
|
||||
|
||||
<body class="h-100 d-flex flex-column">
|
||||
<header>
|
||||
<nav class="navbar navbar-expand-md navbar-dark">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="/">
|
||||
<i class="bi bi-app"></i>
|
||||
Мой сайт
|
||||
</a>
|
||||
<button
|
||||
class="navbar-toggler"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#navbarNav"
|
||||
aria-controls="navbarNav"
|
||||
aria-expanded="false"
|
||||
aria-label="Toggle navigation"
|
||||
>
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="navbar-collapse collapse justify-content-end" id="navbarNav">
|
||||
<div class="navbar-nav">
|
||||
<a class="nav-link" href="./index.html">Главная страница</a>
|
||||
<a class="nav-link active" href="./page2.html">Вторая страница</a>
|
||||
<a class="nav-link" href="./page3.html">Третья страница</a>
|
||||
<a class="nav-link" href="./page-js.html">JavaScript</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<main class="container-fluid p-3">
|
||||
<p class="text-center">Вторая страница содержит пример рисунка (рис. 1) и таблицы (таб. 1).</p>
|
||||
<div class="text-center">
|
||||
<img src="./assets/logo.png" alt="logo" width="128" />
|
||||
<br />
|
||||
Рис. 1. Пример рисунка.
|
||||
</div>
|
||||
<div class="mt-3 row justify-content-center">
|
||||
<table class="table table-bordered w-50">
|
||||
<caption>
|
||||
Таблица 1. Пример таблицы.
|
||||
</caption>
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="w-25">Номер</th>
|
||||
<th>ФИО</th>
|
||||
<th class="w-25">Телефон</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>1</td>
|
||||
<td>Иванов</td>
|
||||
<td>89999999999</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>2</td>
|
||||
<td>Петров</td>
|
||||
<td>89999999991</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center">
|
||||
Автор, 2022
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
175
page3.html
Normal file
175
page3.html
Normal file
@ -0,0 +1,175 @@
|
||||
<html lang="ru">
|
||||
<head>
|
||||
<meta charset="utf-8" />
|
||||
<title>Моя страница</title>
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1" />
|
||||
<script type="module" src="./node_modules/bootstrap/dist/js/bootstrap.min.js"></script>
|
||||
<link href="./node_modules/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet" />
|
||||
<link href="./node_modules/bootstrap-icons/font/bootstrap-icons.min.css" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="./css/style.css" />
|
||||
</head>
|
||||
|
||||
<body class="h-100 d-flex flex-column">
|
||||
<header>
|
||||
<nav class="navbar navbar-expand-md navbar-dark">
|
||||
<div class="container-fluid">
|
||||
<a class="navbar-brand" href="/">
|
||||
<i class="bi bi-app"></i>
|
||||
Мой сайт
|
||||
</a>
|
||||
<button
|
||||
class="navbar-toggler"
|
||||
type="button"
|
||||
data-bs-toggle="collapse"
|
||||
data-bs-target="#navbarNav"
|
||||
aria-controls="navbarNav"
|
||||
aria-expanded="false"
|
||||
aria-label="Toggle navigation"
|
||||
>
|
||||
<span class="navbar-toggler-icon"></span>
|
||||
</button>
|
||||
<div class="navbar-collapse collapse justify-content-end" id="navbarNav">
|
||||
<div class="navbar-nav">
|
||||
<a class="nav-link" href="./index.html">Главная страница</a>
|
||||
<a class="nav-link" href="./page2.html">Вторая страница</a>
|
||||
<a class="nav-link active" href="./page3.html">Третья страница</a>
|
||||
<a class="nav-link" href="./page-js.html">JavaScript</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
</header>
|
||||
<main class="container-fluid p-3">
|
||||
<div class="row justify-content-center">
|
||||
<div class="text-center mb-2">
|
||||
<h3 id="form-state"></h3>
|
||||
</div>
|
||||
<form class="col-md-6 m-0 needs-validation" action="./page3.html" method="get" novalidate>
|
||||
<div class="mb-2">
|
||||
<label class="form-label" for="lastname">Фамилия</label>
|
||||
<input id="lastname" name="lastname" class="form-control" type="text" required />
|
||||
<div class="valid-feedback">Фамилия заполнена</div>
|
||||
<div class="invalid-feedback">Фамилия не заполнена</div>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label" for="firstname">Имя</label>
|
||||
<input id="firstname" name="firstname" class="form-control" type="text" required />
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label" for="email">E-mail</label>
|
||||
<input
|
||||
id="email"
|
||||
name="email"
|
||||
class="form-control"
|
||||
type="email"
|
||||
placeholder="name@example.ru"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label" for="password">Пароль</label>
|
||||
<input
|
||||
id="password"
|
||||
name="password"
|
||||
class="form-control"
|
||||
type="password"
|
||||
autocomplete="off"
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label" for="date">Дата</label>
|
||||
<input id="date" name="date" class="form-control" type="date" required />
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label" for="disabled">Выключенный компонент</label>
|
||||
<input
|
||||
id="disabled"
|
||||
name="disabled"
|
||||
class="form-control"
|
||||
type="text"
|
||||
value="Некоторое значение"
|
||||
disabled
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label" for="readonly">Компонент только для чтения</label>
|
||||
<input
|
||||
id="readonly"
|
||||
name="readonly"
|
||||
class="form-control"
|
||||
type="text"
|
||||
value="Некоторое значение"
|
||||
readonly
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<label class="form-label" for="color">Выбор цвета</label>
|
||||
<input id="color" name="color" type="color" class="form-control form-control-color" />
|
||||
</div>
|
||||
<div class="mb-2 d-md-flex flex-md-row">
|
||||
<div class="form-check me-md-3">
|
||||
<input class="form-check-input" id="checkbox1" name="checkbox1" type="checkbox" required />
|
||||
<label class="form-check-label" for="checkbox1">Флажок 1</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" id="checkbox2" name="checkbox2" type="checkbox" />
|
||||
<label class="form-check-label" for="checkbox2">Флажок 2</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-2 d-md-flex flex-md-row">
|
||||
<div class="form-check me-md-3">
|
||||
<input class="form-check-input" type="radio" name="radio-example" id="radio1" />
|
||||
<label class="form-check-label" for="radio1">Переключатель 1</label>
|
||||
</div>
|
||||
<div class="form-check">
|
||||
<input class="form-check-input" type="radio" name="radio-example" id="radio2" />
|
||||
<label class="form-check-label" for="radio2">Переключатель 2</label>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mb-2">
|
||||
<select class="form-select" name="selected" required>
|
||||
<option value="" selected>Выберите значение</option>
|
||||
<option value="1">Один</option>
|
||||
<option value="2">Два</option>
|
||||
<option value="3">Три</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="col-12 text-center">
|
||||
<button class="btn btn-primary w-40 me-1" type="submit">Отправить</button>
|
||||
<button class="btn btn-primary w-40" type="button" onclick="toggleNoValidate()">
|
||||
Переключить novalidate
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</main>
|
||||
<footer class="footer mt-auto d-flex flex-shrink-0 justify-content-center align-items-center">
|
||||
Автор, 2022
|
||||
</footer>
|
||||
<script type="module">
|
||||
import myValidation from "./js/validation";
|
||||
|
||||
const VAL_ATTR = "novalidate";
|
||||
const form = document.querySelector("form");
|
||||
const state = document.getElementById("form-state");
|
||||
|
||||
const setFormState = () => {
|
||||
state.innerText = `novalidate формы ${form.hasAttribute(VAL_ATTR) ? "включен" : "выключен"}`;
|
||||
};
|
||||
|
||||
const toggleNoValidate = () => {
|
||||
form.classList.remove("was-validated");
|
||||
form.toggleAttribute(VAL_ATTR);
|
||||
setFormState();
|
||||
};
|
||||
|
||||
document.addEventListener("DOMContentLoaded", () => {
|
||||
myValidation();
|
||||
setFormState();
|
||||
});
|
||||
|
||||
window.toggleNoValidate = toggleNoValidate;
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
19
readme.md
Normal file
19
readme.md
Normal file
@ -0,0 +1,19 @@
|
||||
0. nvm for windows
|
||||
|
||||
https://github.com/coreybutler/nvm-windows/releases/download/1.1.12/nvm-setup.exe
|
||||
|
||||
nvm install lts
|
||||
|
||||
nvm use lts
|
||||
|
||||
1. Установка библиотек
|
||||
|
||||
npm install
|
||||
|
||||
2.1 Запуск в режиме для разработки
|
||||
|
||||
npm start
|
||||
|
||||
2.2 Запуск в режиме для использования
|
||||
|
||||
npm run prod
|
||||
16
vite.config.js
Normal file
16
vite.config.js
Normal file
@ -0,0 +1,16 @@
|
||||
import { resolve } from "path";
|
||||
// eslint-disable-next-line import/no-extraneous-dependencies
|
||||
import { defineConfig } from "vite";
|
||||
|
||||
export default defineConfig({
|
||||
build: {
|
||||
rollupOptions: {
|
||||
input: {
|
||||
main: resolve(__dirname, "index.html"),
|
||||
page2: resolve(__dirname, "page2.html"),
|
||||
page3: resolve(__dirname, "page3.html"),
|
||||
pagejs: resolve(__dirname, "page-js.html"),
|
||||
},
|
||||
},
|
||||
},
|
||||
});
|
||||
Loading…
Reference in New Issue
Block a user