Skip to content

Commit afcbd7f

Browse files
bbelderbosbbelderbos
committed
JS lesson demo materials
1 parent 3b1d65f commit afcbd7f

31 files changed

+1130
-0
lines changed

‎.gitignore

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -170,3 +170,4 @@ yahoo_clone.iml
170170
signup.iml
171171
days/013-016-css-basics/demos/selectorville/.idea/encodings.xml
172172
days/013-016-css-basics/demos/selectorville/.idea/selectorville.iml
173+
**.DS_Store

‎days/025-028-javascript/demo/calculator/index-template.html

Lines changed: 46 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,46 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>JS is Fun!</title>
5+
<style>
6+
body {
7+
width: 800px;
8+
margin: 0 auto;
9+
}
10+
#result {
11+
font-size: 200%;
12+
font-weight: bold;
13+
}
14+
#result, #calculateForm {
15+
padding: 10px;
16+
margin: 10px 0;
17+
border: 1px solid #ddd;
18+
}
19+
</style>
20+
</head>
21+
<body>
22+
23+
<h1>Basic JS Calculator</h1>
24+
25+
<form id="calculateForm">
26+
<input id="num1">
27+
<select id="operator">
28+
<option name="+">+</option>
29+
<option name="-">-</option>
30+
<option name="*">*</option>
31+
<option name="/">/</option>
32+
</select>
33+
<input id="num2">
34+
<button type="button" id="calculate" onclick="doCalculation();">Calculate!</button>
35+
</form>
36+
37+
<div id="result"></div>
38+
39+
<script type="text/javascript">
40+
function doCalculation(){
41+
// you code
42+
}
43+
</script>
44+
45+
</body>
46+
</html>

‎days/025-028-javascript/demo/calculator/index.html

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>JS is Fun!</title>
5+
<style>
6+
body {
7+
width: 800px;
8+
margin: 0 auto;
9+
}
10+
#result {
11+
font-size: 200%;
12+
font-weight: bold;
13+
}
14+
#result, #calculateForm {
15+
padding: 10px;
16+
margin: 10px 0;
17+
border: 1px solid #ddd;
18+
}
19+
</style>
20+
</head>
21+
<body>
22+
23+
<h1>Basic JS Calculator</h1>
24+
25+
<form id="calculateForm">
26+
<input id="num1">
27+
<select id="operator">
28+
<option name="+">+</option>
29+
<option name="-">-</option>
30+
<option name="*">*</option>
31+
<option name="/">/</option>
32+
</select>
33+
<input id="num2">
34+
<button type="button" id="calculate" onclick="doCalculation();">Calculate!</button>
35+
</form>
36+
37+
<div id="result"></div>
38+
39+
<script type="text/javascript">
40+
// to avoid using evil eval!
41+
// https://stackoverflow.com/a/13077966
42+
const math_it_up = {
43+
'+': function (x, y) { return x + y },
44+
'-': function (x, y) { return x - y },
45+
'*': function (x, y) { return x * y },
46+
'/': function (x, y) { return x / y },
47+
}
48+
49+
function doCalculation(){
50+
let operator = document.getElementById("operator").value;
51+
let num1 = document.getElementById("num1").value;
52+
let num2 = document.getElementById("num2").value;
53+
54+
let result = math_it_up[operator](parseInt(num1), parseInt(num2));
55+
56+
if(isNaN(result) || !isFinite(result)){
57+
document.getElementById("result").style.color= "red";
58+
} else {
59+
document.getElementById("result").style.color= "green";
60+
}
61+
62+
document.getElementById("result").innerHTML = result;
63+
}
64+
</script>
65+
66+
</body>
67+
</html>

‎days/025-028-javascript/demo/calories/README.md

Whitespace-only changes.

‎days/025-028-javascript/demo/calories/css/auto-complete.css

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
.autocomplete-suggestions {
2+
text-align: left; cursor: default; border: 1px solid #ccc; border-top: 0; background: #fff; box-shadow: -1px 1px 3px rgba(0,0,0,.1);
3+
4+
/* core styles should not be changed */
5+
position: absolute; display: none; z-index: 9999; max-height: 254px; overflow: hidden; overflow-y: auto; box-sizing: border-box;
6+
}
7+
.autocomplete-suggestion { position: relative; padding: 0 .6em; line-height: 23px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: 1.02em; color: #333; }
8+
.autocomplete-suggestion b { font-weight: normal; color: #1f8dd6; }
9+
.autocomplete-suggestion.selected { background: #f0f0f0; }

‎days/025-028-javascript/demo/calories/css/mui.min.css

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎days/025-028-javascript/demo/calories/css/style.css

Lines changed: 21 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
th, td {
2+
text-align: left;
3+
}
4+
#logo {
5+
position: relative;
6+
top: 10px;
7+
right: 15px;
8+
}
9+
#content-wrapper {
10+
margin: 20px;
11+
}
12+
.delete {
13+
background: url('../img/delete.png') no-repeat top left;
14+
border: none;
15+
cursor: pointer;
16+
width: 20px;
17+
height: 20px;
18+
}
19+
.bold {
20+
font-weight: bold;
21+
}

‎days/025-028-javascript/demo/calories/img/delete.png

307 Bytes
Loading

‎days/025-028-javascript/demo/calories/img/favicon.ico

1.12 KB
Binary file not shown.

‎days/025-028-javascript/demo/calories/img/le_bigmac.png

2.93 KB
Loading

0 commit comments

Comments
 (0)