metric-imperial-converter/views/index.html

<!DOCTYPE html>
<html>
  <head>
    <title>Welcome to HyperDev!</title>
    <meta name="description" content="A cool thing made with HyperDev">
    <link id="favicon" rel="icon" href="https://hyperdev.com/favicon-app.ico" type="image/x-icon">
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="./public/style.css">
  </head>
  <body>
    <header>
      <h1>
        ISQA_2 - Metric/Imp Converter
      </h1>
    </header>
    <div id='userstories' style='margin-left: 5%; margin-top: 5%'>
      <h3>User Stories</h3>
      <ol>
        <li>I will help prevent the client from trying to guess(sniff) the MIME type.</li>
        <li>I will prevent cross-site scripting (XSS) attacks.</li>
        <li>I can <b>GET</b> <code>/api/convert</code> with a single parameter containing an accepted number and unit and have it converted.</li>
        <li>Hint: Split the input by looking for the index of the first character.</li>
        <li>I can convert 'gal' to 'L' and vice versa. <b>(1 gal to 3.78541 L)</b></li>
        <li>I can convert 'lbs' to 'kg' and vice versa. <b>(1 lbs to 0.453592 kg)</b></li> 
        <li>I can convert 'mi' to 'km' and vice versa. <b>(1 mi to 1.60934 km)</b></li>
        <li>If my unit of measurement is invalid, returned will be 'invalid unit'.</li>
        <li>If my number is invalid, returned with will 'invalid number'.</li>
        <li>If both are invalid, return will be 'invalid number and unit'.</li>
        <li>I can use fractions, decimals or both in my parameter(ie. 5, 1/2, 2.5/6), but if nothing is provided it will default to 1.</li>
        <li>My return will consist of the initNum, initUnit, returnNum, returnUnit, and string spelling out units in format <code>{initNum} {initial_Units} converts to {returnNum} {return_Units}</code> with the result rounded to 5 decimals.</li>
        <li>All 16 unit tests are complete and passing.</li>
        <li>All 5 functional tests are complete and passing.</li>
      </ol>
      <h3>Example usage:</h3>
      <code>/api/convert?input=4gal</code><br>
      <code>/api/convert?input=1/2km</code><br>
      <code>/api/convert?input=5.4/3lbs</code><br>
      <code>/api/convert?input=kg</code><br>
      <h3>Example return:</h3>
      <code>{initNum: 3.1, initUnit: 'mi', returnNum: 5.0000008, returnUnit: 'km', string: '3.1 miles converts to 5.00002 kilometers'}</code>
    </div>
    <hr style='margin: 50px'>
    <div id='testui' style='margin-left: 5%'>
      <h2 style="text-align: left">Front-End:</h2>
      <form id="convertForm" class="border">
        <input type="text" id="convertField" name="input" placeholder="3.1mi" style="width: 200px">
        <input id="convert" type="submit" value='Convert!'>
      </form>
      <p id='result'></p>
      <code id='jsonResult'></code>
    </div>
    <hr style='margin: 50px; margin-top: 200px'>
    <!-- Your web-app is https, so your scripts need to be too -->
    <script src="https://code.jquery.com/jquery-2.2.1.min.js"
            integrity="sha256-gvQgAFzTH6trSrAWoH1iPo9Xc96QxSZ3feW6kem+O00="
            crossorigin="anonymous"></script>
    <script>
      $(function() {
        $('#convertForm').submit(function() {
          event.preventDefault();
          $.ajax({
            url: '/api/convert',
            type: 'get',
            data: $('#convertForm').serialize(),
            success: function(data) {
              $('#result').text(data.string || data);
              $('#jsonResult').text(JSON.stringify(data));
            }
          });
        });
      });
   </script>
  </body>
</html>
Initial commit from Gomix. 2017-02-18 20:14:10 +01:00			`<!DOCTYPE html>`
			`<html>`
			`<head>`
			`<title>Welcome to HyperDev!</title>`
			`<meta name="description" content="A cool thing made with HyperDev">`
			`<link id="favicon" rel="icon" href="https://hyperdev.com/favicon-app.ico" type="image/x-icon">`
			`<meta charset="utf-8">`
			`<meta http-equiv="X-UA-Compatible" content="IE=edge">`
			`<meta name="viewport" content="width=device-width, initial-scale=1">`
			`<link rel="stylesheet" href="./public/style.css">`
			`</head>`
			`<body>`
			`<header>`
			`<h1>`
			`ISQA_2 - Metric/Imp Converter`
			`</h1>`
			`</header>`
			`<div id='userstories' style='margin-left: 5%; margin-top: 5%'>`
			`<h3>User Stories</h3>`
			`<ol>`
			`<li>I will help prevent the client from trying to guess(sniff) the MIME type.</li>`
			`<li>I will prevent cross-site scripting (XSS) attacks.</li>`
			`<li>I can <b>GET</b> <code>/api/convert</code> with a single parameter containing an accepted number and unit and have it converted.</li>`
			`<li>Hint: Split the input by looking for the index of the first character.</li>`
			`<li>I can convert 'gal' to 'L' and vice versa. <b>(1 gal to 3.78541 L)</b></li>`
			`<li>I can convert 'lbs' to 'kg' and vice versa. <b>(1 lbs to 0.453592 kg)</b></li>`
			`<li>I can convert 'mi' to 'km' and vice versa. <b>(1 mi to 1.60934 km)</b></li>`
			`<li>If my unit of measurement is invalid, returned will be 'invalid unit'.</li>`
			`<li>If my number is invalid, returned with will 'invalid number'.</li>`
			`<li>If both are invalid, return will be 'invalid number and unit'.</li>`
			`<li>I can use fractions, decimals or both in my parameter(ie. 5, 1/2, 2.5/6), but if nothing is provided it will default to 1.</li>`
			`<li>My return will consist of the initNum, initUnit, returnNum, returnUnit, and string spelling out units in format <code>{initNum} {initial_Units} converts to {returnNum} {return_Units}</code> with the result rounded to 5 decimals.</li>`
			`<li>All 16 unit tests are complete and passing.</li>`
			`<li>All 5 functional tests are complete and passing.</li>`
			`</ol>`
			`<h3>Example usage:</h3>`
			`<code>/api/convert?input=4gal</code><br>`
			`<code>/api/convert?input=1/2km</code><br>`
			`<code>/api/convert?input=5.4/3lbs</code><br>`
			`<code>/api/convert?input=kg</code><br>`
			`<h3>Example return:</h3>`
			`<code>{initNum: 3.1, initUnit: 'mi', returnNum: 5.0000008, returnUnit: 'km', string: '3.1 miles converts to 5.00002 kilometers'}</code>`
			`</div>`
			`<hr style='margin: 50px'>`
			`<div id='testui' style='margin-left: 5%'>`
			`<h2 style="text-align: left">Front-End:</h2>`
			`<form id="convertForm" class="border">`
			`<input type="text" id="convertField" name="input" placeholder="3.1mi" style="width: 200px">`
Fix convertForm submit 2017-06-10 05:21:43 +02:00			`<input id="convert" type="submit" value='Convert!'>`
Initial commit from Gomix. 2017-02-18 20:14:10 +01:00			`</form>`
			`<p id='result'></p>`
			`<code id='jsonResult'></code>`
			`</div>`
			`<hr style='margin: 50px; margin-top: 200px'>`
			`<!-- Your web-app is https, so your scripts need to be too -->`
			`<script src="https://code.jquery.com/jquery-2.2.1.min.js"`
			`integrity="sha256-gvQgAFzTH6trSrAWoH1iPo9Xc96QxSZ3feW6kem+O00="`
			`crossorigin="anonymous"></script>`
			`<script>`
			`$(function() {`
Fix convertForm submit 2017-06-10 05:21:43 +02:00			`$('#convertForm').submit(function() {`
			`event.preventDefault();`
Initial commit from Gomix. 2017-02-18 20:14:10 +01:00			`$.ajax({`
			`url: '/api/convert',`
			`type: 'get',`
			`data: $('#convertForm').serialize(),`
			`success: function(data) {`
			`$('#result').text(data.string \|\| data);`
			`$('#jsonResult').text(JSON.stringify(data));`
			`}`
			`});`
			`});`
			`});`
			`</script>`
			`</body>`
			`</html>`