<header></header>
<div></div>body{
height: 1000vh;
display: flex;
flex-direction: column;
justify-content: center;
}
header{
height: 100px;
width: 100%;
background: blue;
position: fixed;
top: 0;
}
div{
height: 400px;
width: 100%;
background: red;
}const callback = ([ entry ], observer) => {
const header = document.querySelector('header');
if(entry.isIntersecting){
header.style.background = 'aqua';
} else {
header.removeAttribute('style');
}
}
const observer = new IntersectionObserver(callback, { threshold: .4 })
observer.observe(document.querySelector('div')).program__link .active ::after
const arr = [
{id: 1, info: 'some'},
{id: 5, info: 'some'},
{id: 3, info: 'some'},
{id: 9, info: 'some'},
{id: 6, info: 'some'},
];
const findId = (_arr, isNeedToSort) => {
const arr = isNeedToSort ? _arr.slice().sort((a ,b )=> a.id - b.id) : _arr;
for(let i = 0; i < arr.length; i++){
if(i + 1 !== arr[i].id) return i + 1;
}
}
console.log(findId(arr, true))import React, { useState } from 'react';
import { Navigate } from "react-router-dom";
import axios from 'axios';
import './login.css';
function Login() {
const [login, setLogin] = useState('');
const [password, setPassword] = useState('');
const [loginClass, setLoginClass] = useState('');
const [passwordClass, setPasswordClass] = useState('');
const [isLoggedIn, setIsLoggedIn] = useState(false);
const submit = async (evt) => {
evt.preventDefault(); // Предотвращаем отправку формы
console.log(login, password);
if (login.length === 0 || password.length === 0) {
console.log('stop')
if (!login) { // Проверяем, не пустое ли поле login
setLoginClass('is-invalid'); // Устанавливаем состояние, что поле заполнено некорректно
}
if (!password) { // Проверяем, не пустое ли поле password
setPasswordClass('is-invalid'); // Устанавливаем состояние, что поле заполнено некорректно
}
} else {
console.log('req')
await axios
.post('http://localhost:5000/test/auth/login', {
login: login,
password: password
})
.then((response) => {
console.log(response);
const { data } = response;
if (data.status == 200) {
console.log('entered successfully');
// Здесь изменяется состояние
setIsLoggedIn(true);
} else {
console.log('could not enter');
}
})
.catch((error) => {
console.log(error);
});
setPassword('');
setLogin('');
setLoginClass('');
setPasswordClass('');
}
};
if (isLoggedIn) {
return <Navigate to="/main" replace={true}/>
}
return (
<div className="container col-xl-10 col-xxl-8 px-4 py-5">
<div className="row align-items-center g-lg-5 py-5">
<div className="col-lg-7 text-center text-lg-start ">
<h1 className="display-4 fw-bold lh-1 text-body-emphasis mb-3">Library21</h1>
<p className="col-lg-10 fs-4">
Библиотека21 - Lorem ipsum dolor sit, amet consectetur adipisicing elit. Ex dolorem iusto animi vitae suscipit deleniti!
</p>
</div>
<div className="col-md-10 mx-auto col-lg-5">
<form className="p-4 p-md-5 border rounded-3 bg-body-tertiary">
<h2 className="mb-4">Вход</h2>
<div className="form-floating mb-3">
<input
type="text"
className={`form-control ${loginClass}`}
id="login"
placeholder="Введите логин"
value={login}
onChange={(evt) => { setLogin(evt.target.value) }}
/>
<label htmlFor="login">Логин</label>
</div>
<div className="form-floating mb-3">
<input
type="password"
className={`form-control ${passwordClass}`}
id="password"
placeholder="Введите пароль"
value={password}
onChange={(evt) => { setPassword(evt.target.value) }}
/>
<label htmlFor="password">Пароль</label>
</div>
<button className="w-100 btn btn-lg btn-primary" onClick={submit}>Войти</button>
</form>
</div>
</div>
</div>
);
}
export default Login;const recursy = (item) => {
if(item.children){
return <Route path={item.path} element={item.element}>{item.children.map(recursy)}</Route>;
}
return <Route path={item.path} element={item.element} />;
};
array.map(recursy)operatorRandomoperatorRandom вернет минус, а во втором плюс, тогда выходит что не одно из условий не отрабатывает, и в operation остаётся пустая строка, и дальнейшая ошибка из-за неё
const sidebarScroller = document.querySelector(".sidebar__scroller");
const state = {
pageYOffset: 0
}
window.addEventListener("scroll", function (e) {
const scrollMaxSideBar = sidebarScroller.scrollHeight - sidebarScroller.clientHeight;
const procent = 3;
const procentScrollSideBar = Math.round(procent * scrollMaxSideBar / 100);
const scrollTopSideBar = Math.round(sidebarScroller.scrollTop);
if(state.pageYOffset > window.pageYOffset){
sidebarScroller.scrollTop = scrollTopSideBar - procentScrollSideBar;
} else if(state.pageYOffset < window.pageYOffset){
sidebarScroller.scrollTop = scrollTopSideBar + procentScrollSideBar;
}
state.pageYOffset = window.pageYOffset;
});const sleep = ms => new Promise(resolve => setTimeout(resolve, ms));
const connect_and_query = () => {
const db = new sqlite3.Database('./db.db');
return new Promise((resolve, reject) => {
db.serialize(() => {
db.all("SELECT * FROM table ORDER BY id;", (err, rows) => {
if(err){
reject(err)
} else {
resolve(rows)
}
});
})
}).finally(() => {
db.close();
});
}
const f = () => Promise.all([sleep(1000),connect_and_query()]);
export default f;f().then(res => console.log(res));