A Responsive Sales Tax Calculator is an efficient calculator that does the tax calculations perfectly on any input price and is therefore suitable for web applications and educational contents.

Responsive Sales Tax Calculator Using HTML, CSS and JavaScript (Free Source Code)

Byjvcodes

A Responsive Sales Tax Calculator is an efficient calculator that does the tax calculations perfectly on any input price and is therefore suitable for web applications and educational contents.

If you have to include it as a component of a blog post, as a sidebar widget, or as part of a YouTube tutorial, then this calculator is ideal.

I am giving away the free source code for this calculator to help to implement in your real projects easily.

GitHub Source: Responsive Sales Tax Calculator

Features

  • Easy to Customize: The source code formatting is as simple as can be, thereby allowing you to change it as is necessary.
  • Responsive Design: The calculator is quite responsive to any device, it can easily adapt to the size of the screen and provide great functionality.
  • Compatibility: Fully compatible with all current versions of browsers and does not need any plug-ins at all.
  • Clean Code: Clean and clear code helps the primary users to learn starting up and the next level experienced professionals to enhance it.

Technologies Used

  • HTML (Hypertext Markup Language)
  • CSS (Cascading Style Sheets)
  • JS (JavaScript)

Recommended for You

Video Tutorial

Video thumbnail Watch on YouTube

Steps to Build Responsive Sales Tax Calculator

  • Create Project Folder: Begin by making a folder for all the files of the calculator.
  • Create index.html: Create another html for the structure of the calculator to be added.
  • Create style.css: Use the css to style and design the calculator to be written.
  • Create script.js: Include JavaScript to it and enable it for the calculation behind it.
  • Copy & Paste the Code: Below is the source code that needs to be implemented to complete your calculator.

HTML

Here is the HTML code for your index.html file:

<!DOCTYPE html>
<html lang="en">
<head>
  <!-- Developed by JV Codes | jvcodes.com -->
  <meta charset="UTF-8"> <!-- Character encoding for the document -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0"> <!-- Responsive design meta -->
  <title>Sales Tax Calculator</title> <!-- Title displayed in the browser tab -->
  <link rel="stylesheet" href="style.css"> <!-- Link to external CSS file -->
</head>
<body>
  <!-- Main container for the layout -->
  <div class="container">
    <!-- Left section for input fields and buttons -->
    <div class="left-section">
      <h1>Sales Tax Calculator</h1> <!-- Heading for the application -->
      <!-- Input for the price before tax -->
      <div class="form-group">
        <label for="price">Before Tax Price:</label>
        <input type="number" id="price" placeholder="Enter price" />
      </div>
      <!-- Input for the sales tax percentage -->
      <div class="form-group">
        <label for="tax">Sales Tax %:</label>
        <input type="number" id="tax" placeholder="Enter tax rate" />
      </div>
      <!-- Buttons for calculating and clearing inputs -->
      <div class="button-group">
        <button id="calculate-btn">Calculate</button>
        <button id="clear-btn" class="small-btn">Clear</button>
      </div>
    </div>
    <!-- Right section to display results -->
    <div class="right-section">
      <h1>Results:</h1> <!-- Results heading -->
      <div id="result">
        <!-- Placeholder paragraphs for result display -->
        <p>Before Tax Price: <span class="result-value"></span></p>
        <p>Sales Tax: <span class="result-value"></span></p>
        <p>After Tax Price: <span class="result-value"></span></p>
      </div>
    </div>
  </div>
  <!-- External JavaScript file for functionality -->
  <script src="script.js"></script>
</body>
</html>

CSS

Here is the complete code for style.css file to style the Sales Tax Calculator:

/* JVCodes.Com */
body {
    font-family: Arial, sans-serif; /* Set default font */
    background-color: #f8f9fa; /* Light background color */
    display: flex; /* Center content horizontally and vertically */
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0; /* Remove default margin */
}

.container {
    background-color: white; /* White container background */
    padding: 20px; /* Add inner spacing */
    border-radius: 8px; /* Rounded corners */
    box-shadow: 2px 4px 30px rgba(0, 0, 0, 0.6); /* Add shadow for depth */
    width: 100%; /* Full width with max limit */
    max-width: 650px;
    display: flex; /* Flex layout for sections */
    gap: 20px; /* Space between sections */
}

/* Left Section Styles */
.left-section {
    width: 55%; /* Allocate more space for left section */
    padding-right: 10px;
    padding-bottom: 10px;
}

.left-section h1 {
    margin: 0; /* Remove unnecessary margins */
    font-size: 1.9rem; /* Adjust heading size */
    color: #303030; /* Dark gray text */
    margin-top: 5px; /* Reduce space above heading */
    margin-bottom: 15px; /* Add space below heading */
}

/* Right Section Styles */
.right-section {
    width: 45%; /* Allocate remaining space */
    display: flex;
    flex-direction: column; /* Stack elements vertically */
    align-items: flex-start;
    padding: 10px; /* Inner spacing */
    background-color: #f1f1f1; /* Light gray background */
    border-radius: 8px; /* Rounded corners */
    box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2); /* Inner shadow */
}

.right-section h1 {
    margin: 0; /* Reset margin */
    font-size: 1.4rem; /* Smaller heading size */
    color: #a83232; /* Red color */
    margin-top: 10px; /* Add spacing above */
    margin-bottom: 15px; /* Add spacing below */
}

/* Result Section Styles */
#result p {
    margin: 5px 0; /* Compact spacing */
    font-size: 1.2rem; /* Slightly larger text */
    color: #303030; /* Dark text color */
}

.result-value {
    color: #007bff; /* Highlight result values in blue */
}

/* Form Input and Label Styles */
.form-group {
    margin-bottom: 15px; /* Space between form fields */
}

label {
    font-size: 1rem; /* Standard label text size */
    margin-bottom: 5px;
    color: #303030; /* Dark gray color */
    display: block; /* Ensure labels are block-level */
}

input {
    width: 100%; /* Full-width inputs */
    padding: 8px; /* Inner padding */
    font-size: 1rem; /* Standard text size */
    border: 1px solid #a3a3a3; /* Light border color */
    border-radius: 4px; /* Rounded corners */
    margin-top: 5px;
}

/* Button Styles */
button {
    width: 100%; /* Full-width buttons */
    background-color: #007bff; /* Blue background */
    color: white; /* White text */
    font-size: 1.2rem; /* Slightly larger text */
    border: none;
    cursor: pointer; /* Pointer cursor on hover */
    padding: 10px; /* Inner padding */
    border-radius: 4px; /* Rounded corners */
}

button.small-btn {
    width: 48%; /* Smaller buttons */
    font-size: 1rem; /* Standard text size */
    background-color: #6c757d; /* Gray background */
}

button.small-btn:hover {
    background-color: #5a6268; /* Darker gray on hover */
}

button:hover {
    background-color: #0056b3; /* Darker blue on hover */
}

.button-group {
    display: flex; /* Arrange buttons horizontally */
    justify-content: space-between; /* Space between buttons */
    gap: 10px; /* Add space between buttons */
}

input:focus, button:focus {
    outline: none; /* Remove default focus outline */
    border-color: #007bff; /* Highlight border on focus */
}

/* Responsive Design */
@media (max-width: 768px) {
    .container {
        flex-direction: column; /* Stack sections vertically */
        padding-right: 35px; /* Consistent padding */
        margin: 20px; /* Outer spacing */
    }

    .left-section, .right-section {
        width: 100%; /* Full width for smaller screens */
    }

    .right-section {
        margin-top: 0px; /* Spacing between sections */
    }

    .right-section h1 {
        margin-top: 5px; /* Adjust spacing above */
        margin-bottom: 10px; /* Adjust spacing below */
    }
}

JavaScript

Here is the complete code for script.js file to function the calculator:

// Function to calculate sales tax
document.getElementById("calculate-btn").addEventListener("click", function () {
    const price = parseFloat(document.getElementById("price").value);
    const taxRate = parseFloat(document.getElementById("tax").value);
  
    if (isNaN(price) || isNaN(taxRate)) {
      alert("Please enter valid numbers for price and tax rate.");
      return;
    }
  
    const salesTax = (price * taxRate) / 100;
    const totalPrice = price + salesTax;
  
    const resultValues = document.querySelectorAll(".result-value");
    resultValues[0].textContent = `$${price.toFixed(2)}`;
    resultValues[1].textContent = `${taxRate.toFixed(2)}% or $${salesTax.toFixed(2)}`;
    resultValues[2].textContent = `$${totalPrice.toFixed(2)}`;
  });
  
  // Function to clear inputs and results
  document.getElementById("clear-btn").addEventListener("click", function () {
    document.getElementById("price").value = "";
    document.getElementById("tax").value = "";
  
    const resultValues = document.querySelectorAll(".result-value");
    resultValues.forEach(value => {
      value.textContent = ""; // Clear results
    });
  });

Download Source Code

Full source code of this Responsive Sales Tax Calculator is freely available here without the restriction on the usage right. You just have to click the button below to get it and apply it to your projects.

Download Source Code

Conclusion

The Responsive Sales Tax Calculator using HTML CSS and javascript is an intelligent tool for adding to a site functionality. Feel free to use this code and remember to link back to JV Source Codes in your projects.

Please kindly subscribe to my channel for more helpful tutorials. If you have any problems, please leave them in the comments, and I will reply to you as soon as I can!

Download JV Source Codes

Similar Posts

Responsive Sidebar Menu with Social Media Buttons
| | |

Responsive Sidebar Menu with Social Media Buttons Using HTML and CSS

Having an active sidebar menu using social media icon will help in enhancing the navigation of the sections in a website while having buttons to social media accounts. Here in this article, I will help you how you can create a responsive sidebar menu with proper icons and nice animation. For your convenience, you will…

Responsive Sidebar Menu With Dark and Light Mode
| | |

Responsive Sidebar Menu With Dark and Light Mode Using HTML, CSS and JavaScript

Responsive Sidebar Menu With Dark and Light Mode Using HTML, CSS & JavaScript allows you to make your website more interactive and beautiful. This menu concerns users’ preferences of dark and light viewing modes as well as convenience in navigation regardless of the time of the day. The code written for this guide is completely…

Image Comparison Slider
| | |

Image Comparison Slider in HTML, CSS and JavaScript

Do you want to implement a feature on your website that will enable someone to compare two images simultaneously? Look no further! So in this article, I will share with you Free Source Codes of an Image Comparison Slider in HTML, CSS, JavaScript. Here, I found that this slider is good for using the ‘before…

How to Create a Scientific Calculator Using HTML CSS JavaScript Free Source Code
| |

Responsive Scientific Calculator Using HTML, CSS and JavaScript (Free Source Code)

Here I am going to give you the free source code to create the Responsive Scientific Calculator using HTML, CSS, and JavaScript. This modern calculator is built for compatibility, working on desktops and smartphones, and providing a professional look and feel for the calculations given by the users. GitHub Source: Responsive Scientific Calculator Features Here…

Leave a Reply

Your email address will not be published. Required fields are marked *