Skip to content

Commit 68e5938

Browse files
Aman0509Aman0509
committed
add a project to 'Basic' module
1 parent 994477f commit 68e5938

File tree

5 files changed

+195
-1
lines changed

5 files changed

+195
-1
lines changed

‎Basics/README.md‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@
1515

1616
:abacus: [Understand with Code](summary-with-code/script.js)
1717

18-
:notebook_with_decorative_cover: [Project]()
18+
:notebook_with_decorative_cover: [Projects](projects/)
1919

2020
## Adding/Importing JS to the Website
2121

‎Basics/projects/calculator/assets/scripts/app.js‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
const defaultResult = 0;
2+
let currentResult = defaultResult;
3+
let logEntries = [];
4+
5+
// Gets input from input field
6+
function getUserNumberInput() {
7+
return parseInt(usrInput.value);
8+
}
9+
10+
// Generates and writes calculation log
11+
function createAndWriteOutput(operator, resultBeforeCalc, calcNumber) {
12+
const calcDescription = `${resultBeforeCalc} ${operator} ${calcNumber}`;
13+
outputResult(currentResult, calcDescription); // from vendor file
14+
}
15+
16+
function writeToLog(
17+
operationIdentifier,
18+
prevResult,
19+
operationNumber,
20+
newResult
21+
) {
22+
const logEntry = {
23+
operation: operationIdentifier,
24+
prevResult: prevResult,
25+
number: operationNumber,
26+
result: newResult
27+
};
28+
logEntries.push(logEntry);
29+
console.log(logEntries);
30+
}
31+
32+
function add() {
33+
const enteredNumber = getUserNumberInput();
34+
const initialResult = currentResult;
35+
currentResult += enteredNumber;
36+
createAndWriteOutput('+', initialResult, enteredNumber);
37+
writeToLog('ADD', initialResult, enteredNumber, currentResult);
38+
}
39+
40+
function subtract() {
41+
const enteredNumber = getUserNumberInput();
42+
const initialResult = currentResult;
43+
currentResult -= enteredNumber;
44+
createAndWriteOutput('-', initialResult, enteredNumber);
45+
writeToLog('SUBTRACT', initialResult, enteredNumber, currentResult);
46+
}
47+
48+
function multiply() {
49+
const enteredNumber = getUserNumberInput();
50+
const initialResult = currentResult;
51+
currentResult *= enteredNumber;
52+
createAndWriteOutput('*', initialResult, enteredNumber);
53+
writeToLog('MULTIPLY', initialResult, enteredNumber, currentResult);
54+
}
55+
56+
function divide() {
57+
const enteredNumber = getUserNumberInput();
58+
const initialResult = currentResult;
59+
currentResult /= enteredNumber;
60+
createAndWriteOutput('/', initialResult, enteredNumber);
61+
writeToLog('DIVIDE', initialResult, enteredNumber, currentResult);
62+
}
63+
64+
addBtn.addEventListener('click', add);
65+
subtractBtn.addEventListener('click', subtract);
66+
multiplyBtn.addEventListener('click', multiply);
67+
divideBtn.addEventListener('click', divide);

‎Basics/projects/calculator/assets/scripts/vendor.js‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
const usrInput = document.getElementById('input-number');
2+
const addBtn = document.getElementById('btn-add');
3+
const subtractBtn = document.getElementById('btn-subtract');
4+
const multiplyBtn = document.getElementById('btn-multiply');
5+
const divideBtn = document.getElementById('btn-divide');
6+
7+
const currentResultOutput = document.getElementById('current-result');
8+
const currentCalculationOutput = document.getElementById('current-calculation');
9+
10+
function outputResult(result, text) {
11+
currentResultOutput.textContent = result;
12+
currentCalculationOutput.textContent = text;
13+
}

‎Basics/projects/calculator/assets/styles/app.css‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
* {
2+
box-sizing: border-box;
3+
}
4+
5+
html {
6+
font-family: 'Roboto', open-sans;
7+
}
8+
9+
body {
10+
margin: 0;
11+
}
12+
13+
header {
14+
background: #023d6d;
15+
color: white;
16+
padding: 1rem;
17+
text-align: center;
18+
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.26);
19+
width: 100%;
20+
}
21+
22+
#results,
23+
#calculator {
24+
margin: 2rem auto;
25+
width: 40rem;
26+
max-width: 90%;
27+
border: 1px solid #023d6d;
28+
border-radius: 10px;
29+
padding: 1rem;
30+
color: #023d6d;
31+
}
32+
33+
#results {
34+
text-align: center;
35+
}
36+
37+
#calculator input {
38+
font: inherit;
39+
font-size: 3rem;
40+
border: 2px solid #023d6d;
41+
width: 10rem;
42+
padding: 0.15rem;
43+
margin: auto;
44+
display: block;
45+
color: #023d6d;
46+
text-align: center;
47+
}
48+
49+
#calculator input:focus {
50+
outline: none;
51+
}
52+
53+
#calculator button {
54+
font: inherit;
55+
background: #023d6d;
56+
color: white;
57+
border: 1px solid #023d6d;
58+
padding: 1rem;
59+
cursor: pointer;
60+
}
61+
62+
#calculator button:focus {
63+
outline: none;
64+
}
65+
66+
#calculator button:hover,
67+
#calculator button:active {
68+
background: #084f88;
69+
border-color: #084f88;
70+
}
71+
72+
#calc-actions button {
73+
width: 4rem;
74+
}
75+
76+
#calc-actions {
77+
margin-top: 1rem;
78+
text-align: center;
79+
}

‎Basics/projects/calculator/index.html‎

Lines changed: 35 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
7+
<title>Basics</title>
8+
<link
9+
href="https://fonts.googleapis.com/css?family=Roboto:400,700&display=swap"
10+
rel="stylesheet"
11+
/>
12+
<link rel="stylesheet" href="assets/styles/app.css" />
13+
<script src="assets/scripts/vendor.js" defer></script>
14+
<script src="assets/scripts/app.js" defer></script>
15+
</head>
16+
<body>
17+
<header>
18+
<h1>The Unconventional Calculator</h1>
19+
</header>
20+
21+
<section id="calculator">
22+
<input type="number" id="input-number" />
23+
<div id="calc-actions">
24+
<button type="button" id="btn-add">+</button>
25+
<button type="button" id="btn-subtract">-</button>
26+
<button type="button" id="btn-multiply">*</button>
27+
<button type="button" id="btn-divide">/</button>
28+
</div>
29+
</section>
30+
<section id="results">
31+
<h2 id="current-calculation">0</h2>
32+
<h2>Result: <span id="current-result">0</span></h2>
33+
</section>
34+
</body>
35+
</html>

0 commit comments

Comments
 (0)