jQuery addClass example

Change class name on click in jQuery

by NeowarPlay

HTML

<div class="am-gift-block">
	<div class="am-gift-block__title">
		<div id="pervii16" hidden>Дарим пластик
		<span class="am-gift-block__healp">?<span class="am-gift-block__healp-popup">Пока крутится счетчик вы копите бесплатные метры пластика. Чтобы получить накопленный пластик - дождитесь максимального значения (20 метров), и следуйте инструкциям.</span></span>
		</div>
		<div id="info" hidden>Как получить ? 
			<a type="button" class="am-gift-block__healp" data-toggle="modal" data-target=".bs-example-modal-sm">
				<i class="fa fa-arrow-right" aria-hidden="true"></i>
			</a>
		</div>
	</div>
	<div class="am-timer">
		<div class="am-timer__block">
			<div id="minutes" class="am-timer__quantity am-timer__quantity_unit_m">
				20
			</div>
			<div class="am-timer__unit">
				метров
			</div>
		</div>
		<div class="am-timer__block">
			<div id="seconds" class="am-timer__quantity am-timer__quantity_unit_sm">
				0
			</div>
			<div class="am-timer__unit">
				см
			</div>
		</div>
	</div>
</div>

CSS

.am-gift-block{}
.am-gift-block__title{font-family:'Open Sans', sans-serif;font-weight:700;color: #000000;font-size: 13px;line-height:14px;text-align:center;}
.am-gift-block__healp{background-color: #fde344;border-radius:25px;width: 20px;color: #000;height: 20px;display:inline-block;line-height: 20px;cursor:pointer;position:relative;}
.am-gift-block__healp-popup{width:256px;position:absolute;left:-9999px;top:32px;margin:0px;padding:10px 15px;opacity:0;z-index:200;font-size: 11px;line-height: 1.3;color: #fff;text-align:left;-moz-border-radius:4px;-webkit-border-radius:4px;-khtml-border-radius:4px;border-radius:4px;background: rgba(0, 0, 0, 0.8);-webkit-transition:opacity 0.15s ease 0s;-moz-transition:opacity 0.15s ease 0s;-o-transition:opacity 0.15s ease 0s;transition:opacity 0.15s ease 0s;}
@media (min-width:1014px) and (max-width:1253px){
	.am-gift-block__healp-popup{width:182px;}
}
@media (min-width:788px) and (max-width:1013px){
	.am-gift-block__healp-popup{width:190px;}
}
@media screen and (max-width:787px){
	.am-gift-block__healp-popup{width:182px;}
	.am-gift-block__healp:hover .am-gift-block__healp-popup{left:-172px!important;}
	.am-gift-block__healp-popup::after{left:198px!important;}
}
.am-gift-block__healp:hover .am-gift-block__healp-popup{left:18px;opacity:1;}
.am-gift-block__healp-popup::after{width:0px;height:0px;position:absolute;top:-11px;left:4px;margin:0px;padding:0px;content:"";border-bottom: 11px solid rgba(0, 0, 0, 0.8);border-right:11px solid transparent;-webkit-transition:all 0.15s ease 0s;-moz-transition:all 0.15s ease 0s;-o-transition:all 0.15s ease 0s;transition:all 0.15s ease 0s;}
.am-gift{width:396px;margin:0px 0px 0px -198px;padding:0px;}
@media screen and (max-width:787px){.am-gift{width:auto;margin:0px;}
}
.am-timer { background-color: #2FB519; background-image: url(https://3dpens.com.ua/test/am-gift__icon.png); background-repeat: no-repeat; background-position: 10px 50%; border-radius: 5px; margin: 0 auto;margin-top: 5px; padding:...

JavaScript

const isLapsed1 = "isLapsed1" in localStorage;
const minutesLabel = document.getElementById("minutes");
const secondsLabel = document.getElementById("seconds");
const infoElement  = document.getElementById("info");
const info1Element  = document.getElementById("pervii16");

if(isLapsed1) {
	infoElement.hidden = false;
} else {
	const startTime = Date.now();
	
	(function loop() {

		const passedSeconds = 0.001 * (Date.now() - startTime);
		secondsLabel.innerHTML = parseInt(passedSeconds % 100).toString().padStart(1, "0");
		minutesLabel.innerHTML = parseInt(passedSeconds / 100).toString().padStart(1, "0");
		
		if(passedSeconds >= 2000) {
			infoElement.hidden = false;
			info1Element.hidden = true;
			localStorage.isLapsed1 = true;
		} else {
			infoElement.hidden = true;
			info1Element.hidden = false;
			setTimeout(loop, 500);
		}
	})();
}