All-in-One Smart Calculator
About this app
All in One Calculator with Math, Graphs, History and PDF
All-in-One Smart Calculator 🧠 All-in-One Smart Calculator 🧮 Calculator 📅 Age 📈 Graph 🕒 History 📄 PDF Calculator = Calculate Age Calculator Calculate Age Graph (y = f(x)) Draw History
Related apps
IPTV M3U8 & EPG Generator Studio | Image to M3U Playlist & Guide
Image to IPTV Converter & M3U Playlist Generator
Image to IPTV Converter & M3U Playlist Generator
Image to M3U Playlist Converter | IPTV & Media Stream Generator
Roulette Row Predictor Pro - Live Pattern & Trend Stats Analyzer
Video to Repeated Sequence Generator - Rhythm & Glitch Loop Maker
LoopCraft - Video to Repeated Sequence Converter
LoopMatrix - Video Sequence Repeater & Stutter Maker
MuffleFX - Video & Audio Low-Pass Filter Studio
Seeding Rate Calculator
Irrigation Set Time Calculator
Fertilizer Nutrient Units Calculator
Put this on your site
Source
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>All-in-One Smart Calculator</title>
<meta name="description" content="All in One Calculator with Math, Graphs, History and PDF">
<meta name="keywords" content="calculator, math, graph, bmi, age, loan">
<link href="https://fonts.googleapis.com/css2?family=Poppins:wght@400;600&display=swap" rel="stylesheet">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/js/bootstrap.min.js" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free@6.6.0/css/fontawesome.min.css" crossorigin="anonymous">
<script type="text/javascript">
try {
document.addEventListener("DOMContentLoaded", function() {
const historyData = [];
function show(id){
document.querySelectorAll('.section').forEach(s => s.classList.remove('active'));
document.getElementById(id).classList.add('active');
}
function calculate(){
try {
const exp = document.getElementById('exp').value;
const res = eval(exp.replace('sin','Math.sin').replace('cos','Math.cos').replace('tan','Math.tan'));
document.getElementById('result').innerText = "Result: " + res;
saveHistory(exp + " = " + res);
} catch {
document.getElementById('result').innerText = "Error";
}
}
function calcAge(){
const dob = new Date(document.getElementById('dob').value);
const diff = Date.now() - dob.getTime();
const age = new Date(diff).getUTCFullYear() - 1970;
document.getElementById('ageResult').innerText = "Age: " + age + " years";
saveHistory("Age = " + age);
}
function drawGraph(){
const f = document.getElementById('func').value;
const c = document.getElementById('canvas');
const ctx = c.getContext('2d');
ctx.clearRect(0, 0, c.width, c.height);
ctx.beginPath();
ctx.moveTo(0, 100);
for (let x = 0; x < 300; x++) {
let y = eval(f.replace(/x/g, (x - 150) / 20));
ctx.lineTo(x, 100 - y * 20);
}
ctx.strokeStyle = '#ff6f91';
ctx.stroke();
}
function saveHistory(text){
historyData.push(text);
document.getElementById('historyList').innerHTML = historyData.join("<br>");
}
function downloadPDF(){
alert("📄 PDF Export Ready! (Browser Print → Save as PDF)");
}
// Hook UI elements to functions
document.querySelectorAll('.menu-button').forEach(button => {
button.addEventListener('click', () => show(button.dataset.target));
});
document.getElementById('calcButton').addEventListener('click', calculate);
document.getElementById('ageButton').addEventListener('click', calcAge);
document.getElementById('graphButton').addEventListener('click', drawGraph);
document.getElementById('pdfButton').addEventListener('click', downloadPDF);
});
} catch (error) {
throw error;
}
</script>
<style>
body {
font-family: 'Poppins', sans-serif;
margin: 0;
background: linear-gradient(135deg, #ffafbd, #ffc3a0);
color: #fff;
text-align: center;
}
header {
padding: 15px;
font-size: 28px;
font-weight: 600;
background: #ff6f91;
border-radius: 0 0 20px 20px;
box-shadow: 0 4px 20px rgba(0,0,0,0.5);
}
.container {
background: #fff;
color: #333;
border-radius: 20px 20px 0 0;
padding: 20px;
min-height: 90vh;
position: relative;
margin-top: 30px;
box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}
button {
padding: 10px 15px;
margin: 5px;
border: none;
border-radius: 10px;
background: #ff6f91;
color: #fff;
cursor: pointer;
transition: background 0.3s;
font-weight: 600;
}
button:hover {
background: #ff4f7b;
}
input, select {
padding: 8px;
margin: 5px;
border: 2px solid #ff6f91;
border-radius: 5px;
width: calc(90% - 18px);
transition: border-color 0.3s;
}
input:focus {
border-color: #ff4f7b;
outline: none;
}
.section {
display: none;
}
.section.active {
display: block;
}
.history {
font-size: 12px;
background: #f4f4f4;
color: #333;
padding: 10px;
border-radius: 10px;
margin-top: 10px;
overflow-y: auto;
max-height: 150px;
}
canvas {
background: #f8f9fa;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
}
@media (max-width: 600px) {
header {
font-size: 22px;
}
button {
width: 90%;
}
input {
width: 90%;
}
}
</style>
</head>
<body>
<header>🧠 All-in-One Smart Calculator</header>
<div class="container">
<div id="menu">
<button class="menu-button" data-target="calc">🧮 Calculator</button>
<button class="menu-button" data-target="age">📅 Age</button>
<button class="menu-button" data-target="graph">📈 Graph</button>
<button class="menu-button" data-target="history">🕒 History</button>
<button id="pdfButton">📄 PDF</button>
</div>
<!-- Calculator -->
<div id="calc" class="section active">
<h3>Calculator</h3>
<input id="exp" placeholder="Example: 2+sin(30)*5">
<button id="calcButton">= Calculate</button>
<p id="result"></p>
</div>
<!-- Age -->
<div id="age" class="section">
<h3>Age Calculator</h3>
<input type="date" id="dob">
<button id="ageButton">Calculate Age</button>
<p id="ageResult"></p>
</div>
<!-- Graph -->
<div id="graph" class="section">
<h3>Graph (y = f(x))</h3>
<input id="func" placeholder="Example: x*x">
<button id="graphButton">Draw</button>
<canvas id="canvas" width="300" height="200"></canvas>
</div>
<!-- History -->
<div id="history" class="section">
<h3>History</h3>
<div class="history" id="historyList"></div>
</div>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!