3 changed files with 283 additions and 0 deletions
-
69index.html
-
149main.css
-
65main.js
@ -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> |
@ -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; |
|||
} |
@ -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'); |
|||
} |
|||
}); |
|||
} |
Write
Preview
Loading…
Cancel
Save
Reference in new issue