Можно сделать сайт PariMatch по знаниям из курсов?

Как же бесит реклама! Но когда открылась эта страница с рекламой я задал себе вопрос: «А могут ли знания курсов помочь сделать такой сайт?». И, поехали.

Посмотреть видео:

Для начала изучим верстку. Как видно колесо состоит из двух блоков:

<div class="wheel">
    <div class="arrow"></div>
    <div class="inside"></div>
</div>

Где arrow – блок с фоновым изображением стрелки, а inside – содержит фоновое изображение колеса. Создадим html документ и поместим туда этот код.

Настало время CSS. Но перед работой с CSS – создадим папку images и скопируем туда изображения колеса, кнопки spin и стрелки. Обратите внимание, при обычном сохранении в браузере предлагается вариант webp формата, меня не устраивает подобный формат, поэтому применил расширение для Chrome Save images as Type чтобы сохранить в формате png.

Создайте файл index.html, style.css, script.js. Подключите скрипт и стили в файл HTML. Давайте напишем стили для wheel. Обратите внимание, размеры беру произвольно.

.wheel {
    width: 400px;
    height: 400px;
    border: 1px solid black;
    margin: 50px auto;
    position: relative;
}

И для .inside. Здесь мы задаем не только фон, но и размеры фона – contains.

.inside {
    width: 400px;
    height: 400px;
    background-image: url(./images/wheel-sprite.png);
    background-size: contain;
    position: absolute;
}

Если все сделано правильно, то уже на странице изображение колеса появится. Обратите внимание, ничего сложного, все это было изучено на курсе HTML для JS разработчиков, до 6 юнита.

Давайте напишем простой скрипт запуска вращения колеса. Если изучить верстку на сайте, то видно, что к .inside добавляется класс .variant-1, который и вращает колесо. Реализуем это. Работа с классами CSS в JavaScript мы изучали в 9 юните курса JavaScript 2.0. Добавление класса идет через classList. Перейдем в файл JavaScript и напишем:

document.querySelector('.wheel').addEventListener('click', start);
const inside = document.querySelector('.inside');

function start () {
    inside.classList.add('variant-1');
}

При клике на колесе, теперь класс присваивается, однако вращения не происходит. Добавим CSS для класса .variant-1.

.variant-1 {
    transition: transform 3s cubic-bezier(0,.8,.51,.87);
    -moz-transform: rotate(1410.5deg);
    -ms-transform: rotate(1410.5deg);
    -webkit-transform: rotate(1410.5deg);
    -o-transform: rotate(1410.5deg);
    transform: rotate(1410.5deg);
}

Обратите внимание, что при повороте на 1410 градусов всегда выпадает 150%.

Теперь при клике колесо вращается. Добавим в верстку кнопку spin. Теперь блок .wheel такой:

<div class="wheel">
    <div class="arrow"></div>
    <div class="inside"></div>
     <div class="start"></div>
</div>

И добавим оформление для CSS:

.wheel {
    width: 400px;
    height: 400px;
    border: 1px solid black;
    margin: 50px auto;
    position: relative;
}

.arrow {
    width: 50px;
    height: 50px;
    background-image: url('./images/top-arrow.png');
    position: absolute;
    left: 180px;
    z-index: 100;
}

.inside {
    width: 400px;
    height: 400px;
    background-image: url(./images/wheel-sprite.png);
    background-size: contain;
    position: absolute;
}

.start  {
    width: 100px;
    height: 100px;
    background-image: url('./images/butt-off.png');
    background-size: contain;
    position: absolute;
    z-index: 150;
    left: 150px;
    top: 150px;
    cursor: pointer;
}

.variant-1 {
    transition: transform 3s cubic-bezier(0,.8,.51,.87);
    -moz-transform: rotate(1410.5deg);
    -ms-transform: rotate(1410.5deg);
    -webkit-transform: rotate(1410.5deg);
    -o-transform: rotate(1410.5deg);
    transform: rotate(1410.5deg);
}

Теперь колесо выглядит так:

Давайте доработаем JavaScript, чтобы после окончания прокрутки всплывало сообщение. Не будем усложнять, подключая boostrap, просто применим alert. Обратите внимание – теперь клик не на .wheel, а на .start.

document.querySelector('.start ').addEventListener('click', start);
const inside = document.querySelector('.inside');

function start () {
    inside.classList.add('variant-1');
    setTimeout(function(){
        alert('You win!!!! 150%');
        inside.classList.remove('variant-1');
    }, 4000);
}

Что делает код JS:

• Добавляет класс .variant-1
• Ожидает окончания прокрутки (4000 миллисекунд = 4 секунды), а потом выводит alert c сообщением. Мы применили setTimeout для данной операции. Почему 4 секунды? Анимация колеса прописана в CSS на 3 секунды, плюс одна секунда для реакции пользователя.
• После закрытия окна – удаляем класс .variant-1 и колесо возвращается на исходную позицию.

Как видите, ничего сложного. Более того, в отличие от кода сайта, где применен jQuery, мы написали все на нативном JavaScript.