forked from technolyceum/g11-m2
796 lines
37 KiB
HTML
796 lines
37 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>jQuery Learning Portal</title>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
margin: 0;
|
|
padding: 0;
|
|
background-color: #f5f5f5;
|
|
color: #333;
|
|
}
|
|
|
|
header {
|
|
background-color: #2c3e50;
|
|
color: white;
|
|
padding: 1rem;
|
|
text-align: center;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.module {
|
|
background-color: white;
|
|
border-radius: 5px;
|
|
box-shadow: 0 2px 5px rgba(0,0,0,0.1);
|
|
margin-bottom: 2rem;
|
|
overflow: hidden;
|
|
}
|
|
|
|
.module-header {
|
|
background-color: #3498db;
|
|
color: white;
|
|
padding: 1rem;
|
|
cursor: pointer;
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
}
|
|
|
|
.module-content {
|
|
padding: 1rem;
|
|
display: none;
|
|
}
|
|
|
|
.submodule {
|
|
background-color: #f8f9fa;
|
|
border-left: 4px solid #3498db;
|
|
margin: 1rem 0;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.exercise {
|
|
background-color: #e8f4fc;
|
|
padding: 0.5rem;
|
|
margin: 0.5rem 0;
|
|
border-radius: 3px;
|
|
}
|
|
|
|
.video-link {
|
|
display: inline-block;
|
|
background-color: #e74c3c;
|
|
color: white;
|
|
padding: 0.3rem 0.5rem;
|
|
border-radius: 3px;
|
|
text-decoration: none;
|
|
margin: 0.2rem;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.video-link:hover {
|
|
background-color: #c0392b;
|
|
}
|
|
|
|
.solution-btn {
|
|
background-color: #2ecc71;
|
|
color: white;
|
|
border: none;
|
|
padding: 0.3rem 0.5rem;
|
|
border-radius: 3px;
|
|
cursor: pointer;
|
|
margin: 0.2rem;
|
|
font-size: 0.9rem;
|
|
}
|
|
|
|
.solution-btn:hover {
|
|
background-color: #27ae60;
|
|
}
|
|
|
|
.code-container {
|
|
background-color: #2c3e50;
|
|
color: #ecf0f1;
|
|
padding: 1rem;
|
|
border-radius: 5px;
|
|
margin: 1rem 0;
|
|
display: none;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.video-container {
|
|
margin: 1rem 0;
|
|
display: none;
|
|
}
|
|
|
|
.video-container video {
|
|
width: 100%;
|
|
max-width: 800px;
|
|
height: auto;
|
|
}
|
|
|
|
.expand-icon {
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
h1, h2, h3 {
|
|
margin-top: 0;
|
|
}
|
|
|
|
ul {
|
|
padding-left: 1.5rem;
|
|
}
|
|
|
|
footer {
|
|
text-align: center;
|
|
padding: 1rem;
|
|
background-color: #ecf0f1;
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.chronological-section {
|
|
background-color: #fff8e1;
|
|
border-left: 4px solid #ffc107;
|
|
margin: 1rem 0;
|
|
padding: 1rem;
|
|
}
|
|
|
|
.date-badge {
|
|
background-color: #ffc107;
|
|
color: #333;
|
|
padding: 0.2rem 0.5rem;
|
|
border-radius: 3px;
|
|
font-size: 0.8rem;
|
|
margin-right: 0.5rem;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<header>
|
|
<h1>jQuery Learning Portal</h1>
|
|
<p>Interactive guide to learning jQuery with videos, exercises, and solutions</p>
|
|
</header>
|
|
|
|
<div class="container">
|
|
<div class="module">
|
|
<div class="module-header" onclick="toggleModule(0)">
|
|
<h2>Chronological Video Guide</h2>
|
|
<span class="expand-icon">+</span>
|
|
</div>
|
|
<div class="module-content" id="module-content-0">
|
|
<p>All videos organized by creation date (oldest to newest):</p>
|
|
|
|
<div class="chronological-section">
|
|
<h3>April 24, 2023</h3>
|
|
|
|
<div class="exercise">
|
|
<span class="date-badge">Apr 24</span>
|
|
<a href="../JavaScript to jQuery.mp4" class="video-link" target="_blank">JavaScript to jQuery.mp4</a>
|
|
<p>This is the foundational video for the jQuery course - start here!</p>
|
|
</div>
|
|
|
|
<div class="exercise">
|
|
<span class="date-badge">Apr 24</span>
|
|
<a href="../02-jQuery-selectors.mp4" class="video-link" target="_blank">02-jQuery-selectors.mp4</a>
|
|
<p>Covers jQuery selector syntax</p>
|
|
</div>
|
|
|
|
<div class="exercise">
|
|
<span class="date-badge">Apr 24</span>
|
|
<a href="../05-events-in-jQuery.mp4" class="video-link" target="_blank">05-events-in-jQuery.mp4</a>
|
|
<p>Introduction to jQuery event handling</p>
|
|
</div>
|
|
|
|
<div class="exercise">
|
|
<span class="date-badge">Apr 24</span>
|
|
<a href="../06-jQuery-effects.mp4" class="video-link" target="_blank">06-jQuery-effects.mp4</a>
|
|
<p>Built-in jQuery animation effects</p>
|
|
</div>
|
|
|
|
<div class="exercise">
|
|
<span class="date-badge">Apr 24</span>
|
|
<a href="../07-jQuery-method-chaining.mp4" class="video-link" target="_blank">07-jQuery-method-chaining.mp4</a>
|
|
<p>Understanding jQuery method chaining</p>
|
|
</div>
|
|
|
|
<div class="exercise">
|
|
<span class="date-badge">Apr 24</span>
|
|
<a href="../08-the-importance-of-this-jQuery.mp4" class="video-link" target="_blank">08-the-importance-of-this-jQuery.mp4</a>
|
|
<p>Understanding "this" in jQuery context</p>
|
|
</div>
|
|
|
|
<div class="exercise">
|
|
<span class="date-badge">Apr 24</span>
|
|
<a href="../jQuery Introduction.mp4" class="video-link" target="_blank">jQuery Introduction.mp4</a>
|
|
<p>Introduction to jQuery library</p>
|
|
</div>
|
|
|
|
<div class="exercise">
|
|
<span class="date-badge">Apr 24</span>
|
|
<a href="../jQuery1.mp4" class="video-link" target="_blank">jQuery1.mp4</a>
|
|
<p>First look at jQuery</p>
|
|
</div>
|
|
|
|
<div class="exercise">
|
|
<span class="date-badge">Apr 24</span>
|
|
<a href="../jQuery - The DOM.mp4" class="video-link" target="_blank">jQuery - The DOM.mp4</a>
|
|
<p>jQuery and DOM manipulation</p>
|
|
</div>
|
|
|
|
<div class="exercise">
|
|
<span class="date-badge">Apr 24</span>
|
|
<a href="../jquery events introduction.mp4" class="video-link" target="_blank">jquery events introduction.mp4</a>
|
|
<p>Introduction to jQuery events</p>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="chronological-section">
|
|
<h3>April 25, 2023</h3>
|
|
|
|
<div class="exercise">
|
|
<span class="date-badge">Apr 25</span>
|
|
<a href="../jQuery_ Traversing Mt. Dom Introduction.mp4" class="video-link" target="_blank">jQuery_ Traversing Mt. Dom Introduction.mp4</a>
|
|
<p>Introduction to DOM traversal with jQuery</p>
|
|
</div>
|
|
|
|
<div class="exercise">
|
|
<span class="date-badge">Apr 25</span>
|
|
<a href="../Traversing up the DOM.mp4" class="video-link" target="_blank">Traversing up the DOM.mp4</a>
|
|
<p>Traversing up the DOM tree</p>
|
|
</div>
|
|
|
|
<div class="exercise">
|
|
<span class="date-badge">Apr 25</span>
|
|
<a href="../Traversing Sideways.mp4" class="video-link" target="_blank">Traversing Sideways.mp4</a>
|
|
<p>Traversing sideways in the DOM</p>
|
|
</div>
|
|
|
|
<div class="exercise">
|
|
<span class="date-badge">Apr 25</span>
|
|
<a href="../jQuery_ Other Traversing Methods.mp4" class="video-link" target="_blank">jQuery_ Other Traversing Methods.mp4</a>
|
|
<p>Other DOM traversal methods</p>
|
|
</div>
|
|
|
|
<div class="exercise">
|
|
<span class="date-badge">Apr 25</span>
|
|
<a href="../External Resources_ Intro.mp4" class="video-link" target="_blank">External Resources_ Intro.mp4</a>
|
|
<p>Introduction to external resources</p>
|
|
</div>
|
|
|
|
<div class="exercise">
|
|
<span class="date-badge">Apr 25</span>
|
|
<a href="../External Resources_ cURL.mp4" class="video-link" target="_blank">External Resources_ cURL.mp4</a>
|
|
<p>Working with cURL</p>
|
|
</div>
|
|
|
|
<div class="exercise">
|
|
<span class="date-badge">Apr 25</span>
|
|
<a href="../External Resources_ XHR in depth.mp4" class="video-link" target="_blank">External Resources_ XHR in depth.mp4</a>
|
|
<p>In-depth look at XHR</p>
|
|
</div>
|
|
|
|
<div class="exercise">
|
|
<span class="date-badge">Apr 25</span>
|
|
<a href="../External Resources_ URLs.mp4" class="video-link" target="_blank">External Resources_ URLs.mp4</a>
|
|
<p>Working with URLs</p>
|
|
</div>
|
|
|
|
<div class="exercise">
|
|
<span class="date-badge">Apr 25</span>
|
|
<a href="../External Resources_ XHR.mp4" class="video-link" target="_blank">External Resources_ XHR.mp4</a>
|
|
<p>XMLHttpRequest basics</p>
|
|
</div>
|
|
|
|
<div class="exercise">
|
|
<span class="date-badge">Apr 25</span>
|
|
<a href="../External Resources_ Unpacking Data.mp4" class="video-link" target="_blank">External Resources_ Unpacking Data.mp4</a>
|
|
<p>Unpacking data from external sources</p>
|
|
</div>
|
|
|
|
<div class="exercise">
|
|
<span class="date-badge">Apr 25</span>
|
|
<a href="../External Resources_ JSON.parse.mp4" class="video-link" target="_blank">External Resources_ JSON.parse.mp4</a>
|
|
<p>Parsing JSON data</p>
|
|
</div>
|
|
|
|
<div class="exercise">
|
|
<span class="date-badge">Apr 25</span>
|
|
<a href="../External Resources_ Getting The Data Onto The Page.mp4" class="video-link" target="_blank">External Resources_ Getting The Data Onto The Page.mp4</a>
|
|
<p>Displaying external data on the page</p>
|
|
</div>
|
|
|
|
<div class="exercise">
|
|
<span class="date-badge">Apr 25</span>
|
|
<a href="../External Resources_ cURL and APIs.mp4" class="video-link" target="_blank">External Resources_ cURL and APIs.mp4</a>
|
|
<p>Working with cURL and APIs</p>
|
|
</div>
|
|
|
|
<div class="exercise">
|
|
<span class="date-badge">Apr 25</span>
|
|
<a href="../External Resources_ Callbacks.mp4" class="video-link" target="_blank">External Resources_ Callbacks.mp4</a>
|
|
<p>Understanding callbacks</p>
|
|
</div>
|
|
|
|
<div class="exercise">
|
|
<span class="date-badge">Apr 25</span>
|
|
<a href="../Tabular Data - Part One - Using The Keys To Generate A Table_.mp4" class="video-link" target="_blank">Tabular Data - Part One - Using The Keys To Generate A Table_.mp4</a>
|
|
<p>Generating tables from data</p>
|
|
</div>
|
|
|
|
<div class="exercise">
|
|
<span class="date-badge">Apr 25</span>
|
|
<a href="../Tabular Data - Part Two.mp4" class="video-link" target="_blank">Tabular Data - Part Two.mp4</a>
|
|
<p>Continuation of tabular data work</p>
|
|
</div>
|
|
|
|
<div class="exercise">
|
|
<span class="date-badge">Apr 25</span>
|
|
<a href="../Tabular Data - Part Three.mp4" class="video-link" target="_blank">Tabular Data - Part Three.mp4</a>
|
|
<p>Advanced tabular data techniques</p>
|
|
</div>
|
|
|
|
<div class="exercise">
|
|
<span class="date-badge">Apr 25</span>
|
|
<a href="../Tabular Data - Part Four - Pagination.mp4" class="video-link" target="_blank">Tabular Data - Part Four - Pagination.mp4</a>
|
|
<p>Pagination for large datasets</p>
|
|
</div>
|
|
|
|
<div class="exercise">
|
|
<span class="date-badge">Apr 25</span>
|
|
<a href="../Adding The Markers To The Map(1).mp4" class="video-link" target="_blank">Adding The Markers To The Map(1).mp4</a>
|
|
<p>Adding markers to maps</p>
|
|
</div>
|
|
|
|
<div class="exercise">
|
|
<span class="date-badge">Apr 25</span>
|
|
<a href="../Interactive Resume 20_ Adding the map element.mp4" class="video-link" target="_blank">Interactive Resume 20_ Adding the map element.mp4</a>
|
|
<p>Adding map elements to resumes</p>
|
|
</div>
|
|
|
|
<div class="exercise">
|
|
<span class="date-badge">Apr 25</span>
|
|
<a href="../Resume 20_ Moving The Code Into It's Own Script.mp4" class="video-link" target="_blank">Resume 20_ Moving The Code Into It's Own Script.mp4</a>
|
|
<p>Organizing resume code into separate scripts</p>
|
|
</div>
|
|
|
|
<div class="exercise">
|
|
<span class="date-badge">Apr 25</span>
|
|
<a href="../Referencing The JS Files.mp4" class="video-link" target="_blank">Referencing The JS Files.mp4</a>
|
|
<p>Properly referencing JavaScript files</p>
|
|
</div>
|
|
|
|
<div class="exercise">
|
|
<span class="date-badge">Apr 25</span>
|
|
<a href="../Render The Map.mp4" class="video-link" target="_blank">Render The Map.mp4</a>
|
|
<p>Rendering maps on the page</p>
|
|
</div>
|
|
|
|
<div class="exercise">
|
|
<span class="date-badge">Apr 25</span>
|
|
<a href="../Plugs & Sockets.mp4" class="video-link" target="_blank">Plugs & Sockets.mp4</a>
|
|
<p>Working with plugs and sockets</p>
|
|
</div>
|
|
|
|
<div class="exercise">
|
|
<span class="date-badge">Apr 25</span>
|
|
<a href="../GoogleMapsAPIVid2.mp4" class="video-link" target="_blank">GoogleMapsAPIVid2.mp4</a>
|
|
<p>Working with Google Maps API</p>
|
|
</div>
|
|
|
|
<div class="exercise">
|
|
<span class="date-badge">Apr 25</span>
|
|
<a href="../REST.mp4" class="video-link" target="_blank">REST.mp4</a>
|
|
<p>Understanding REST principles</p>
|
|
</div>
|
|
|
|
<div class="exercise">
|
|
<span class="date-badge">Apr 25</span>
|
|
<a href="../One Last Thing.mp4" class="video-link" target="_blank">One Last Thing.mp4</a>
|
|
<p>Final thoughts and tips</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="module">
|
|
<div class="module-header" onclick="toggleModule(1)">
|
|
<h2>Module 1: From JavaScript to jQuery</h2>
|
|
<span class="expand-icon">+</span>
|
|
</div>
|
|
<div class="module-content" id="module-content-1">
|
|
<h3>Videos to Watch:</h3>
|
|
<a href="../JavaScript to jQuery.mp4" class="video-link" target="_blank">JavaScript to jQuery.mp4</a>
|
|
|
|
<h3>Location:</h3>
|
|
<p>01-FromJavaScriptTojQuery/03-manipulating_the_dom/</p>
|
|
|
|
<h3>Exercises:</h3>
|
|
<div class="exercise">1. Examine index.html to understand the HTML structure</div>
|
|
<div class="exercise">2. Review js/app.js and js/transcript.js to see pure JavaScript implementation</div>
|
|
<div class="exercise">3. Identify areas where DOM manipulation could be simplified with jQuery</div>
|
|
<div class="exercise">4. Note the difference in syntax and complexity between standard JS and what jQuery offers</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="module">
|
|
<div class="module-header" onclick="toggleModule(2)">
|
|
<h2>Module 2: jQuery Introduction</h2>
|
|
<span class="expand-icon">+</span>
|
|
</div>
|
|
<div class="module-content" id="module-content-2">
|
|
<h3>Videos to Watch:</h3>
|
|
<a href="../jQuery Introduction.mp4" class="video-link" target="_blank">jQuery Introduction.mp4</a>
|
|
<a href="../02-jQuery-selectors.mp4" class="video-link" target="_blank">02-jQuery-selectors.mp4</a>
|
|
<a href="../jQuery1.mp4" class="video-link" target="_blank">jQuery1.mp4</a>
|
|
|
|
<h3>Location:</h3>
|
|
<p>02-jQueryIntroduction/</p>
|
|
|
|
<div class="submodule">
|
|
<h3>Sub-module 1: Downloading jQuery (02-downloading_jquery/)</h3>
|
|
<div class="exercise">Exercise: Examine Cards-jquery.html, script.js, and style.css to understand how to include jQuery in a project</div>
|
|
<button class="solution-btn" onclick="showCode('download-jquery')">Show Sample Code</button>
|
|
<div class="code-container" id="code-download-jquery">
|
|
<pre>// Example jQuery inclusion in HTML
|
|
<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
|
|
<script src="script.js"></script></pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="submodule">
|
|
<h3>Sub-module 2: jQuery Selectors (03-jquery_selectors/)</h3>
|
|
<p>Video Solution: Review video_solution folder files to see jQuery selector examples</p>
|
|
<p>Challenge: Try the challenge_solution to practice selectors independently</p>
|
|
<button class="solution-btn" onclick="showCode('selectors')">Show Selector Examples</button>
|
|
<div class="code-container" id="code-selectors">
|
|
<pre>// jQuery Selectors Examples
|
|
$('#myId') // Select by ID
|
|
$('.myClass') // Select by Class
|
|
$('p') // Select by Tag
|
|
$('div p') // Descendant Selector
|
|
$('div > p') // Child Selector
|
|
$('input[type=text]') // Attribute Selector</pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="submodule">
|
|
<h3>Sub-module 3: Changing HTML/CSS (04-changing_html_and_css_with_jquery/)</h3>
|
|
<p>Video Solution: Review video_solution folder files to see how to change HTML/CSS with jQuery</p>
|
|
<p>Challenge: Try the challenge_solution to practice HTML/CSS manipulation</p>
|
|
<button class="solution-btn" onclick="showCode('html-css')">Show HTML/CSS Methods</button>
|
|
<div class="code-container" id="code-html-css">
|
|
<pre>// jQuery HTML/CSS Methods
|
|
$('#element').html() // Get HTML content
|
|
$('#element').html('New Content') // Set HTML content
|
|
$('#element').text() // Get text content
|
|
$('#element').text('New Text') // Set text content
|
|
$('#element').css('color') // Get CSS property
|
|
$('#element').css('color', 'red') // Set CSS property
|
|
$('#element').addClass('newClass')
|
|
$('#element').removeClass('oldClass')
|
|
$('#element').toggleClass('toggleClass')</pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="submodule">
|
|
<h3>Sub-module 4: Challenge 2 (05-changing_html_and_css_with_jquery_challenge_2/)</h3>
|
|
<div class="exercise">Exercise: Work with Cards-jquery.html, script.js, statements.js, and style.css to practice HTML/CSS changes</div>
|
|
</div>
|
|
|
|
<div class="submodule">
|
|
<h3>Sub-module 5: Challenge 3 (06-changing_html_and_css_with_jquery_challenge_3/)</h3>
|
|
<div class="exercise">Exercise: Review statements.js to understand advanced jQuery HTML/CSS manipulation</div>
|
|
</div>
|
|
|
|
<div class="submodule">
|
|
<h3>Sub-module 6: First jQuery Script (07-writing_our_first_jquery_script/)</h3>
|
|
<p>Video Solution: Review files in video_solution to see first jQuery scripts</p>
|
|
<p>Challenge: Try challenge_solution to practice writing jQuery scripts from scratch</p>
|
|
<button class="solution-btn" onclick="showCode('first-script')">Show First Script Example</button>
|
|
<div class="code-container" id="code-first-script">
|
|
<pre>// Basic jQuery Document Ready Function
|
|
$(document).ready(function() {
|
|
// Your jQuery code here
|
|
$('button').click(function() {
|
|
$('p').hide();
|
|
});
|
|
});
|
|
|
|
// Or shorthand version
|
|
$(function() {
|
|
// Your jQuery code here
|
|
});</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="module">
|
|
<div class="module-header" onclick="toggleModule(3)">
|
|
<h2>Module 3: jQuery Events</h2>
|
|
<span class="expand-icon">+</span>
|
|
</div>
|
|
<div class="module-content" id="module-content-3">
|
|
<h3>Videos to Watch:</h3>
|
|
<a href="../jquery events introduction.mp4" class="video-link" target="_blank">jquery events introduction.mp4</a>
|
|
<a href="../05-events-in-jQuery.mp4" class="video-link" target="_blank">05-events-in-jQuery.mp4</a>
|
|
<a href="../06-jQuery-effects.mp4" class="video-link" target="_blank">06-jQuery-effects.mp4</a>
|
|
<a href="../07-jQuery-method-chaining.mp4" class="video-link" target="_blank">07-jQuery-method-chaining.mp4</a>
|
|
<a href="../08-the-importance-of-this-jQuery.mp4" class="video-link" target="_blank">08-the-importance-of-this-jQuery.mp4</a>
|
|
|
|
<h3>Location:</h3>
|
|
<p>03-jQueryEvents/</p>
|
|
|
|
<div class="submodule">
|
|
<h3>Sub-module 1: Events in jQuery (02-events_in_jquery/)</h3>
|
|
<p>Video Solution: Review video_solution files to see jQuery event handling</p>
|
|
<p>Challenge: Try challenge_solution to practice event handling</p>
|
|
<button class="solution-btn" onclick="showCode('events')">Show Event Examples</button>
|
|
<div class="code-container" id="code-events">
|
|
<pre>// jQuery Event Handling
|
|
$('button').click(function() {
|
|
// Handle click
|
|
});
|
|
|
|
$('input').keydown(function(event) {
|
|
// Handle keydown
|
|
});
|
|
|
|
$('form').submit(function(event) {
|
|
event.preventDefault(); // Prevent form submission
|
|
// Handle form submission
|
|
});
|
|
|
|
// Event delegation
|
|
$(document).on('click', '.dynamic-button', function() {
|
|
// Handle clicks on dynamically added elements
|
|
});</pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="submodule">
|
|
<h3>Sub-module 2: jQuery Effects (03-jquery_effects/)</h3>
|
|
<p>Challenge: Work with challenge_solution files to practice jQuery built-in effects</p>
|
|
<button class="solution-btn" onclick="showCode('effects')">Show Effect Examples</button>
|
|
<div class="code-container" id="code-effects">
|
|
<pre>// jQuery Effects
|
|
$('#element').hide();
|
|
$('#element').show();
|
|
$('#element').toggle();
|
|
|
|
$('#element').fadeIn();
|
|
$('#element').fadeOut();
|
|
$('#element').fadeToggle();
|
|
|
|
$('#element').slideUp();
|
|
$('#element').slideDown();
|
|
$('#element').slideToggle();
|
|
|
|
// With duration
|
|
$('#element').fadeIn(1000); // 1 second
|
|
|
|
// With callback
|
|
$('#element').fadeOut(function() {
|
|
alert('Fade out completed!');
|
|
});</pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="submodule">
|
|
<h3>Sub-module 3: Effects Challenge 2 (04-jquery_effects_challenge_2/)</h3>
|
|
<div class="exercise">Exercise: Work with Cards-jquery.html, script.js, and style.css to practice effects</div>
|
|
</div>
|
|
|
|
<div class="submodule">
|
|
<h3>Sub-module 4: Effects Challenge 3 (05-jquery_effects_challenge_3/)</h3>
|
|
<div class="exercise">Exercise: Work with Cards-jquery.html, script.js, and style.css to practice advanced effects</div>
|
|
</div>
|
|
|
|
<div class="submodule">
|
|
<h3>Sub-module 5: Effects Challenge 4 (06-jquery_effects_challenge_4/)</h3>
|
|
<div class="exercise">Exercise: Work with Cards-jquery.html, script.js, and style.css to practice complex effects</div>
|
|
</div>
|
|
|
|
<div class="submodule">
|
|
<h3>Sub-module 6: Method Chaining (07-method_chaining/)</h3>
|
|
<p>Video Solution: Review video_solution files to see jQuery method chaining</p>
|
|
<p>Challenge: Try challenge_solution to practice method chaining</p>
|
|
<button class="solution-btn" onclick="showCode('chaining')">Show Chaining Example</button>
|
|
<div class="code-container" id="code-chaining">
|
|
<pre>// jQuery Method Chaining
|
|
$('#element')
|
|
.css('color', 'blue')
|
|
.fadeOut(1000)
|
|
.delay(500)
|
|
.fadeIn(1000)
|
|
.addClass('highlight');
|
|
|
|
// Each method returns a jQuery object, allowing chaining</pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="submodule">
|
|
<h3>Sub-module 7: Method Chaining Challenge 2 (08-method_chaining_challenge_2/)</h3>
|
|
<div class="exercise">Exercise: Work with files in Sample-Site, css/style.css, js/script.js, and Cards-jquery.html</div>
|
|
</div>
|
|
|
|
<div class="submodule">
|
|
<h3>Sub-module 8: Method Chaining Challenge 3 (09-method_chaining_challenge_3/)</h3>
|
|
<div class="exercise">Exercise: Work with files in Sample-Site, css/style.css, js/script.js, and Cards-jquery.html</div>
|
|
</div>
|
|
|
|
<div class="submodule">
|
|
<h3>Sub-module 9: Importance of "this" (10-the_importance_of_this/)</h3>
|
|
<p>Challenge: Review challenge_solution files to understand "this" in jQuery</p>
|
|
<p>Additional Exercises: Explore hiding_paragraphs, if_statements, mouseenter_and_mouseleave, and red_and_black_boxes</p>
|
|
<button class="solution-btn" onclick="showCode('this-keyword')">Show "this" Examples</button>
|
|
<div class="code-container" id="code-this-keyword">
|
|
<pre>// jQuery "this" keyword
|
|
$('button').click(function() {
|
|
// "this" refers to the clicked button element
|
|
$(this).css('background-color', 'red');
|
|
|
|
// Find elements relative to "this"
|
|
$(this).siblings().hide();
|
|
$(this).parent().addClass('active');
|
|
});</pre>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="module">
|
|
<div class="module-header" onclick="toggleModule(4)">
|
|
<h2>Module 4: Traversing the DOM with jQuery</h2>
|
|
<span class="expand-icon">+</span>
|
|
</div>
|
|
<div class="module-content" id="module-content-4">
|
|
<h3>Videos to Watch:</h3>
|
|
<a href="../jQuery_ Traversing Mt. Dom Introduction.mp4" class="video-link" target="_blank">jQuery_ Traversing Mt. Dom Introduction.mp4</a>
|
|
<a href="../Traversing up the DOM.mp4" class="video-link" target="_blank">Traversing up the DOM.mp4</a>
|
|
<a href="../Traversing Sideways.mp4" class="video-link" target="_blank">Traversing Sideways.mp4</a>
|
|
<a href="../jQuery_ Other Traversing Methods.mp4" class="video-link" target="_blank">jQuery_ Other Traversing Methods.mp4</a>
|
|
|
|
<h3>Location:</h3>
|
|
<p>04-jQuery-TraversingMtDOM/</p>
|
|
|
|
<div class="submodule">
|
|
<h3>Sub-module 1: jQuery Traversing Mt DOM (01-jquery_traversing_mt_dom/)</h3>
|
|
<div class="exercise">Exercise: Work with button.html, css/, and js/ files to practice basic traversal</div>
|
|
<button class="solution-btn" onclick="showCode('traversing')">Show Traversing Methods</button>
|
|
<div class="code-container" id="code-traversing">
|
|
<pre>// jQuery Traversing Methods
|
|
$('#start').parent() // Get direct parent
|
|
$('#start').parents() // Get all ancestors
|
|
$('#start').parents('.class') // Get specific ancestor
|
|
$('#start').children() // Get direct children
|
|
$('#start').find('.class') // Find descendants
|
|
$('#start').siblings() // Get siblings
|
|
$('#start').next() // Get next sibling
|
|
$('#start').prev() // Get previous sibling</pre>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="submodule">
|
|
<h3>Sub-module 2: Up and Down Tree (02-traversing_up_and_down_the_dom_tree/)</h3>
|
|
<div class="exercise">Exercise: Work with traversing_mt_dom.html, css/, and js/ files to practice parent/child traversal</div>
|
|
</div>
|
|
|
|
<div class="submodule">
|
|
<h3>Sub-module 3: Traversing Sideways (03-traversing_sideways/)</h3>
|
|
<div class="exercise">Exercise: Work with index.html, css/, and js/ files to practice sibling traversal</div>
|
|
</div>
|
|
|
|
<div class="submodule">
|
|
<h3>Sub-module 4: Sideways Challenge 2 (04-traversing_sideways_challenge_2/)</h3>
|
|
<div class="exercise">Exercise: Work with index.html, css/, and js/ files to practice sideways traversal</div>
|
|
</div>
|
|
|
|
<div class="submodule">
|
|
<h3>Sub-module 5: Sideways Challenge 3 (05-traversing_sideways_challenge_3/)</h3>
|
|
<div class="exercise">Exercise: Work with index.html, css/, and js/ files to practice advanced sideways traversal</div>
|
|
</div>
|
|
|
|
<div class="submodule">
|
|
<h3>Sub-module 6: Sideways Challenge 4 (06-traversing_sideways_challenge_4/)</h3>
|
|
<div class="exercise">Exercise: Work with index.html, css/, and js/ files to practice complex sideways traversal</div>
|
|
</div>
|
|
|
|
<div class="submodule">
|
|
<h3>Sub-module 7: Other Methods Challenge 1 (07-other_traversing_methods_challenge_1/)</h3>
|
|
<div class="exercise">Exercise: Work with index.html, css/, and js/ files to practice other traversal methods</div>
|
|
</div>
|
|
|
|
<div class="submodule">
|
|
<h3>Sub-module 8: Other Methods Challenge 2 (08-other_traversing_methods_challenge_2/)</h3>
|
|
<div class="exercise">Exercise: Work with index.html and js/ files to practice additional traversal methods</div>
|
|
</div>
|
|
|
|
<div class="submodule">
|
|
<h3>Sub-module 9: Other Methods Challenge 3 (09-other_traversing_methods_challenge_3/)</h3>
|
|
<div class="exercise">Exercise: Work with index.html, css/, and js/ files to practice advanced traversal methods</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="module">
|
|
<div class="module-header" onclick="toggleModule(5)">
|
|
<h2>Lab Exercise Workflow</h2>
|
|
<span class="expand-icon">+</span>
|
|
</div>
|
|
<div class="module-content" id="module-content-5">
|
|
<h3>For each module/sub-module:</h3>
|
|
<ol>
|
|
<li>Watch the corresponding video listed in the module section</li>
|
|
<li>Open both the "video_solution" and "challenge_solution" folders when available</li>
|
|
<li>Study the HTML and CSS files to understand the base structure</li>
|
|
<li>Analyze the JavaScript/jQuery code in the script files</li>
|
|
<li>Identify how jQuery simplifies the code compared to plain JavaScript</li>
|
|
<li>Try modifying the code to reinforce learning</li>
|
|
<li>Complete challenges when provided</li>
|
|
</ol>
|
|
|
|
<h3>Helpful Tips for Success:</h3>
|
|
<ul>
|
|
<li>Start with simple examples and gradually move to complex ones</li>
|
|
<li>Always compare the vanilla JavaScript approach with the jQuery approach</li>
|
|
<li>Take notes on syntax differences and shortcuts jQuery provides</li>
|
|
<li>Test your code frequently in the browser</li>
|
|
<li>Don't hesitate to experiment - try different jQuery methods</li>
|
|
<li>Refer to jQuery documentation when exploring new methods</li>
|
|
</ul>
|
|
|
|
<h3>Assessment Criteria:</h3>
|
|
<p>By the end of this lab, you should be able to:</p>
|
|
<ul>
|
|
<li>Explain the advantages of using jQuery over vanilla JavaScript</li>
|
|
<li>Convert basic JavaScript DOM manipulations to jQuery equivalents</li>
|
|
<li>Use jQuery selectors effectively to target elements</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<footer>
|
|
<p>jQuery Learning Portal © 2025 | Interactive Front End Development Course</p>
|
|
</footer>
|
|
|
|
<script>
|
|
function toggleModule(moduleNumber) {
|
|
const content = document.getElementById(`module-content-${moduleNumber}`);
|
|
const icon = event.currentTarget.querySelector('.expand-icon');
|
|
|
|
if (content.style.display === 'block') {
|
|
content.style.display = 'none';
|
|
icon.textContent = '+';
|
|
} else {
|
|
content.style.display = 'block';
|
|
icon.textContent = '-';
|
|
}
|
|
}
|
|
|
|
function showCode(codeId) {
|
|
const codeContainer = document.getElementById(`code-${codeId}`);
|
|
if (codeContainer.style.display === 'block') {
|
|
codeContainer.style.display = 'none';
|
|
} else {
|
|
codeContainer.style.display = 'block';
|
|
}
|
|
}
|
|
|
|
function showVideo(videoId) {
|
|
const videoContainer = document.getElementById(`video-${videoId}`);
|
|
if (videoContainer.style.display === 'block') {
|
|
videoContainer.style.display = 'none';
|
|
} else {
|
|
videoContainer.style.display = 'block';
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |