modifying index.html to interact with server

Brian-Earl · Aug 29, 2019 · 8675c35 · 8675c35
1 parent 176465e
commit 8675c35
Showing 1 changed file with 32 additions and 11 deletions.
diff --git a/public/index.html b/public/index.html
@@ -1,20 +1,41 @@
+<!doctype html>
 <html lang="en">
   <head>
     <title>CS4241 Assignment 2</title>
     <meta charset="utf-8">
-    <link rel="stylesheet" type="text/css" href="css/style.css"/>
-    <script src="js/scripts.js"></script>
   </head>
   <body>
-    <div class="header">
-    	<h1>Assignment 2</h1>
-    </div>
+    <form action="">
+      <input type='text' id='yourname' value="your name here">
+      <button>submit</button>
+    </form>
+  </body>
+  <script>
 
-    <div class="content">
-    	<p>
-    		[Your content here]
-    	</p>
-    </div>
+  const submit = function( e ) {
+    // prevent default form action from being carried out
+    e.preventDefault()
 
-  </body>
+    const input = document.querySelector( '#yourname' ),
+          json = { yourname: input.value },
+          body = JSON.stringify( json )
+
+    fetch( '/submit', {
+      method:'POST',
+      body 
+    })
+    .then( function( response ) {
+      // do something with the reponse 
+      console.log( response )
+    })
+
+    return false
+  }
+
+  window.onload = function() {
+    const button = document.querySelector( 'button' )
+    button.onclick = submit
+  }
+
+  </script>
 </html>