window.addEventListener('load', () => {
const toggle = document.querySelector('#js-toggle')
const body = document.querySelector('#js-body')
const nav = document.querySelector('#js-nav')
const menuBg = document.querySelector('#js-menu-bg')
const toggleNav = document.querySelector('#js-toggle-nav')
const openCloseMenu = () => {
toggle.classList.toggle('toggle--active')
body.classList.toggle('body--overflow')
nav.classList.toggle('header__nav--active')
menuBg.classList.toggle('menu-bg--active')
}
for (const clickEl of [toggle, toggleNav, menuBg]) {
clickEl.addEventListener('click', openCloseMenu)
}
})
Нормальный ли прием с arrayElemOnClick ?
<link rel="stylesheet" href="css/main.css" id="theme1">const switchMode = document.querySelector("#theme");
const theme = document.querySelector("#theme1")
switchMode.addEventListener('click', () => {
theme.href === 'css/main.css'
? theme.href = 'css/main_dark.css'
: theme.href = 'css/main.css'
})const url = location.pathname.replace('/catalog/catalog', '/catalog')"type": "module" в package.jsonexport const options = {
foo: 'bar'
}import("./config.js").then((res) => {
const { options } = res;
console.log(options.foo);
});const initApp = async () => {
const { options } = await import('./options')
console.log(options)
}
initApp()$(document).ready(function() {
const url = document.location.href;
var link = $('.tg-button > a');
var href = 'https://ya.ru?';
if(url.match(/utm_source=/)){
href += '&utm_source=' + window.location.search.split('utm_source=')[1].split('&')[0];
}
if(url.match(/utm_medium=/)){
href += '&utm_medium=' + window.location.search.split('utm_medium=')[1].split('&')[0];
}
if(url.match(/utm_campaign=/)){
href += '&utm_campaign=' + window.location.search.split('utm_campaign=')[1].split('&')[0];
}
link.attr('href', href);
});.phone {
$self: &;
display: flex;
gap: 10px;
&--test {
#{$self}__link {
color: red !important;
}
}
}import styles from './Phone.module.scss'
import classNames from 'classnames'
const Phone = () => {
const mode = 'test'
const clazz = classNames({
[styles['phone']]: true,
[styles['phone--test']]: mode === 'test'
})
return (
<div className={clazz}>
<Link to={'tel:88005553555'} className={styles.phone__icon}>
<img src={'/images/svg/phone.svg'} alt="Иконка телефона" />
</Link>
<Link to={'tel:88005553555'} className={styles.phone__link}>+7 (495) 648 90 55</Link>
</div>
)
}
export default Phoneconst Phone = () => {
const mode = 'test'
const clazz = classNames({
[styles['phone']]: true,
[styles['phone--test']]: mode === 'test'
})
return (
<Link to={'tel:88005553555'} className={clazz}>
<img className={styles.phone__icon} src={'/images/svg/phone.svg'} alt="Иконка телефона" />
<div className={styles.phone__link}>+7 (495) 648 90 55</div>
</Link>
)
}$('.reload-img img').each(function () {
const src = $(this).attr('src')
$(this).attr('src', `${src}?${Math.random()}`)
})const target = document.querySelector('.applications__grid')
const intersectionObserverOptions = {
root: null,
threshold: 0.8
}
const observer = new IntersectionObserver(onIntersection, intersectionObserverOptions)
function onIntersection (entries, opts) {
for (const entry of entries) {
if (entry.intersectionRatio > 0) {
alert('Появился')
observer.unobserve(entry.target)
}
}
}
observer.observe(target)