Сегодня вы узнаете как создать генератор случайных шуток используя HTML CSS и jаvascript. При нажатии на кнопку появляется новая шутка. Вы можете посмотреть видео демонстрацию, скопировать готовый код ниже, попробовать сверстать самому или скачать архив с готовым кодом. 

Если это видео оказалось для вас полезным, оставьте комментарий со своими мыслями или вопросами. Ваши отзывы помогают нам создавать более ценный контент.

HTML КОД:

<div class="wrapper">
  <h2>
    J<i class="fas fa-face-smile"></i>kes Generat<i class="fas fa-face-smile" ></i>r
  </h2>

  <p class="joke">
    To whoever stole my copy of Microsoft Office, I will find you. You have
    my Word!
  </p>

  <button class="btn">Refresh Joke</button>
</div>

CSS КОД:

.wrapper {
  width: 80vmin;
  background: #fff;
  padding: 20px 30px;
  border-radius: 10px;
  box-shadow: 0px 5px 10px rgba(0, 0, 0, 0.2);
}

.wrapper h2 {
  display: block;
  text-align: center;
  font-size: 30px;
  text-transform: uppercase;
  border-bottom: 2px solid #ccc;
}

.wrapper h2 i {
  color: goldenrod;
}

.wrapper .joke {
  font-size: 16px;
  font-weight: 400;
  text-align: center;
  word-wrap: break-word;
  margin: 20px 0;
  transform: translateY(10px);
  opacity: 0;
  transition: 0.5s;
}

.wrapper .joke.show {
  opacity: 1;
  transform: translateY(0px);
}

.wrapper .btn {
  display: block;
  background: #4070f4;
  color: #fff;
  border: 0;
  outline: 0;
  padding: 8px 20px;
  border-radius: 5px;
  font-size: 18px;
  font-weight: 500;
  margin: 0 auto;
  cursor: pointer;
}

jаvascript КОД:

let jokeText = document.querySelector(".joke");
let btn = document.querySelector(".btn");

let url =
  "https://v2.jokeapi.dev/joke/Any?blacklistFlags=nsfw,religious,political,racist,sexist,explicit&type=single";

let getJoke = () => {
  jokeText.classList.remove("show");
  fetch(url)
    .then((data) => data.json())
    .then((item) => {
      jokeText.textContent = `${item.joke}`;
      jokeText.classList.add("show");
    });
};

btn.addEventListener("click", getJoke);
getJoke();