Rakesh9100 · arjun-shettigar1605 · Sep 2, 2024 · Sep 2, 2024 · Sep 2, 2024 · Sep 2, 2024
diff --git a/Calculators/Rainwater-Harvesting-Calculator/README.md b/Calculators/Rainwater-Harvesting-Calculator/README.md
@@ -23,4 +23,4 @@ The Rainwater Harvesting Calculator is a web-based application that calculates t
 
 ## Screenshots :-
 
-![image](https://github.com/Rakesh9100/CalcDiverse/assets/73993775/14010ac5-5c23-44c8-bdbb-45281df4bd73)
+![image](https://github.com/Rakesh9100/CalcDiverse/assets/blob/salestaxcalc/results)
diff --git a/Calculators/Sales Tax Calculator/script.js b/Calculators/Sales Tax Calculator/script.js
@@ -0,0 +1,54 @@
+function calcGross() {
+    const netprice = parseFloat(document.getElementById('netprice').value);
+    const rate = parseFloat(document.getElementById('rate').value);
+
+    if (!isNaN(netprice) && !isNaN(rate)) {
+        const taxprice = (netprice * rate) / 100;
+        const gross = netprice + taxprice;
+
+        document.getElementById('taxprice').value = taxprice.toFixed(2);
+        document.getElementById('gross').value = gross.toFixed(2);
+    }
+}
+
+function calcrate() {
+    const gross = parseFloat(document.getElementById('gross').value);
+    const netprice = parseFloat(document.getElementById('netprice').value);
+
+    if (!isNaN(gross) && !isNaN(netprice) && netprice > 0) {
+        const taxprice = gross - netprice;
+        const rate = (taxprice / netprice) * 100;
+
+        document.getElementById('taxprice').value = taxprice.toFixed(2);
+        document.getElementById('rate').value = rate.toFixed(2);
+    }
+}
+
+function init() {
+    const netprice = document.getElementById('netprice').value;
+    const rate = document.getElementById('rate').value;
+    const gross = document.getElementById('gross').value;
+
+    if (netprice && rate) {
+        calcGross();
+    } else if (netprice && gross) {
+        calcrate();
+    } else {
+        alert("Please enter the required fields.");
+    }
+}
+
+function clearVal() {
+    document.getElementById('netprice').value = '';
+    document.getElementById('rate').value = '';
+    document.getElementById('gross').value = '';
+    document.getElementById('taxprice').value = '';
+}
+
+function showi() {
+    document.getElementById('infoPopup').style.display = 'block';
+}
+
+function closeBox() {
+    document.getElementById('infoPopup').style.display = 'none';
+}
diff --git a/Calculators/Sales-Tax-Calculator/README.md b/Calculators/Sales-Tax-Calculator/README.md
@@ -0,0 +1,24 @@
+    # <p align="center">Sales Tax Calculator</p>
+
+    ## Description :-
+
+    This project is a web-based sales tax calculator that allows users to compute the gross amount and tax amount based on the net price and tax rate, or to determine the tax rate based on the net and gross amounts. It also includes a pop-up information window as a user guide.
+
+    ## Tech Stacks :-
+
+    - HTML
+    - CSS
+    - JavaScript
+
+    ## How To Use :-
+
+    - First, Input the amount before tax in the "Net Price" field.
+    - Second, Input the percentage of tax to be applied in the "Tax Rate (%)" field.
+    - Then Click the "Calculate" button to compute the gross amount (total price including tax) and the tax amount.
+    - If you know the gross amount and net price but want to find out the tax rate, enter these values and click "Calculate" to determine the tax rate.
+    - Click the "Clear" button to reset all fields and start a new calculation.
+    - Click the "i" button to display a pop-up with information about each field and its purpose.
+
+    ## Screenshots :-
+    ![Image](https://github.com/user-attachments/assets/e35b139f-1f4f-422e-9ae8-76f5d3099e11)
+
diff --git a/Calculators/Sales-Tax-Calculator/i.png b/Calculators/Sales-Tax-Calculator/i.png
diff --git a/Calculators/Sales-Tax-Calculator/index.html b/Calculators/Sales-Tax-Calculator/index.html
@@ -0,0 +1,56 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Sales Tax Calculator</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <div class="calculator">
+        <a href="javascript:void(0)" onclick="showi()" id="infoButton">     <!--javascript:void(0) blocks you from navigating to any link, when clicked-->
+            <img src="i.png" alt="Info" />
+        </a>
+        <h1>Sales Tax Calculator</h1>
+
+        <label id="net" for="netprice">Net Price:</label>
+        <div class="input-group">
+            <span class="currency-symbol">₹</span>
+            <input type="number" id="netprice" placeholder="Enter Net Price">
+        </div>
+
+        <label id="trate" for="rate">Tax Rate (%):</label>
+        <input type="number" id="rate" placeholder="Enter Tax Rate">
+
+        <label id="grosslabel" for="gross">Gross Amount:</label>
+        <div class="input-group">
+            <span class="currency-symbol">₹</span>
+            <input type="number" id="gross" placeholder="Enter Gross Amount">
+        </div>
+
+        <label id="tax" for="taxprice">Tax Amount:</label>
+        <div class="input-group">
+            <span class="currency-symbol">₹</span>
+            <input type="number" id="taxprice" readonly>
+        </div>
+
+        <div class="buttons">
+            <button id="green" onclick="init()">Calculate</button>
+            <button id="red" onclick="clearVal()">Clear</button>
+        </div>
+    </div>
+
+    <div id="infoPopup" class="popup">
+        <div class="popup-content">
+            <span class="close" onclick="closeBox()">&times;</span>
+            <h2>Calculator Info</h2>
+            <p><strong>Net Price:</strong> The price before any taxes are applied.</p>
+            <p><strong>Tax Rate:</strong> The percentage of the net price that will be added as tax.</p>
+            <p><strong>Tax Amount:</strong> The amount of tax calculated based on the net price and tax rate.</p>
+            <p><strong>Gross Amount:</strong> The total price including the tax.</p>
+        </div>
+    </div>
+
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/Calculators/Sales-Tax-Calculator/script.js b/Calculators/Sales-Tax-Calculator/script.js
@@ -0,0 +1,56 @@
+function init() {
+    const netprice = document.getElementById('netprice').value;
+    const rate = document.getElementById('rate').value;
+    const gross = document.getElementById('gross').value;
+
+    if (netprice && rate) {
+        calcGross();
+    } else if (netprice && gross) {
+        calcrate();
+    } else {
+        alert("Please enter the required fields.");
+    }
+}
+
+function calcGross() {
+    const netprice = parseFloat(document.getElementById('netprice').value);     //Get the net price and tax rate values from input fields
+    const rate = parseFloat(document.getElementById('rate').value);             //Convert to float
+
+    if (!isNaN(netprice) && !isNaN(rate)) {     //Check if both net price and tax rate are valid numbers
+        const taxprice = (netprice * rate) / 100;   //Calculate the taxprice
+        const gross = netprice + taxprice;      //Calculate the gross amount
+
+        document.getElementById('taxprice').value = taxprice.toFixed(2);        //Set tax price in the taxprice input field, 2 decimal places
+        document.getElementById('gross').value = gross.toFixed(2);              //Set gross amount in the gross input field, 2 decimal places
+    }
+}
+
+function calcrate() {   //calculate tax rate 
+    const gross = parseFloat(document.getElementById('gross').value);       //Get the gross amount and net price values from input field
+    const netprice = parseFloat(document.getElementById('netprice').value);     //Convert to Float
+
+    if (!isNaN(gross) && !isNaN(netprice) && netprice > 0) {    //Check if both gross and netprice are valid numbers
+        const taxprice = gross - netprice;          //Calculate the tax amount and rate(in %)
+        const rate = (taxprice / netprice) * 100;
+
+        document.getElementById('taxprice').value = taxprice.toFixed(2);        //Set tax price and rate in respective input fields
+        document.getElementById('rate').value = rate.toFixed(2);                //2 decimal places
+    }
+}
+
+
+
+function clearVal() {
+    document.getElementById('netprice').value = '';
+    document.getElementById('rate').value = '';
+    document.getElementById('gross').value = '';
+    document.getElementById('taxprice').value = '';
+}
+
+function showi() {
+    document.getElementById('infoPopup').style.display = 'block';
+}
+
+function closeBox() {
+    document.getElementById('infoPopup').style.display = 'none';
+}
diff --git a/Calculators/Sales-Tax-Calculator/styles.css b/Calculators/Sales-Tax-Calculator/styles.css
@@ -0,0 +1,166 @@
+body {
+    font-family: Arial, sans-serif;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+    background-color: #e695a2;
+}
+
+.calculator {
+    position: relative;
+    background-color: #fff;
+    padding: 20px;
+    border-radius: 8px;
+    box-shadow: 0 0 20px rgba(206, 34, 100, 0.5);
+    width: 300px;
+}
+
+#infoButton {
+    position: absolute;
+    top: 10px;
+    left: 10px;
+    cursor: pointer;
+}
+
+#infoButton:hover {
+    background-color: #fdfeff;
+}
+#infoButton img {
+    width: 25px; 
+    height: 25px;
+    border-radius: 50%;
+}
+
+#infoButton:hover img {
+    opacity: 0.8; 
+}
+
+.popup {
+    display: none;
+    position: fixed;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    background-color: rgba(0, 0, 0, 0.8);
+    padding: 20px;
+    border-radius: 8px;
+    width: 80%;
+    max-width: 400px;
+    box-shadow: 0 40px 40px rgba(14, 11, 11, 0.1);
+}
+
+.popup-content {
+    background-color: #fff;
+    padding: 20px;
+    border-radius: 8px;
+}
+
+.popup-content h2 {
+    margin-top: 0;
+}
+
+.popup-content p {
+    margin: 10px 0;
+}
+
+.close {
+    position: absolute;
+    top: 1px;
+    right: 7px;
+    color: #000000;
+    font-size: 24px;
+    font-weight: bold;
+    cursor: pointer;
+}
+
+.close:hover,
+.close:focus {
+    color: #dc4c4c;
+    text-decoration: none;
+    cursor: pointer;
+}
+
+
+h1 {
+    font-size: 24px;
+    margin-bottom: 20px;
+    text-align: center;
+}
+
+label {
+    display: block;
+    margin-bottom: 10px;
+    font-weight: bold;
+}
+
+.input-group {
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+    padding-top: 10px;
+}
+
+.currency-symbol {
+    background-color: #e9e9e9;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-right: 0;
+    border-radius: 4px 0 0 4px;
+}
+
+input {
+    width: 100%;
+    padding: 10px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    box-sizing: border-box;
+    font-size: 16px;
+}
+
+.input-group input {
+    border-radius: 0 4px 4px 0;
+    border-left: 0;
+}
+
+input[readonly] {
+    background-color: #e9e9e9;
+}
+
+.buttons {
+    display: flex;
+    justify-content: space-between;
+}
+
+button {
+    padding: 10px 20px;
+    font-size: 16px;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    background-color: #d76995;
+    color: white;
+}
+
+#red:hover {
+    background-color: #e33128;
+}
+#green:hover{
+    background-color: rgb(76, 205, 76);
+}
+
+#tax {
+    margin-bottom: 1px;
+}
+#grosslabel {
+    margin-bottom: 0px;
+    /* margin-top: px; */
+    padding-top: 20px;
+}
+#net {
+    margin-bottom: 1px;
+}
+#trate{
+    padding-top: 5px;
+}
diff --git a/assets/results.png b/assets/results.png
diff --git a/index.html b/index.html
@@ -5807,6 +5807,25 @@ <h3>Calculates the Critical point of ideal gases based on a and b</h3>
             <p>No results found 🙃</p>
         </div>
 
+        <div class="box">
+            <div class="content">
+                <h2>Sales Tax Calculator</h2>
+                <h3>Calculates the Gross Price based on the Net Price and the Tax Rate</h3>
+                <div class="card-footer">
+                    <a href="./Calculators/Sales-Tax-Calculator/index.html" target="_blank">
+                        <button>Try Now</button>
+                    </a>
+                    <a href="https://github.com/Rakesh9100/CalcDiverse/tree/main/Calculators/Sales-Tax-Calculator" title="Source Code" target="_blank">
+                        <img src="./assets/images/github.png" alt="Source Code"></img>
+                    </a>
+                </div>
+            </div>
+        </div>
+        <br><br><br><br><br>
+        <div id="noResults" style="color: white; font-weight: bold; font-size: 18px;">
+            <p>No results found 🙃</p>
+        </div>
+
     </div>
 
     <!-- Calculator Section Ends Here  -->