title: How to change label color on input focus in pure javascript?
body: <p>I have two input box inside a div of position absolute. And a label on those input boxes. The effect I want is when i focus one input box then the label should be blue color and when blurred should be removed the class (blue color). And simultaneously the other label and input box too.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>// Initial color of label
  label.labels{
    color: black;
  }
  
  input.box{
    border-width: 0 0 2px 0;
    outline: none;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div style = "position: absolute; top: 0; left: 0; right: 0; bottom: 0; margin: auto;"&gt;
    &lt;label class = "labels"&gt;First Name:&lt;/label&gt;
    &lt;input type = "text" class = "box" /&gt;&lt;br /&gt;
    &lt;label class = "labels"&gt;Last Name:&lt;/label&gt;
    &lt;input type = "text" class = "box" /&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>When i focus the input.box then label.labels color should be blue. And ya, both the input and both the labels have same classes. How to achieve this effect with Pure Javascript? Or if possible please tell me how can i achieve this with css?</p>