Capital Cycle Store
body {
font-family: sans-serif;
margin: 0;
padding: 20px;
background-color: #E6E6FA;
/* Light blue background */
}
.container {
width: 70%;
/* Reduced width by 20% */
max-width: 600px;
margin: auto;
display: flex;
flex-direction: column;
align-items: center;
background-color: #fff;
border-radius: 94px;
padding: 30px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
/* Add animation for border */
animation: borderAnimation 4s infinite alternate;
border: 13px solid #4169E1;
/* Added border */
}
.heading {
margin-bottom: 20px;
/* Added space below heading */
font-size: 26px;
font-weight: bold;
color: black;
/* Green color for heading */
text-align: center;
/* Center-aligned text */
}
.nav {
width: 100%;
display: flex;
justify-content: center;
margin-bottom: 20px;
}
.nav ul {
list-style-type: none;
padding: 0;
}
.nav li {
display: block;
/* Change to block for better stacking on small screens */
margin-bottom: 10px;
/* Increase spacing between nav items */
}
.nav a {
display: block;
/* Change to block for full-width buttons */
border: 2px solid #4169E1;
/* Add thin border */
border-radius: 4px;
padding: 10px;
text-align: center;
/* Center-align text */
text-decoration: none;
color: black;
font-weight: bold;
transition: background-color 0.3s;
/* Add transition for smooth color change */
}
.nav a:hover {
background-color: rgba(41, 43, 215, 0.05);
/* Light green background on hover */
}
.label {
margin-bottom: 5px;
font-weight: bold;
}
.input-field {
padding: 10px;
border: 1px solid #ccc;
border-radius: 4px;
width: 250px;
margin-bottom: 15px;
margin-top: 15px;
}
/* Remove arrow from number input */
input[type=”number”]::-webkit-outer-spin-button,
input[type=”number”]::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=”number”] {
-moz-appearance: textfield;
}
.button {
background-color: #4169E1;
/* Blue color for iOS button */
color: white;
padding: 15px 20px;
/* Increase padding for larger touch area */
border: none;
border-radius: 10px;
/* Slightly round corners */
font-size: 18px;
/* Larger font size for better readability */
cursor: pointer;
transition: background-color 0.3s;
margin-bottom: 20px;
}
.button:hover {
background-color: #0056b8;
/* Darker blue on hover */
}
.result {
margin-top: 15px;
font-weight: bold;
}
.history-container {
width: 50%;
/* Reduced width by 20% */
max-width: 600px;
margin: auto;
margin-top: 20px;
padding: 20px;
background-color: #f9f9f9;
border-radius: 10px;
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
}
.history-heading {
font-size: 20px;
font-weight: bold;
margin-bottom: 10px;
}
.history-item {
font-size: 14px;
margin-bottom: 5px;
}
.history-item+.history-item {
border-top: 1px solid #ccc;
padding-top: 10px;
margin-top: 10px;
}
.reset-button {
background-color: #ff4c4c;
/* Red color for reset button */
color: white;
padding: 10px 20px;
/* Padding for better touch area */
border: none;
border-radius: 10px;
/* Slightly round corners */
font-size: 16px;
/* Font size */
cursor: pointer;
transition: background-color 0.3s;
display: flex;
align-items: center;
margin-bottom: 7px;
}
.reset-button:hover {
background-color: #d93b3b;
/* Darker red on hover */
}
.reset-button .icon {
margin-right: 5px;
/* Space between icon and text */
}
Capital Cycle Store
Total Invoice Amount:
Calculate GST
✖ Reset History
Calculation History
function calculateGST() {
const amount = parseFloat(document.getElementById(‘amount’).value);
if (isNaN(amount)) {
alert(“Please enter a valid amount.”);
return;
}
const cgst = amount * 0.06;
const sgst = cgst;
const finalAmount = amount – (cgst + sgst);
const result = `CGST: ₹${cgst.toFixed(2)}
SGST: ₹${sgst.toFixed(2)}
Final Amount: ₹${finalAmount.toFixed(2)}`;
document.getElementById(‘result’).innerHTML = result;
// Save calculation in local storage
const history = JSON.parse(localStorage.getItem(‘history’)) || [];
const now = new Date();
history.unshift({
date: now.toLocaleDateString(),
time: now.toLocaleTimeString(),
amount: amount.toFixed(2),
cgst: cgst.toFixed(2),
sgst: sgst.toFixed(2),
finalAmount: finalAmount.toFixed(2)
});
if (history.length > 15) {
history.pop(); // keep only the last 15 calculations
}
localStorage.setItem(‘history’, JSON.stringify(history));
displayHistory();
}
function displayHistory() {
const history = JSON.parse(localStorage.getItem(‘history’)) || [];
const historyContainer = document.getElementById(‘history’);
historyContainer.innerHTML = ”;
history.forEach(item => {
const historyItem = document.createElement(‘div’);
historyItem.classList.add(‘history-item’);
historyItem.innerHTML = `Date: ${item.date} Time: ${item.time}
Amount: ₹${item.amount}
CGST: ₹${item.cgst}
SGST: ₹${item.sgst}
Final Amount: ₹${item.finalAmount}`;
historyContainer.appendChild(historyItem);
});
}
function resetHistory() {
localStorage.removeItem(‘history’);
displayHistory();
}
// Display history on page load
displayHistory();
RexPlayz 