# 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: ```javascript 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: ```html Sinch Appointment Confirmation <% if (message) { %>

<%= message %>

<% } %>

Sinch Hospital Appointment Scheduler

``` ### Success page Now let's add the success page. Open `success.html` and paste in the following code. ```html Sinch Appointment Confirmation

<%=patient %> has been scheduled for an appointment with Dr <%=doctor %>.

The appointment is set for <%=appointment_datetime %>.

A reminder message will be sent to the following phone number: <%=phone %>.
``` ### Stylesheet Let's now add the stylesheet. Navigate into the `public/css` folder and open `style.css`. Paste in the following code. ```css 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; } ```