Home How to Display a Big Text Word, for a few seconds, in the Center of the Page, above other elements, with JavaScript on Button Press?

Questions

How to Display a Big Text Word, for a few seconds, in the Center of the Page, above other elements, with JavaScript on Button Press?

byMR

February 9, 2024

I’m working on a web project and I need a JavaScript snippet to achieve a specific functionality.

Here’s what I need:
Essentially, I want to display,for a few seconds, a large text word in the center of the page, above other elements, whenever a button is pressed.

Any help or suggestions would be greatly appreciated! Thank you.

It should work across different browsers and screen sizes.

>Solution :

A button, a hidden <div>, a simple event listener and a simple timeout.

var btn = document.getElementById("button");
var honk = document.getElementById("honk");

btn.addEventListener("click", () => {
  btn.disabled = true;
  honk.hidden = false;
  setTimeout(() => {
    btn.disabled = false;
    honk.hidden = true;
  }, 2500);
});

body {
  text-align: justify;
}

#honk {
  position: fixed;
  top: 0%;
  width: 100%;
  font-weight: bold;
  text-align: center;
  font-family: comic sans ms, fantasy;
  font-size: 40pt;
  color: red;
  text-shadow: #FC0 0 0 3em;
}

#honk p {
  display: block;
  margin: auto;
  animation: 0.6s teeter infinite;
}

@keyframes teeter {
  0% {
    transform: rotate(-10deg);
  }
  50% {
    transform: rotate(10deg);
  }
  100% {
    transform: rotate(-10deg);
  }
}

<p>Sed vitae enim eu sem finibus pharetra. Nunc ultrices lacinia ante. Integer aliquam, metus gravida commodo congue, mauris magna pretium enim, vel fermentum velit est nec nibh. Maecenas aliquam nibh arcu, non mollis turpis rutrum ac. In sed turpis dignissim,
  ornare leo eu, finibus mauris. <button id="button">Click me</button> Nullam eleifend arcu non dolor auctor, quis consectetur turpis porttitor. Mauris condimentum tellus felis, et luctus felis euismod quis. Suspendisse laoreet turpis non pulvinar pellentesque.
  Quisque condimentum eu leo in vestibulum. Sed tristique magna nisi, eu cursus metus placerat sit amet. Sed ac purus suscipit ante consectetur semper vitae eget sem. Donec non ipsum id elit gravida laoreet.
</p>
<div id="honk" hidden>
  <p>HONK!</p>
</div>