Skip to content

Commit 75c4923

Browse files
author
aryan
committed
add calculator
1 parent b4fb09c commit 75c4923

6 files changed

Lines changed: 428 additions & 2 deletions

File tree

‎content/_index.md‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -9,9 +9,9 @@ width: normal
99
---
1010

1111
<!-- markdownlint-disable MD033 MD034 -->
12-
{{< hextra/hero-badge link="/courses">}}
12+
{{< hextra/hero-badge link="/notes">}}
1313
<div class="hx-w-2 hx-h-2 hx-rounded-full hx-bg-primary-400"></div>
14-
Courses
14+
Notes
1515
{{< icon name="arrow-circle-right" attributes="height=14" >}}
1616
{{< /hextra/hero-badge >}}
1717

‎content/exercises/graded-assignments/mathematics-1/q2.md‎

Lines changed: 29 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,29 @@
1+
---
2+
title: question 2
3+
categories:
4+
- chart.js
5+
image: /images/tree.jpg
6+
excludeSearch: false
7+
width: wide
8+
excludeSearch: false
9+
---
10+
11+
12+
13+
{{< calculate n="5" m="3" op="*" >}}
14+
15+
16+
{{< math/formula n="5, 10, 15" m="2, 3, 4" formula="n * m" >}}
17+
18+
{{< math/formula n="8, 6" m="3, 2" formula="n + m" >}}
19+
20+
21+
<!-- {{< math/calculator >}} -->
22+
23+
<!-- {{< math/calculator formula="(n1+n2)^3" >}} -->
24+
25+
26+
27+
{{< math/calc n1="2" n2="3" a="4" b="5" formula="n1*a + n2*b" >}}
28+
29+
{{< math/calc x="0.5" formula="Math.asin(x) * 180 / Math.PI" >}}

‎layouts/shortcodes/calculate.html‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
<!-- filepath: d:\Code\hextra-notes\layouts\shortcodes\calculate.html -->
2+
{{ $n := .Get "n" | float }}
3+
{{ $m := .Get "m" | float }}
4+
{{ $op := .Get "op" | default "+" }}
5+
6+
{{ $result := "" }}
7+
{{ if and (ne $n "") (ne $m "") }}
8+
{{ if eq $op "+" }}
9+
{{ $result = add $n $m }}
10+
{{ else if eq $op "-" }}
11+
{{ $result = sub $n $m }}
12+
{{ else if eq $op "*" }}
13+
{{ $result = mul $n $m }}
14+
{{ else if eq $op "/" }}
15+
{{ $result = div $n $m }}
16+
{{ else }}
17+
{{ errorf "Unsupported operation: %s" $op }}
18+
{{ end }}
19+
{{ else }}
20+
{{ errorf "Shortcode 'calculate' requires 'n' and 'm' parameters." }}
21+
{{ end }}
22+
23+
{{ $result }}

‎layouts/shortcodes/math/calc.html‎

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
{{ $id := delimit (slice "calculator-container" (partial "functions/uid.html" .)) "-" }}
2+
{{ $id := delimit (slice "result" (partial "functions/uid.html" .)) "-" }}
3+
4+
{{ $formula := .Get "formula" | default "n1 * m1 + n2 - m2 / n3" }}
5+
6+
<div id="calculator-container">
7+
{{/* Dynamically render all params except 'formula' */}}
8+
{{ range $key, $value := .Params }}
9+
{{- if ne $key "formula" -}}
10+
<div>
11+
<label for="{{ $key }}">{{ $key }}:</label>
12+
<input type="number" id="{{ $key }}" value="{{ $value }}">
13+
</div>
14+
{{- end -}}
15+
{{ end }}
16+
<div>
17+
<label for="formula">Formula:</label>
18+
<input type="text" id="formula" value="{{ $formula }}">
19+
</div>
20+
<button onclick="calculate()">Solve</button>
21+
<div id="result">Result: </div>
22+
</div>
23+
24+
<script>
25+
function calculate() {
26+
// Get all input fields except the formula
27+
const inputs = document.querySelectorAll('#calculator-container input[type="number"]');
28+
let formula = document.getElementById('formula').value;
29+
const resultDiv = document.getElementById('result');
30+
31+
// Replace all variable names in the formula with their values
32+
inputs.forEach(input => {
33+
// Use RegExp with word boundaries to avoid partial replacements
34+
const re = new RegExp('\\b' + input.id + '\\b', 'g');
35+
formula = formula.replace(re, input.value);
36+
});
37+
38+
try {
39+
// Evaluate the expression using JavaScript's eval() function
40+
// WARNING: Using eval() can be risky with untrusted input.
41+
const finalAnswer = eval(formula);
42+
resultDiv.textContent = `Result: ${finalAnswer}`;
43+
} catch (error) {
44+
resultDiv.textContent = `Result: Error in formula`;
45+
console.error("Formula evaluation error:", error);
46+
}
47+
}
48+
</script>
49+
50+
<style>
51+
#calculator-container {
52+
max-width: 350px;
53+
margin: 2em auto;
54+
padding: 1.5em 2em;
55+
border-radius: 12px;
56+
background: #f9f9f9;
57+
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
58+
font-family: system-ui, sans-serif;
59+
transition: background 0.3s, color 0.3s;
60+
}
61+
62+
#calculator-container div {
63+
margin-bottom: 1em;
64+
display: flex;
65+
align-items: center;
66+
gap: 0.5em;
67+
}
68+
69+
#calculator-container label {
70+
flex: 0 0 60px;
71+
font-weight: 500;
72+
}
73+
74+
#calculator-container input[type="number"],
75+
#calculator-container input[type="text"] {
76+
flex: 1;
77+
padding: 0.4em 0.6em;
78+
border: 1px solid #ccc;
79+
border-radius: 6px;
80+
font-size: 1em;
81+
background: #fff;
82+
color: #222;
83+
transition: border 0.2s;
84+
}
85+
86+
#calculator-container input:focus {
87+
border-color: #0078d4;
88+
outline: none;
89+
}
90+
91+
#calculator-container button {
92+
width: 100%;
93+
padding: 0.6em 0;
94+
background: #0078d4;
95+
color: #fff;
96+
border: none;
97+
border-radius: 6px;
98+
font-size: 1.1em;
99+
font-weight: 600;
100+
cursor: pointer;
101+
transition: background 0.2s;
102+
}
103+
104+
#calculator-container button:hover {
105+
background: #005fa3;
106+
}
107+
108+
#result {
109+
margin-top: 1em;
110+
font-size: 1.1em;
111+
font-weight: 500;
112+
color: #007800;
113+
min-height: 1.5em;
114+
}
115+
116+
@media (prefers-color-scheme: dark) {
117+
#calculator-container {
118+
background: #23272f;
119+
color: #f3f3f3;
120+
box-shadow: 0 2px 12px rgba(0,0,0,0.32);
121+
}
122+
#calculator-container input[type="number"],
123+
#calculator-container input[type="text"] {
124+
background: #181b20;
125+
color: #f3f3f3;
126+
border: 1px solid #444;
127+
}
128+
#calculator-container input:focus {
129+
border-color: #4fa3ff;
130+
}
131+
#calculator-container button {
132+
background: #4fa3ff;
133+
color: #181b20;
134+
}
135+
#calculator-container button:hover {
136+
background: #0078d4;
137+
color: #fff;
138+
}
139+
#result {
140+
color: #7fff7f;
141+
}
142+
}
143+
</style>
144+
{{/* End of calculator shortcode */}}

‎layouts/shortcodes/math/calculator.html‎

Lines changed: 171 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,171 @@
1+
{{ $formula := .Get "formula" | default "n1 * m1 + n2 - m2 / n3" }}
2+
{{ $n1 := .Get "n1" | default 1 }}
3+
{{ $m1 := .Get "m1" | default 4 }}
4+
{{ $n2 := .Get "n2" | default 2 }}
5+
{{ $m2 := .Get "m2" | default 5 }}
6+
{{ $n3 := .Get "n3" | default 3 }}
7+
{{ $m3 := .Get "m3" | default 6 }}
8+
9+
10+
<div id="calculator-container">
11+
<div>
12+
<label for="n1">n1:</label>
13+
<input type="number" id="n1" value="{{ $n1 }}">
14+
</div>
15+
<div>
16+
<label for="m1">m1:</label>
17+
<input type="number" id="m1" value="{{ $m1 }}">
18+
</div>
19+
<div>
20+
<label for="n2">n2:</label>
21+
<input type="number" id="n2" value="{{ $n2 }}">
22+
</div>
23+
<div>
24+
<label for="m2">m2:</label>
25+
<input type="number" id="m2" value="{{ $m2 }}">
26+
</div>
27+
<div>
28+
<label for="n3">n3:</label>
29+
<input type="number" id="n3" value="{{ $n3 }}">
30+
</div>
31+
<div>
32+
<label for="m3">m3:</label>
33+
<input type="number" id="m3" value="{{ $m3 }}">
34+
</div>
35+
<div>
36+
<label for="formula">Formula:</label>
37+
{{ if eq $formula "" }}
38+
<input type="text" id="formula" value="n1 * m1 + n2 - m2 / n3">
39+
{{ else }}
40+
<input type="text" id="formula" value="{{ $formula }}">
41+
{{ end }}
42+
</div>
43+
<button onclick="calculate()">Solve</button>
44+
<div id="result">Result: </div>
45+
</div>
46+
47+
<script>
48+
function calculate() {
49+
const n1 = parseFloat(document.getElementById('n1').value);
50+
const m1 = parseFloat(document.getElementById('m1').value);
51+
const n2 = parseFloat(document.getElementById('n2').value);
52+
const m2 = parseFloat(document.getElementById('m2').value);
53+
const n3 = parseFloat(document.getElementById('n3').value);
54+
const m3 = parseFloat(document.getElementById('m3').value);
55+
const formula = document.getElementById('formula').value;
56+
const resultDiv = document.getElementById('result');
57+
58+
try {
59+
// Replace variable names in the formula string
60+
let expression = formula.replace(/n1/g, n1);
61+
expression = expression.replace(/m1/g, m1);
62+
expression = expression.replace(/n2/g, n2);
63+
expression = expression.replace(/m2/g, m2);
64+
expression = expression.replace(/n3/g, n3);
65+
expression = expression.replace(/m3/g, m3);
66+
67+
// Evaluate the expression using JavaScript's eval() function
68+
// WARNING: Using eval() can be risky with untrusted input.
69+
const finalAnswer = eval(expression);
70+
resultDiv.textContent = `Result: ${finalAnswer}`;
71+
} catch (error) {
72+
resultDiv.textContent = `Result: Error in formula`;
73+
console.error("Formula evaluation error:", error);
74+
}
75+
}
76+
</script>
77+
78+
<style>
79+
#calculator-container {
80+
max-width: 350px;
81+
margin: 2em auto;
82+
padding: 1.5em 2em;
83+
border-radius: 12px;
84+
background: #f9f9f9;
85+
box-shadow: 0 2px 12px rgba(0,0,0,0.08);
86+
font-family: system-ui, sans-serif;
87+
transition: background 0.3s, color 0.3s;
88+
}
89+
90+
#calculator-container div {
91+
margin-bottom: 1em;
92+
display: flex;
93+
align-items: center;
94+
gap: 0.5em;
95+
}
96+
97+
#calculator-container label {
98+
flex: 0 0 60px;
99+
font-weight: 500;
100+
}
101+
102+
#calculator-container input[type="number"],
103+
#calculator-container input[type="text"] {
104+
flex: 1;
105+
padding: 0.4em 0.6em;
106+
border: 1px solid #ccc;
107+
border-radius: 6px;
108+
font-size: 1em;
109+
background: #fff;
110+
color: #222;
111+
transition: border 0.2s;
112+
}
113+
114+
#calculator-container input:focus {
115+
border-color: #0078d4;
116+
outline: none;
117+
}
118+
119+
#calculator-container button {
120+
width: 100%;
121+
padding: 0.6em 0;
122+
background: #0078d4;
123+
color: #fff;
124+
border: none;
125+
border-radius: 6px;
126+
font-size: 1.1em;
127+
font-weight: 600;
128+
cursor: pointer;
129+
transition: background 0.2s;
130+
}
131+
132+
#calculator-container button:hover {
133+
background: #005fa3;
134+
}
135+
136+
#result {
137+
margin-top: 1em;
138+
font-size: 1.1em;
139+
font-weight: 500;
140+
color: #007800;
141+
min-height: 1.5em;
142+
}
143+
144+
@media (prefers-color-scheme: dark) {
145+
#calculator-container {
146+
background: #23272f;
147+
color: #f3f3f3;
148+
box-shadow: 0 2px 12px rgba(0,0,0,0.32);
149+
}
150+
#calculator-container input[type="number"],
151+
#calculator-container input[type="text"] {
152+
background: #181b20;
153+
color: #f3f3f3;
154+
border: 1px solid #444;
155+
}
156+
#calculator-container input:focus {
157+
border-color: #4fa3ff;
158+
}
159+
#calculator-container button {
160+
background: #4fa3ff;
161+
color: #181b20;
162+
}
163+
#calculator-container button:hover {
164+
background: #0078d4;
165+
color: #fff;
166+
}
167+
#result {
168+
color: #7fff7f;
169+
}
170+
}
171+
</style>

0 commit comments

Comments
 (0)