const sum = array => array.reduce((accumulator, value) => (accumulator += value), 0);
const breakUp = (number, count) => {
const minimal = (count * (count + 1)) / 2;
if (minimal > number) {
throw new Error(`Число ${number} слишком маленькое. Минимальное допустимое число ${minimal}.`);
}
const numbers = Array.from({ length: count }, (_, index) => (count - index));
numbers.forEach((value, index, array) => {
const total = sum(array);
const remainder = number - total;
if (total < number) {
const random = (index === count - 1)
? remainder + value
: Math.floor(Math.random() * remainder);
array[index] = random;
}
});
const isUnique = new Set(numbers).size === numbers.length;
if (!isUnique) {
return breakUp(number, count);
} else {
return numbers.sort((a, b) => (b - a));
}
};const breakUp = (number, count) => {
const numbers = [];
for (let index = 0; index < count; index++) {
const random = index === count - 1
? number
: Math.round(Math.random() * number);
numbers.push(random);
number -= random;
}
numbers.sort((a, b) => b - a);
return numbers;
};
const numbers = breakUp(100, 4);
console.log(numbers); // [76, 15, 6, 3]const breakUp = (number, count) => Array.from({ length: count }, (_, index) => {
const random = index === count - 1
? number
: Math.round(Math.random() * number);
number -= random;
return random;
}).sort((a, b) => b - a);const breakUp = (number, count) => {
const numbers = new Set();
while (numbers.size < count) {
const previousSize = numbers.size;
const random = numbers.size === count - 1
? number
: Math.floor(Math.random() * number);
numbers.add(random);
if (previousSize < numbers.size) {
number -= random;
}
}
return [...numbers.values()].sort((a, b) => b - a);
};const fetchData = () => {
fetch('...')
.then(response => response.json())
.then(({ group }) => {
this.setState({
data: group,
car: Object.keys(group)[0]
}, this.filter);
})
.catch(error => {
console.log('404 Not Found');
});
};return false;const images = [
{
selector: '#img',
dark: 'https://dummyimage.com/600x400/fc0/fff',
light: 'https://dummyimage.com/600x400/0f3/fff'
},
...
];function swapImages() {
const isDark = $('.light').hasClass('dark');
for (let image of images) {
$(image.selector).attr('src', isDark ? image.dark : image.light);
}
}$('.checkbox').click(function () {
$('.light').toggleClass('dark');
swapImages();
});$(document).ready дописываем swapImages();
const data = {
name: 'John',
gender: 'male'
};
const searchParams = new URLSearchParams();
for (let key in data) {
searchParams.append(key, data[key]);
}
location.search = searchParams;location.search, можно модифицировать параметры и в конце уже присвоить их заново.
if (innerWidth >= 1280) {
if ($(window).scrollTop() > 150) {
$('.hide').fadeIn(900);
} else {
$('.hide').fadeOut(700);
}
}if ($(window).scrollTop() > 150 && innerWidth > 1024) {
$('.hide').fadeIn(900);
} else {
$('.hide').fadeOut(700);
}Project
├ Sources
│ ├ Styles
│ ├ Scripts
│ ├ Images
│ └ index.html
├ package.json
└ gulpfile.jsnpm i gulp gulp-if gulp-pug gulp-htmlmin gulp-sass gulp-sourcemaps gulp-autoprefixer gulp-clean-css gulp-babel gulp-concat gulp-uglify gulp-image gulp-clean browser-sync yargs node-sass @babel/core @babel/preset-env -Dgulp --development - сборка проекта, старт сервера, live reload.gulp --series clear build --production - сборка проекта, сжатие, оптимизация изображений.const gulp = require('gulp');
const pipeIf = require('gulp-if');
const pug = require('gulp-pug');
const minify = require('gulp-htmlmin');
const sass = require('gulp-sass');
const sourcemaps = require('gulp-sourcemaps');
const autoprefixer = require('gulp-autoprefixer');
const clean = require('gulp-clean-css');
const babel = require('gulp-babel');
const concat = require('gulp-concat');
const uglify = require('gulp-uglify');
const image = require('gulp-image');
const clear = require('gulp-clean');
const browser = require('browser-sync').create();
const { argv } = require('yargs');
sass.compiler = require('node-sass');
gulp.task('server', (callback) => {
browser.init({
server: {
baseDir: 'Build/'
},
notify: false
});
callback();
});
gulp.task('reload', (callback) => {
browser.reload();
callback();
});
gulp.task('clear', () => {
return gulp.src('Build', { allowEmpty: true })
.pipe(clear({
force: true
}));
});
gulp.task('build:html', () => {
return gulp.src(['Sources/*.html', 'Sources/*.pug'])
.pipe(pug())
.pipe(pipeIf(argv.production, minify({ collapseWhitespace: true })))
.pipe(gulp.dest('Build/'));
});
gulp.task('build:sass', () => {
return gulp.src(['Sources/Styles/*.sass', 'Sources/Styles/*.scss'])
.pipe(pipeIf(argv.development, sourcemaps.init()))
.pipe(sass())
.pipe(autoprefixer({
cascade: false
}))
.pipe(pipeIf(argv.production, clean()))
.pipe(pipeIf(argv.development, sourcemaps.write('.')))
.pipe(gulp.dest('Build/Styles/'));
});
gulp.task('build:js', () => {
return gulp.src('Sources/Scripts/**/*.js')
.pipe(pipeIf(argv.development, sourcemaps.init()))
.pipe(concat('main.js'))
.pipe(babel({
presets: ['@babel/env']
}))
.pipe(pipeIf(argv.production, uglify()))
.pipe(pipeIf(argv.development, sourcemaps.write('.')))
.pipe(gulp.dest('Build/Scripts/'));
});
gulp.task('build:images', () => {
return gulp.src(['Sources/Images/**/*.png', 'Sources/Images/**/*.jpg', 'Sources/Images/**/*.svg'])
.pipe(pipeIf(argv.production, image()))
.pipe(gulp.dest('Build/Images/'));
});
gulp.task('watch:html', () => {
gulp.watch(['Sources/**/*.html', 'Sources/**/*.pug'], gulp.series('build:html', 'reload'));
});
gulp.task('watch:sass', () => {
gulp.watch(['Sources/Styles/**/*.sass', 'Sources/Styles/**/*.scss'], gulp.series('build:sass', 'reload'));
});
gulp.task('watch:js', () => {
gulp.watch('Sources/Scripts/**/*.js', gulp.series('build:js', 'reload'));
});
gulp.task('watch:images', () => {
gulp.watch(['Sources/Images/**/*.png', 'Sources/Images/**/*.jpg', 'Sources/Images/**/*.svg'], gulp.series('build:images'));
});
gulp.task('build', gulp.parallel('build:html', 'build:sass', 'build:js', 'build:images'));
gulp.task('watch', gulp.parallel('watch:html', 'watch:sass', 'watch:js', 'watch:images'));
gulp.task('default', gulp.series('clear', 'build', 'server', 'watch'));const uls = document.querySelectorAll('.third-block-flex__item__body ul');
for (let ul of uls) {
const button = Object.assign(document.createElement('button'), {
className: 'button open-modal',
textContent: 'Хочу этот пакет'
});
button.addEventListener('click', ВАШ_ОБРАБОТЧИК);
ul.after(button);
}const box = document.querySelector('.box');
const debounce = (callback, delay) => {
let timeout = null;
return (...args) => {
clearTimeout(timeout);
timeout = setTimeout(callback, delay, ...args);
};
};
const update = () => {
const balloon = document.querySelector('[class$="balloon__content"]');
if (balloon !== null) {
box.textContent = balloon.textContent;
}
};
const debouncedUpdate = debounce(update, 300);
window.addEventListener('click', () => {
debouncedUpdate();
});const box = document.querySelector('.box');
const observer = new MutationObserver(mutations => {
for (let mutation of mutations) {
if (mutation.target.className.includes('balloon__content')) {
box.textContent = mutation.target.textContent;
}
}
});
observer.observe(document.querySelector('ymaps'), {
childList: true,
attributes: false,
subtree: true
});$('.scroll').click(function () {
$("nav ul").removeClass("showing");
});