Tip Splitting App with HTML, CSS, JavaScript and Express

#webdev #tutorial #beginners #node

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

DEV Community

Tip Splitting App with HTML, CSS, JavaScript and Express

Prerequisites:

Step 1: Set up the project

Step 2: Create the server

Server.js

Step 3: Create the HTML and CSS

In index.ejs

In style.css

In the main.js

Top comments (0)

Read next

React Router has merged with Remix, should you use a different router?

Understanding Node.js: A Comprehensive Guide

10 Essential Questions to Ask When Starting with NumPy Data Manipulation

You Won't Believe How Easy It Is to Host Your Flutter App on Firebase for Free! ✨