Web Front End ‐ Homework 02 MAK - TheEvergreenStateCollege/upper-division-cs-23-24 GitHub Wiki

<- back to MAK Dev Diary

Web Front End - Homework 02

upper-division-cs/web-24wi/assignments/MAK/frontend/week2/ watch from Complete Intro to Web Development, v3 (book Complete Intro to Web Dev v3) and take notes Section 3: Javascript Section 4: Putting It All Together (HTML, CSS, Javascript)

try doing this on my own have html and css, working on script

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>calculator</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>
    <div class= "calculatorBox">
   
        <div id="display" class="fourRow">test</div>
       
        <button class="funButton doubleRow">c</button>
        <button class="funButton">←</button>
        <button class="funButton">÷</button>
       
        <button class="numButton">7</button>
        <button class="numButton">8</button>
        <button class="numButton">9</button>
        <button class="funButton">x</button>
   
        <button class="numButton">4</button>
        <button class="numButton">5</button>
        <button class="numButton">6</button>
        <button class="funButton">-</button>
       
        <button class="numButton">1</button>
        <button class="numButton">2</button>
        <button class="numButton">3</button>
        <button class="funButton">+</button>
       
        <button class="numButton tripleRow">0</button>
        <button class="funButton">=</button>
       
      </div>
    <script src="calculator.js"></script>
  </body>
</html>

styles.css

.calculatorBox{
    display: grid;
    grid-template-columns: 3rem 3rem 3rem 3rem;
    width: 12.5rem;
    gap: .1rem;
    background-color:black;
    font-family: monospace;
  }
 
  .calculatorBox button{
    height: 3rem;
    width: auto;
    color: white;
    text-align: center;
    font-size: 2rem;
  }
 
  .numButton{
    background-color: lightgray;
   }
  .numButton:hover {
    background-color: gray;
  }
 
  .funButton{
    background-color: orange;
  }
  .funButton:hover {
    background-color: darkorange;
  }
 
  #display{
    height: 3rem;
    background-color: black;
    color: white;
    font-size: 2rem;
  }
 
  .doubleRow{
    grid-column: 1 / 3;
  }
 
  .tripleRow{
    grid-column: 1 / 4;
  }
 
  .fourRow{
    grid-column: 1 / 5;
  }

get clicked button to show on display

added onclick to numButton

html

<body>
  <div class= "calculatorBox">
    
	<div id="display" class="fourRow">0</div>
    
	<button class="funButton doubleRow">c</button>
	<button class="funButton">←</button>
	<button class="funButton">÷</button>
    
	<button class="numButton" onclick="num(7)">7</button>
	<button class="numButton" onclick="num(8)">8</button>
	<button class="numButton" onclick="num(9)">9</button>
	<button class="funButton">x</button>

	<button class="numButton" onclick="num(4)">4</button>
	<button class="numButton" onclick="num(5)">5</button>
	<button class="numButton" onclick="num(6)">6</button>
	<button class="funButton">-</button>
    
	<button class="numButton" onclick="num(1)">1</button>
	<button class="numButton" onclick="num(2)">2</button>
	<button class="numButton" onclick="num(3)">3</button>
	<button class="funButton">+</button>
    
	<button class="numButton tripleRow" onclick="num(0)">0</button>
	<button class="funButton">=</button>
    
  </div>
</body>

and a function to show number on display

js

function num(a){
   document.getElementById("display").innerHTML = a;
}

move number to right

css

#display{
  height: 3rem;
  background-color: black;
  color: white;
  font-size: 2rem;
  text-align: right;
}

make hold number and allow multiple numbers

js

let holdNum = 0;

function num(a){
  holdNum = (holdNum * 10) + a;
   document.getElementById("display").innerHTML = holdNum;
}

added clear by zeroing the holdNum

html

	<button class="funButton doubleRow" onclick="clearNums()">c</button>

js

function clearNums(){
  holdNum = 0;
  document.getElementById("display").innerHTML = holdNum;
}

added back space by /10 and rounding down (basically opposite of num)

html

	<button class="funButton" onclick="back()">←</button>

js

function back(){
  holdNum = Math.floor(holdNum/10);
  document.getElementById("display").innerHTML = holdNum;
}

got adding to work holds 2 numbers (holdNum, storedNum) adds them together and puts value in storedNum sets holdNum 0

solve checks if needs to do more math and if so sends it back to get mathed before displaying

html

	<button class="funButton" onclick="MathNum('add')">+</button>
    
	<button class="numButton tripleRow" onclick="num(0)">0</button>
	<button class="funButton" onclick="solve()">=</button>

js

function clearNums(){ 	//clears all numbers
  holdNum = 0;
  storedNum = 0;
  document.getElementById("display").innerHTML = holdNum;
  console.log(holdNum, storedNum); //testing
}


function MathNum(type){
  lastType = type;
 
  if(type === "add"){
	console.log(holdNum, '+', storedNum); //testing
	storedNum = holdNum + storedNum;
	holdNum = 0;
	document.getElementById("display").innerHTML = holdNum;
	console.log(holdNum, storedNum); //testing
  }
}
 
 function solve(){
   if(holdNum != 0){  
  	MathNum(lastType);
	}
	document.getElementById("display").innerHTML = storedNum;
   console.log("="); //testing
 }

had some trouble with subtracting start and clears storeNum was 0 and it would just minus from that fixed by setting stored number to null when empty and added a check for if storeNum was empty to move holdNum to it and equal checkers anyway for last type

html

 <button class="funButton" onclick="MathNum('sub')">-</button>

js

let storedNum = null;

function clearNums(){ 	//clears all numbers
  holdNum = 0;
  storedNum = null;
  document.getElementById("display").innerHTML = holdNum;
  console.log(holdNum, storedNum); //testing
}

function MathNum(type){
  lastType = type;
 
  if(storedNum == null){
	storedNum = holdNum;
	holdNum = 0;
  }
 
  else if(type === "add"){
	console.log(holdNum, '+', storedNum); //testing
	storedNum = storedNum + holdNum;
  }
 
  else if(type === "sub"){
	console.log(holdNum, '- ', storedNum); //testing
	storedNum = storedNum - holdNum;
  }
 
  holdNum = 0;
  document.getElementById("display").innerHTML = holdNum;
  console.log(holdNum, storedNum); //testing
}

--


</div><!--EndFragment-->
</body>
</html>

multiply and divide where simple to add

html

	<button class="funButton" onclick="back()">←</button>
	<button class="funButton" onclick="MathNum('div')">÷</button>
    
	<button class="numButton" onclick="num(7)">7</button>
	<button class="numButton" onclick="num(8)">8</button>
	<button class="numButton" onclick="num(9)">9</button>
	<button class="funButton" onclick="MathNum('mut')">x</button>

js

  else if(type === "mut"){
	console.log(holdNum, '* ', storedNum); //testing
	storedNum = storedNum * holdNum;
  }
 
  else if(type === "div"){
	console.log(holdNum, '/ ', storedNum); //testing
	storedNum = storedNum / holdNum;
  }
⚠️ **GitHub.com Fallback** ⚠️