function createWebSocket() {
const ws = new WebSocket('wss://...');
ws.onopen = function () {
console.log('WebSocket connection opened');
};
ws.onmessage = function (message) {
console.log('Received message:', message.data);
};
ws.onclose = function (event) {
console.log('WebSocket connection closed. Reconnecting...');
// Автоматическое переподключение через 1 секунду
setTimeout(createWebSocket, 1000);
};
ws.onerror = function (error) {
console.log('WebSocket error:', error);
ws.close();
};
}
createWebSocket();
window.addEventListener('click', function(event) {
if (event.target.classList.contains('card-btn') || event.target.classList.contains('adaptive-price')) {
const cardHTML = event.target.closest('.card');
const productInfo = {
img: cardHTML.querySelector('.card-img').className, // Используйте className
name: cardHTML.querySelector('.card-title').innerText,
desc: cardHTML.querySelector('.card-desc').innerText,
price: cardHTML.querySelector('.card-price').innerText,
};
const alreadyInStorageCart = JSON.parse(localStorage.getItem('productInfo')) || [];
localStorage.setItem('productInfo', JSON.stringify([...alreadyInStorageCart, productInfo]));
}
});
const cartCardBox = document.querySelector('.cart-card-box');
if (localStorage.length > 0) {
const products = JSON.parse(localStorage.getItem('productInfo'));
products.forEach((product, index) => {
const cartCardHTML = `
<li class="card" data-index="${index}">
<ul class="card-box">
<li class="${product.img}"></li>
<li class="card-content-box">
<ul>
<li class="delete-card-btn-box"><button class="delete-card-btn">Delete</button></li>
<li class="card-title">${product.name}</li>
<li class="card-desc">${product.desc}</li>
<li class="price">${product.price}</li>
</ul>
</li>
</ul>
</li>
`;
cartCardBox.insertAdjacentHTML('beforeend', cartCardHTML);
});
}
window.addEventListener('click', function(event) {
if (event.target.classList.contains('delete-card-btn')) {
const card = event.target.closest('.card');
const index = parseInt(card.dataset.index, 10); // Получите индекс из атрибута data-index
const products = JSON.parse(localStorage.getItem('productInfo'));
products.splice(index, 1); // Удаляет элемент по индексу
localStorage.setItem('productInfo', JSON.stringify(products)); // Сохраняем измененный массив обратно в localStorage
card.remove(); // Удаление HTML карточки
}
});
// vanilla js
document.querySelector('.elem-to-click').addEventListener('click', function() {
var link = document.createElement( "link" );
link.href = "style.css";
link.type = "text/css";
link.rel = "stylesheet";
document.getElementsByTagName( "head" )[0].appendChild( link );
});
// jQuery
$('.elem-to-click').on('click', function() {
$('head').append('<link rel="stylesheet" type="text/css" href="style.css">');
});
<input id="function-data" />
<input id="data-holder" />
var options = {
data: [
{"character": "Cyclops", "realName": "Scott Summers"},
{"character": "Professor X", "realName": "Charles Francis Xavier"},
{"character": "Mystique", "realName": "Raven Darkholme"},
{"character": "Magneto", "realName": "Max Eisenhardt"}
],
getValue: "character",
list: {
onSelectItemEvent: function() {
var value = $("#function-data").getSelectedItemData().realName;
$("#data-holder").val(value).trigger("change");
// Тут вы можете делать манипуляции с вашим вторым скриптом
}
}
};
$("#function-data").easyAutocomplete(options);
let searchValid = false;
$('.search__icons').click(function() {
if(searchValid == false){
$('.search__icons').css('background', '#F8F8F8');
$('.search__input').css('display', 'block');
$('.search__input').css('width', '515px');
$('.search__icons').css('border-radius', '3px 0 0 3px');
$('.search__input').addClass('search__input--anim');
$('.contact__number').css('display', 'none');
searchValid = true;
} else {
$('.search__icons').css('background', '#F9E8FA');
//$('.search__input').css('display', 'none'); - из-за этого не срабатывает анимация
$('.search__input').css('width', '0');
$('.search__input').css('padding', '0');
$('.search__icons').css('border-radius', '3px');
$('.search__input').addClass('search__input--anim');
$('.contact__number').css('display', 'block');
searchValid = false;
}
});
window.addEventListener("beforeunload", function(event) {
// страница браузера закрывается
});
let wasHidden = false;
const onVisibilityChange = () => {
if (wasHidden && document.visibilityState === 'visible') {
// Тут убираем гифку
}
if ( document.visibilityState === 'hidden' ) {
wasHidden = true;
}
};
document.addEventListener('visibilitychange', onVisibilityChange);
const timeout = 1000;
let idTimeout;
window.addEventListener('mousedown', function() {
idTimeout = setTimeout(function() {
// Кнопка нажата более 1 секунды
}, timeout);
});
window.addEventListener('mouseup', function() {
clearTimeout(idTimeout);
});
const panels = document.getElementsByClassName("panel");
const i;
for (i = 0; i < panels.length; i++) {
panels[i].addEventListener("click", function() {
// тут ещё можно поставить удаление у всех акордионов класса 'active', если необходимо
this.classList.toggle("active");
const panel = this.nextElementSibling;
if(this.classList.contains('active')){
this.classList.add('changing-icon');
} else {
this.classList.remove('changing-icon');
}
if (panel.style.maxHeight) {
panel.style.maxHeight = null;
} else {
panel.style.maxHeight = panel.scrollHeight + "px";
}
});
}
<button class="panel">Аккордеон 1</button>
<div class="panel-body">
<p>текст аккордеона</p>
</div>
const forms = document.querySelectorAll('form');
forms.forEach(form => {
form.addEventListener('submit', function (e) {
e.preventDefault();
const formData = new FormData(this);
ajaxSend(formData)
.then((response) => {
form.reset();
})
.catch((err) => console.error(err))
});
});