Технологии рекламы и сетевая культура. Практическое задание №2. Блок акции в текстовом лендинге

 Внедрите в ваш лендинг блок акции с обратным счетчиком. Для этого:

1. Перед закрывающим тегом </style> добавьте параметры стилей:

 h2 {

  font-weight: normal;

  letter-spacing: .125rem;

  text-transform: lowercase;

  color: yellow;

}

li {

  display: inline-block;

  font-size: 1.5em;

  list-style-type: none;

  padding: 1em;

  text-transform: lowercase;

  color: blue;

  font-size: 18px;

}

li span {

  display: block;

  font-size: 4.5rem;

}

2. После последнего блока текста и закрытого тега </p> добавьте код счетчика:

<h3>До окончания акции осталось</h3>

       <div id="countdown">

    <ul>

      <li><span id="days"></span>дней</li>

      <li><span id="hours"></span>часов</li>

      <li><span id="minutes"></span>минут</li>

      <li><span id="seconds"></span>секунд</li>

    </ul>

  </div>

3. Перед закрывающим тегом </boby> внутри тега <script></script> встройте JavaScript код счетчика указав дату истечения акции:

(function () {

  const second = 1000,

        minute = second * 60,

        hour = minute * 60,

        day = hour * 24;

let today = new Date(),

      dd = String(today.getDate()).padStart(2, "0"),

      mm = String(today.getMonth() + 1).padStart(2, "0"),

      yyyy = today.getFullYear(),

      nextYear = yyyy + 1,

      dayMonth = "05/15/",  //дата окончания

      date = dayMonth + yyyy;

  today = mm + "/" + dd + "/" + yyyy;

  if (today > date) {

    date = dayMonth + nextYear;

  }

  const countDown = new Date(date).getTime(),

      x = setInterval(function() {    

        const now = new Date().getTime(),

              distance = countDown - now;

        document.getElementById("days").innerText = Math.floor(distance / (day)),

          document.getElementById("hours").innerText = Math.floor((distance % (day)) / (hour)),

          document.getElementById("minutes").innerText = Math.floor((distance % (hour)) / (minute)),

          document.getElementById("seconds").innerText = Math.floor((distance % (minute)) / second);

        if (distance < 0) {

          document.getElementById("headline").innerText = "Акция!";

          document.getElementById("countdown").style.display = "none";

          document.getElementById("content").style.display = "block";

          clearInterval(x);

        }

        //seconds

      }, 0)

  }());

4. Сохраните лендинг в вашем блоге.

Ваш итоговый результат должен выглядеть похожим образом: https://konoplevtech3.blogspot.com/2023/10/landing-page.html