Colorful Math Calculator and Graphing App
About this app
A colorful and interactive calculator app that solves equations, graphs points, and aids in diverse math subjects.
Colorful Math Calculator and Graphing App Math Calculator & Graphing Tool Calculate
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>Colorful Math Calculator and Graphing App</title>
<meta name="description" content="A colorful and interactive calculator app that solves equations, graphs points, and aids in diverse math subjects.">
<meta name="keywords" content="calculator, graphing, math problems, equations, math, educational tool">
<!-- Libraries -->
<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>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.6.0/css/all.min.css">
<script type="text/javascript">
try {
document.addEventListener("DOMContentLoaded", function() {
const form = document.getElementById('calc-form');
const resultDiv = document.getElementById('result');
const graphCtx = document.getElementById('graph').getContext('2d');
const numberLineCtx = document.getElementById('number-line').getContext('2d');
form.addEventListener('submit', function(event) {
event.preventDefault();
const equation = document.getElementById('equation').value;
try {
const result = math.evaluate(equation);
resultDiv.textContent = "Result: " + result;
drawGraph(equation);
} catch (e) {
resultDiv.textContent = "Error: " + e.message;
}
});
function drawGraph(equation) {
const data = [];
for (let x = -10; x <= 10; x += 0.1) {
const y = math.evaluate(equation, { x });
data.push({ x, y });
}
const myChart = new Chart(graphCtx, {
type: 'line',
data: {
datasets: [{
label: 'Graph of y=' + equation,
data: data,
backgroundColor: 'rgba(75, 192, 192, 0.4)',
borderColor: 'rgba(75, 192, 192, 1)',
borderWidth: 1,
}]
},
options: {
scales: {
x: { type: 'linear', position: 'bottom' }
}
}
});
drawNumberLine();
}
function drawNumberLine() {
const numberLineData = { x: [-10, -10, 10, 10], y: [0, -0.5, -0.5, 0] };
numberLineCtx.clearRect(0, 0, numberLineCtx.canvas.width, numberLineCtx.canvas.height);
numberLineCtx.beginPath();
numberLineCtx.moveTo(50, 100);
numberLineCtx.lineTo(450, 100);
numberLineCtx.strokeStyle = 'black';
numberLineCtx.lineWidth = 2;
numberLineCtx.stroke();
for (let i = -10; i <= 10; i++) {
const xPos = 50 + (i + 10) * 20;
numberLineCtx.moveTo(xPos, 95);
numberLineCtx.lineTo(xPos, 105);
numberLineCtx.fillText(i, xPos - 5, 90);
}
numberLineCtx.stroke();
}
});
} catch (error) {
throw error;
}
</script>
<style>
body {
background-color: #f2f2f2;
font-family: 'Arial', sans-serif;
}
#main-container {
margin-top: 50px;
}
.result-display {
font-size: 24px;
margin-top: 20px;
font-weight: bold;
color: #336699;
}
canvas {
margin: 20px auto;
display: block;
background-color: #ffffff;
border: 2px solid #8bc34a;
border-radius: 10px;
}
.input-group {
margin-bottom: 15px;
}
#equation {
border-radius: 5px;
}
button {
background-color: #8bc34a;
color: white;
border: none;
}
button:hover {
background-color: #7cb342;
transition: background-color 0.3s;
}
</style>
</head>
<body>
<div id="main-container" class="container">
<h1 class="text-center">Math Calculator & Graphing Tool</h1>
<form id="calc-form">
<div class="input-group">
<input type="text" id="equation" class="form-control" placeholder="Enter equation (e.g. sin(x))" required>
<button type="submit" class="btn"><i class="fas fa-calculator"></i> Calculate</button>
</div>
</form>
<div class="result-display" id="result"></div>
<canvas id="graph" width="500" height="400"></canvas>
<canvas id="number-line" width="500" height="200"></canvas>
</div>
</body>
</html>
NEW APPS
These are apps made by the community!