Browse Source

Initial webdev commit

master
pop1040 4 years ago
parent
commit
50dd1baa29
  1. 69
      index.html
  2. 149
      main.css
  3. 65
      main.js

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

149
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;
}

65
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');
}
});
}
Loading…
Cancel
Save