Youtube Video - On How to create a rickroll website

#beginners #javascript

Only for educational purposes

As you know there are a lot of people rickrolling each other. Hahaha using the youtube link but we developers use the power of coding to rickroll

So in this video we are gonna create a rickroll website using html, css and javascript

Expected in the website :- When the user goes to the website it shows the loader for 4-5 seconds [loader is the best option to make the person stay on the website] and then goes to the youtube rickroll page and Boom! rickrolled

Here is the video on how to create a rickroll website using Html, css and javascript - https://www.youtube.com/watch?v=isTfYeKUL_c&t=118s

Written Tutorial -

HTML File -

here we basically create one div with the class of loader
and then we are just gonna style it. Create a css file and link it to your html file or you can use internal css [thats nothing but using css in the html file] too

   <!-- Only for educational purposes 😊 -->
  <!-- lets make loading so that user stays on the website -->
  <div class="loader"></div>

CSS File -

here we puts a little dark white background to our website and then center our loader to the center and then we make our loader in circle shape after doing this much stuff we use border-top-color: transparent to make our loader top transparent color (it looks cool). and then we use keyframes to animate it and make it move in circle at one position :D and our CSS is done Noice!

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
  background: #f1f1f1;
}
.loader {
  border: 10px solid #222;
  width: 80px;
  height: 80px;
  /* bringing to middle */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border-top-color: transparent;
  /* addding spin */
  animation: spin 0.7s linear infinite;
}
/* i am stoping the animation for now */
@keyframes spin {
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}

Javascript File:-

Now the main part, in here we are setting a time of 4 seconds in our webpage and when the time is completed/over then we will redirect our website to the youtube rickroll video and thats all we need to do.

The main code which does the work is this - window.location.href="https://youtu.be/dQw4w9WgXcQ"; this command redirects it to the youtube link we put there and Boom!

  <script>
    // also we need to make the O small
    setTimeout(() => {
      window.location.href="https://youtu.be/dQw4w9WgXcQ";
    }, 4000);
    // 4000 = 4 seconds ( 1000 = 1 second)
  </script>