title: How can I make this div slide across half of the screen?
body: <p>I am trying to build some responsive javascript code that will make this div slide across half of the screen. </p>
  
  <p>I am able to make this div move across 'x' amount of the screen but I am unsure how to make it responsive.. I would love some guidance! I think my main problem is I don't know what 'units' javascript moves in.. </p>
  
  <p>Any help would be greatly appreciate. I am still trying to learn! </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-js lang-js prettyprint-override"><code>var div = document.getElementById("slidingDiv");
  div.style.position = "absolute";
  var left = document.body.offsetWidth;
  div.style.left = left + "px";
  var gap = 3;
  var timer = window.setInterval(function() {
    div.style.left = left + "px";
    if (left - gap &lt; 40) {
      left = 0;
    } else {
      left -= gap;
    }
    if (left == 0) {
      clearInterval(timer);
    }
  }, 1);</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="slidingDiv"&gt;Move me!&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Looking at the "if (left - gap &lt; 40)..... I want the '40' to basically be half the width of the screen. </p>
  
  <p>Is this possible?</p>