|
|
@@ -0,0 +1,113 @@
|
|
|
+<html>
|
|
|
+<head>
|
|
|
+<style>
|
|
|
+body {
|
|
|
+ width:80vw;
|
|
|
+ margin-left:auto;
|
|
|
+ margin-right:auto;
|
|
|
+ font-family:sans-serif;
|
|
|
+ }
|
|
|
+#output {white-space:pre;}
|
|
|
+#output>div {margin-bottom:20px;}
|
|
|
+section {background-color:#e46920;padding:15px;margin-top:40px;}
|
|
|
+section:first-of-type>div {
|
|
|
+ display:inline-block;
|
|
|
+ padding:20px;
|
|
|
+ margin-right:20px;
|
|
|
+ vertical-align:middle;
|
|
|
+ background-color: #e46920;
|
|
|
+ box-shadow: 0 0 30px #71340f;
|
|
|
+ }
|
|
|
+h1,h2,h3 {color:#bde420;}
|
|
|
+h1 {font-size:50px;}
|
|
|
+h3 {font-size:30px;}
|
|
|
+button {
|
|
|
+ padding:10px;
|
|
|
+ border-radius:10px;
|
|
|
+ border:none;
|
|
|
+ background-color:white;
|
|
|
+ font-weight:bold;
|
|
|
+ }
|
|
|
+textarea {
|
|
|
+ height:100px;
|
|
|
+ width:300px;
|
|
|
+ display:block;
|
|
|
+ margin-bottom:20px;
|
|
|
+ }
|
|
|
+
|
|
|
+</style>
|
|
|
+</head>
|
|
|
+<body>
|
|
|
+
|
|
|
+<h1>my first frontend</h1>
|
|
|
+
|
|
|
+
|
|
|
+<section>
|
|
|
+ <h3>send data to the server</h3>
|
|
|
+
|
|
|
+
|
|
|
+ <div>
|
|
|
+ <button id="request1">meow</button>
|
|
|
+ <br /><br /><br />
|
|
|
+ <button id="request2">random data</button>
|
|
|
+ </div>
|
|
|
+ <div>
|
|
|
+ <textarea id="userInput"></textarea>
|
|
|
+ <button id="request3">submit</button>
|
|
|
+ </div>
|
|
|
+</section>
|
|
|
+<section>
|
|
|
+ <h3>server's response</h3>
|
|
|
+ <!--<img id="catOutput" src="">-->
|
|
|
+ <div id="output"></div>
|
|
|
+</section>
|
|
|
+
|
|
|
+</body>
|
|
|
+
|
|
|
+
|
|
|
+<script type="text/javascript" src="jquery.js"></script>
|
|
|
+<script>
|
|
|
+// when a button is clicked, send data to the server
|
|
|
+$("button").click(function()
|
|
|
+ {
|
|
|
+ // onscreen log - historical requests and responses
|
|
|
+ // if the meow button is clicked, send the string "meow" to the server
|
|
|
+ if($(this).attr("id") === "request1")
|
|
|
+ {var data = "meow";}
|
|
|
+ // if the random button is clicked, come up with a random string of random length to send
|
|
|
+ else if($(this).attr("id") === "request2")
|
|
|
+ {
|
|
|
+ var characters = 'ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789.,";\/?<>';
|
|
|
+ var cl = characters.length;
|
|
|
+ var stringLength = Math.floor(Math.random()*300);
|
|
|
+ var data = "";
|
|
|
+ for(var i=0;i<stringLength;i++)
|
|
|
+ {
|
|
|
+ data += characters[Math.floor(Math.random()*cl)];
|
|
|
+ }
|
|
|
+ }
|
|
|
+ // if the text box button is clicked, send the content of the text box
|
|
|
+ else if($(this).attr("id") === "request3")
|
|
|
+ {var data = $("#userInput").val();}
|
|
|
+ // send the data to the server and display the response
|
|
|
+ $.ajax({
|
|
|
+ url:"mmcgo.com",
|
|
|
+ type:"post",
|
|
|
+ data:{},
|
|
|
+ success:function(returnData)
|
|
|
+ {
|
|
|
+ returnData = "server says yay!";
|
|
|
+ var temp = $("<div></div>");
|
|
|
+ temp.append("<div>request: "+data+"</div>")
|
|
|
+ temp.append("<div>response: "+returnData+"</div>")
|
|
|
+
|
|
|
+ $("#output").prepend(temp);
|
|
|
+ //var catWidth = Math.floor(Math.random()*300);
|
|
|
+ //var catHeight = Math.floor(Math.random()*300);
|
|
|
+ //$("#catOutput").attr("src","http://placekitten.com/"+catWidth+"/"+catHeight);
|
|
|
+ }
|
|
|
+ });
|
|
|
+
|
|
|
+ });
|
|
|
+</script>
|
|
|
+</html>
|
