Skip to content

Commit

Permalink
Appointmnets-Application
Browse files Browse the repository at this point in the history
  • Loading branch information
@suraj588
suraj588 committed Jan 26, 2021
0 parents commit ad23470
Show file tree
Hide file tree
Showing 6 changed files with 357 additions and 0 deletions.
80 changes: 80 additions & 0 deletions Application/appointments.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
body{
background-color: black;
}
.topNav{
width: 100%;
height: 40px;
display: flex;
flex-flow: row wrap;
background-color: #5f6878;

}
.topNav>div{
margin: auto;
width: fit-content;
height: fit-content;
color: white;
}
.topNav>button{
width: fit-content;
height: 100%;
background-color: #134f63;
color: white;
}
.topNav>button:hover{
cursor: pointer;
border: 2px solid white;
background-color: #134f99;
}

.display{
width: 80%;
height: auto;
display: flex;
flex-flow: row wrap;
margin: 100px auto;
gap: 20px;
justify-content: center;
}
.cards{
width: 30%;
height: auto;
text-align: left;
display: flex;
flex-flow: column;
gap: 10px;
background-color: #a1439b;
border-radius: 20px;
}
.cards>div{
margin-bottom: 5px;
margin-top: 10px;
margin-left: 20px;
color: white;
}
.cards>button{
background-color: #5e81ff;
font-size: 18px;
margin: auto;
}
.noApp{
text-align: center;
}
.paginationCover{
width: fit-content;
height: 30px;
margin: 50px auto;
display: flex;
}
.paginationCover>button{
width: 40px;
height: 40px;
background-color: #cacaca;

}
.paginationCover>button:hover{
cursor: pointer;
color: #3137ed;
background-color:#eef2f4;
font-weight: 600;
}
20 changes: 20 additions & 0 deletions Application/appointments.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="appointments.css">
<title>Appointments</title>
</head>
<body>
<div class="topNav" id="topNav">
<button onclick="redirectAppointmentPage()">Create Appointments</button>
<div> Upcoming Appointments</div>
</div>
<div class="display" id="display">

</div>

<script src="appointments.js"></script>
</body>
</html>
122 changes: 122 additions & 0 deletions Application/appointments.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,122 @@
window.addEventListener('load',displayAppointments);

var data;
var remainder;
var noOfPages;
function displayAppointments(){
let url="http://localhost:3000/appointment";
let xhr=new XMLHttpRequest();
xhr.open("GET",url);
xhr.send();
xhr.onload=function(){
if(xhr.status>=200 && xhr.status<400){
data=[...JSON.parse(xhr.response)];
let length=data.length;
console.log(length)
let perPage=5;
noOfPages=Math.ceil(length/perPage);
remainder=length%perPage;

let paginationCover=document.createElement("div");
paginationCover.setAttribute("class","paginationCover");

let previousBtn=document.createElement("button");
previousBtn.setAttribute("id","previousBtn");
previousBtn.innerHTML="Prev";

// paginationCover.append(previousBtn);

for(let i=1;i<=noOfPages;i++){
let pages=document.createElement("button");
pages.innerHTML=i;
pages.setAttribute("id",`btn${i}`);
pages.addEventListener('click',pageDirect);
paginationCover.append(pages);
}

let nextBtn=document.createElement("button");
nextBtn.setAttribute("id","nextBtn");
nextBtn.innerHTML="Next";

// paginationCover.append(nextBtn);

document.body.append(paginationCover);



let output="";
if(data.length<5){
for(let i=0;i<data.length;i++){
output+=`
<div class="cards">
<div>Name: ${data[i].name}</div>
<div>Age: ${data[i].age}</div>
<div>Gender: ${data[i].gender}</div>
<div>Appointment for: ${data[i].appointment_reason}</div>
<div>At: ${data[i].time}</div>
<div>On: ${data[i].date}</div>
</div>
`
}
document.getElementById("display").innerHTML=output;
}
if(data.length>=5){
for(let i=0;i<5;i++){
output+=`
<div class="cards">
<div>Name: ${data[i].name}</div>
<div>Age: ${data[i].age}</div>
<div>Gender: ${data[i].gender}</div>
<div>Appointment for: ${data[i].appointment_reason}</div>
<div>At: ${data[i].time}</div>
<div>On: ${data[i].date}</div>
</div>
`
}
document.getElementById("display").innerHTML=output;
}
else if(data.length===0){
let empty=`
<div class="cards">
<div class="noApp">No appointments currently.</div>
<button onclick=redirectAppointmentPage() id="create">Create Appointment</button>
</div>
`
document.getElementById("display").innerHTML=empty;
}

}
}
}

function redirectAppointmentPage(){
location.assign("createAppointments.html")
}

function pageDirect(){
let id=(event.target.innerHTML);
let url=`http://localhost:3000/appointment?_page=${id}&_limit=${5}`;

fetch(url)
.then(response=> response.json())
.then(data=>{
let output="";
console.log(data)
for(i in data){
output+=`
<div class="cards">
<div>Name: ${data[i].name}</div>
<div>Age: ${data[i].age}</div>
<div>Gender: ${data[i].gender}</div>
<div>Appointment for: ${data[i].appointment_reason}</div>
<div>At: ${data[i].time}</div>
<div>On: ${data[i].date}</div>
</div>
`
}
document.getElementById("display").innerHTML=output;

})
.catch(error=>console.log(error));
}
64 changes: 64 additions & 0 deletions Application/createAppointments.css
Original file line number Diff line number Diff line change
@@ -0,0 +1,64 @@
body{
background-color: black;
}
.topNav{
width: 100%;
height: 40px;
display: flex;
flex-flow: row wrap;
background-color: #5f6878;

}
.topNav>div{
margin: auto;
width: fit-content;
height: fit-content;
color: white;
}
.topNav>button{
width: fit-content;
height: 100%;
background-color: #134f63;
color: white;
}
.topNav>button:hover{
cursor: pointer;
border: 2px solid white;
background-color: #134f99;
}
.inputCover{
width: 40%;
height: auto;
margin: 100px auto;
background-color: #7e0175;
box-shadow: -10px 10px 10px #a1439b;
display: flex;
flex-flow: column;
gap: 30px;
z-index: 2;
}
.inputCover>input{
width: 90%;
font-size: 22px;
height: 40px;
outline: none;
border: 1px solid white;

margin:10px auto;
}
.inputCover>:nth-child(1){
margin-top: 30px;
}
.inputCover>button{
background-color: #134f63;
color: white;
font-size: 22px;
width: fit-content;
margin: 30px auto;
}
.inputCover>button:hover{
cursor: pointer;
font-weight: 400;
background-color: #134f99;
font-size: 24px;
}
26 changes: 26 additions & 0 deletions Application/createAppointments.html
Original file line number Diff line number Diff line change
@@ -0,0 +1,26 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="createAppointments.css">
<title>Create Appointments</title>
</head>
<body>
<div class="topNav" id="topNav">
<button onclick="redirectAppointmentsPage()"> All Appointments</button>
<div>Create Appointments</div>
</div>
<div class="inputCover" id="inputCover">
<input type="text" id="name" placeholder="Enter Appointees Name"/>
<input type="number" id="age" placeholder="Enter Appointees age"/>
<input type="text" id="gender" placeholder="Enter Appointees gender"/>
<input type="text" id="reason" placeholder="Appointing for ?"/>
<input type="text" id="time" placeholder="Enter Time"/>
<input type="text" id="date" placeholder="Enter Date"/>
<button id="submitBtn" >Submit</button>
</div>

<script src="createAppointments.js"></script>
</body>
</html>
45 changes: 45 additions & 0 deletions Application/createAppointments.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,45 @@

document.getElementById("submitBtn").addEventListener('click',redirectAllAppointmentsPage);

function redirectAllAppointmentsPage(){
let name=document.getElementById("name").value;
let age=document.getElementById("age").value;
let gender=document.getElementById("gender").value;
let reason=document.getElementById("reason").value;
let time=document.getElementById("time").value;
let date=document.getElementById("date").value;
if(!name || !age || !gender || !reason || !time || !date){
alert("Please fill all fields !")
}
else{
let obj={
name:name,
age:age,
appointment_reason:reason,
time:time,
date:date,
gender:gender
}
let json=JSON.stringify(obj);
console.log(json)
var url="http://localhost:3000/appointment";
let xhr= new XMLHttpRequest();
xhr.open("POST",url);
xhr.setRequestHeader("Content-type","application/json;charset=utf-8");
xhr.send(json);
xhr.onload=function(){
if(xhr.status>=200 && xhr.status<400){
alert("Appointment for "+obj.name+" set successfully for "+obj.date);
redirectAppointmentsPage();

}

}
}


}

function redirectAppointmentsPage(){
location.assign("appointments.html");
}

0 comments on commit ad23470

Please sign in to comment.