-
Notifications
You must be signed in to change notification settings - Fork 0
/
labPracticeJavaScriptBasics.txt
148 lines (101 loc) · 3.29 KB
/
labPracticeJavaScriptBasics.txt
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
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
// part I: Problem Set
1.) /* Ryuichi Matsushita CIN302948989 */
2.) let base = 10;
let height = 5;
let area = 0.5 * base * height;
4.) console.log("The sum of 5 and 3 is: " + (5 + 3));
5.) const age = 33;
console.log(`My age is ${age} years old.`);
6.) console.log("In JavaScript, we use the backslash (\\) to escape special characters.");
7.) console.log("Einstein once said: \"Life is like riding a bicycle. To keep your balance, you must keep moving.\"");
8.) let a = 10;
let b = 5;
let result = a >= b;
console.log(result);
9.) let num1 = 10;
let num2 = 5;
let result = num1 > num2 && num2 > 0;
console.log(result);
10.) let number1 = 5;
let number2 = 8;
let result = number1 === number2 || number2 < 10;
console.log(result);
// Part II: Implementing a Basic Calculator
// HTML:
<html>
<head>
<title>Calculator</title>
</head>
<body>
<form>
<input type="text" id="operand1">
<input type="text" id="operand2">
<span>=</span>
<input type="text" id="result" disabled><br>
<button type="button" onclick="add()">+</button>
<button type="button" onclick="substract()">-</button>
<button type="button" onclick="clearInput()" class="clear">C</button><br>
<button type="button" onclick="multiply()">x</button>
<button type="button" onclick="divide()">/</button><br>
</form>
</body>
</html>
// CSS:
span {
font-size: 200%;
}
input {
margin: 5px 5px 5px 0;
padding: 0;
width: 100px;
height: 40px;
font-size: 200%;
text-align: right;
}
button {
margin: 5px 5px 5px 0;
padding: 0;
width: 105px;
height: 50px;
font-size: 200%;
}
.clear {
width: 125px;
}
// JavaScript:
// Add the values from input fields
function add() {
let operand1 = document.querySelector("#operand1").value;
operand1 = parseInt(operand1, 10);
let operand2 = document.querySelector("#operand2").value;
operand2 = parseInt(operand2, 10);
let result = operand1 + operand2;
document.querySelector("#result").value = result;
}
// Substract the values from input fields
function subtract() {
let operand1 = parseInt(document.querySelector("#operand1").value, 10);
let operand2 = parseInt(document.querySelector("#operand2").value, 10);
let result = operand1 - operand2;
document.querySelector("#result").value = result;
}
// Multiply the values from input fields
function multiply() {
let operand1 = parseInt(document.querySelector("#operand1").value, 10);
let operand2 = parseInt(document.querySelector("#operand2").value, 10);
let result = operand1 * operand2;
document.querySelector("#result").value = result;
}
// Divide the values from input fields
function divide() {
let operand1 = parseInt(document.querySelector("#operand1").value, 10);
let operand2 = parseInt(document.querySelector("#operand2").value, 10);
let result = operand1 / operand2;
document.querySelector("#result").value = result;
}
// Clear input fields
function clearInput() {
document.querySelector("#operand1").value = "";
document.querySelector("#operand2").value = "";
document.querySelector("#result").value = "";
}