404 Checker

Still a little buggy

by Spencer Smith

HTML

<input>
<div class="status"></div>

SCSS

body{
  font-family: sans-serif;
  margin: 0 auto;
  width: 300px;
}
@mixin standard{
  box-sizing: border-box;
  width: 400px;
  margin-top: 15px;
  display: inline-block;
  width: 100%;
}
.status{
  @include standard;
  color: white;
  background-color: indianred;
  padding: 20px;
  text-align: center;
  border-radius: 10px;
  opacity: 0;
  transition: all .5s;
}
.show{
  animation: show 1s;
  opacity: 1;
}
input{
  @include standard;
  padding: 10px;
}
.green{
  //color: white;
  background-color: mediumseagreen;
}

@keyframes show{
  0%{
    opacity: 0;
  }
  50%{
    opacity: 0;
  }
  100%{
    opacity: 1;
  }
}

JavaScript

function checkUrl(url, selector){
  var element = document.querySelector(selector);

  var foscript = document.createElement('script');
  foscript.src = url;

  window.onerror = function(a){
    if(a == "Script error."){
      element.innerText = "Page Exists";
      element.setAttribute("class", "status show green");
    }
  }

  document.head.appendChild(foscript);
  element.setAttribute("class", "status show");
  foscript.outerHTML = "";
}

//checkUrl("https://egi.utah.edsu", ".status");

document.querySelector('input').addEventListener("keydown", function(e){
  if(e.which == 13){
    var value = this.value;
    if(value.indexOf("http") == -1){
      value = "http://" + value;
    }
    checkUrl(value, ".status");
  } else {
  	var status = document.querySelector(".status");
    status.setAttribute("class", "status");
    setTimeout(function(){
     status.innerText = "Page doesn't exist";
    }, 500);
  }
});