おしゃれなjQueryのformをJavaScriptに書き直した

こちらのサイト
https://kodocode.net/design-css-textbox/　
で紹介されているフォームがかっこよくて、使おうと思ったのですが、
がっつりjQueryが使われていて、jQuery使うのはちょっと・・・
と思ったので、JSに書き直しました。

index.html

 <link href='https://fonts.googleapis.com/css?family=Lato:300' rel='stylesheet' type='text/css'>
 <div id="inputs" class="wrap">
  <h1>Rise</h1>
  <h3>I built something similar as an engineer on Identity.com</h3>
  <div>
   <label for="fname">First Name</label>
   <input id="fname" type="text" class="cool"/>
  </div>                
  <div>
   <label for="lname">Last Name</label>
   <input id="lname" type="text" class="cool"/>
  </div>                  
  <div>
   <label for="email">Some Long Copy Goes Here</label>
   <input id="email" type="text" class="cool"/>
  </div>
 </div>

index.css

body {
  font-family: 'Lato', sans-serif;
  color: white;
  background-color: teal;
}
h1 {
  font-size: 60px;
  margin: 0px;
  padding: 0px;
}
h3 {
  margin: 0px;
  padding: 0px;
  color: #999;
}

div.wrap {
  width: 500px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  vertical-align: middle;
}

div.wrap div {
  position: relative;
  margin: 50px 0;
}

label {
  position: absolute;
  top: 0;
  font-size: 30px;
  margin: 10px;
  padding: 0 10px;
  background-color: teal;
  -webkit-transition: top .2s ease-in-out, 
                      font-size .2s ease-in-out;
  transition: top .2s ease-in-out, 
              font-size .2s ease-in-out;
}

.active {
  top: -25px;
  font-size: 20px;
}

input[type=text] {
  width: 100%;
  padding: 20px;
  border: 1px solid white;
  font-size: 20px;
  background-color: teal;
  color: white;
} 

input[type=text]:focus {
  outline: none;
}

main.js

    var fname = document.querySelector("#fname");
    var lname = document.querySelector("#lname");
    var email = document.querySelector("#email");

    fname.addEventListener('focus',(e)=>{
        e.target.parentNode.firstElementChild.classList.add('active');
    });
    fname.addEventListener('blur',(e)=>{
        if (e.target.value == "") {
            e.target.parentNode.firstElementChild.classList.remove('active');
        }
    });

    lname.addEventListener('focus',(e)=>{
        e.target.parentNode.firstElementChild.classList.add('active');
    });
    lname.addEventListener('blur',(e)=>{
        if (e.target.value == "") {
            e.target.parentNode.firstElementChild.classList.remove('active');
        }
    });

    email.addEventListener('focus',(e)=>{
        e.target.parentNode.firstElementChild.classList.add('active');
    });
    email.addEventListener('blur',(e)=>{
        if (e.target.value == "") {
            e.target.parentNode.firstElementChild.classList.remove('active');
        }
    });