Skip to content

Instantly share code, notes, and snippets.

View b-aleksei's full-sized avatar

Алексей b-aleksei

View GitHub Profile
@b-aleksei
b-aleksei / slider-range_index.html
Last active January 10, 2021 18:30
wc-slider
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Slider Demo</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<wc-slider min="50" max="200" step="0" value="100"></wc-slider>
@b-aleksei
b-aleksei / input-password.js
Created February 18, 2021 08:40
input-password
export const showPassword = (btn) => {
const input = btn.parentElement.querySelector('input');
if (btn.classList.contains('show')) {
btn.classList.remove('show');
input.type = 'password';
} else {
btn.classList.add('show');
input.type = 'text';
@b-aleksei
b-aleksei / rating.html
Last active February 18, 2021 18:27
star-rating
<fieldset class="rating">
<legend class="visually-hidden">Звездный рейтинг</legend>
<input id="film-1" type="radio" name="film" value="1">
<input id="film-2" type="radio" name="film" value="2">
<input id="film-3" type="radio" name="film" value="3">
<input id="film-4" type="radio" name="film" value="4" checked>
<input id="film-5" type="radio" name="film" value="5">
<label for="film-5" aria-label="5 звезд">
<svg width="44" height="43">
@b-aleksei
b-aleksei / ValidForm.js
Last active August 22, 2021 09:19
ValidForm
import {onFocusPhoneInput} from './onFocusPhoneInput';
const validationData = {};
const urlData = 'data/sendForm.json';
fetch(urlData).then((res) => res.json()).then((res) => {
Object.assign(validationData, res);
}).catch(() => {});
/*const getDataFromJson = function(url) {
const xhr = new XMLHttpRequest();
@b-aleksei
b-aleksei / custom-select.njk
Last active April 1, 2021 07:53
custom-select
<div class="custom-select active">
<div class="custom-select__title">Санкт-Петербург</div>
<div class="custom-select__content">
<input id="singleSelect0" type="radio" name="city" value="spb" checked />
<label for="singleSelect0" class="custom-select__label">Санкт-Петербург</label>
<input id="singleSelect1" type="radio" name="city" value="moscow" />
<label for="singleSelect1" class="custom-select__label">Москва</label>
<input id="singleSelect2" type="radio" name="city" value="vasuki" />
<label for="singleSelect2" class="custom-select__label">Новые Васюки</label>
<input id="singleSelect3" type="radio" name="city" value="samara" />
@b-aleksei
b-aleksei / timer.js
Created May 14, 2021 08:31
timer
// const targetDate = new Date(Date.parse('2021-05-17T00:00:00')); // установить дату обратного отсчета
const targetDate = new Date(2021, 4, 16); // установить дату обратного отсчета
let days; let hours; let minutes; let seconds; // переменные для единиц времени
let interval = null;
const countdown = document.querySelector('.stock-timer-js'); // получить элемент тега
const addZero = (n) => {
return (n < 10 ? '0' : '') + n;
};
@b-aleksei
b-aleksei / dbrange-native.js
Created May 17, 2021 12:41
double-range
export default class Dbrange {
constructor(selector) {
this.$el = this.getHtmlElement(selector);
if (!this.$el) return;
this.dom = this.mapDOM(this.$el);
this.eventNames = {
pointerdown: 'pointerdown',
pointermove: 'pointermove',
pointerup: 'pointerup',
};
@b-aleksei
b-aleksei / checkFormatImg.js
Created June 18, 2021 09:41
check-Format-Img
async function supportsImgType(type) {
const img = document.createElement('img');
await document.createElement('picture').append(
Object.assign(document.createElement('source'), {
srcset: 'data:,x', // валидный урл не дергающий сеть
type,
}),
img
);
return !!img.currentSrc; // если браузер умеет, заполнит значение currentSrc
@b-aleksei
b-aleksei / accordion.js
Created July 5, 2021 12:28
accordion-flip
const container = document.querySelector('.accordion-container');
const titles = document.querySelectorAll('.accordion-title');
titles.forEach(t => {
t.addEventListener('click', ({currentTarget}) => {
const contentHeight = currentTarget.nextElementSibling.offsetHeight;
container.style.setProperty('--content-height', `${-contentHeight}px`);
const accordion = currentTarget.parentElement;
if (accordion.classList.contains('accordion-active')) {
accordion.classList.remove('accordion-active', 'move-sibling-accordion');
return
@b-aleksei
b-aleksei / range-native.js
Last active August 7, 2021 18:36
range-native
export default class Range {
constructor(selector) {
this.$el = this.getHtmlElement(selector);
if (!this.$el) return;
this.min = +this.$el.dataset.min ?? 0;
this.max = +this.$el.dataset.max ?? 100;
this.dom = this.mapDOM(this.$el);
this.eventNames = {
pointerdown: 'pointerdown',
pointermove: 'pointermove',