Creating an appointment reminder app with Node SDK

Creating the UI

In Node.js apps, front end components live in two folders. The views folder contains HTML files which are rendered by the application. Stylesheets are contained in the public/css folder.

Note:

It's worth noting that we use HTML pages even though our app renders pages using the EJS view engine. This is because we included the following line in our app.js file:

Copy

Copied

app.engine('html', require('ejs').renderFile);

This allows you to use HTML pages in a Node.js app and makes it easy to substitute different view engines such as, Jade.

Booking page

Let's add the appointment booking page. In views, open patient_details.html and paste in the following code:

Copy

Copied

<!DOCTYPE html PUBLIC "-//IETF//DTD HTML//EN">
<html>
  <head>
    <meta charset="utf-8" />
    <title>Sinch Appointment Confirmation</title>
    <link href="/css/style.css" rel="stylesheet" type="text/css" />
  </head>
  <body>
    <!--If form submission results in error, flash error message -->
    <% if (message) { %>
    <div class="flashes"><%= message %></div>
    <% } %>

    <div>
      <h1>Sinch Hospital Appointment Scheduler</h1>
    </div>
    <div class="container">
      <form action="appointment" method="POST" onsubmit="">
        <div class="row">
          <div class="col-25">
            <label for="name">Patient: </label>
          </div>
          <div class="col-75">
            <input
              type="text"
              name="patient"
              placeholder="Patient name"
              required
            />
          </div>
        </div>
        <div class="row">
          <div class="col-25">
            <label for="treatment">Doctor: </label>
          </div>
          <div class="col-75">
            <input
              type="text"
              name="doctor"
              placeholder="Name of doctor"
              required
            />
          </div>
        </div>
        <div class="row">
          <div class="col-25">
            <label for="appointment-date">Appointment date: </label>
          </div>
          <div class="col-75">
            <input type="date" id="appointment_date" name="appointment_date" required />
          </div>
        </div>
        <div class="row">
          <div class="col-25">
            <label for="appointment_time">Appointment time: </label>
          </div>
          <div class="col-75">
            <input type="time" id="appointment_time" name="appointment_time" required />
          </div>
        </div>
        <div class="row">
          <div class="col-25">
            <label for="phone">Patient mobile number: </label>
          </div>
          <div class="col-75">
            <input
              type="tel"
              id="phone"
              name="phone"
              placeholder="01234..."
              required
            />
          </div>
        </div>
        <div>
          <input type="submit" value="Add Appointment" />
        </div>
      </form>
    </div>
  </body>
</html>

Success page

Now let's add the success page. Open success.html and paste in the following code.

Copy

Copied

<html>
  <head>
    <title>Sinch Appointment Confirmation</title>
  </head>
<body>
    <p><em><%=patient %><em> has been scheduled for an appointment with Dr <em><%=doctor %></em>.</p>
    <p>The appointment is set for <%=appointment_datetime %>.</p>
    <p>A reminder message will be sent to the following phone number: <%=phone %>.</p>
  </body>
</html>

Stylesheet

Let's now add the stylesheet. Navigate into the public/css folder and open style.css. Paste in the following code.

Copy

Copied

html {
  font-family: sans-serif;
  background:  rgb(9, 9, 49);
  padding: 1rem;
}
form {
  max-width: 900px;
  height: 22rem;
  padding: 10px;
  margin: 0 auto;
  background: white;
}
h1 {
  font-family: Helvetica, Arial, sans-serif;
  color: #eeeeee;
  margin: 1rem 0;
  text-align: center;
  font-weight: normal;
}

input[type="submit"] {
  align-self: start;
  min-width: 10rem;  
  background-color: lightgray;
  padding: 12px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  float:right;  
}

input[type="submit"]:hover {
  background-color: rgb(9, 9, 49);
  color: white;
}

label {
  padding: 12px 12px 12px 0;
  display: inline-block;
}





.container {
  border-radius: 5px;
  background-color: rgb(255, 190, 60);;
  padding: 20px;
}

.col-25 {
  float: left;
  width: 25%;
  margin-top: 6px;
}

.col-75 {
  float: left;
  width: 75%;
  margin-top: 6px;
}

.row::after {
  content: "";
  display: table;
  clear: both;
}

.flashes{
  height:3rem;
  background-color: red;
  color: white;
  list-style-type: none; 
}

<<< Back Next >>>