title: How to make a lockscreen and enter password to unlock with pure Javascript?
body: <p>I want to make a lock screen, when I click on a button, an input require password show up. I set a password, when type a valid password and press enter, the lockscreen disappear. Thank you guys!</p>
  
  <p>Here is my demo : <a href="https://jsbin.com/rugoqupora/edit?html,css,js,output" rel="nofollow noreferrer">https://jsbin.com/rugoqupora/edit?html,css,js,output</a></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width"&gt;
    &lt;title&gt;JS Bin&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;button&gt;Lockscreen&lt;/button&gt;
   &lt;div class="lock-screen"&gt;
     &lt;input type="text" placeholder="Password"&gt;
   &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <pre><code>.lock-screen {
    display: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background: rgba(0, 0, 0, .7);
    display: flex;
    justify-content: center;
    align-items: center;
    display: none;
  }
  </code></pre>
  
  <pre><code>btn = document.querySelector('button');
  lockscreen = document.querySelector('.lock-screen');
  btn.addEventListener('click', function(){
    lockscreen.style.display = 'flex';
  })
  </code></pre>