Skip to content

Commit 4546a35

Browse files
amdcavallaroamdcavallaro
authored
Merge pull request #12 from goldfishdolphin/main
style the appointment scheduler app
2 parents 7604f38 + 658ec0f commit 4546a35

File tree

3 files changed

+72
-65
lines changed

3 files changed

+72
-65
lines changed

‎package.json

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,9 +2,9 @@
22
"name": "appointment-booker",
33
"version": "1.0.2",
44
"description": "Book an appointment, persist the data to firebase and receive a confirmation SMS",
5-
"main": "script/server_messages_api.js",
5+
"main": "script/server_sms_api.js",
66
"scripts": {
7-
"start": "node script/server_messages_api.js",
7+
"start": "node script/server_sms_api.js",
88
"test": "echo \"Error: no test specified\" && exit 1"
99
},
1010
"keywords": [

‎public/index.html

Lines changed: 47 additions & 43 deletions
Original file line numberDiff line numberDiff line change
@@ -1,45 +1,49 @@
11
<!DOCTYPE html>
2-
<html>
3-
<head>
4-
<title>Appointment Scheduler</title>
2+
<html lang="en">
53

6-
<meta charset="utf-8" />
7-
<meta name="viewport" content="width=device-width, initial-scale=1" />
8-
<link rel="stylesheet" href="styles/styles.css" />
9-
</head>
10-
<body>
11-
<main>
12-
<h1>Appointment Scheduler</h1>
13-
<!-- datepicker from html. Source: https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/datetime-local -->
14-
<form action="/appointment" method="POST">
15-
<div>
16-
<label for="slot">Choose your slot: </label>
17-
<input
18-
id="slot"
19-
type="datetime-local"
20-
name="slotdate"
21-
min="2023-06-01T08:30"
22-
max="2025-12-30T16:30"
23-
step="300"
24-
required
25-
/>
26-
<span class="validity"></span>
27-
</div>
28-
<div>
29-
<label for="phonenumber">Your phone number:</label>
30-
<input type="tel" id="phonenumber" name="phonenumber" required />
31-
<span class="validity"></span>
32-
</div>
33-
<div>
34-
<input type="submit" value="Book slot!" />
35-
</div>
36-
</form>
37-
<form action="/cancelAppointment" method="POST">
38-
<div>
39-
<input type="text" name="code" placeholder="code" />
40-
<input type="submit" value="Remove slot!" />
41-
</div>
42-
</form>
43-
</main>
44-
</body>
45-
</html>
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
7+
<title>Appointments</title>
8+
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet"
9+
integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
10+
<link rel="stylesheet" href="./styles/styles.css">
11+
12+
</head>
13+
14+
<body>
15+
<h1>Appointments Scheduler</h1>
16+
<h3>Book your appointments today</h3>
17+
<form action="/appointment" method="POST" id="form">
18+
<div>
19+
<input type="text" id="name" name="fullname" placeholder="Enter Your Full Name" class="form-control" />
20+
</div>
21+
<div class="date">
22+
<input type="datetime-local" id="slot" name="slotdate" min="2023-06-01T00:00" max="2026-06-30T00:00" step="300"
23+
required />
24+
<span class="validity"></span>
25+
</div>
26+
27+
<div>
28+
<input type="tel" name="phonenumber" id="phonenumber" size='50' required placeholder="Enter Your Phone Number">
29+
<span class="validity"></span>
30+
<button class="btn btn-primary" type="submit">
31+
32+
Book a slot
33+
</button>
34+
</div>
35+
<div>
36+
</div>
37+
</form>
38+
<form action="/cancelAppointment" method="POST">
39+
<div>
40+
<input type="text" name="code" placeholder="code" />
41+
<button class="btn btn-primary" type="submit">Remove slot!</button>
42+
</div>
43+
</form>
44+
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
45+
integrity="sha384-kenU1KFdBIe4zVF0s0G1M5b4hcpxyD9F7jL+jjXkk+Q2h455rYXK/7HAuoJl+0I4"
46+
crossorigin="anonymous"></script>
47+
</body>
48+
49+
</html>

‎public/styles/styles.css

Lines changed: 23 additions & 20 deletions
Original file line numberDiff line numberDiff line change
@@ -1,28 +1,31 @@
1-
body {
2-
margin: auto;
3-
width: 50%;
1+
body {
2+
background-color:#152733;
3+
color: whitesmoke;
4+
}
5+
h1, h3{
6+
text-align: center;
7+
margin: 20px;
48
padding: 10px;
59
}
610

7-
div {
8-
margin-bottom: 10px;
9-
display: flex;
10-
align-items: center;
11+
input {
12+
margin: 20px;
13+
padding: 10px;
14+
border-radius: 8px;
15+
width: 250px;
1116
}
17+
/* styles.css */
1218

13-
label {
14-
display: inline-block;
15-
width: 300px;
19+
input:valid + span::after{
20+
content:"✓";
21+
padding: 5px;
22+
color: green;
1623
}
17-
18-
input:invalid+span:after {
19-
content: '✖';
20-
color: red;
21-
padding-left: 5px;
24+
input:invalid + span::after {
25+
content: "✖";
26+
padding: 5px;
27+
color: red !important;
2228
}
23-
24-
input:valid+span:after {
25-
content: '✓';
26-
color: green;
27-
padding-left: 5px;
29+
.form-control{
30+
width: 350px;
2831
}

0 commit comments

Comments
 (0)