
<!DOCTYPE html>
<html>
  <head>
    <title>Testing Prototype</title>
    <meta name="description" content="A cool thing made with HyperDev">
    <link rel="shortcut icon" href="https://cdn.hyperdev.com/us-east-1%3A52a203ff-088b-420f-81be-45bf559d01b1%2Ffavicon.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="style.css">
  </head>
  <body>
    <header>
      <h1>
        FCC - QA &amp; Automated Testing
      </h1>
    </header>
    <main>
      <h2>Functional Tests Example</h2>
      <div class="pane">
        <h4>Famous Italian Explorers</h4>
        <form action="/travellers" method="POST" id="f1">
          <label for="i1">surname: </label>
          <input id="i1" type="text" name="surname" placeholder="try with 'Polo'...">
          <button type="submit">submit</button>
        </form>
        <div id="tn"></div>
      </div>
      <div class="pane">
        <p class="specs">
          Input form HTML:<br>
          ----------------<br>
          &lt;input type="text" name="surname"&gt;<br>
          &lt;button type="submit"&gt;submit&lt;/button&gt;<br>
          <br>
          Results div HTML (after Ajax):<br>
          ------------------------------<br>
          &lt;p&gt;first name:&lt;span id="name"&gt;[name]&lt;/span&gt;&lt;/p&gt;<br>
          &lt;p&gt;last name:&lt;span id="surname"&gt;[surname]&lt;/span&gt;&lt;/p&gt;<br>
          &lt;p&gt;dates:&lt;span id="dates"&gt;[birth - death]&lt;/span&gt;&lt;/p&gt;<br>
        </p>
      </div>
    </main>
    <script src='/client.js'></script>
  </body>
</html>
