-
Notifications
You must be signed in to change notification settings - Fork 0
Expand file tree
/
Copy pathjavascript.html
More file actions
362 lines (300 loc) · 15.3 KB
/
Copy pathjavascript.html
File metadata and controls
362 lines (300 loc) · 15.3 KB
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
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Tailwind 10</title>
<link rel="stylesheet" href="assets/styles.css">
<link rel="stylesheet" href="assets/flexboxes.css">
<link rel="stylesheet" href="assets/nav.css">
<link rel="stylesheet" href="assets/typography.css">
<link href="dist/output.css" rel="stylesheet">
</head>
<body class="bg-gray-100 text-gray-800 min-h-screen p-10">
<!-- NAVBAR -->
<nav id="navbar" class="bg-white shadow fixed top-0 left-0 w-full z-50 transition-all duration-300">
<div class="max-w-6xl mx-auto px-4">
<div class="flex justify-between items-center py-4">
<!-- Logo -->
<div class="text-xl font-bold text-wlate-600">
<a href="index.html" data-link="home" >
<h1>BPHTML10TWNDJS</h1>
</a>
</div>
<!-- Mobile menu button -->
<button id="nav-toggle" class="md:hidden text-2xl focus:outline-none">
☰
</button>
<!-- Desktop links -->
<ul id="nav-links" class="hidden md:flex space-x-4 text-gray-700">
<li><a href="npm.html" data-link="home" class="nav-link hover:text-slate-100">NPM</a></li>
<li><a href="images.html" data-link="about" class="nav-link hover:text-slate-100">Images</a></li>
<li><a href="javascript.html" data-link="services" class="nav-link hover:text-slate-100">Javascript</a></li>
</ul>
</div>
<!-- Mobile dropdown -->
<ul id="nav-mobile"
class="hidden md:hidden flex flex-col space-y-2 pb-4 text-gray-700 font-medium overflow-hidden max-h-0 transition-all duration-300">
<li><a href="npm.html" data-link="home" class="nav-link hover:text-slate-100">NPM</a></li>
<li><a href="images.html" data-link="about" class="nav-link hover:text-slate-100">Images</a></li>
<li><a href="javascript.html" data-link="services" class="nav-link hover:text-slate-100">Javascript</a></li>
</ul>
</div>
</nav>
<div class="container max-w-4xl mx-auto px-4">
<section class="prose prose-neutral max-w-none mt-12">
<h1 class="font-bold mb-12">JavaScript & Tailwind</h1>
<!-- Section 1 -->
<section class="prose prose-neutral max-w-none mb-12">
<h1>1. Accordion Toggle</h1>
<p>
The accordion JavaScript selects all elements with the
<code>.accordion-btn</code> class and attaches a click event listener. When
a button is clicked, the script toggles the <code>hidden</code> class on the
corresponding <code>.accordion-content</code> element, revealing or hiding
it. It also updates the icon inside the button—switching <strong>+</strong>
when hidden and <strong>-</strong> when visible.
</p>
<p class="font-bold mt-3">Relevant script/code include:</p>
<pre>
<code>
document.querySelectorAll('.accordion-btn').forEach(button => {
button.addEventListener('click', () => {
const content = button.nextElementSibling;
content.classList.toggle('hidden');
const icon = button.querySelector('span');
icon.textContent = content.classList.contains('hidden') ? '+' : '-';
});
});
const navToggle = document.getElementById("nav-toggle");
const navMobile = document.getElementById("nav-mobile");
const navLinks = document.querySelectorAll(".nav-link");
const navbar = document.getElementById("navbar");
</code>
</pre>
<p class="font-sans font-medium text-gray-800 text-base md:text-lg leading-relaxed p-4 mb-12 bg-gray-50 rounded-lg shadow-md">
This code makes parts of a webpage interactive. First, it targets all elements with the class <span class="font-mono text-blue-600">.accordion-btn</span>—buttons meant to open or close sections. For each button, it adds a click event listener. When clicked, it finds the next element in the HTML (usually the content panel) and toggles a CSS class <span class="font-mono text-blue-600">hidden</span>, which shows or hides that content. It also updates a <span class="font-mono text-blue-600"><span></span> inside the button to display <span class="font-mono text-green-600">+</span> when the content is hidden and <span class="font-mono text-green-600">-</span> when visible, giving users a clear visual cue. The second part selects navigation elements: <span class="font-mono text-blue-600">navToggle</span> is likely a button for opening a mobile menu, <span class="font-mono text-blue-600">navMobile</span> is the mobile menu itself, <span class="font-mono text-blue-600">navLinks</span> are individual menu links, and <span class="font-mono text-blue-600">navbar</span> is the main navigation bar. While these selections don’t act yet, they prepare the elements for future interactions. Overall, the code combines element selection and event handling to make accordions and navigation interactive.
</p>
<p class="font-bold mt-3">Let's look at this script/code in detail:</p>
<pre>
<code>
const navToggle = document.getElementById("nav-toggle");
const navMobile = document.getElementById("nav-mobile");
const navLinks = document.querySelectorAll(".nav-link");
const navbar = document.getElementById("navbar");
</code>
</pre>
<p>
These four lines of JavaScript retrieve and store references to specific elements in the webpage so they can be controlled later with interactive behavior. The first line selects the button that opens or closes the mobile navigation menu by targeting the element with the ID nav-toggle. The second line grabs the mobile navigation container itself—the element with the ID nav-mobile—so its visibility can be toggled when the user clicks the button. The third line collects all navigation link elements that use the class nav-link; this allows the script to loop through them, highlight the active link, or close the menu when a link is clicked. The final line selects the main navigation bar with the ID navbar, enabling additional features such as auto-hide on scroll or applying style changes. Together, these lines prepare the essential elements the script will manipulate to provide interactive navigation on the site.
</p>
<pre>
<code>
document.querySelectorAll('.accordion-btn').forEach(button => {
button.addEventListener('click', () => {
const content = button.nextElementSibling;
content.classList.toggle('hidden');
const icon = button.querySelector('span');
icon.textContent = content.classList.contains('hidden') ? '+' : '-';
});
});
</code>
</pre>
<p>
This code selects all elements with the class .accordion-btn and loops through each one. For every button, it adds a click event listener. When the button is clicked, the script finds the next sibling element—usually the accordion’s content panel—and toggles the class hidden on it, which shows or hides the content depending on your CSS. It then looks inside the clicked button for a <span> element (used as the icon). If the content is now hidden, the span’s text is set to "+"; if the content is visible, the span’s text changes to "-". In short, the code controls the opening and closing of accordion sections and updates the icon to reflect the current state.
</p>
<p class="font-bold mt-3">Relevant Tailwind classes include:</p>
<ul>
<li><code>hidden</code> — hides accordion content by default</li>
<li><code>bg-white</code>, <code>bg-gray-50</code></li>
<li><code>border</code>, <code>rounded</code></li>
<li><code>p-4</code></li>
<li><code>font-semibold</code>, <code>text-gray-700</code></li>
</ul>
<p>
These classes style the accordion container, layout, spacing, and
typography, while JavaScript controls the interactive opening and closing
behavior.
</p>
</section>
<!-- Section 2 -->
<section class="prose prose-neutral max-w-none mb-12">
<h1>2. Mobile Navigation Menu</h1>
<p>
The mobile menu toggle uses JavaScript to control both
<code>#nav-toggle</code> (the button) and <code>#nav-mobile</code> (the
menu). When the button is clicked, JavaScript toggles the
<code>hidden</code> class and adjusts <code>maxHeight</code> to create a
smooth sliding animation.
</p>
<p class="font-bold mt-3">Relevant script/code include:</p>
<pre>
<code>
navToggle.addEventListener("click", () => {
if (navMobile.classList.contains("hidden")) {
navMobile.classList.remove("hidden");
navMobile.style.maxHeight = navMobile.scrollHeight + "px";
} else {
navMobile.style.maxHeight = "0px";
setTimeout(() => navMobile.classList.add("hidden"), 300);
}
});
</code>
</pre>
<p class="font-bold mt-3">Important Tailwind classes used:</p>
<ul>
<li><code>hidden</code> — hides menu by default</li>
<li><code>md:hidden</code> — shows mobile menu only on small screens</li>
<li><code>flex</code>, <code>flex-col</code>, <code>space-y-2</code></li>
<li><code>pb-4</code></li>
<li><code>text-gray-700</code></li>
</ul>
<p>
This setup ensures a responsive, mobile-friendly menu that appears only
where needed and does not interfere with the desktop layout.
</p>
</section>
<!-- Section 3 -->
<section class="prose prose-neutral max-w-none mb-12">
<h1>3. Active Link Highlighting</h1>
<p>
JavaScript dynamically adds or removes Tailwind classes to show which
navigation link is currently active. Each
<code>.nav-link</code> element includes a <code>data-link</code> attribute.
When one is clicked, the script adds <code>text-blue-600</code> and
<code>font-semibold</code> to highlight the active link and removes these
classes from the others.
</p>
<p class="font-bold mt-3">Relevant script/code include:</p>
<pre>
<code>
function setActiveLink(name) {
navLinks.forEach(link => {
if (link.dataset.link === name) {
link.classList.add("text-blue-600", "font-semibold");
} else {
link.classList.remove("text-blue-600", "font-semibold");
}
});
}
navLinks.forEach(link => {
link.addEventListener("click", () => {
const page = link.dataset.link;
setActiveLink(page);
});
});
</code>
</pre>
<p class="font-bold mt-3">This uses Tailwind utilities for:</p>
<ul>
<li>Color — <code>text-blue-600</code></li>
<li>Font weight — <code>font-semibold</code></li>
</ul>
<p>
This gives users clear visual feedback on their position within the
navigation.
</p>
</section>
<!-- Section 4 -->
<section class="prose prose-neutral max-w-none mb-12">
<h1>4. Navbar Auto-Hide on Scroll</h1>
<p>
The navbar automatically hides when the user scrolls down and reappears when
scrolling up. JavaScript checks <code>window.pageYOffset</code> to detect
scroll direction and applies <code>transform: translateY(-100%)</code> to
hide the navbar or <code>translateY(0)</code> to show it again.
</p>
<p class="font-bold mt-3">Relevant script/code include:</p>
<pre>
<code>
let lastScrollTop = 0;
window.addEventListener("scroll", () => {
const scrollPos = window.pageYOffset || document.documentElement.scrollTop;
if (scrollPos > lastScrollTop && scrollPos > 50) {
// scrolling down
navbar.style.transform = "translateY(-100%)";
} else {
// scrolling up
navbar.style.transform = "translateY(0)";
}
lastScrollTop = scrollPos <= 0 ? 0 : scrollPos;
});
</code>
</pre>
<p class="font-bold mt-3">Tailwind classes used on the navbar:</p>
<ul>
<li><code>fixed</code>, <code>top-0</code>, <code>left-0</code></li>
<li><code>w-full</code></li>
<li><code>shadow</code></li>
<li><code>bg-white</code></li>
<li><code>transition-all</code>, <code>duration-300</code></li>
</ul>
<p>
These utilities control its position, background, shadow, and animations,
creating a smooth sliding, user-friendly navbar.
</p>
</section>
</section>
</div>
<!-- SCRIPT for accordion toggle -->
<script>
document.querySelectorAll('.accordion-btn').forEach(button => {
button.addEventListener('click', () => {
const content = button.nextElementSibling;
content.classList.toggle('hidden');
// Update + / -
const icon = button.querySelector('span');
icon.textContent = content.classList.contains('hidden') ? '+' : '-';
});
});
const navToggle = document.getElementById("nav-toggle");
const navMobile = document.getElementById("nav-mobile");
const navLinks = document.querySelectorAll(".nav-link");
const navbar = document.getElementById("navbar");
/* -------------------------
1) SLIDE-DOWN MOBILE MENU
------------------------- */
navToggle.addEventListener("click", () => {
if (navMobile.classList.contains("hidden")) {
navMobile.classList.remove("hidden");
navMobile.style.maxHeight = navMobile.scrollHeight + "px";
} else {
navMobile.style.maxHeight = "0px";
setTimeout(() => navMobile.classList.add("hidden"), 300);
}
});
/* -------------------------
2) ACTIVE LINK HIGHLIGHTING
------------------------- */
function setActiveLink(name) {
navLinks.forEach(link => {
if (link.dataset.link === name) {
link.classList.add("text-blue-600", "font-semibold");
} else {
link.classList.remove("text-blue-600", "font-semibold");
}
});
}
navLinks.forEach(link => {
link.addEventListener("click", () => {
const page = link.dataset.link;
setActiveLink(page);
});
});
/* -------------------------
3) AUTO-HIDE ON SCROLL
------------------------- */
let lastScrollTop = 0;
window.addEventListener("scroll", () => {
const scrollPos = window.pageYOffset || document.documentElement.scrollTop;
if (scrollPos > lastScrollTop && scrollPos > 50) {
// scrolling down
navbar.style.transform = "translateY(-100%)";
} else {
// scrolling up
navbar.style.transform = "translateY(0)";
}
lastScrollTop = scrollPos <= 0 ? 0 : scrollPos;
});
</script>
</body>
</html>