<div id="counter">0</div>

body {text-align: center; font-family: 'Segoe UI';}
#counter {
    font-size: 2.5em;
    cursor: pointer;
    padding: 10px 30px;
    border: 2px solid #3498db;
    border-radius: 10px;
    transition: background-color 0.3s;
    user-select: none;
    display: inline-block;
    color: #3498db;
}
#counter:hover {background-color: #3498db;color: #fff;}

let count = 0;
const counterElement = document.getElementById('counter');
counterElement.addEventListener('click', function() {
    count++;
    counterElement.textContent = count;
});

<div class="buttons">
    <button class="fill">Fill In</button>
    <button class="pulse">Pulse</button>
  </div>

body {
    color: #fff;
    background: hsl(227, 10%, 10%);
    text-align: center;
  }
button {  
    font-size: 20px;
    background: none;
    border: 2px solid;
    margin: 1em;
    padding: 1em 2em;
    color: var(--color);
    transition: 0.75s;
    cursor: pointer;
}
.fill:hover, .fill:focus {
  box-shadow: inset 0 0 0 2em var(--hover);
  border-color: var(--hover);
  color: #fff;
}   
.pulse:hover, .pulse:focus {
  animation: pulse 1s;
  box-shadow: 0 0 0 2em transparent;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 var(--hover); }
}
$colors: (fill: #a972cb, pulse: #ef6eae,);
@each $button, $color in $colors {
  .#{$button} {
    --color: #{$color};
    --hover: #{adjust-hue($color, 45deg)};
  }
}

<ul class="complete">
    <li>Item 1</li>
    <li>Item 2</li>
  </ul>
  <ul class="incomplete">
    <li>Item 4</li>
    <li>Item 5</li>
  </ul>

ul { list-style: none; }
.complete li::before {
    content: '🗹 '; 
}
.incomplete li::before {
    content: '☐ '; 
}
ul {
    text-align: center;
    font-family: Candara;
    font-size: 1.7rem;
    margin: 0 auto;
}

  <input type="checkbox"/> <br>
<img src="https://source.unsplash.com/random/1920x1080" alt="Random" />

input {
    transform: scale(4);
    display: block;
    margin: 30px auto;
  }
  img {
    display: block;
    margin: 0 auto;
    width: 1400px;
    height: 900px;
    transition: 2s;
  }
  input:checked + br + img {
    width: 500px;
    height: 400px;
    object-fit: cover;
    object-position: left-top;
    transition: width 2s, height 3s;
  }

<p id="currentTime"></p>

function updateCurrentTime() {
  var currentTimeElement = document.getElementById("currentTime");
  var currentTime = new Date();
  var hours = currentTime.getHours();
  var minutes = currentTime.getMinutes();
  var seconds = currentTime.getSeconds();
  minutes = (minutes < 10 ? "0" : "") + minutes;
  seconds = (seconds < 10 ? "0" : "") + seconds;
  currentTimeElement.innerText = hours + ":" + minutes + ":" + seconds;
}
setInterval(updateCurrentTime, 1000);
updateCurrentTime();

<div><input type="text" id="Input" placeholder="Добавить задачу"><button onclick="addTask()">Добавить</button></div>
  <ul id="List"></ul>

function addTask() {
    const taskInput =document.getElementById("Input");
    const taskList = document.getElementById("List");
    const trimmedValue = taskInput.value.trim();
    if (trimmedValue !== "") {
      const taskItem = taskList.appendChild(document.createElement("li"));
      taskItem.textContent = trimmedValue;
      taskItem.appendChild(document.createElement("button"))
        .textContent = "Удалить";
      taskItem.lastChild.onclick = () => taskList.removeChild(taskItem);
      taskInput.value = "";
    }
  }