code404 component

[puddlejumper26]

This part should contain

• A button navigate to the home page
• Will automatically navigate to the home page after 60 secs, with the counting down displayed
• With a fullscreen picture as background (black)
• With a breathing light in the middle

[puddlejumper26]

Html

• Router

  <a [routerLink]="['/']">
  <div class="breathe-div">
  {{ countDown }}
  Jumping...
  </div>
  </a>

component.ts

import { Component, OnInit } from '@angular/core';

@Component({
  selector: 'app-code404',
  templateUrl: './code404.component.html',
  styleUrls: ['./code404.component.scss'],
})
export class Code404Component implements OnInit {
  public countDown: number;
  private i: number = 0;

  constructor() {
    // using setInterval to contro the counting down
    setInterval((value) => {
      value = 30 - this.i;
      this.i = this.i + 1;
      this.countDown = value;
      if (value === 0) {
        // webpage would be navigated automatically to this location
        window.location.href = 'http://localhost:4200/';
      }
    }, 1000);
  }

  ngOnInit() {}
}

scss

a {
  text-decoration: none;
}

div.breathe-div {
  border: 1px solid #2b92d4;
  border-radius: 50%;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
  color: #2b92d4;
  cursor: pointer;
  font-size: 20px;
  height: 150px;
  line-height: 150px;
  margin: 150px auto;
  overflow: hidden;
  text-align: center;
  width: 150px;
  -webkit-animation-timing-function: ease-in-out;
  -webkit-animation-name: breathe;
  -webkit-animation-duration: 3s;
  -webkit-animation-iteration-count: infinite;
  -webkit-animation-direction: alternate;
}

@-webkit-keyframes breathe {
  0% {
    opacity: 0.4;
    box-shadow: 0 1px 2px rgba(0, 147, 223, 0.4),
      0 1px 1px rgba(0, 147, 223, 0.1) inset;
  }

  100% {
    opacity: 1;
    border: 1px solid rgba(59, 235, 235, 0.7);
    box-shadow: 0 1px 30px #0093df, 0 1px 20px #0093df inset;
  }
}