Skip to content

Commit 17bab94

Browse files
ABagramABagram
committed
tooltip
1 parent 08f5561 commit 17bab94

File tree

5 files changed

+137
-41
lines changed

5 files changed

+137
-41
lines changed

‎README.md

900 Bytes

‎index.html

Lines changed: 63 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -10,6 +10,9 @@
1010
</head>
1111

1212
<body class="line-numbers">
13+
14+
<div id="progress-bar"></div>
15+
1316
<span class="center">ARDUINO TUTORIAL</span>
1417
<h1>How to make a temperature-controlled outlet</h1>
1518
<table class="difficulty-level">
@@ -25,7 +28,7 @@ <h1>How to make a temperature-controlled outlet</h1>
2528
</table>
2629
<div>
2730
<h2>Table of Contents</h2>
28-
<ul>
31+
<ul class="table-of-contents">
2932
<li>
3033
<a href="#Materials">Materials and Equipment</a>
3134
<ul>
@@ -44,6 +47,7 @@ <h2>Table of Contents</h2>
4447
<li>Connecting the Breadboard to the Arduino</li>
4548
</ul>
4649
</li>
50+
</ul>
4751
</div>
4852
<div id="Materials">
4953
<h2>Materials and Equipment</h2>
@@ -106,30 +110,35 @@ <h2>Procedures</h2>
106110
<h3>Connecting the Board to the Development Environment</h3>
107111
<ol>
108112
<li>
109-
<span class="aligned-bullet">Plug the Arduino Uno board to one of the USB ports of the laptop/
110-
computer through the USB Type-A to USB Type-B cable. This should light up the LED marked "ON" on
113+
<span class="aligned-bullet">Plug the <span class="material">Arduino Uno board</span> to one of the
114+
USB ports of the <span class="material">laptop/
115+
computer</span> through the <span class="material">USB Type-A to USB Type-B cable</span>.
116+
This should light up the LED marked "ON" on
111117
the Arduino Uno to indicate that the board is now being powered.
112118
</span>
113119
</li>
114120
<li>
115-
Launch the Arduino IDE.
116-
<div class="alert alert-warning">
117-
<span class="fas alert-warning-text">&#xf06a;</span>
118-
<strong class="alert-warning-text">Warning!</strong><br>Laptops/ computers generally can
119-
recognize that there is a USB device connected, but are not able to automatically identify it as
120-
an Arduino board.
121-
</div>
121+
Launch the <span class="material">Arduino IDE</span>.
122122
<ol>
123123
<li><strong>Tools </strong><i class="fas">&#xf105;</i></span><strong> Board</strong>, then
124-
select Arduino Uno.</li>
124+
select Arduino Uno.
125+
<div class="alert alert-warning">
126+
<span class="fas alert-warning-text">&#xf06a;</span>
127+
<strong class="alert-warning-text">Warning!</strong><br>Laptops/ computers generally can
128+
recognize that there is a USB device connected, but are not able to automatically
129+
identify it as
130+
an Arduino board.
131+
</div>
132+
</li>
125133
<li><strong>Tools </strong><i class="fas">&#xf105;</i></span><strong> Port</strong>, then select
126-
the communication (COM) port that corresponds to the Arduino.</li>
127-
<div class="alert alert-info">
128-
<img src="https://img.icons8.com/?size=20&id=dbEL2NLmlcac&format=png&color=62AEB2"
129-
style="display: inline-block; transform: translateY(20%);">
130-
<strong class="alert-info-text">Note.</strong><br>The port can be identified through the
131-
system’s Device Manager, wherein the Arduino Uno appears as an “Unknown device”.
132-
</div>
134+
the communication (COM) port that corresponds to the Arduino.
135+
<div class="alert alert-info">
136+
<img src="https://img.icons8.com/?size=20&id=dbEL2NLmlcac&format=png&color=62AEB2"
137+
style="display: inline-block; transform: translateY(20%);">
138+
<strong class="alert-info-text">Note.</strong><br>The port can be identified through the
139+
system’s Device Manager, wherein the Arduino Uno appears as an “Unknown device”.
140+
</div>
141+
</li>
133142
</ol>
134143
</li>
135144
</ol>
@@ -138,9 +147,9 @@ <h3>Connecting the Board to the Development Environment</h3>
138147
<div>
139148
<h3>Creating a New Sketch</h3>
140149
<ol>
141-
<li>Load a new sketch in the Arduino IDE.</li>
150+
<li>Load a new sketch in the <span class="material">Arduino IDE</span>.</li>
142151
<ol>
143-
<li><strong>File <i class="fas">&#xf105;</i></span> New</strong> The sketch should contain the .ino
152+
<li><strong>File <i class="fas">&#xf105;</i></span> New.</strong> The sketch should contain the .ino
144153
file extension.</li>
145154
<pre><code class="language-arduino">
146155
void setup(){
@@ -161,6 +170,8 @@ <h3>Creating a New Sketch</h3>
161170
<li><strong>Sketch <i class="fas">&#xf105;</i> Include Library <i class="fas">&#xf105;</i>
162171
Manage Libraries</strong> or <strong>Tools <i class="fas">&#xf105;</i>Manage
163172
Libraries</li></strong>
173+
<li></li>
174+
<li class="method-list-item">Test</li>
164175
</ol>
165176
</ol>
166177
</li>
@@ -186,44 +197,63 @@ <h3>Connecting the Breadboard to the Arduino</h3>
186197
Some breadboards <strong>do not</strong> have markings that indicate which power rails (strips) are
187198
<span class="alert-info-text tooltip">positive<span class="tooltiptext">typically marked by a <strong
188199
class="vcc">red line</strong> and a plus <strong class="vcc"><i
189-
class="fa">&#xf067;</i></strong> sign</span></span>, and the <strong>ground
190-
rail</strong>, which is typically marked by either a <strong style="color: #2980B9;">blue</strong>
191-
or <strong>black line</strong> and a negative <i class="fa">&#xf068;</i> sign.<p>In such case, simply
200+
class="fa">&#xf067;</i></strong> sign</span></span>, or <span
201+
class="alert-info-text tooltip">negative<span class="tooltiptext">typically marked by either a
202+
<strong style="color: #2980B9;">blue</strong>
203+
or <strong>black line</strong> and a negative <i class="fa">&#xf068;</i> sign</span></span>.<p>
204+
In such case, simply
192205
assign the rails.</p>Make sure to keep it consistent to prevent accidental short circuits.
193206
<hr>
194207
Learn more. <a
195208
href="https://learn.sparkfun.com/tutorials/how-to-use-a-breadboard/anatomy-of-a-breadboard"
196209
target="_blank">How to Use a Breadboard <i class="fas fa-external-link"></i></a>
197210
</div>
198211
<ol>
199-
<li>To be able to use both power rails as one, establish the connection between the <strong>two power
200-
rails</strong> of the breadboard by connecting one hole from each rail with a <strong>M/M jumper
201-
wire</strong>.
202-
<div>Tip: Use a red jumper wire to indiicate positive power supply connection for consistency.</div>
203-
<li>Connect one of the holes witin the power rail to the 5V pin of the Arduino Uno using a M/M jumper
204-
wire.</li>
205-
<li>To be able to use both ground rails as one, connect</li>
212+
<li>To use both <span class="vcc tooltip">positive rails<span class="tooltiptext">used to
213+
provide the positive voltage to power electronic components in the circuit & connect to the
214+
positive terminal of the power source</span></span> of the <span
215+
class="material">breadboard</span> interchangeably, connect them with
216+
an <span class="material">M/M jumper wire</span>. Plug one end into a hole on one rail and the other
217+
end into a hole on the other rail.
218+
<div class="alert alert-tip"><i class='fas alert-tip-text'>&#xf0eb;</i><strong
219+
class="alert-tip-text" style="padding: 7px;">Tip.</strong><br>Use a <span class="vcc">red
220+
jumper wire</span> to
221+
indicate positive power supply connection for consistency.</div>
222+
<li>Connect one of the holes within the power rail to the 5V pin of the Arduino Uno using an <span
223+
class="material">M/M jumper
224+
wire</span>.</li>
225+
<li>To use both <span class="tooltip">negative rails<span class="tooltiptext">used to provide the ground
226+
reference <img src="https://img.icons8.com/?size=20&id=123003&format=png&color=ffffff"> for
227+
the circuit & connect components that require a ground
228+
connection</span></span> interchangeably, connect them with an <span class="material">M/M jumper wire</span>. Plug one end
229+
into a hole on one rail and the other end into a hole on the other rail.</li>
206230
</li>
207231
</ol>
208232

209233
</div>
210234
</div>
211235
<code class="inline-code">in-line code</code>
212236
</body>
237+
213238
<script src="prism.js"></script>
239+
<script src="progress-bar.js"></script>
240+
<script src="viewed-bullet.js"></script>
214241
<script src="accordion.js"></script>
215242
<script src="https://kit.fontawesome.com/9ef70a0feb.js" crossorigin="anonymous"></script>
243+
216244
<link rel="stylesheet" href="prism.css">
217245
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
218246

219247
<br>
220248
<img src="https://support.arduino.cc/hc/article_attachments/13367271560476" width="36"> Free Online Tutorial<br>
221-
Authors: Maria Margarita Abasolo, Gabriel Atayde, Rodric Emmanuel Hones<br>
222-
Published: December 13, 2024 <br>
249+
<p><strong>Credits</strong></p>
250+
Makers: Maria Margarita Abasolo, Gabriel Atayde, Rodric Emmanuel Hones
251+
Published: December 13, 2024
252+
223253
<footer>
224254
<a href="https://github.com/ABagram" class="fa fa-github"></a>
225255
<a href="https://www.linkedin.com/in/maria-margarita-abasolo/" class="fa fa-linkedin"></a><br>
226-
Copyright © Maria Margarita Abasolo 2024. All rights reserved.
256+
<span class="subtitle">© 2024 Maria Margarita Abasolo. All rights reserved.</span>
227257
</footer>
228258

229259
</html>

‎progress-bar.js

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
let processScroll = () => {
2+
let docElem = document.documentElement,
3+
docBody = document.body,
4+
scrollTop = docElem['scrollTop'] || docBody['scrollTop'],
5+
scrollBottom = (docElem['scrollHeight'] || docBody['scrollHeight']) - window.innerHeight,
6+
scrollPercent = scrollTop / scrollBottom * 100 + '%';
7+
8+
document.getElementById('progress-bar').style.setProperty('--scroll-amount', scrollPercent)
9+
}
10+
11+
document.addEventListener('scroll', processScroll);

‎style.css

Lines changed: 58 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -11,7 +11,7 @@
1111
body{
1212
font-family: Poppins;
1313
background-size: 40px 40px;
14-
width: 85%;
14+
max-width: 100vh;
1515
margin: auto;
1616
}
1717

@@ -93,21 +93,22 @@ code{
9393
footer{
9494
text-align: center;
9595
background-color: var(--border-color);
96+
bottom: 0;
97+
width: 100%;
98+
height: 2.5rem;
9699
}
97100

98101
.center{
99102
display: flex;
100103
justify-content: center;
101104
}
102105

103-
.fa-info-circle{
104-
color: inherit;
105-
}
106106

107107
.alert{
108108
border-style: solid;
109109
border-radius: 10px;
110-
margin: 10px;
110+
margin-top: 2em;
111+
margin-bottom: 2em;
111112
padding: 20px;
112113
}
113114

@@ -131,6 +132,14 @@ footer{
131132
color: var(--quaternary-color);
132133
}
133134

135+
.alert-tip{
136+
border: .15em solid var(--quinary-color);
137+
}
138+
139+
.alert-tip-text{
140+
color: var(--quinary-color);
141+
}
142+
134143
ol{
135144
counter-reset: step-count;
136145
list-style-type: none;
@@ -164,6 +173,7 @@ ol li::before{
164173
counter-increment: method-count;
165174
font-weight: bold;
166175
background-color: transparent;
176+
color: var(--quaternary-color);
167177
}
168178

169179
.fa{
@@ -186,22 +196,24 @@ a:link{
186196
position: relative;
187197
display: inline-block;
188198
border-bottom: 1px dotted;
199+
cursor: pointer;
189200
}
190201

191202
.tooltip .tooltiptext{
203+
192204
visibility: hidden;
193205
width: 25em;
194-
background-color: black;
206+
background-color: rgba(0,0,0,0.8);
195207
color: white;
196208
text-align: center;
197-
border-radius: 5em;
209+
border-radius: .5em;
198210
padding: 0.25em 0.5em 0.25em 0.5em;
199211

200212
position: absolute;
201213
z-index: 1;
202214

203215
bottom: 110%;
204-
margin-left: -15em;
216+
margin-left: -16.25em;
205217
}
206218

207219
.tooltip .tooltiptext::after{
@@ -217,4 +229,42 @@ a:link{
217229

218230
.tooltip:hover .tooltiptext{
219231
visibility: visible;
232+
}
233+
234+
.material{
235+
color: var(--secondary-color);
236+
}
237+
238+
#progress-bar{
239+
--scroll-amount: 10%;
240+
background-color: var(--secondary-color);
241+
width: var(--scroll-amount);
242+
height: 4px;
243+
position: fixed;
244+
top: 0;
245+
left: 0;
246+
margin: 0;
247+
}
248+
249+
.table-of-contents li{
250+
list-style: none;
251+
}
252+
253+
.table-of-contents li::before{
254+
font-family: 'FontAwesome';
255+
content: '\f105';
256+
margin: 0 5px 0 -15px;
257+
font-weight: bold;
258+
}
259+
260+
.table-of-contents li ul li:hover{
261+
background-color: var(--border-color);
262+
border-radius: 10px;
263+
}
264+
265+
.table-of-contents li.visited::before{
266+
font-family: 'FontAwesome';
267+
content: '\f00c';
268+
margin: 0 5px 0 -15px;
269+
font-weight: bold;
220270
}

‎viewed-bullet.js

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
document.querySelectorAll('a').forEach(LINK => {
2+
LINK.addEventListener('click', function(){
3+
this.parentElement.classList.add('visited');
4+
});
5+
});

0 commit comments

Comments
 (0)