Skip to content

Some changes on exercise 8. #9

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Stef-Lev wants to merge 25 commits into
base: master
Choose a base branch
from
Open

Some changes on exercise 8. #9

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
25 commits
Select commit Hold shift + click to select a range
047d357
Homework done
Stef-Lev Jan 14, 2020
c39774e
Update MAKEME.md
Stef-Lev Jan 15, 2020
3c2f67a
Update MAKEME.md
Stef-Lev Jan 15, 2020
4423f93
Add files via upload
Stef-Lev Jan 15, 2020
c05cf61
Add files via upload
Stef-Lev Jan 15, 2020
c1d9588
Delete index.html
Stef-Lev Jan 15, 2020
7270f62
Delete main.js
Stef-Lev Jan 15, 2020
66a7872
Delete style.css
Stef-Lev Jan 15, 2020
3c51e93
Add files via upload
Stef-Lev Jan 15, 2020
c63dd12
Delete index.html
Stef-Lev Jan 15, 2020
6bb8168
Delete main.js
Stef-Lev Jan 15, 2020
067af8e
Delete style.css
Stef-Lev Jan 15, 2020
b6266fa
Add files via upload
Stef-Lev Jan 15, 2020
3ff4d94
Recloning
Stef-Lev Jan 15, 2020
226bcf3
Created files
Stef-Lev Jan 17, 2020
23ad693
Files added
Stef-Lev Jan 17, 2020
7cc54ba
Only exercise left
Stef-Lev Jan 22, 2020
53a596d
Update style.css
Stef-Lev Jan 22, 2020
e3340c4
Temperature converter added
Stef-Lev Jan 22, 2020
cb8867f
Merge branch 'master' of https://github.com/Stef-Lev/JavaScript1
Stef-Lev Jan 22, 2020
a1e06f2
new files added
Stef-Lev Jan 24, 2020
75aeb9d
Project 2 ready
Stef-Lev Jan 25, 2020
97ef941
Week2 Finished
Stef-Lev Jan 26, 2020
ebec922
meditation app finished
Stef-Lev Jan 26, 2020
1e424c7
Javascript1 homework and projects completed
Stef-Lev Jan 27, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Prev Previous commit
Next Next commit
new files added
  • Loading branch information
@Stef-Lev
Stef-Lev committed Jan 24, 2020
commit a1e06f2db4a5194384d88c40411bf09e4a21648b
148 changes: 74 additions & 74 deletions ...1/homework/calculatorCodeAlong/index.html → .../homework/codeAlong/calculator/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,75 +1,75 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<title>Stefanos' Javascript Calculator</title>
<script src="https://kit.fontawesome.com/b039c65688.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="container text-center background">
<div class="row justify-content-center">
<div class="screen m-3 rounded">
<div data-previous-operand class="previous-operand"></div>
<div data-current-operand class="current-operand"></div>
</div>
</div>
<div class="row justify-content-center">
<button type="button" class="btn btn-dark btn-lg m-1 p-auto clear" data-all-clear>AC</button>
<button type="button" class="btn btn-dark btn-lg m-1 p-auto" data-delete><i
class="fas fa-backspace"></i></button>
<button type="button" class="btn btn-dark btn-lg m-1 p-auto" data-operation>÷</button>
</div>
<div class="row justify-content-center">
<button type="button" class="btn btn-dark btn-lg m-1 p-auto" data-number>7</button>
<button type="button" class="btn btn-dark btn-lg m-1 p-auto" data-number>8</button>
<button type="button" class="btn btn-dark btn-lg m-1 p-auto" data-number>9</button>
<button type="button" class="btn btn-dark btn-lg m-1 p-auto" data-operation>×</button>
</div>
<div class="row justify-content-center">
<button type="button" class="btn btn-dark btn-lg m-1 p-auto" data-number>4</button>
<button type="button" class="btn btn-dark btn-lg m-1 p-auto" data-number>5</button>
<button type="button" class="btn btn-dark btn-lg m-1 p-auto" data-number>6</button>
<button type="button" class="btn btn-dark btn-lg m-1 p-auto" data-operation>-</button>
</div>
<div class="row justify-content-center">
<button type="button" class="btn btn-dark btn-lg m-1 p-auto" data-number>1</button>
<button type="button" class="btn btn-dark btn-lg m-1 p-auto" data-number>2</button>
<button type="button" class="btn btn-dark btn-lg m-1 p-auto" data-number>3</button>
<button type="button" class="btn btn-dark btn-lg m-1 p-auto" data-operation>+</button>
</div>
<div class="row justify-content-center">
<button type="button" class="btn btn-dark btn-lg m-1 p-auto" data-number>0</button>
<button type="button" class="btn btn-dark btn-lg m-1 p-auto" data-number>00</button>
<button type="button" class="btn btn-dark btn-lg m-1 p-auto" data-number>.</button>
<button type="button" class="btn btn-dark btn-lg m-1 p-auto equals" data-equals><i
class="fas fa-equals"></i></button>
</div>
</div>
<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
<script src="main.js"></script>
</body>
<!doctype html>
<html lang="en">

<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link rel="stylesheet" href="style.css">

<title>Stefanos' Javascript Calculator</title>
<script src="https://kit.fontawesome.com/b039c65688.js" crossorigin="anonymous"></script>
</head>

<body>
<div class="container text-center background">
<div class="row justify-content-center">
<div class="screen m-3 rounded">
<div data-previous-operand class="previous-operand"></div>
<div data-current-operand class="current-operand"></div>
</div>
</div>

<div class="row justify-content-center">
<button type="button" class="btn btn-dark btn-lg m-1 p-auto clear" data-all-clear>AC</button>
<button type="button" class="btn btn-dark btn-lg m-1 p-auto" data-delete><i
class="fas fa-backspace"></i></button>
<button type="button" class="btn btn-dark btn-lg m-1 p-auto" data-operation>÷</button>
</div>
<div class="row justify-content-center">
<button type="button" class="btn btn-dark btn-lg m-1 p-auto" data-number>7</button>
<button type="button" class="btn btn-dark btn-lg m-1 p-auto" data-number>8</button>
<button type="button" class="btn btn-dark btn-lg m-1 p-auto" data-number>9</button>
<button type="button" class="btn btn-dark btn-lg m-1 p-auto" data-operation>×</button>
</div>
<div class="row justify-content-center">
<button type="button" class="btn btn-dark btn-lg m-1 p-auto" data-number>4</button>
<button type="button" class="btn btn-dark btn-lg m-1 p-auto" data-number>5</button>
<button type="button" class="btn btn-dark btn-lg m-1 p-auto" data-number>6</button>
<button type="button" class="btn btn-dark btn-lg m-1 p-auto" data-operation>-</button>
</div>
<div class="row justify-content-center">
<button type="button" class="btn btn-dark btn-lg m-1 p-auto" data-number>1</button>
<button type="button" class="btn btn-dark btn-lg m-1 p-auto" data-number>2</button>
<button type="button" class="btn btn-dark btn-lg m-1 p-auto" data-number>3</button>
<button type="button" class="btn btn-dark btn-lg m-1 p-auto" data-operation>+</button>
</div>
<div class="row justify-content-center">
<button type="button" class="btn btn-dark btn-lg m-1 p-auto" data-number>0</button>
<button type="button" class="btn btn-dark btn-lg m-1 p-auto" data-number>00</button>
<button type="button" class="btn btn-dark btn-lg m-1 p-auto" data-number>.</button>
<button type="button" class="btn btn-dark btn-lg m-1 p-auto equals" data-equals><i
class="fas fa-equals"></i></button>
</div>


</div>

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->

<script src="https://code.jquery.com/jquery-3.4.1.slim.min.js"
integrity="sha384-J6qa4849blE2+poT4WnyKhv5vZF5SrPo0iEjwBvKU7imGFAV0wwj1yYfoRSJoZ+n"
crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.0/dist/umd/popper.min.js"
integrity="sha384-Q6E9RHvbIyZFJoft+2mJbHaEWldlvI9IOYy5n3zV9zzTtmI3UksdQRVvoxMfooAo"
crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.min.js"
integrity="sha384-wfSDF2E50Y2D1uUdj0O3uMBJnjuUD4Ih7YwaYd1iqfktj0Uod8GCExl3Og8ifwB6"
crossorigin="anonymous"></script>
<script src="main.js"></script>
</body>

</html>
244 changes: 122 additions & 122 deletions Week1/homework/calculatorCodeAlong/main.js → Week1/homework/codeAlong/calculator/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,122 +1,122 @@
class Calculator {
constructor(previousOperandTextElement, currentOperandTextElement) {
this.previousOperandTextElement = previousOperandTextElement
this.currentOperandTextElement = currentOperandTextElement
this.clear()
}
clear() {
this.currentOperand = ""
this.previousOperand = ""
this.operation = undefined
}
delete() {
this.currentOperand = this.currentOperand.toString().slice(0, -1)
}
appendNumber(number) {
if (number === "." && this.currentOperand.includes(".")) return
this.currentOperand = this.currentOperand.toString() + number.toString()
}
chooseOperation(operation) {
if (this.currentOperand === "") return
if (this.previousOperand !== "") {
this.compute()
}
this.operation = operation
this.previousOperand = this.currentOperand
this.currentOperand = ""
}
compute() {
let computation
const prev = parseFloat(this.previousOperand)
const curr = parseFloat(this.currentOperand)
if (isNaN(prev) || isNaN(curr)) return
switch (this.operation) {
case "+":
computation = prev + curr
break;
case "-":
computation = prev - curr
break;
case "×":
computation = prev * curr
break;
case "÷":
computation = prev / curr
break;
default:
return
}
this.currentOperand = computation
this.operation = undefined
this.previousOperand = ""
}
getDisplayNumber(number) {
const stringNumber = number.toString()
const integerDigits = parseFloat(stringNumber.split(".")[0])
const decimalDigits = stringNumber.split(".")[1]
let integerDisplay
if (isNaN(integerDigits)) {
integerDisplay = ""
} else {
integerDisplay = integerDigits.toLocaleString("en", { maximumFractionDigits: 0 })
}
if (decimalDigits != null) {
return `${integerDisplay}.${decimalDigits}`
} else {
return integerDisplay
}
}
updateDisplay() {
this.currentOperandTextElement.innerText = this.getDisplayNumber(this.currentOperand)
if (this.operation != null) {
this.previousOperandTextElement.innerText = `${this.getDisplayNumber(this.previousOperand)} ${this.operation}`
} else {
this.previousOperandTextElement.innerText = ""
}
}
}
const numberButtons = document.querySelectorAll('[data-number]');
const operationButtons = document.querySelectorAll('[data-operation]');
const equalsButton = document.querySelector('[data-equals]');
const deleteButton = document.querySelector('[data-delete]');
const allClearButton = document.querySelector('[data-all-clear]');
const previousOperandTextElement = document.querySelector('[data-previous-operand]');
const currentOperandTextElement = document.querySelector('[data-current-operand]');
const calculator = new Calculator(previousOperandTextElement, currentOperandTextElement)
numberButtons.forEach(button => {
button.addEventListener("click", () => {
calculator.appendNumber(button.innerText)
calculator.updateDisplay()
})
})
operationButtons.forEach(button => {
button.addEventListener("click", () => {
calculator.chooseOperation(button.innerText)
calculator.updateDisplay()
})
})
equalsButton.addEventListener("click", button => {
calculator.compute()
calculator.updateDisplay()
})
allClearButton.addEventListener("click", button => {
calculator.clear()
calculator.updateDisplay()
})
deleteButton.addEventListener("click", button => {
calculator.delete()
calculator.updateDisplay()
})
class Calculator {
constructor(previousOperandTextElement, currentOperandTextElement) {
this.previousOperandTextElement = previousOperandTextElement
this.currentOperandTextElement = currentOperandTextElement
this.clear()
}

clear() {
this.currentOperand = ""
this.previousOperand = ""
this.operation = undefined
}

delete() {
this.currentOperand = this.currentOperand.toString().slice(0, -1)

}

appendNumber(number) {
if (number === "." && this.currentOperand.includes(".")) return
this.currentOperand = this.currentOperand.toString() + number.toString()
}

chooseOperation(operation) {
if (this.currentOperand === "") return
if (this.previousOperand !== "") {
this.compute()
}
this.operation = operation
this.previousOperand = this.currentOperand
this.currentOperand = ""
}

compute() {
let computation
const prev = parseFloat(this.previousOperand)
const curr = parseFloat(this.currentOperand)
if (isNaN(prev) || isNaN(curr)) return
switch (this.operation) {
case "+":
computation = prev + curr
break;
case "-":
computation = prev - curr
break;
case "×":
computation = prev * curr
break;
case "÷":
computation = prev / curr
break;
default:
return
}
this.currentOperand = computation
this.operation = undefined
this.previousOperand = ""

}

getDisplayNumber(number) {
const stringNumber = number.toString()
const integerDigits = parseFloat(stringNumber.split(".")[0])
const decimalDigits = stringNumber.split(".")[1]
let integerDisplay
if (isNaN(integerDigits)) {
integerDisplay = ""
} else {
integerDisplay = integerDigits.toLocaleString("en", { maximumFractionDigits: 0 })
}
if (decimalDigits != null) {
return `${integerDisplay}.${decimalDigits}`
} else {
return integerDisplay
}
}

updateDisplay() {
this.currentOperandTextElement.innerText = this.getDisplayNumber(this.currentOperand)
if (this.operation != null) {
this.previousOperandTextElement.innerText = `${this.getDisplayNumber(this.previousOperand)} ${this.operation}`
} else {
this.previousOperandTextElement.innerText = ""
}
}
}

const numberButtons = document.querySelectorAll('[data-number]');
const operationButtons = document.querySelectorAll('[data-operation]');
const equalsButton = document.querySelector('[data-equals]');
const deleteButton = document.querySelector('[data-delete]');
const allClearButton = document.querySelector('[data-all-clear]');
const previousOperandTextElement = document.querySelector('[data-previous-operand]');
const currentOperandTextElement = document.querySelector('[data-current-operand]');

const calculator = new Calculator(previousOperandTextElement, currentOperandTextElement)

numberButtons.forEach(button => {
button.addEventListener("click", () => {
calculator.appendNumber(button.innerText)
calculator.updateDisplay()
})
})
operationButtons.forEach(button => {
button.addEventListener("click", () => {
calculator.chooseOperation(button.innerText)
calculator.updateDisplay()
})
})
equalsButton.addEventListener("click", button => {
calculator.compute()
calculator.updateDisplay()
})
allClearButton.addEventListener("click", button => {
calculator.clear()
calculator.updateDisplay()
})
deleteButton.addEventListener("click", button => {
calculator.delete()
calculator.updateDisplay()
})

Loading