<p class="hidden message">Hello, World!</p>

​

<button class="alert-btn">Show as Alert</button>

<button class="notif-btn">Show as Notification</button>

<button class="size-btn">Toggle Size</button>

<button class="toggle-btn">Toggle Visibility</button>

​

<div class="task-list">

  <p class="done">Eat Lunch</p>

  <p class="will-do">Go for a Walk</p>

  <p class="not-doing">Play Hockey</p>

  <p class="will-do">Write a Song</p>

  <p class="will-do">Take a Nap</p>

</div>

​

<button class="done-btn">Mark Done</button>

body {

  margin: 20px;

  font-family: "Lato";

  font-weight: 400;

  font-size: 2rem;

  text-align: center;

}

​

button {

  font-size: 1.5rem;

  padding: 0.5rem;

  font-family: "Lato";

  cursor: pointer;

}

​

p.message {

  border-radius: 5px;

  padding: 0.5rem 1rem;

  width: fit-content;

  margin: 4rem auto;

  transition: 0.4s ease all;

}

​

p.alert {

  color: red;

  border: 5px solid red;

}

​

p.notification {

  color: orange;

  border: 5px solid orange;

}

​

p.hidden {

  opacity: 0;

}

​

p.large {

  font-size: 2.5rem;

}

​

div.task-list {

  margin: 8rem auto 2rem auto;

display: flex;

gap: 2rem;

flex-wrap: wrap;

justify-content: center;

}

​

div.task-list p {

  margin: 0;

}

​

p.done {

  color: green;

  text-decoration: line-through;

}

​

p.not-doing {

  color: red;

}

​

p.will-do {

  color: black;

}

​

let alert_btn = document.querySelector(".alert-btn");

let notif_btn = document.querySelector(".notif-btn");

let size_btn = document.querySelector(".size-btn");

let toggle_btn = document.querySelector(".toggle-btn");

​

let done_btn = document.querySelector(".done-btn");

​

let message = document.querySelector(".message");

​

alert_btn.addEventListener("click", (evt) => {

  message.removeAttribute("class");

  message.classList.add("alert", "message");

});

​

notif_btn.addEventListener("click", (evt) => {

  message.classList.remove("alert", "hidden");

  message.classList.add("notification");

});

​

size_btn.addEventListener("click", (evt) => {

  message.classList.toggle("large");

});

​

toggle_btn.addEventListener("click", (evt) => {

  message.classList.toggle("hidden");

});

​

done_btn.addEventListener("click", (evt) => {

  let planned_tasks = document.querySelectorAll(".will-do");

  for(task of planned_tasks) {

    task.classList.replace("will-do", "done");

  }

});