diff --git a/Calculators/Sales-Tax-Calculator/README.md b/Calculators/Sales-Tax-Calculator/README.md new file mode 100644 index 000000000..8ecd38131 --- /dev/null +++ b/Calculators/Sales-Tax-Calculator/README.md @@ -0,0 +1,24 @@ + #

Sales Tax Calculator

+ + ## 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 new file mode 100644 index 000000000..d7137213c Binary files /dev/null and b/Calculators/Sales-Tax-Calculator/i.png differ diff --git a/Calculators/Sales-Tax-Calculator/index.html b/Calculators/Sales-Tax-Calculator/index.html new file mode 100644 index 000000000..797f5d509 --- /dev/null +++ b/Calculators/Sales-Tax-Calculator/index.html @@ -0,0 +1,56 @@ + + + + + + Sales Tax Calculator + + + +
+ + Info + +

Sales Tax Calculator

+ + +
+ ₹ + +
+ + + + + +
+ ₹ + +
+ + +
+ ₹ + +
+ +
+ + +
+
+ + + + + + diff --git a/Calculators/Sales-Tax-Calculator/script.js b/Calculators/Sales-Tax-Calculator/script.js new file mode 100644 index 000000000..95ed9b220 --- /dev/null +++ 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 new file mode 100644 index 000000000..e7afd1350 --- /dev/null +++ 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; +} \ No newline at end of file diff --git a/index.html b/index.html index ae6fdb43f..cafad25e0 100644 --- a/index.html +++ b/index.html @@ -5807,6 +5807,25 @@

Calculates the Critical point of ideal gases based on a and b

No results found 🙃

+
+
+

Sales Tax Calculator

+

Calculates the Gross Price based on the Net Price and the Tax Rate

+
+ + + + + Source Code + +
+
+
+




+
+

No results found 🙃

+
+