homework2 task2 done

hw02/task2/index.css

@@ -0,0 +1,372 @@
+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;
+}
+
+.form {
+    display: grid;
+    row-gap: 16px;
+    margin: 60px;
+    max-width: 400px;
+}
+
+.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: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;
+}

hw02/task2/index.html

@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="UTF-8">
+		<title>Форма авторизации</title>
+		<link rel="stylesheet" href="index.css">
+	</head>
+	<body>
+		<form class="form js-form"
+		      method="post"
+		      action=""
+		>
+			<div class="form__row">
+				<label class="form__label"
+				       for="login"
+				>Login</label>
+				<input class="form__input js-form-login"
+				       type="text"
+				       id="login"
+				>
+			</div>
+			<div class="form__row">
+				<label class="form__label"
+				       for="password"
+				>Password</label>
+				<input class="form__input js-form-password"
+				       type="password"
+				       id="password"
+				>
+			</div>
+			<button class="form__button"
+			        type="submit"
+			>Login</button>
+			<div class="alert alert-success js-alert js-alert-success"
+			     role="alert"
+			>Authorization success</div>
+			<div class="alert alert-danger js-alert js-alert-danger"
+			     role="alert"
+			>Authorization error</div>
+		</form>
+		<script src="./index.js"></script>
+	</body>
+</html>

hw02/task2/index.js

@@ -0,0 +1,34 @@
+'use strict';
+
+document.addEventListener("DOMContentLoaded", () => {
+
+	const form = document.querySelector('.js-form');
+	const formLogin = document.querySelector('.js-form-login');
+	const formPassword = document.querySelector('.js-form-password');
+	const formAlerts = document.querySelectorAll('.js-alert');
+	const formAlertSuccess = document.querySelector('.js-alert-success');
+	const formAlertDanger = document.querySelector('.js-alert-danger');
+
+	// authorization credentials
+	const credentials = {
+		login: 'admin',
+		password: 'qwerty',
+	};
+
+	const alertsVisibility = formType => {
+		Array.from(formAlerts).forEach(element => {
+			element.style.setProperty('display', 'none');
+		});
+		formType.style.setProperty('display', 'block');
+	}
+
+	form.addEventListener('submit', (event) => {
+		event.preventDefault();
+
+		if(formLogin.value === credentials.login && formPassword.value === credentials.password) {
+			alertsVisibility(formAlertSuccess);
+		} else {
+			alertsVisibility(formAlertDanger);
+		}
+	})
+});