Skip to content

Commit

Permalink
interface 2
Browse files Browse the repository at this point in the history
  • Loading branch information
junssei committed Oct 9, 2024
1 parent 666e467 commit ec89320
Show file tree
Hide file tree
Showing 3 changed files with 71 additions and 19 deletions.
12 changes: 11 additions & 1 deletion projects/InteractiveCalculator/main.css
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ body {
display: flex;
background-color: #fff;
margin-bottom: 30px;
border-radius: 11px;
border-radius: 10px;
height: 80px;
padding: 0px 16px;
}
Expand All @@ -39,6 +39,7 @@ body {
width: 100%;
font-size: 21px;
text-align: right;
user-select: none;
align-self: center;
}

Expand All @@ -61,3 +62,12 @@ body {
cursor: pointer;
background-color: #303030;
}

.clear {
color: #fff;
background-color: #da3e00;
}

.clear:hover {
background-color: #aa3000;
}
36 changes: 18 additions & 18 deletions projects/InteractiveCalculator/main.html
Original file line number Diff line number Diff line change
Expand Up @@ -13,28 +13,28 @@
</div>
<div id="numberbtn">
<!-- <div id="calcNumbers"> -->
<span class="numKeys"> 0 </span>
<span class="numKeys"> 1 </span>
<span class="numKeys"> 2 </span>
<span class="numKeys"> 3 </span>
<span class="numKeys"> 4 </span>
<span class="numKeys"> 5 </span>
<span class="numKeys"> 6 </span>
<span class="numKeys"> 7 </span>
<span class="numKeys"> 8 </span>
<span class="numKeys"> 9 </span>
<span class="numKeys num">0</span>
<span class="numKeys num">1</span>
<span class="numKeys num">2</span>
<span class="numKeys num">3</span>
<span class="numKeys num">4</span>
<span class="numKeys num">5</span>
<span class="numKeys num">6</span>
<span class="numKeys num">7</span>
<span class="numKeys num">8</span>
<span class="numKeys num">9</span>
<span class="numKeys num">.</span>
<!-- </div>
<div id="calcArithmetic"> -->
<span class="numKeys"> + </span>
<span class="numKeys"> - </span>
<span class="numKeys"> / </span>
<span class="numKeys"> * </span>
<span class="numKeys arithmetic plus"> + </span>
<span class="numKeys arithmetic minus"> - </span>
<span class="numKeys arithmetic divide"> / </span>
<span class="numKeys arithmetic times"> * </span>
<!-- </div>
<div id="calcFunctions"> -->
<span class="numKeys"> CE </span>
<span class="numKeys"> BC </span>
<span class="numKeys"> . </span>
<span class="numKeys"> = </span>
<span class="numKeys" id="clear">CE</span>
<span class="numKeys" id="backspace">BC</span>
<span class="numKeys" id="equal">=</span>
<!-- </div> -->
</div>
</div>
Expand Down
42 changes: 42 additions & 0 deletions projects/InteractiveCalculator/main.js
Original file line number Diff line number Diff line change
@@ -1 +1,43 @@
//
let num = document.getElementsByClassName("num");
let dsply = document.getElementById("display");

function displayCalc() {
//
}

// addEventListener to Number Buttons
for (let i = 0; i < num.length; i++) {
num[i].addEventListener("click", function () {
console.log(num[i].textContent);
dsply.textContent += num[i].textContent;
});
}

// addEventListener to Arithmetic Buttons
let arithmetic = document.getElementsByClassName("arithmetic");
for (let i = 0; i < arithmetic.length; i++) {
arithmetic[i].addEventListener("click", function () {
console.log(arithmetic[i].textContent);
dsply.textContent += arithmetic[i].textContent;
});
}

// addEventListener to buttons to clear display/reset calculation
let clear = document.getElementById("clear");
clear.addEventListener("click", function () {
dsply.textContent = "";
});

function addition() {
//
}
function subtraction() {
//
}
function multiplication() {
//
}
function division() {
//
}

0 comments on commit ec89320

Please sign in to comment.