JSFiddle - React, Tailwind, and code Playground

by Mariya_Korotkova

HTML

<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="style.css">
    <title>Document</title>
  </head>

  <body>
    <div class="text">Академия верстки</div>
    <div class="container">
      <button class="button">CLICK HERE</button>
    </div>

    <script src="script.js"></script>
  </body>

</html>

CSS

.text {
  color: red;
  font-family: sans-serif;
  background: #aeaeae;
  width: 45%;
  padding: 7px;
  text-align: center;
  margin: 10px auto;
}

.container {
  display: flex;
  justify-content: center;
}

.button {
  color: rgb(5, 65, 5);
}

JavaScript

let i = 0;

let text = document.querySelector('.text'),
button = document.querySelector('button');

button.addEventListener('click', changeColorAgain);

function changeColor() {
text.style.backgroundColor = 'black';
text.style.fontSize = '20px';
text.style.color = 'white';
}

function backColor() {
text.style.backgroundColor = '#aeaeae';
text.style.fontSize = '16px';
text.style.color = 'red';
}

function changeColorAgain() {
if (i == 0) {

changeColor();
i = 1;
} else {

backColor();
i = 0;
}
}