html thank you script
html thank you script

Today we will create a beautiful thank you page with the help of javascript. This HTML thank you script is a step-by-step tutorial. We will learn the basics of DOM manipulation using Javascript.

Table of Contents

Also, Read- Animated Tab Bar Using JavaScript

HTML thank you Script

We can start by writing some HTML.

Step 1: HTML

First, create an index.html page and write the below code.

Note– click the below code to copy it.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" href="style.css" />
    <script src="main.js" defer></script>
    <title>Thank You for 2200 Followers</title>
  </head>
  <body>
    <h1>
      <p>
        <span>T</span><span>h</span><span>a</span><span>n</span><span>k</span>
        <br />
        <span>Y</span><span>o</span><span>u</span><span>!</span>
      </p>
    </h1>
  </body>
</html>

Step 2: CSS

Next, We will create a style.css file and write the below code.

html {
  overflow: hidden;
  line-height: calc(100vh / 10);
  text-align: center;
  font-family: system-ui, sans-serif;
  font-size: 3vw;
  background: radial-gradient(circle, transparent, black), indigo;
  color: white;
}

body {
  margin: 0;
  perspective: 1000px;
}

h1 {
  position: absolute;
  top: 50%;
  left: 50%;
  z-index: 1;
  margin: 0;
  color: gold;
  font-size: calc(10vw + 10vh + 2vmin);
  line-height: 90%;
  font-weight: 900;
  transform: translate(-50%, -50%) rotateX(35deg);
  text-shadow: 0px 25px 0 black, 0px 25px 10px black;
  transition: 0.3s ease-in-out;
}

div {
  width: calc(100vw / 10);
  height: calc(100vh / 10);
  padding: 0;
  display: inline-block;
  box-sizing: border-box;
  z-index: -1;
}

span {
  transition: 1s;
}

.spin {
  animation: spin 2s linear forwards;
}

@keyframes spin {
  100% {
    transform: rotateY(360deg);
  }
}

Here we defined the web page style and the animation.

Step 3: Javascript

Now, we will create the main.js file and copy the below code.

const body = document.body;
for (var i = 0; i < 100; i++) {
  var div = document.createElement("div");
  div.innerText = "2200";
  div.style.color = "hsl(" + Math.random() * 360 + "deg, 100%, 50%)";
  div.style.fontWeight = Math.floor(Math.random() * 10) * 100;
  body.appendChild(div);
}

function spin(eName) {
  var elementName = document.querySelectorAll(eName);
  var num = Math.floor(Math.random() * elementName.length);
  elementName[num].classList.add("spin");
  elementName[num].onanimationend = function () {
    elementName[num].classList.remove("spin");
  };

  setTimeout(function () {
    spin(eName);
  }, 100);
}

function changeSpanColor() {
  var spans = document.querySelectorAll("span");
  var num = Math.floor(Math.random() * spans.length);
  spans[num].style.color = "hsl(" + Math.random() * 360 + "deg, 100%, 50%)";

  setTimeout(changeSpanColor, 200);
}

spin("div");
changeSpanColor();

In the above code, we are creating 100 div elements and adding the spin animation to them.

Full code

The source code is available on Github.

I hope you will find this tutorial helpful. Please share this with your friends.

Until Next time.

Click to rate this post!
[Total: 0 Average: 0]

Oh, hi there πŸ‘‹ It’s nice to meet you.

Sign up to receive awesome content in your inbox, every week.

We don’t spam! Read our privacy policy for more info.

Leave a Reply