Skip to content

Commit

Permalink
First commit
Browse files Browse the repository at this point in the history
  • Loading branch information
@rkayastha98
rkayastha98 committed Sep 16, 2020
1 parent ee95166 commit 3423e11
Show file tree
Hide file tree
Showing 3 changed files with 133 additions and 57 deletions.
37 changes: 36 additions & 1 deletion public/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,6 @@ header{
.tg .tg-0lax{text-align:left;vertical-align:top}

.tabs{
padding: 2px;
background-color: darksalmon;
color: white;
}
Expand Down Expand Up @@ -56,4 +55,40 @@ header{

#add_box:hover{
color: #b30000;
}

.item1{grid-area: header;}
.item2{grid-area: menu;}
.item3{grid-area: right;}
.item4{grid-area: main;}

.grid-container{
display: grid;
grid-template-areas:
'header header header header header header'
'menu main main main main right'
'menu main main main main right';
grid-gap: 10px;
padding: 10px;
}

button{
background-color: darksalmon;
color: white;
padding: 10px;
width: 13vw;
}

.item2{
background-color: darksalmon;
align-content: center;
width: 15vw;
margin: 15px;
box-shadow: 2px 5px 5px saddlebrown;
border: solid darksalmon;
}

.item2 > button{
background-color: white;
color: darksalmon;
}
143 changes: 90 additions & 53 deletions public/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,23 @@
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href='https://fonts.googleapis.com/css?family=Aclonica' rel='stylesheet'>
<link href='https://fonts.googleapis.com/css?family=Architects Daughter' rel='stylesheet'>
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<div class="grid-container">
<div class="item1">
<header>Work-<span style="font-family:Architects Daughter;color: darksalmon; font-size:110px;font-weight: bolder">Play</span> Balance</header>
<!-- <i id="addBtn" class="material-icons" style="font-size:48px;color:darksalmon;float: right">add_box</i>-->
<button id="addBtn" style="color:darksalmon;float: right">Add New</button>

<button id="addBtn" style="float: right">Add New</button>
</div>

<button id="history" class="tabs">History</button>
<div class="item2">
<button id="history" class="tabs">History</button>
<button id="today" class="tabs">Today</button>
<div id="addBox" style="visibility: collapse;position: absolute; float: right">
<button id="progress" class="tabs">Balance</button>
</div>

<div class="item3" id="addBox" style="visibility: collapse; float: right">
<form action="">
<ul><label for='eventName'>*</label><input type='text' id='eventName' class="inputBoxes" placeholder="Enter event title" ></ul>
<ul><label for="eventDesc"></label><input type="text" id="eventDesc" placeholder="Enter Description"></ul>
Expand All @@ -29,7 +35,7 @@
</form>
</div>

<div id="mainContainer" style="background-color: white; margin: 0 auto;padding: 15px; width: 60vw;height: 60vh;overflow-y: scroll;justify-content: center">
<div class="item4" id="mainContainer" style="background-color: white; margin: 0 auto;padding: 15px; width: 60vw;height: 60vh;overflow-y: scroll;justify-content: center">
<table id="cal" class="tg" style="table-layout: fixed; width: 756px;display: table">
<colgroup>
<col style="width: 178px">
Expand Down Expand Up @@ -162,10 +168,17 @@
</thead>
</table>
</div>
<div id="playProg" style="display: none">
<progress id="prog" value="50" max="100" style="height:100px; color: darksalmon"> 50% </progress>
</div>
</div>
</div>

</body>
<script>

var play=0
var work=0
var total=0

var newName, newDesc, newSTime, newETime, newOption, duration

Expand Down Expand Up @@ -193,70 +206,94 @@
}
}

bool6=(count!=0)
bool6=(count===0)


if(bool1&bool2&bool3&bool4&bool5){
if(bool1&&bool2&&bool3&&bool4&&bool5&&(!bool6)){
const json = { eventName: eName.value, eventDesc:eDesc.value, eventSTime: eSTime.value, eventETime: eETime.value, option: radioBtn.value},
body = JSON.stringify( json )

fetch( '/submit', {
body = JSON.stringify( json )
fetch( '/submit', {
method:'POST',
body
})
.then( function( response ) {
return response.json()
})
.then(function(txt){
addBox.style.visibility = 'hidden';
eName.value=""
eSTime.value=""
eDesc.value=""
eETime.value=""
radioBtn.checked=false
})
.then( function( response ) {
return response.json()
})
.then(function(txt){
addBox.style.visibility = 'hidden';
eName.value=""
eSTime.value=""
eDesc.value=""
eETime.value=""
radioBtn.checked=false

newName=txt['eventName']
newDesc=txt['eventDesc']
newSTime=txt['eventSTime']
newETime=txt['eventETime']
newOption=txt['option']
duration=txt['duration']
console.log(txt)
newName=txt['eventName']
newDesc=txt['eventDesc']
newSTime=txt['eventSTime']
newETime=txt['eventETime']
newOption=txt['option']
duration=txt['duration']
total++
console.log(txt)

var tableRef = document.getElementById('histTable');
var tableRef = document.getElementById('histTable');

var newRow = tableRef.insertRow(tableRef.rows.length);
var newRow = tableRef.insertRow(tableRef.rows.length);

var nameCell = newRow.insertCell(0);
var descCell = newRow.insertCell(1);
var sCell = newRow.insertCell(2);
var durCell = newRow.insertCell(3);
var typeCell = newRow.insertCell(4);
var nameCell = newRow.insertCell(0);
var descCell = newRow.insertCell(1);
var sCell = newRow.insertCell(2);
var durCell = newRow.insertCell(3);
var typeCell = newRow.insertCell(4);

nameCell.innerHTML=newName
descCell.innerHTML=newDesc
sCell.innerHTML=newSTime
durCell.innerHTML=duration
typeCell.innerHTML=newOption

nameCell.innerHTML=newName
descCell.innerHTML=newDesc
sCell.innerHTML=newSTime
durCell.innerHTML=duration
typeCell.innerHTML=newOption

for(j=(parseInt(newSTime.substring(0,2))+1);j<(parseInt(newETime.substring(0,2))+1);j++){
var x = document.getElementById("cal").rows[j].cells;
x[1].innerHTML = newName;

if(newOption==="work"){
x[1].style.backgroundColor = "black"
}else if(newOption==="play"){
x[1].style.backgroundColor = "darkSalmon"
}
}
for(j=(parseInt(newSTime.substring(0,2))+1);j<(parseInt(newETime.substring(0,2))+1);j++){
var x = document.getElementById("cal").rows[j].cells;
x[1].innerHTML = newName;

if(newOption==="work"){
x[1].style.backgroundColor = "black"
work++
}else if(newOption==="play"){
x[1].style.backgroundColor = "darkSalmon"
play++
}
}

playCent=(play/total)*100


})
})

return false
return false
}else{
alert("Please fill all the fields with valid information")
}
}

var elem = document.getElementById("prog");

function playProg() {
prog.style.display='inline'
hist.style.display='none'
cal.style.display="none";
var width = elem.style.width;
setInterval(frame, 10);
function frame() {
if (width >= playCent) {
width--;
elem.style.width = width + '%';
} else {
width++;
elem.style.width = width + '%';
}
}
}

window.onload = function() {
Expand Down
10 changes: 7 additions & 3 deletions public/js/scripts.js
View file
Original file line number Diff line number Diff line change
@@ -1,11 +1,10 @@
// Add some Javascript code here, to run on the front end.

console.log("Welcome to assignment 2!")

var addBox=document.getElementById("addBox")
var cal=document.getElementById("cal")
var hist=document.getElementById("hist")
var today=document.getElementById("today")
var prog=document.getElementById("playProg")

document.getElementById("addBtn").addEventListener("click",function () {
if (addBox.style.visibility === 'hidden') {
Expand All @@ -21,10 +20,15 @@ document.getElementById("addBtn").addEventListener("click",function () {
document.getElementById("history").addEventListener("click",function () {
hist.style.display = 'inline';
cal.style.display="none";

prog.style.display='none'
})

document.getElementById("today").addEventListener("click", function () {
cal.style.display='inline'
hist.style.display='none'
prog.style.display='none'
})

document.getElementById("progress").addEventListener("click", function () {
playProg()
})

0 comments on commit 3423e11

Please sign in to comment.