Blog/Components/Pages/Calc.razor 1.6 K · 56 lines · raw · history

1 @page "/Calc"
2 <PageTitle>Calculator</PageTitle>
3 <PageScript Src="./Components/Pages/Calc.razor.js"/>
4
5 <main>
6 <p>A rpn calculator</p>
7 <form id="form" class="flex-row">
8 <input id="input" type="text" placeholder="1 2 +" />
9 <input type="submit" value="Evaluate">
10 </form>
11 <div>
12 <div id="log"></div>
13 </div>
14
15 <fieldset class="docs">
16 <legend>Available stack operations</legend>
17 <details>
18 <summary>dup</summary>
19 <p>Duplicates the top value on the stack</p>
20 <div class="flex-spread">
21 <span>[1, 2, 3]</span>
22 <span>dup</span>
23 </div>
24 <div class="flex-spread">
25 <span>[1, 1, 2, 3]</span>
26 <span></span>
27 </div>
28 </details>
29
30 <details>
31 <summary>drop</summary>
32 <p>Drops the top value on the stack</p>
33 <div class="flex-spread">
34 <span>[1, 2, 3]</span>
35 <span>drop</span>
36 </div>
37 <div class="flex-spread">
38 <span>[2, 3]</span>
39 <span></span>
40 </div>
41 </details>
42
43 <details>
44 <summary>swap</summary>
45 <p>Swaps the top two values on the stack</p>
46 <div class="flex-spread">
47 <span>[1, 2, 3]</span>
48 <span>swap</span>
49 </div>
50 <div class="flex-spread">
51 <span>[2, 1, 3]</span>
52 <span></span>
53 </div>
54 </details>
55 </fieldset>
56 </main>