Learn to build an income calculator using HTML, CSS, and JavaScript. Step-by-step guide for beginners to calculate daily, monthly, and yearly income easily.
Table of Contents
Understanding your income is important for managing your finances well. Whether you’re a freelancer, part-time worker, or just someone who wants to keep track of their earnings, having a simple tool to calculate your income can help a lot. In this blog, we’ll create an Income Calculator using HTML, CSS, and JavaScript. This easy-to-use web application will let you enter your hourly wage and how many hours you work each day, so you can quickly see your daily, monthly, and yearly earnings.
You don’t need to be an expert to build this calculator. A basic understanding of HTML, CSS, and JavaScript is enough. By the end of this tutorial, you will have a working income calculator that you can customize further. Let’s get started and build this useful tool step by step!
Prerequisites
Before we begin, ensure you have:
- Basic knowledge of HTML, CSS, and JavaScript
- A text editor (like Visual Studio Code or Notepad++)
- A web browser (like Chrome or Firefox) to view your project
Source Code
Step 1 (HTML Code):
First, we will create an HTML file. This will serve as the foundation of our calculator. Copy and paste the following code into a file named index.html. Let's break down the HTMl code:
1. DOCTYPE and HTML Setup:
<!DOCTYPE html>
<html lang="en"><!DOCTYPE html>: Declares that the document follows HTML5.<html lang="en">: Starts the HTML document and specifies the language as English (en).
2. Head Section:
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Income Calculator</title>
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
<link rel="stylesheet" href="styles.css">
</head>- Meta tags:
<meta charset="UTF-8">: Sets the character encoding to UTF-8.<meta name="viewport" content="width=device-width, initial-scale=1.0">: Ensures the page is responsive on different screen sizes.
- Title:
<title>Income Calculator</title>: Sets the title of the web page as "Income Calculator".
- Fonts and Styles:
<link href="https://fonts.googlea...; rel="stylesheet">: Loads the "Poppins" font from Google Fonts.<link rel="stylesheet" href="https://cdnjs.cloudfl..;>: Links to Font Awesome icons.<link rel="stylesheet" href="styles.css">: Links to a custom external stylesheet (styles.css) for additional styling.
3. Body Section:
<body>
.
.
</body>- Main Container:
<div class="container">: A container to hold the entire calculator UI.
- Title with Icon:
<h1><i class="fas fa-calculator"></i> Income Calculator</h1>: Displays the title "Income Calculator" with a calculator icon from Font Awesome.
- Calculator Interface:
- Hourly Rate Input:
<div class="input-group"> <label for="hourly-rate">Hourly Rate:</label> <div class="input-field"> <i class="fas fa-dollar-sign"></i> <input type="number" id="hourly-rate" placeholder="Enter hourly rate"> </div> </div>This block includes:
- A label for the hourly rate input field.
- An input field where users can enter their hourly rate (
type="number"). - A dollar sign icon (
<i class="fas fa-dollar-sign"></i>) inside the input field.
- Hours Worked per Day Input:
<div class="input-group"> <label for="hours-per-day">Hours Worked per Day:</label> <div class="input-field"> <i class="fas fa-clock"></i> <input type="number" id="hours-per-day" placeholder="Enter hours worked per day"> </div> </div>This block includes:
- A label for entering hours worked per day.
- An input field to input hours.
- A clock icon (
<i class="fas fa-clock"></i>).
- Calculate Button:
<button onclick="calculateIncome()"><i class="fas fa-calculator"></i> Calculate</button>- A button that triggers the
calculateIncome()function when clicked. The button also includes a calculator icon.
- A button that triggers the
- Income Display:
<h2>Daily Income: $<span id="daily-income">0.00</span></h2> <h2>Monthly Income: $<span id="monthly-income">0.00</span></h2> <h2>Yearly Income: $<span id="yearly-income">0.00</span></h2>This section displays the calculated daily, monthly, and yearly income using the
<span>elements withidattributes (to be dynamically updated by the script).
- Hourly Rate Input:
4. JavaScript Inclusion:
<script src="script.js"></script>- This line links to an external JavaScript file (
script.js), which will handle the calculation logic for the income based on the hourly rate and hours worked.
Step 2 (CSS Code):
Next, we’ll style our calculator to make it visually appealing. Create a file named styles.css. Here's a detailed breakdown of the code:
1. Global Styles (*):
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}- The universal selector (
*) removes the default margin and padding from all HTML elements. box-sizing: border-box;: Ensures that padding and borders are included in the element's total width and height.
2. Body Styling (body):
body {
font-family: 'Poppins', sans-serif;
background: #825CFF;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
color: #333;
}font-family: 'Poppins', sans-serif;: Uses the "Poppins" font from Google Fonts.background: #825CFF;: Sets a purple background color for the page.height: 100vh;: Makes the body take up the entire viewport height.display: flex; justify-content: center; align-items: center;: Centers the content vertically and horizontally.color: #333;: Sets the default text color to dark gray.
3. Container Styling (.container):
.container {
background: white;
padding: 30px;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
text-align: center;
max-width: 400px;
width: 100%;
animation: fadeInUp 0.5s ease-in-out;
}background: white;: The background color of the container is white.padding: 30px;: Adds padding inside the container.border-radius: 15px;: Rounds the corners of the container.box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);: Adds a subtle shadow to create a 3D effect.text-align: center;: Centers the text inside the container.max-width: 400px; width: 100%;: Limits the container’s maximum width to 400px and ensures it takes up the full available width on smaller screens.animation: fadeInUp 0.5s ease-in-out;: Applies a fade-in animation when the container appears on the screen.
4. Title (h1):
h1 {
font-size: 24px;
margin-bottom: 20px;
color: #333;
}font-size: 24px;: Sets the font size for the title.margin-bottom: 20px;: Adds space below the title.color: #333;: Uses dark gray for the title text.
5. Calculator Layout (.calculator):
.calculator {
display: flex;
flex-direction: column;
align-items: center;
}display: flex; flex-direction: column;: Lays out the calculator content in a vertical stack.align-items: center;: Aligns the content to the center horizontally.
6. Input Group (.input-group):
.input-group {
width: 100%;
margin-bottom: 20px;
text-align: left;
}width: 100%;: Makes the input group take up the full width of its container.margin-bottom: 20px;: Adds space below each input group.text-align: left;: Aligns the label and input fields to the left.
7. Label (label):
label {
font-weight: 600;
margin-bottom: 5px;
display: block;
}font-weight: 600;: Makes the label text bold.margin-bottom: 5px;: Adds space below the label.display: block;: Forces the label to be displayed as a block element.
8. Input Field (.input-field):
.input-field {
position: relative;
width: 100%;
}position: relative;: Positions the icon inside the input field relative to the input.width: 100%;: Ensures the input field takes up the full width of the container.
9. Input Styling (input):
input {
width: 100%;
padding: 12px 15px 12px 40px;
font-size: 16px;
border: 2px solid #e0e0e0;
border-radius: 30px;
transition: border-color 0.3s ease;
}width: 100%;: Ensures the input field stretches to fill the available space.padding: 12px 15px 12px 40px;: Adds padding to the input, with extra space on the left for the icon.font-size: 16px;: Sets the font size inside the input field.border: 2px solid #e0e0e0;: Adds a light gray border around the input.border-radius: 30px;: Rounds the corners of the input.transition: border-color 0.3s ease;: Smooth transition when the input border changes color.
10. Input Focus State (input:focus):
input:focus {
outline: none;
border-color: #825CFF;
}outline: none;: Removes the default focus outline.border-color: #825CFF;: Changes the input border color to purple when it’s focused.
11. Icons in Input Fields (.input-field i):
.input-field i {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
color: #825CFF;
font-size: 18px;
}position: absolute;: Positions the icon inside the input field.left: 15px; top: 50%; transform: translateY(-50%);: Centers the icon vertically and aligns it to the left.color: #825CFF;: Colors the icon purple.font-size: 18px;: Sets the size of the icon.
12. Button Styling (button):
button {
font-family: 'Poppins', sans-serif;
padding: 12px 30px;
font-size: 16px;
background-color: #825CFF;
color: white;
border: none;
border-radius: 30px;
cursor: pointer;
box-shadow: 0 10px 20px rgba(116, 235, 213, 0.4);
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}padding: 12px 30px;: Adds padding around the button text.background-color: #825CFF; color: white;: Colors the button purple with white text.border: none; border-radius: 30px;: Removes the border and adds rounded corners.cursor: pointer;: Changes the cursor to a pointer when hovered.box-shadow: 0 10px 20px rgba(116, 235, 213, 0.4);: Adds a box shadow for a subtle 3D effect.transition: all 0.3s ease;: Animates any changes to the button smoothly.display: flex; align-items: center; justify-content: center;: Centers the button text and icon.gap: 8px;: Adds space between the button text and icon.
13. Button Hover State (button:hover):
button:hover {
background-color: #6334fd;
}- Changes the button background color to a darker purple when hovered.
14. Headings (h2):
h2 {
margin-top: 20px;
font-size: 20px;
}margin-top: 20px;: Adds space above each heading.font-size: 20px;: Sets the font size for the headings.
15. Animation (@keyframes fadeInUp):
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}- Defines a
fadeInUpanimation that fades in the element and moves it upwards from 30px to its final position.
16. Responsive Design (@media):
@media (max-width: 480px) {
.container {
padding: 20px;
}
input {
padding: 10px 10px 10px 35px;
}
button {
padding: 10px 20px;
}
}- Media query for screens smaller than 480px (like mobile devices):
- Reduces padding inside the
.container. - Adjusts input padding to fit better on smaller screens.
- Adjusts button padding to maintain a balanced look on smaller screens.
- Reduces padding inside the
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: 'Poppins', sans-serif;
background: #825CFF;
height: 100vh;
display: flex;
justify-content: center;
align-items: center;
color: #333;
}
.container {
background: white;
padding: 30px;
border-radius: 15px;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
text-align: center;
max-width: 400px;
width: 100%;
animation: fadeInUp 0.5s ease-in-out;
}
h1 {
font-size: 24px;
margin-bottom: 20px;
color: #333;
}
.calculator {
display: flex;
flex-direction: column;
align-items: center;
}
.input-group {
width: 100%;
margin-bottom: 20px;
text-align: left;
}
label {
font-weight: 600;
margin-bottom: 5px;
display: block;
}
.input-field {
position: relative;
width: 100%;
}
input {
width: 100%;
padding: 12px 15px 12px 40px;
font-size: 16px;
border: 2px solid #e0e0e0;
border-radius: 30px;
transition: border-color 0.3s ease;
}
input:focus {
outline: none;
border-color: #825CFF;
}
.input-field i {
position: absolute;
left: 15px;
top: 50%;
transform: translateY(-50%);
color: #825CFF;
font-size: 18px;
}
button {
font-family: 'Poppins', sans-serif;
padding: 12px 30px;
font-size: 16px;
background-color: #825CFF;
color: white;
border: none;
border-radius: 30px;
cursor: pointer;
box-shadow: 0 10px 20px rgba(116, 235, 213, 0.4);
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
}
button:hover {
background-color: #6334fd;
}
h2 {
margin-top: 20px;
font-size: 20px;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (max-width: 480px) {
.container {
padding: 20px;
}
input {
padding: 10px 10px 10px 35px;
}
button {
padding: 10px 20px;
}
} Step 3 (JavaScript Code):
Finally, we need to add the logic to calculate the income. Create a file named script.js. Here's a breakdown of how the code works:
1. Getting User Input:
var hourlyRate = parseFloat(document.getElementById("hourly-rate").value) || 0;
var hoursPerDay = parseFloat(document.getElementById("hours-per-day").value) || 0;document.getElementById("hourly-rate").value: Fetches the value entered in the input field with theid="hourly-rate". This represents the hourly rate (the amount earned per hour).document.getElementById("hours-per-day").value: Fetches the value entered in the input field with theid="hours-per-day". This represents the number of hours the user works per day.parseFloat(): Converts the string input to a floating-point number (a decimal). If the input is empty or invalid,0will be used (thanks to|| 0, which acts as a fallback).
2. Calculating the Daily, Monthly, and Yearly Income:
var dailyIncome = hourlyRate * hoursPerDay;
var monthlyIncome = dailyIncome * 22;
var yearlyIncome = dailyIncome * 260;dailyIncome = hourlyRate * hoursPerDay: Multiplies the hourly rate by the number of hours worked per day to calculate the daily income.monthlyIncome = dailyIncome * 22: Multiplies the daily income by22(the assumed number of working days in a month) to calculate the monthly income.yearlyIncome = dailyIncome * 260: Multiplies the daily income by260(the assumed number of working days in a year, based on 52 weeks x 5 working days) to calculate the yearly income.
3. Displaying the Results:
document.getElementById("daily-income").textContent = dailyIncome.toFixed(2);
document.getElementById("monthly-income").textContent = monthlyIncome.toFixed(2);
document.getElementById("yearly-income").textContent = yearlyIncome.toFixed(2);document.getElementById("daily-income").textContent: Sets the text content of the HTML element withid="daily-income"to display the calculated daily income.toFixed(2)ensures the result is displayed with two decimal places.- Similarly, the monthly and yearly income values are displayed in the respective HTML elements (
id="monthly-income"andid="yearly-income"), also formatted to two decimal places usingtoFixed(2).
function calculateIncome() {
var hourlyRate = parseFloat(document.getElementById("hourly-rate").value) || 0;
var hoursPerDay = parseFloat(document.getElementById("hours-per-day").value) || 0;
var dailyIncome = hourlyRate * hoursPerDay;
var monthlyIncome = dailyIncome * 22;
var yearlyIncome = dailyIncome * 260;
document.getElementById("daily-income").textContent = dailyIncome.toFixed(2);
document.getElementById("monthly-income").textContent = monthlyIncome.toFixed(2);
document.getElementById("yearly-income").textContent = yearlyIncome.toFixed(2);
}Final Output:
Conclusion:
You've now successfully built an Income Calculator using HTML, CSS, and JavaScript! This project has not only provided you with a practical tool to calculate income based on hourly rates but has also enhanced your web development skills. You learned how to structure an HTML page, style it with CSS, and implement logic using JavaScript.
The calculator allows users to enter their hourly wage and hours worked, then quickly computes their daily, monthly, and yearly income. This can be incredibly useful for freelancers and part-time workers who need to track their earnings for budgeting or tax purposes.
Feel free to expand on this project by adding features such as:
- A clear button to reset the input fields.
- Additional fields for expenses, allowing users to calculate their net income.
- Saving results to local storage for future reference.
As you continue your journey in web development, remember that each project is an opportunity to learn and grow. This income calculator is just the beginning—there are countless possibilities for enhancing and diversifying your skill set. Keep coding and exploring new ideas!
That’s a wrap!
I hope you enjoyed this post. Now, with these examples, you can create your own amazing page.
Did you like it? Let me know in the comments below 🔥 and you can support me by buying me a coffee
And don’t forget to sign up to our email newsletter so you can get useful content like this sent right to your inbox!
Thanks!
Faraz 😊
Tags: income calculator using html css javascript, how to create income calculator web app, build income calculator for beginners, source code, html css calculator, income calculator, html calculator, javascript calculator
End of the article
