-
Notifications
You must be signed in to change notification settings - Fork 19
/
Copy pathindex.html
81 lines (79 loc) · 4.05 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
<!DOCTYPE html>
<html lang="pt-br" class="default">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Calculator</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap" />
<link rel="stylesheet" href="./src/styles/global.css" />
<script type="module" src="./src/scripts/main.js" defer></script>
<script src="https://unpkg.com/@phosphor-icons/web" defer></script>
</head>
<body>
<div class="container">
<sidebar>
<h1>🧮HacktoberCalc</h1>
<p>
Hacktober Calc is a simple calculator using HTML, CSS and Javascript.
It's the simplest project to exercise programming skills, DOM manipulation and layout construction.
Plus, you can start to contribute to Open Source from this project and learn the Git workflow.
</p>
<a href="https://github.com/l4ur4oliveira/hacktober-calc" target="_blank"><i class="ph-bold ph-github-logo"></i> View on GitHub</a>
<img class="hacktoberfest-logo" src="./src/images/hacktoberfest11.svg" alt="Hacktoberfest 2023 logo" />
</sidebar>
<main id="machine">
<nav class="toolbar">
<a class="toolbar-option themes">Themes</a>
<a class="toolbar-option clear">Clear</a>
<a class="toolbar-option delete">Delete</a>
<a class="toolbar-option copy">Copy</a>
<ul class="toolbar__themes">
<li class="default">Default</li>
<li class="dracula">Dracula</li>
<li class="monokai">Monokai</li>
<li class="amoled">Amoled</li>
<li class="ocean">Ocean</li>
<li class="candy">Candy</li>
<li class="rainbow">Rainbow</li>
<li class="beach">Beach</li>
<li class="vintage">Vintage</li>
<li class="halloween">Halloween</li>
<li class="carbon">Carbon</li>
</ul>
</nav>
<div id="screen">
<span class="screen__staged"></span>
<span class="screen__current" style="margin-right: -10px"></span>
</div>
<section id="buttons">
<section class="numbers">
<button onclick="logarithm()">log<sub>10</sub></button>
<button data-operation>^</button>
<button onclick="factorial()">!</button>
<button data-number>1</button>
<button data-number>2</button>
<button data-number>3</button>
<button data-number>4</button>
<button data-number>5</button>
<button data-number>6</button>
<button data-number>7</button>
<button data-number>8</button>
<button data-number>9</button>
<button data-number>0</button>
<button data-number>.</button>
<button onclick="showResult()">=</button>
</section>
<section class="operators">
<button data-operation>/</button>
<button data-operation>*</button>
<button data-operation>-</button>
<button data-operation>+</button>
</section>
</section>
</main>
</div>
</body>
</html>