-
Notifications
You must be signed in to change notification settings - Fork 0
/
ProgrammingWorkout.html
150 lines (134 loc) · 5.4 KB
/
ProgrammingWorkout.html
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
149
150
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Programming Workout Rules</title>
<style>
body {
/*background-color: gainsboro;*/
}
li {
/*font-size: xx-large;*/
}
div {
}
.randomResult {
background-color: darkgrey;
color: white;
width: 50%;
text-align: center;
font-size: x-large;
}
.selector {
display: inline-block;
border: 1px solid whitesmoke;
width: 24%;
/*position: relative;*/
/*top: 0px;*/
}
.column-selector {
display: inline-block;
border: 1px solid whitesmoke;
width: 24%;
}
</style>
<link rel="stylesheet" href="style.css">
<script>
let randomizer = () => {
let allTopics = document.getElementsByTagName('input');
let checkedTopics = Array.from(allTopics).filter(
function (element) {
return element.checked == true
}
);
let randomIndex = Math.floor(Math.random() * checkedTopics.length);
console.log(checkedTopics[randomIndex]);
document.getElementById('randomResult').innerText = checkedTopics[randomIndex].id;
};
let setcheckOfAllInTo = (divId, isChecked) => {
let allTopicsInDiv = document.getElementById(divId).getElementsByTagName('input');
Array.from(allTopicsInDiv).forEach(function (element) {
element.checked = isChecked;
})
};
</script>
</head>
<div class="header">
<ul>
<li><a href="index.html">About</a></li>
<li><a href="sources.html">Programming</a></li>
<li><a href="softwareTools.html">Software tools</a></li>
<li><a href="hardwareTools.html">Hardware tools</a></li>
<li><a class="active" href="ProgrammingWorkout.html">Programming Workout</a></li>
<li><a href="Unrelated.html">Unrelated</a></li>
</ul>
</div>
<div class="">
<div>
<h3>Rules:</h3>
<ol>
<li> Workout is uninterupted ~ 30 minutes</li>
<li> ~ 5 minutes typing exercise</li>
<li> ~ 25 minutes Coding/learning</li>
<ul>
<li><strong>Code from memory</strong> without help</li>
<li> Read Tutorial / documentation without coding</li>
<li> repeat above two</li>
</ul>
</ol>
</div>
<div class="column-selector">
<button onclick="setcheckOfAllInTo('javaDiv', true)">All Java</button>
<button onclick="setcheckOfAllInTo('javaDiv', false)">No Java</button>
</div>
<div class="column-selector">
<button onclick="setcheckOfAllInTo('javaScriptDiv', true)">All JavaScript</button>
<button onclick="setcheckOfAllInTo('javaScriptDiv', false)">No JavaScript</button>
</div>
<div class="column-selector">
<button onclick="setcheckOfAllInTo('webHtmlDiv', true)">All HTML/Web</button>
<button onclick="setcheckOfAllInTo('webHtmlDiv', false)">No HTML/Web</button>
</div>
<div class="column-selector">
<button onclick="setcheckOfAllInTo('dbDiv', true)">All DB</button>
<button onclick="setcheckOfAllInTo('dbDiv', false)">No DB</button>
</div>
<div class="selector" id="javaDiv">
<input checked id="Java Tutorial" type="checkbox">Java Tutorial</input><br>
<input checked id="Java Exercism.io" type="checkbox">Java Exercism.io</input><br>
<input checked id="Spring Tutorial" type="checkbox">Spring Tutorial</input><br>
<input checked id="JUnit" type="checkbox">JUnit</input><br>
</div>
<div class="selector" id="javaScriptDiv">
<input checked id="JavaScript Tutorial" type="checkbox">JavaScript Tutorial</input><br>
<input checked id="JavaScript Exercism.io" type="checkbox">JavaScript Exercism.io</input><br>
<input checked id="AngularJS Tutorial" type="checkbox">AngularJS Tutorial</input><br>
<input checked id="Jasmine Tutorial" type="checkbox">Jasmine Tutorial</input><br>
<input checked id="TypeScript Tutorial" type="checkbox">TypeScript Tutorial</input><br>
<input checked id="TypeScript Exercism.io" type="checkbox">TypeScript Exercism.io</input><br>
</div>
<div class="selector" id="webHtmlDiv">
<input checked id="HTML" type="checkbox">HTML</input><br>
<input checked id="CSS Tutorial" type="checkbox">CSS Tutorial</input><br>
<input checked id="Bootstrap Tutorial" type="checkbox">Bootstrap Tutorial</input><br>
<input checked id="SASS Tutorial" type="checkbox">SASS Tutorial</input><br>
</div>
<div class="selector" id="dbDiv">
<input checked id="SQL Tutorial" type="checkbox">SQL Tutorial</input><br>
<input checked id="PGAdmin Tutorial" type="checkbox">PGAdmin tutorial</input><br>
</div>
<div class="selector" id="not sorted">
<input checked id="Execute Program" type="checkbox">Execute Program</input><br>
<input checked id="IntelliJ" type="checkbox">IntelliJ</input><br>
</div>
<div style="width: 50%">
<br>
<center>
<button onclick="randomizer()">Random pick</button>
</center>
</div>
<br>
<div class="randomResult" id="randomResult">---</div>
</div>
</body>
</html>