Initial webdev commit

4 years ago · 50dd1baa29
3 changed files with 283 additions and 0 deletions
--- a/index.html
+++ b/index.html
@ -0,0 +1,69 @@
+<!DOCTYPE html>
+<html>
+<head>
+	<meta charset="utf-8" />
+	<meta http-equiv="X-UA-Compatible" content="IE=edge">
+	<title>Wishlist/</title>
+	<meta name="viewport" content="width=device-width, initial-scale=1">
+	<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
+	<script src="main.js"></script>
+</head>
+<body>
+	<div class="header">
+		<h1>Wishlist/</h1>
+		<p>A place to post your ideas, comments, and wishes for COSI</p>
+	</div>
+	<div class="content">
+		<div class="center">
+			<label class="bestButton" for="commentModal">Add wish</label>
+		</div>
+		<div id="comments">
+			<h2 class="center">Ideas:</h2>
+			<div id="search" class="center">
+				<div class="ATF-container paddVertically">
+					<div>
+						<input id="search-comment-name" autocomplete="off" spellcheck="false" autocorrect="off" required="" oninput="search(document.getElementById('search-comment-name').value, document.getElementById('search-comment-text').value);">
+						<span>Name</span>
+						<div></div>
+					</div>
+				</div>
+				<div class="ATF-container paddVertically">
+					<div>
+						<input id="search-comment-text" autocomplete="off" spellcheck="false" autocorrect="off" required="" oninput="search(document.getElementById('search-comment-name').value, document.getElementById('search-comment-text').value);">
+						<span>Text</span>
+						<div></div>
+					</div>
+				</div>
+			</div>
+			<div id="commentsContent">
+
+			</div>
+		</div>
+	</div>
+	<input type="checkbox" id="commentModal">
+	<div>
+		<div class="modal">
+			<div class="right">
+				<label for="commentModal" class="close">X</label>
+			</div>
+			<div class="ATF-container paddVertically">
+				<div>
+					<input id="add-comment-name" autocomplete="off" spellcheck="false" autocorrect="off" required="">
+					<span>Name</span>
+					<div></div>
+				</div>
+			</div>
+			<div class="ATF-container paddVertically">
+				<div>
+					<input id="add-comment-text" autocomplete="off" spellcheck="false" autocorrect="off" required="">
+					<span>Comment</span>
+					<div></div>
+				</div>
+			</div>
+			<div class="center">
+				<button class="bestButton" onclick="submitComment(document.getElementById('add-comment-name').value, document.getElementById('add-comment-text').value);">Add</button>
+			</div>
+		</div>
+	</div>
+</body>
+</html>
--- a/main.css
+++ b/main.css
@ -0,0 +1,149 @@
+/* Awesome TextField CSS (By Tom Withiam)*/
+.ATF-container{
+	padding: 0px 0px;
+	position: relative;
+	background-color: rgb(255, 255, 255);
+	display: inline-block;
+}
+.ATF-container>div{
+	position: relative;
+	top: 0px;
+	left: 0px;
+	padding-top: 16px;
+}
+.ATF-container input{
+	border: none;
+	border-bottom: 1px solid rgb(156, 156, 156);
+	font-size: 20px;
+	color: rgb(119, 119, 119);
+	width: 500px;
+	padding: 1px;
+}
+.ATF-container input:focus{
+	outline: none; /* Because Chrome */
+}
+.ATF-container input ~ div{
+	display: block;
+	margin-top: -1px;
+	z-index: 1;
+	border-bottom: 2px solid rgb(149, 3, 168);
+	transform: scaleX(0);  
+	transition: transform 250ms ease-in-out;
+}
+.ATF-container input ~ span{
+	transition: all 200ms ease-in-out; 
+	position: absolute;
+	/* top:16px;
+	left: 1px; */
+	transform: translate(0, 16px) scale(1);
+	transform-origin: top left;
+	top: 0px;
+	left: 1px;
+	font-family: Arial, Helvetica, sans-serif;
+	color: rgb(173, 173, 173);
+	font-size: 20px;
+	pointer-events:none;
+}
+.ATF-container input:focus ~ span, .ATF-container input:valid ~ span{
+	/* top: 0px; */
+	/* left: 1px; */
+	/* font-size: 14px; */
+	transform: translate(0, 0) scale(0.7);
+}
+.ATF-container input:invalid {
+	box-shadow: none;
+}
+.ATF-container input:focus ~ div{
+	transform: scaleX(1);
+}
+/* end of Awesome TextField CSS */
+
+
+body{
+	font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
+	min-height: 100vh;
+	padding: 0;
+	margin: 0;
+}
+.header{
+	font-size: 48;
+	text-align: center;
+	padding: 10vh 0px 5vh;
+}
+#commentModal{
+	display: none;
+}
+input#commentModal + div{
+	display: none;
+	position: fixed;
+	top: 0;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	background-color: rgba(143, 143, 143, 0.425);
+	align-items: center;
+	justify-content: center;
+}
+input#commentModal:checked + div{
+	display: flex;
+}
+
+.modal{
+	padding: 16px;
+	border-radius: 8px;
+	background: white;
+	display: flex;
+	flex-direction: column;
+	box-shadow: 0px 0px 4px 0px rgba(128, 128, 128, 0.5);
+}
+.center{
+	display: flex;
+	justify-content: center;
+}
+.right{
+	display: flex;
+	justify-content: end;
+}
+.bestButton{
+	margin: 10px;
+	padding: 8px 16px;
+	border: none;
+	background-color: blueviolet;
+	color: white;
+	font-size: 20px;
+	border-radius: 4px;
+}
+.bestButton:hover{
+	cursor: pointer;
+}
+.close{
+	width: 24px;
+	height: 24px;
+	align-items: center;
+	justify-content: center;
+	display: flex;
+	border-radius: 50%;
+	padding: 8px;
+	font-size: 24px;
+}
+.close:hover{
+	background-color: rgb(223, 197, 235);
+}
+#commentsContent{
+	padding-top: 30px;
+}
+.comment{
+	text-align: center;
+	display: flex;
+	justify-content: center;
+}
+.comment > p{
+	padding: 5px 15px;
+}
+#comments{
+	
+}
+#search > div.ATF-container{
+	padding-left: 10px;
+	padding-right: 10px;
+}
--- a/main.js
+++ b/main.js
@ -0,0 +1,65 @@
+function request(input, callback){
+	// console.log(JSON.stringify(input));
+	console.log('sending');
+	let xhr = new XMLHttpRequest();
+	xhr.open('POST', '/api/', true);
+
+	//Send the proper header information along with the request
+	xhr.setRequestHeader('Content-Type', 'application/json');
+
+	xhr.onreadystatechange = function() { // Call a function when the state changes.
+		if (this.readyState === XMLHttpRequest.DONE && this.status === 200) {
+			let resp = JSON.parse(xhr.responseText);
+			console.log(resp);
+			callback(resp);
+		}
+	}
+	xhr.send(JSON.stringify(input)); 
+	console.log('sent');
+}
+
+function search(user, text){
+	request({action:'searchComments',name:user,text:text}, (response)=>{
+		if(response.success){
+			let comEl = document.getElementById('commentsContent');
+			comEl.innerHTML = '';
+			response.comments.forEach((com)=>{
+				comEl.insertAdjacentHTML('beforeend',
+				`<div class="comment">
+					<p class="comment-username">
+						${com.name}
+					</p>
+					<p class="comment-text">
+						${com.text}
+					</p>
+				</div>`);
+			});
+		}else{
+			console.log('uh-ho');
+		}
+	});
+}
+window.onload = function(){
+	document.onkeypress = function(evt) {
+		evt = evt || window.event;
+		if (evt.keyCode == 27) {
+			qSelectAll(document, 'body > input[type="checkbox"]:checked').forEach(el => el.checked = false); //escape out of any modal
+		}
+	};
+	search(document.getElementById('search-comment-name').value, document.getElementById('search-comment-text').value);
+}
+function qSelectAll(el, str){
+	return Array.prototype.slice.call(el.querySelectorAll(str));
+}
+function submitComment(name, comment){
+	request({action:'addComment', name:name, text:comment}, (resp)=>{
+		if(resp.success){
+			search(document.getElementById('search-comment-name').value, document.getElementById('search-comment-text').value);
+			document.getElementById('commentModal').checked = false;
+			document.getElementById('search-comment-name').value = '';
+			document.getElementById('search-comment-text').value = '';
+		}else{
+			console.log('uh-ho');
+		}
+	});
+}