Basics Flashcards
When being able to use JQuery to your HTML code, how and where would you include a specific lines of code to the the HTML file below?
Sole Shoes
<div class="container">
<div>
<span class="menu-button">Menu</span>
<span class="login-button">Login</span>
</div>
</div>
<div class="nav-menu hide">
<div class="container">
<ul>
<li>Shoes</li>
<li>Women's Shoes</li>
<li>Men's Shoes</li>
<li>Shoe Accessories</li>
<li>Wholesale</li>
</ul>
<ul>
<li>Contact</li>
<li>Twitter</li>
<li>Facebook</li>
<li>Instagram</li>
<li>Email</li>
</ul>
</div>
</div>
<div>
<div>
<h4>Username</h4>
<h4>Password</h4>
</div>
</div>
<div class="container">
<div class="product-card">
<div class="product-photo sole-air-ii"></div>
<div class="product-details">
<h4>Sole Air II</h4>
<div>
<p>$35</p>
<div class="more-details-button">
<img>
</div>
</div>
</div>
<div class="shoe-details">
<p>The ultimate in style and comfort, the Sole Air II's are great for walking and casual wearing.</p>
<div class="size-chart">
<h4>Size</h4>
<ul class="sizes">
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>
</div>
<div class="buy-now-button disabled">
<h3>Add to cart</h3>
</div>
</div>
</div>
</div>
<div class="container">
<div class="product-card">
<div class="product-photo tidal-x"></div>
<div class="product-details">
<h4>Tidal X</h4>
<div>
<p>$40</p>
<div class="more-details-button">
<img>
</div>
</div>
</div>
<div class="shoe-details">
<p>The Tidal X's signature rubber midsole make this the perfect running shoe. With a soft mesh upper, and synthetic polymer outsole, these shoes really fly.</p>
<div class="size-chart">
<h4>Size</h4>
<ul class="sizes">
<li>6</li>
<li>7</li>
<li>10</li>
<li>12</li>
<li>13</li>
</ul>
</div>
<div class="buy-now-button disabled">
<h3>Add to cart</h3>
</div>
</div>
</div>
</div>
<div class="container">
<div class="product-card">
<div class="product-photo dark-sole-original"></div>
<div class="product-details">
<h4>Dark Sole Original</h4>
<div>
<p>$60</p>
<div class="more-details-button">
<img>
</div>
</div>
</div>
<div class="shoe-details">
<p>Light up the night with the Dark Sole Original. Lights around the midsole activate when stomped.</p>
<div class="size-chart">
<h4>Size</h4>
<ul class="sizes">
<li>9</li>
<li>10</li>
<li>10.5</li>
<li>11</li>
</ul>
</div>
<div class="buy-now-button disabled">
<h3>Add to cart</h3>
</div>
</div>
</div>
</div>
<div>
<div>
<div>
~~~
<h3>1</h3>
</div>
<h3>Checkout</h3>
</div>
</div>
~~~
<div class="container"> <div>Contact Us</div> </div>
At the bottom of the follow, before the closing body element and before the
Sole Shoes
<div class="container">
<div>
<span class="menu-button">Menu</span>
<span class="login-button">Login</span>
</div>
</div>
<div class="nav-menu hide">
<div class="container">
<ul>
<li>Shoes</li>
<li>Women's Shoes</li>
<li>Men's Shoes</li>
<li>Shoe Accessories</li>
<li>Wholesale</li>
</ul>
<ul>
<li>Contact</li>
<li>Twitter</li>
<li>Facebook</li>
<li>Instagram</li>
<li>Email</li>
</ul>
</div>
</div>
<div>
<div>
<h4>Username</h4>
<h4>Password</h4>
</div>
</div>
<div class="container">
<div class="product-card">
<div class="product-photo sole-air-ii"></div>
<div class="product-details">
<h4>Sole Air II</h4>
<div>
<p>$35</p>
<div class="more-details-button">
<img>
</div>
</div>
</div>
<div class="shoe-details">
<p>The ultimate in style and comfort, the Sole Air II's are great for walking and casual wearing.</p>
<div class="size-chart">
<h4>Size</h4>
<ul class="sizes">
<li>8</li>
<li>9</li>
<li>10</li>
<li>11</li>
<li>12</li>
</ul>
</div>
<div class="buy-now-button disabled">
<h3>Add to cart</h3>
</div>
</div>
</div>
</div>
<div class="container">
<div class="product-card">
<div class="product-photo tidal-x"></div>
<div class="product-details">
<h4>Tidal X</h4>
<div>
<p>$40</p>
<div class="more-details-button">
<img>
</div>
</div>
</div>
<div class="shoe-details">
<p>The Tidal X's signature rubber midsole make this the perfect running shoe. With a soft mesh upper, and synthetic polymer outsole, these shoes really fly.</p>
<div class="size-chart">
<h4>Size</h4>
<ul class="sizes">
<li>6</li>
<li>7</li>
<li>10</li>
<li>12</li>
<li>13</li>
</ul>
</div>
<div class="buy-now-button disabled">
<h3>Add to cart</h3>
</div>
</div>
</div>
</div>
<div class="container">
<div class="product-card">
<div class="product-photo dark-sole-original"></div>
<div class="product-details">
<h4>Dark Sole Original</h4>
<div>
<p>$60</p>
<div class="more-details-button">
<img>
</div>
</div>
</div>
<div class="shoe-details">
<p>Light up the night with the Dark Sole Original. Lights around the midsole activate when stomped.</p>
<div class="size-chart">
<h4>Size</h4>
<ul class="sizes">
<li>9</li>
<li>10</li>
<li>10.5</li>
<li>11</li>
</ul>
</div>
<div class="buy-now-button disabled">
<h3>Add to cart</h3>
</div>
</div>
</div>
</div>
<div>
<div>
<div>
~~~
<h3>1</h3>
</div>
<h3>Checkout</h3>
</div>
</div>
~~~
<div class="container"> <div>Contact Us</div> </div>
The jQuery library makes it quick and easy to add visual effects and interactivity to your web page. However, a web page must be rendered in a user’s browser before it’s possible to have any dynamic behavior. To solve this problem, we will use our first jQuery method. What method do add to the top of the js file?
$(document).ready(() => {
});
Say you have a group of photos all attached to the ‘product-photo’ class, but they are not showing. How could you make them show?
$(document).ready(() => {
$(‘.product-photo’).show()
});
Write an example on how you could write a variable assign a jquery object to it on a html id. Say the id is called ‘nav-dropdown’
$(document).ready(() => {
const $navDropdown = $(‘#nav-dropdown’);
});
Write an example as to how you would add an event handler to an html id or class?
$(‘#cart’).on(‘click’, () => {
$(#cartMenu).show();
})
How to get jQuery installed?
To the bottom of your html file you add the following script tags with a src attribute that has a value of
