Tip Splitting App with HTML, CSS, JavaScript and Express

Daniel Vidar Holm — Sun, 16 Apr 2023 13:58:35 +0000

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

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


<!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

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

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

// 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> `; 
});

Building Splitwise - A Tip Splitting App

Daniel Vidar Holm — Sun, 16 Apr 2023 13:56:26 +0000

As a developer, I wanted to create a simple and easy-to-use tip splitting app that could help people easily split the bill when dining out with friends or colleagues. I named the app Splitwise and used a combination of HTML, CSS, JavaScript, Express, EJS, and Sass to build it.

Here is the live website if you want to take a look

If you want to create your own Tip splitting app you can follow along with this tutorial Tip Splitting App with HTML, CSS, JavaScript and Express

Project Setup and Technologies Used:

I began by setting up the project using Node.js and the Express framework to handle the backend of the application. I used EJS as the templating engine and Sass to write my CSS.

For the frontend, I used HTML and JavaScript to build the user interface. I used Bootstrap for the CSS framework to quickly build a responsive and mobile-friendly design.

Personal Insights:

Building this app taught me a lot about building a full-stack web application. I learned how to set up a Node.js project, use Express to handle HTTP requests, and use EJS to render dynamic content. I also learned how to use Sass to write more efficient and organized CSS code.

In addition, I learned about the importance of proper input validation to prevent errors and improve the user experience. I also learned about the importance of responsive design for a mobile-friendly user interface.

Resources:

I used various resources to help me build this app, including the official documentation of the technologies I used, online tutorials, and stack overflow.

Conclusion:

Splitwise is a simple yet powerful tip splitting app that makes it easy for people to split the bill when dining out with friends or colleagues. Building this app was a great learning experience for me, and I hope that it can help others as well.

DEV Community: Daniel Vidar Holm