wesvirus
/
VS_CODE


			
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113
							<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>