count down timer

<div class="cc-intro-counter" id="cc-intro-counter">
		<ul class="cc-intro-counter__list">
			<li class="cc-intro-counter__item">
				<p class="cc-intro-counter__data days">00</p>
				<p class="cc-intro-counter__text">ימים</p>
			</li>
			<li class="cc-intro-counter__item">
				<p class="cc-intro-counter__data hours">00</p>
				<p class="cc-intro-counter__text">שעות</p>
			</li>
			<li class="cc-intro-counter__item">
				<p class="cc-intro-counter__data minutes">00</p>
				<p class="cc-intro-counter__text">דקות</p>
			</li>
			<li class="cc-intro-counter__item">
				<p class="cc-intro-counter__data seconds">00</p>
				<p class="cc-intro-counter__text">שניות</p>
			</li>
		</ul>
		<p class="cc-intro-counter__label">{{ lp.introTimer_label_M }}</p>
	</div>
  
  
  
  ------CSS---------------
  .cc-intro-counter {
  display: flex;
  justify-content: center;
  align-items: center;

  max-width: 40em;
  width: 100%;
  margin: 0 auto;
  height: 6.5em;
  box-shadow: 4px 1px 18px rgba(0, 0, 0, 0.27);
  border-radius: 0 0 10px 10px;
  background: #0081c9 linear-gradient(-196deg, rgba(3, 30, 147, 0.49) 0%, rgba(11, 153, 22, 0) 100%);
  color: #ffffff;

  font-size: 1rem;
  position: fixed;

  left: 5.45%;
  z-index: 160;
  
  @media (min-width: 1000px) {
    padding: 0.5em 0;
    border-radius: 0 0 43px 43px;

	left: 32.4%;
  }
  
  &--wide {
	max-width: 100%;
	border-radius: 0;
	left: 0;
  }

  &__list {
    margin: 0 0.286em;
  }

  &__item {
    display: inline-block;
    margin: 0 0.3em;
    font-weight: 700;
    text-transform: uppercase;
  }
  &__data {
    font-size: 3em;
  }
  &__text {
    display: block;
    font-size: 2em;
    font-weight: 300;
	direction: rtl;
  }

  &__label {
    margin: 0 0.286em;
    font-size: 3.5em;
    line-height: 4.3rem;
	direction: rtl;
  }
}
------SCRIPT-------

(function ($, window) {
	$(document).ready(function () {

		function init() {
			console.log('==> Init countdown timer');
			window.onscroll = function () {
				makeCountdownSticky();
			};

			let header = document.getElementById("cc-intro-counter");
			let $firstSection = $('.cc-intro-container');
			if (!$firstSection.length) {
				$firstSection = $('.cc-project-intro__preview');
			}
			let sticky = $firstSection.height() - 50;

			function makeCountdownSticky() {
				if (window.pageYOffset > sticky) {
					header.classList.add("cc-intro-counter--wide");
				} else {
					header.classList.remove("cc-intro-counter--wide");
				}
			}
		}

		init();

		$(document).on("viewUpdateEvent", {}, function () {
			init();
		});

	});
})(window.jQuery, window);



----SCRIPT FOR CLOCK-----

function getTimeRemaining(endtime) {
	var t = endtime - moment.utc().valueOf(),
		seconds = Math.floor((t / 1000) % 60),
		minutes = Math.floor((t / 1000 / 60) % 60),
		hours = Math.floor((t / (1000 * 60 * 60)) % 24),
		days = Math.floor(t / (1000 * 60 * 60 * 24));

	return {
		'total': t,
		'days': days,
		'hours': hours,
		'minutes': minutes,
		'seconds': seconds
	};
}

function initializeClock(id, endtime) {
	var clock = document.getElementById(id);
	if (!clock) {
		return console.error('==> [Clock] Clock id not found!')
	}
	
	var daysSpan = clock.querySelector('.days');
	var hoursSpan = clock.querySelector('.hours');
	var minutesSpan = clock.querySelector('.minutes');
	var secondsSpan = clock.querySelector('.seconds');

	function updateClock() {
		var t = getTimeRemaining(endtime);

		daysSpan.innerHTML = t.days;
		hoursSpan.innerHTML = ('0' + t.hours).slice(-2);
		minutesSpan.innerHTML = ('0' + t.minutes).slice(-2);
		secondsSpan.innerHTML = ('0' + t.seconds).slice(-2);

		if (t.total <= 0) {
			clearInterval(timeinterval);
		}
	}

	updateClock();
	var timeinterval = setInterval(updateClock, 1000);
}