Tip Splitting App with HTML, CSS, JavaScript and Express
Tags: webdev, tutorial, beginners, node
Published: 2023-04-16 13:58:35

## Prerequisites:

-   Basic knowledge of HTML, CSS, and JavaScript
-   Node.js and npm installed on your computer

## Step 1: Set up the project

-   Create a new directory for your project
-   Open the terminal and navigate to the directory
-   Run `npm init` and follow the prompts to create a package.json file
-   Install Express and ejs using the following command: `npm install express ejs`

## Step 2: Create the server

-   Create a new file called `server.js`
-   Import Express and create a new Express app
-   Set up a static folder to serve static assets (e.g. CSS, images)
-   Set up the view engine to ejs
-   Define a route to serve the home page
-   Listen for incoming requests on a port of your choice

### Server.js

```js
const express = require('express')
const app = express()
const PORT = 3000

// View engine
app.set('view engine', 'ejs')

app.use(express.static('public'))

// Basic routing
app.get('/', (req, res) => {
    res.render('pages/index.ejs')
})

// Starting server
app.listen(PORT, () => {
    console.log(`The server is running on port ${PORT}, You better go catch it!`)
})
```

## Step 3: Create the HTML and CSS

-   Create a new file called `index.ejs` in a new folder called `views`
-   Add the HTML for the form to collect the bill amount, tip percentage, and number of people
-   Add a button to submit the form
-   Add the HTML elements to display the results of the calculation
-   Create a new file called `style.scss` in a new folder called `public/css`
-   Write the CSS to style the form and the results

### In index.ejs
```html

<!DOCTYPE html> 
<html lang="en"> 
	<head>   
		<meta charset="UTF-8">   
		<title>Splitwise</title>   
		<link rel="stylesheet" href="/css/style.css"> 
	</head> 
	<body>   
		<h1>Splitwise</h1>    
		<form id="tip-form">     
			<div>       
				<label for="bill-amount">Bill amount</label>       
				<input type="number" id="bill-amount" name="bill-amount" required>     
			</div>     
			<div>       
				<label for="tip-percentage">Tip percentage</label>       
				<input type="number" id="tip-percentage" name="tip-percentage" required>     
			</div>     
			<div>       <
				label for="num-of-people">Number of people</label>       
				<input type="number" id="num-of-people" name="num-of-people" required>
			</div>     
			<button type="submit">Calculate</button>   
		</form>    
		<div id="results">     
			<div>       
				<label>Total amount:</label><span id="total-amount"></span>     
			</div>     
			<div>       
				<label>Amount per person:</label><span id="amount-per-person"></span>  
			</div>   
		</div>    
		<script src="/js/main.js"></script> 
	</body> 
</html>`
```

### In style.css 
```css
body {
  font-family: Arial, sans-serif;
  margin: 0;
}

h1 {
  text-align: center;
  margin: 2rem 0;
}

form {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 2rem 0;
}

div > label {
  margin-right: 1rem;
}

input[type="number"] {
  width: 10rem;
  padding: 0.5rem;
  margin-bottom: 1rem;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button[type="submit"] {
  padding: 0.5rem;
  background-color: #4CAF50;
  color: #fff;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

#results {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 2rem;
  padding: 1rem;
  background-color: #f2f2f2;
  border-radius: 4px;
}

#results > div {
  display: flex;
  justify-content: space-between;
  margin-bottom: 1rem;
}

#results > div > label {
  font-weight: bold;
  margin-right: 1rem;
}

#results > div > span {
  font-weight: bold;
}


```
### In the main.js

1.  Get the form and the results container elements from the HTML document.
2.  Add an event listener to the form submit button that triggers a function when the button is clicked.
3.  In the function, prevent the default form submission behavior so the page doesn't reload when the button is clicked.
4.  Get the values of the bill amount, tip percentage, and number of people inputs from the form using `querySelector` and `parseFloat` or `parseInt`.
5.  Calculate the total tip amount by multiplying the bill amount by the tip percentage divided by 100.
6.  Calculate the total bill amount by adding the bill amount and the tip amount together.
7.  Calculate the amount per person by dividing the total bill amount by the number of people.
8.  Update the results container HTML with the calculated amounts using `innerHTML` and template literals (backticks).
9.  Display the results to the user on the screen.

```js
// Get the form and the results container 
const form = document.querySelector('form'); 
const resultsContainer = document.querySelector('#results'); 

// Add an event listener to the form submit button 
form.addEventListener('submit', (event) => { 

// Prevent the default form submission behavior 
event.preventDefault(); 

// Get the form inputs 
const billAmount = parseFloat(document.querySelector('#bill-amount').value); 
const tipPercentage = parseFloat(document.querySelector('#tip-percentage').value); 
const numberOfPeople = parseInt(document.querySelector('#number-of-people').value); 

// Calculate the total tip amount and the total bill amount 
const tipAmount = billAmount * (tipPercentage / 100); 
const totalAmount = billAmount + tipAmount; 

// Calculate the amount per person 
const amountPerPerson = totalAmount / numberOfPeople; 

// Display the results 
resultsContainer.innerHTML = ` 
	<div> 
		<label>Total Amount:</label> 
		<span>$${totalAmount.toFixed(2)}</span> 
	</div> 
	<div> 
		<label>Total Tip:</label> 
		<span>$${tipAmount.toFixed(2)}</span> 
	</div> 
	<div> 
		<label>Amount Per Person:</label> 
		<span>$${amountPerPerson.toFixed(2)}</span> 
	</div> `; 
});
```