title: How to run JavaScript in WebStorm
body: <p>I'm new at this so apologies in advance if I'm missing something obvious, but I'm not able to figure out how to run JavaScript in WebStorm. The <a href="https://www.jetbrains.com/help/webstorm/2016.3/running-and-debugging-javascript.html" rel="nofollow noreferrer">WebStorm documentation</a> says to simply open the HTML file in the browser, but that doesn't seem to work. For what it's worth, everything is working up on <a href="http://codepen.io/ahlstromvij/pen/qRyryX" rel="nofollow noreferrer">codepen.io</a>.</p>
  
  <p>Here's the HTML (for a simple weather app):</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-html lang-html prettyprint-override"><code>&lt;body&gt;
  &lt;head&gt;
      &lt;script src="script.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous"&gt;
      &lt;link rel="stylesheet" href="style.css"&gt;
  &lt;/head&gt;
  &lt;div class="container-fluid"&gt;
      &lt;div class="col-sm-3"&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-6"&gt;
          &lt;div class="white-box text-center"&gt;
              &lt;span&gt;Weather where you are:&lt;/span&gt;
              &lt;div class="loc"&gt;&lt;/div&gt;
              &lt;div class="weather"&gt;&lt;/div&gt;
              &lt;div class="temp"&gt;&lt;/div&gt;
              &lt;br&gt;
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-sm-3"&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>And here's the script (still in draft, as it needs to be expanded to, among other things, link to images covering all values for 'weather'):</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>$(document).ready(function() {
      $( window ).on("load", function(){
          $.getJSON("http://ip-api.com/json", function(json) {
              var json;
              json = JSON.stringify(json);
              var obj = JSON.parse(json);
              var latitude = obj.lat;
              var longitude = obj.lon;
  
              $.getJSON("http://api.openweathermap.org/data/2.5/weather?lat="+latitude+"&amp;lon="+longitude+"&amp;appid=74a6725c2ca6f1342464bb9005bf0b63", function(json) {
                  var json;
                  json = JSON.stringify(json);
                  var obj = JSON.parse(json);
                  var loc = obj.name;
                  var weather = obj.weather[0].description;
  
                  var tempInCelsius = obj.main.temp - 273.15;
                  var tempInCelsiusString = tempInCelsius.toFixed(1) + " &amp;#8451";
  
                  var tempInFahrenheit = obj.main.temp * 9/5 - 459.67;
                  var tempInFahrenheitString = tempInFahrenheit.toFixed(1) + " &amp;#8457";
  
                  var tempStringCombined = tempInCelsiusString + " | " + tempInFahrenheitString;
  
                  $(".loc").html(loc);
                  if(weather === "haze"){
                      weather = "&lt;img src='https://cdn3.iconfinder.com/data/icons/chubby-weather/440/fog-512.png'&gt;";
                  }
                  $(".weather").html(weather);
                  $(".temp").html(tempStringCombined);
              });
          });
      });
  });</code></pre>
  </div>
  </div>
  </p>
  
  <p>Many thanks in advance for any help!</p>