homework7 done

hw07/index.css

@@ -0,0 +1,406 @@
+html {
+    box-sizing: border-box;
+}
+
+*,
+*:before,
+*:after {
+    box-sizing: inherit;
+}
+
+html {
+    -webkit-text-size-adjust: 100%;
+}
+
+body {
+    -webkit-overflow-scrolling: touch;
+}
+
+html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, menu, nav, output, ruby, section, summary, time, mark, audio, video {
+    margin: 0;
+    padding: 0;
+    border: 0 none;
+}
+
+article, aside, details, figcaption, figure, footer, header, main, menu, nav, section, summary {
+    display: block;
+}
+
+audio,
+canvas,
+progress,
+video {
+    display: inline-block;
+}
+
+audio:not([controls]) {
+    display: none;
+    height: 0;
+}
+
+a {
+    background-color: transparent;
+}
+
+abbr[title] {
+    border-bottom: none;
+    text-decoration: underline;
+    text-decoration: underline dotted;
+}
+
+b,
+strong {
+    font-weight: bolder;
+}
+
+dfn {
+    font-style: italic;
+}
+
+mark {
+    background-color: #ffff00;
+    color: #000000;
+}
+
+svg:not(:root) {
+    overflow: hidden;
+}
+
+code,
+kbd,
+pre,
+samp {
+    font-family: monospace, monospace;
+    font-size: 1em;
+}
+
+hr {
+    box-sizing: content-box;
+    height: 0;
+    overflow: visible;
+}
+
+button,
+input,
+select,
+textarea {
+    font: inherit;
+    margin: 0;
+}
+
+button,
+input {
+    overflow: visible;
+}
+
+button,
+select {
+    text-transform: none;
+}
+
+button,
+[type="button"],
+[type="reset"],
+[type="submit"] {
+    -webkit-appearance: button;
+}
+
+input,
+textarea,
+button,
+select,
+a {
+    -webkit-tap-highlight-color: rgba(0,0,0,0);
+}
+
+address {
+    font-style: normal;
+}
+
+a:focus:not(:focus-visible),
+select:focus:not(:focus-visible),
+input:focus:not(:focus-visible),
+textarea:focus:not(:focus-visible) {
+    outline: 0
+}
+
+button::-moz-focus-inner,
+[type="button"]::-moz-focus-inner,
+[type="reset"]::-moz-focus-inner,
+[type="submit"]::-moz-focus-inner {
+    border-style: none;
+    padding: 0;
+}
+
+button,
+input[type="reset"],
+input[type="button"],
+input[type="submit"] {
+    cursor: pointer;
+}
+
+button[disabled],
+input[disabled] {
+    cursor: default;
+}
+
+button {
+    appearance: none;
+    background: transparent;
+    padding: 0;
+    border: 0;
+    border-radius: 0;
+    line-height: 1;
+}
+
+button:focus:not(:focus-visible) {
+     outline: 0
+}
+
+a,
+a:hover {
+    text-decoration: none;
+}
+
+[href="javascript:void();"],
+[href="javascript:"] {
+    cursor: default;
+}
+
+ul,
+ol {
+    list-style: none;
+}
+
+blockquote,
+q {
+    quotes: none;
+}
+
+blockquote:before,
+blockquote:after,
+q:before,
+q:after {
+    content: none;
+}
+
+table {
+    border-collapse: collapse;
+    border-spacing: 0;
+}
+
+input[type="text"],
+input[type="password"],
+input[type="date"],
+input[type="datetime"],
+input[type="datetime-local"],
+input[type="email"],
+input[type="month"],
+input[type="number"],
+input[type="search"],
+input[type="tel"],
+input[type="time"],
+input[type="url"],
+input[type="week"],
+textarea {
+    box-sizing: border-box;
+}
+
+[type="checkbox"],
+[type="radio"] {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+input[type="search"] {
+    -webkit-appearance: textfield;
+    outline-offset: -2px;
+}
+
+input[type="search"]::-webkit-search-decoration,
+input[type="search"]::-webkit-search-cancel-button {
+    -webkit-appearance: none;
+}
+
+input[type="number"]::-webkit-inner-spin-button,
+input[type="number"]::-webkit-outer-spin-button {
+    height: auto;
+    -webkit-appearance: none;
+}
+
+::-webkit-file-upload-button {
+    -webkit-appearance: button;
+    font: inherit;
+}
+
+input[type="number"] {
+    -moz-appearance: textfield;
+}
+
+select {
+    width: 100%;
+    height: 20px;
+    border: 0 none;
+    background: none;
+}
+
+textarea {
+    resize: none;
+    border: 0 none;
+    overflow: auto;
+}
+
+::placeholder {
+    color: #777777;
+    line-height: normal;
+}
+
+[hidden] {
+    display: none;
+}
+
+body {
+    margin: 50px;
+}
+
+.examoles {
+    display: flex;
+    width: 100%;
+    column-gap: 60px;
+}
+
+.table {
+    width: 400px;
+    height: 400px;
+    text-align: center;
+    table-layout: fixed;
+    border-collapse: separate;
+    border-spacing: 2px;
+}
+
+.table td {
+    border: 1px solid #c0bcbc;
+    transition: background-color .225s ease;
+}
+
+.table tr {
+    transition: background-color .225s ease;
+}
+
+.calc-form,
+.calc-form-live {
+    display: grid;
+    row-gap: 16px;
+    max-width: 400px;
+    width: 100%;
+    align-self: start;
+}
+
+.form__row {
+    display: flex;
+    flex-direction: column;
+}
+
+.form__label {
+    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    font-size: 16px;
+    font-weight: 600;
+    padding-top: 12px;
+    padding-bottom: 12px;
+}
+
+.form__input {
+    display: block;
+    width: 100%;
+    height: 50px;
+    padding: 6px 12px;
+    font-size: 16px;
+    font-weight: 400;
+    line-height: 1.5;
+    color: #212529;
+    background-color: #fff;
+    background-clip: padding-box;
+    border: 1px solid #ced4da;
+    appearance: none;
+    border-radius: 6px;
+    transition: border-color .15s ease-in-out,
+                box-shadow .15s ease-in-out;
+}
+
+.form__input:focus {
+    color: #212529;
+    background-color: #fff;
+    border-color: #86b7fe;
+    outline: 0;
+    box-shadow: 0 0 0 0.25rem rgb(13 110 253 / 25%);
+}
+
+.form__button {
+    justify-self: start;
+    height: 50px;
+    min-width: 200px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 12px;
+    font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
+    font-size: 16px;
+    font-weight: 400;
+    color:  rgb(255, 255, 255);
+    text-align: center;
+    text-decoration: none;
+    vertical-align: middle;
+    cursor: pointer;
+    user-select: none;
+    border: 1px solid #0d6efd;;
+    border-radius: 6px;
+    background-color: #0d6efd;
+    transition: color .15s ease-in-out,
+                background-color .15s ease-in-out,
+                border-color .15s ease-in-out,
+                box-shadow .15s ease-in-out;
+}
+
+.form__button:hover {
+    background-color: #0d53b0;
+}
+
+.form__button:focus {
+    color: #fff;
+    background-color: #0b5ed7;
+    border-color: #0a58ca;
+    outline: 0;
+    box-shadow: 0 0 0 0.25rem rgba(49,132,253,.5);
+}
+
+.alert {
+    display: none;
+    --bs-alert-bg: transparent;
+    --bs-alert-padding-x: 1rem;
+    --bs-alert-padding-y: 1rem;
+    --bs-alert-margin-bottom: 1rem;
+    --bs-alert-color: inherit;
+    --bs-alert-border-color: transparent;
+    --bs-alert-border: 1px solid var(--bs-alert-border-color);
+    --bs-alert-border-radius: 0.375rem;
+    position: relative;
+    padding: var(--bs-alert-padding-y) var(--bs-alert-padding-x);
+    margin-bottom: var(--bs-alert-margin-bottom);
+    color: var(--bs-alert-color);
+    background-color: var(--bs-alert-bg);
+    border: var(--bs-alert-border);
+    border-radius: var(--bs-alert-border-radius);
+}
+
+.alert-danger {
+    --bs-alert-color: #842029;
+    --bs-alert-bg: #f8d7da;
+    --bs-alert-border-color: #f5c2c7;
+}
+
+.alert-success {
+    --bs-alert-color: #0f5132;
+    --bs-alert-bg: #d1e7dd;
+    --bs-alert-border-color: #badbcc;
+}

hw07/index.html

@@ -0,0 +1,97 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+	<meta charset="UTF-8">
+	<title>Title</title>
+	<link rel="stylesheet" href="index.css">
+</head>
+<body>
+
+<section class="examoles">
+
+	<div id="multiplyTable"></div>
+
+	<!-- Calc -->
+	<div class="calc-form">
+		<div class="form__row">
+			<label class="form__label"
+			       for="weight"
+			>Укажите вес</label>
+			<input class="form__input js-form-weight"
+			       type="number"
+			       id="weight"
+			>
+		</div>
+		<div class="form__row">
+			<label class="form__label"
+			       for="height"
+			>Укажите рост</label>
+			<input class="form__input js-form-height"
+			       type="number"
+			       id="height"
+			>
+		</div>
+		<div class="form__row">
+			<label class="form__label"
+			       for="age"
+			>Укажите возраст</label>
+			<input class="form__input js-form-age"
+			       type="number"
+			       id="age"
+			>
+		</div>
+		<button class="form__button js-form-calculate"
+		        type="button"
+		>Рассчитать</button>
+		<div class="alert alert-success js-alert js-alert-success"
+		     role="alert"
+		></div>
+		<div class="alert alert-danger js-alert js-alert-danger"
+		     role="alert"
+		>Укажите данные</div>
+	</div>
+	<!-- Calc -->
+
+	<!-- Calc Live -->
+	<div class="calc-form-live">
+		<div class="form__row">
+			<label class="form__label"
+			       for="weightLive"
+			>Укажите вес</label>
+			<input class="form__input js-form-input js-form-weight"
+			       type="number"
+			       id="weightLive"
+			>
+		</div>
+		<div class="form__row">
+			<label class="form__label"
+			       for="heightLive"
+			>Укажите рост</label>
+			<input class="form__input js-form-input js-form-height"
+			       type="number"
+			       id="heightLive"
+			>
+		</div>
+		<div class="form__row">
+			<label class="form__label"
+			       for="ageLive"
+			>Укажите возраст</label>
+			<input class="form__input js-form-input js-form-age"
+			       type="number"
+			       id="ageLive"
+			>
+		</div>
+		<div class="alert alert-success js-alert js-alert-success"
+		     role="alert"
+		></div>
+		<div class="alert alert-danger js-alert js-alert-danger"
+		     role="alert"
+		>Укажите данные</div>
+	</div>
+	<!-- Calc Live -->
+
+</section>
+
+<script src="index.js"></script>
+</body>
+</html>

hw07/index.js

@@ -0,0 +1,133 @@
+/*---=== Таблица умножения ===---*/
+
+let multiplyTable = [];
+
+for (let i = 1; i <= 9; i++) {
+	multiplyTable[i] = [];
+
+	for (let j = 1; j <= 9; j++) {
+		multiplyTable[i][j] = j * i;
+	}
+}
+
+const htmlTable = (arr) => {
+	const tableElement = document.createElement('table');
+	tableElement.classList.add('table');
+
+	for (const row in arr) {
+		const tableRowElement = document.createElement('tr');
+
+		for (const cell in arr[row]) {
+			const tableCellElement = document.createElement('td');
+			tableCellElement.innerText = arr[row][cell];
+			tableRowElement.appendChild(tableCellElement);
+		}
+		tableElement.appendChild(tableRowElement);
+	}
+
+	return document.querySelector('#multiplyTable').appendChild(tableElement);
+}
+
+htmlTable(multiplyTable);
+
+/*---=== /Таблица умножения ===---*/
+
+
+/*---=== Подсветить ячейку ===---*/
+
+const cell = [...document.querySelectorAll('table tr td')];
+
+cell.forEach(element => {
+	element.addEventListener('mouseover', event => {
+		event.target.style.backgroundColor = 'red';
+	});
+
+	element.addEventListener('mouseout', event => {
+		event.target.style.backgroundColor = '';
+	});
+});
+
+/*---=== /Подсветить ячейку ===---*/
+
+
+/*---=== Подсветить строку и столбец ===---*/
+
+let cellRow = [...document.querySelectorAll('table tr td')];
+
+const updateColor = (target, color) => {
+	target.parentElement.style.backgroundColor = color;
+	[...target.parentElement.parentElement.children].forEach(rows => {
+		[...rows.children][target.cellIndex].style.backgroundColor = color;
+	});
+}
+
+cellRow.forEach(element => {
+	element.addEventListener('mouseover', event => {
+		let {target} = event;
+
+		updateColor(target, 'red');
+	});
+
+	element.addEventListener('mouseout', event => {
+		let {target} = event;
+
+		updateColor(target, '');
+	});
+});
+
+/*---=== /Подсветить строку и столбец ===---*/
+
+
+/*---=== Calc ===---*/
+
+document.addEventListener("DOMContentLoaded", () => {
+
+	const weight = document.querySelector('.calc-form .js-form-weight');
+	const height = document.querySelector('.calc-form .js-form-height');
+	const age = document.querySelector('.calc-form .js-form-age');
+	const button = document.querySelector('.calc-form .js-form-calculate');
+	const formAlertSuccess = document.querySelector('.calc-form .js-alert-success');
+	const formAlertDanger = document.querySelector('.calc-form .js-alert-danger');
+
+	button.addEventListener('click', () => {
+		if (weight.value && height.value && age.value) {
+			formAlertSuccess.innerText = `${Math.ceil((10 * weight.value) + (6.25 * height.value) - (5 * age.value) + 5)} ккал/сутки`;
+			formAlertSuccess.style.setProperty('display', 'block');
+			formAlertDanger.style.setProperty('display', 'none');
+		} else {
+			formAlertSuccess.style.setProperty('display', 'none');
+			formAlertDanger.style.setProperty('display', 'block');
+		}
+	});
+});
+
+/*---=== /Calc ===---*/
+
+/*---=== Calc Live ===---*/
+
+document.addEventListener("DOMContentLoaded", () => {
+
+	const weight = document.querySelector('.calc-form-live .js-form-weight');
+	const height = document.querySelector('.calc-form-live .js-form-height');
+	const age = document.querySelector('.calc-form-live .js-form-age');
+	const fields = document.querySelectorAll('.js-form-input');
+	const formAlertSuccess = document.querySelector('.calc-form-live .js-alert-success');
+	const formAlertDanger = document.querySelector('.calc-form-live .js-alert-danger');
+
+	const calc = () => {
+		if (weight.value && height.value && age.value) {
+			formAlertSuccess.innerText = `${Math.ceil((10 * weight.value) + (6.25 * height.value) - (5 * age.value) + 5)} ккал/сутки`;
+			formAlertSuccess.style.setProperty('display', 'block');
+			formAlertDanger.style.setProperty('display', 'none');
+		} else {
+			formAlertSuccess.style.setProperty('display', 'none');
+			formAlertDanger.style.setProperty('display', 'block');
+		}
+	}
+
+	[...fields].forEach(element => {
+		element.addEventListener('input', calc);
+	});
+});
+
+/*---=== /Calc Live ===---*/

hw07/practice.html

@@ -0,0 +1,32 @@
+<!DOCTYPE HTML>
+<html lang="ru">
+<head>
+  <meta charset="UTF-8">
+  <title>
+    Static File Index.HTML
+  </title>
+  <script src='https://cdnjs.cloudflare.com/ajax/libs/socket.io/2.2.0/socket.io.js'></script>
+</head>
+<body>
+<div id='formContainer'>
+  <input id="nickInput" class="nick" type="text" placeholder="Ник"><br>
+  <input id="messageInput" class="message" type="text" placeholder="Сообщение"><br>
+  <button id="sendButton" type="button">Отправить</button>
+</div>
+<script>
+  const socket = io('http://socketchat.ed.asmer.org.ua/');
+  socket.on('msg', ({nick, message})  => {
+    let divElement = document.createElement('div');
+    divElement.innerText = `nick - ${nick}, message - ${message}`
+    document.querySelector('#formContainer').appendChild(divElement);
+  });
+
+  document.querySelector('#sendButton').addEventListener('click', () => {
+    let nickInput = document.querySelector('#nickInput').value;
+    let messageInput = document.querySelector('#messageInput').value;
+    socket.emit('msg', {nick: nickInput, message: messageInput});
+  });
+
+</script>
+</body>
+</html>