A modern, easy-to-use calculator web app with a retro digital look and a handy calculation history.

 

📖 How to Use

Just open index.html in your browser—no installation or setup required!
 

⚙️ Technologies Used

• HTML, CSS, JavaScript
• math.js for mathematical expression evaluation
• DS-DIGI font by DSE for the digital calculator look
   

✨ Key Features

1. Simple Arithmetic Operations

Perform basic math like addition, subtraction, multiplication, and division with a single click.
 

How it works: When you press the = button, the app calculates the result using a reliable math library.

function calculateResult() {
    const equation = display.value;
    try {
        const result = math.evaluate(display.value);
        display.value = result;
        // ...history logic...
    } catch (error) {
        display.value = 'Error';
    }
}

2. Calculation History with Timestamps

Never lose track of your work! Every calculation is saved in a history panel next to the calculator, showing the equation, result, and when it was calculated.
 

How it works: Each time you calculate, the app records the equation, result, and the current time.

function renderHistory() {
    const historyList = document.getElementById('history');
    historyList.innerHTML = '';
    history.slice().reverse().forEach(entry => {
        const li = document.createElement('li');
        li.innerHTML = `${entry.equation} = <span class="result">${entry.result}</span>`;
        li.setAttribute('data-timestamp', `Calculated on ${entry.timestamp}`);
        historyList.appendChild(li);
    });
}

3. Easy-to-Read, Retro Design

The calculator uses a digital-style font and alternating row colors for history, making it easy to read and visually appealing.
 

How it works: Custom fonts and color schemes are used for a classic calculator feel.

@font-face {
  font-family: "DIGI";
  src: url("/fonts/DS-DIGI.ttf") format("truetype");
}
#history li:nth-child(even) {
    background-color: hsl(0, 0%, 20%);
}
#history li:nth-child(odd) {
    background-color: hsl(0, 0%, 25%);
}

4. Timestamp Tooltip on Hover

Quickly see when a calculation was made by hovering over any history entry.
 

How it works: A tooltip appears with the timestamp when you hover over a row.

#history li:hover::after {
    content: attr(data-timestamp);
    position: absolute;
    left: 50%;
    top: 0;
    transform: translateX(-50%) translateY(50%);
    background: rgba(30, 30, 30, 0.8);
    color: #FFD700;
    padding: 5px 10px;
    border-radius: 8px;
    white-space: nowrap;
    font-size: 1.2rem;
    margin-bottom: 5px;
    z-index: 10;
    box-shadow: 0 2px 8px rgba(0,0,0,0.2);
    pointer-events: none;
}

📜 License

This project is licensed under the MIT License.