Quiz Project:

Product Gallery Project:

Image Links:

https://picsum.photos/id/1/400/300

https://picsum.photos/id/1059/400/300

https://picsum.photos/id/21/400/300

https://picsum.photos/id/160/400/300

JQUERY AJAX

Get Ade Code’s stories in your inbox

Join Medium for free to get updates from this writer.

Remember me for faster sign in

Use the statusTxt in the following to show a success or error message

$("#div1").load("ade.txt", function(responseTxt, statusTxt, xhr){
                    
                });

Filtering Tasks

1. Select and style all elements with id=clean in the following:

<body>
  <div>
    <p id="clean">First paragraph</p>
    <span>Second span</span>
    <h1 id="clean">Frist Title</h1>
    <h2> Second Title </h2>
    <h3>Third element</h3>
    <ul>Lists
      <li>First list</li>
      <li> Second lists</li>
    </ul>
  </div>
</body>

2. Select and style the third h2 element in the following:

<body>
  <div>
    <p id="clean">First paragraph</p>
    <span>Second span</span>
    <h1 id="clean">Frist Title</h1>
    <h2> First H2 Title </h2>
    <h2> Another H2 Title </h2>
    <h2> Another H2 Title </h2>
    <h3>Third element</h3>
    <ul>Lists
      <li>First list</li>
      <li> Second lists</li>
    </ul>
  </div>
</body>

3. Using a filter method select and style the first and last <div> in the following, give them a background color, and padding.

<body>
  <div style="border: 1px solid black;">
        <p>A paragraph in a div.</p>
        <p>Another paragraph in a div.</p>
    </div>
    <br>

    <div style="border: 1px solid black;">
        <p>Second paragraph in another div.</p>
        <p>Another paragraph in another div.</p>
    </div>
    <br>

    <div style="border: 1px solid black;">
        <p>A paragraph in another div.</p>
        <p>Another paragraph in another div.</p>
    </div>
</body>

4. Using a filter method Select and style the element with a class=container in the following

<body>
  <div style="border: 1px solid black;">
        <p>A paragraph in a div.</p>
        <p>Another paragraph in a div.</p>
    </div>
    <br>

    <div style="border: 1px solid black;">
        <p>Second paragraph in another div.</p>
        <p>Another paragraph in another div.</p>
    </div>
    <br>

    <div class="container">
        <p>A paragraph in another div.</p>
        <p>Another paragraph in another div.</p>
    </div>
</body>

5. Using a filter method, select and style the elements that do not have the class=”header”

<body>
  <div>
    <p id="clean">First paragraph</p>
    <span>Second span</span>
    <h1 id="clean">Frist Title</h1>
    <h2 class="header"> First H2 Title </h2>
    <h2> Another H2 Title </h2>
    <h2> Another H2 Title </h2>
    <h3 class="header">Third </h3>
    <h1> Top header </h1>
  </div>
</body>

Traversing Task

1. Traverse from the span element to the div element and style them with CSS
2. From the paragraph to the list
3. From the <ul> to the first ancestor/highest element

Traversing Down task:

1. Select and style all children elements of the <section> element in the following

<section>
  <div>First div
    <h2>First header</h2>
  </div>
  <div>Second div
    <h2>Second header</h2>
  </div>
  <div>Third div
    <h2>Third header</h2>
  </div>
</section>

2. Select and style the span elements in the following using a traversing method:

<body>
  <div>
    <p>First paragraph
      <span>First span</span>
     </p>
    <p>Second paragraph
      <span>Second span</span>
     </p>
    <p>Third paragraph
      <span>Thirdspan</span>
     </p>
  </div>
</body>

TREAVERSE SIBLINGS TASKS
1. Select ans tyle the element after the <p> in the following

<body>
  <div>
    <p>First paragraph</p>
    <span>Second span</span>
    <h1>Frist Title</h1>
    <h2> Second Title </h2>
  </div>
</body>

2. Select and style all elements after the <span> element in the following

<body>
  <div>
    <p>First paragraph</p>
    <span>Second span</span>
    <h1>Frist Title</h1>
    <h2> Second Title </h2>
    <h3>Third element</h3>
    <ul>Lists
      <li>First list</li>
      <li> Second lists</li>
    </ul>
  </div>
</body>

3. Select and style all the elemets in between <h1> and <p> elements in the following

<body>
  <div> parent
    <span>Second span</span>
    <h1>Frist Title</h1>
    <h2> Second Title </h2>
    <h3>Third element</h3>
    <ul>Lists
      <li>First list</li>
      <li> Second lists</li>
    </ul>
    <p>Second paragraph</p>
  </div>
</body>

4. Select and style the <h3> element in the following:

<body>
  <div> parent
    <span>Second span</span>
    <h1>Frist Title</h1>
    <h2> Second Title </h2>
    <h3>Third element</h3>
    <ul>Lists
      <li>First list</li>
      <li> Second lists</li>
    </ul>
    <p>Second paragraph</p>
  </div>
</body>

5. Select and style all the elements before <ul> tag

<body>
  <div> parent
    <span>Second span</span>
    <h1>Frist Title</h1>
    <h2> Second Title </h2>
    <h3>Third element</h3>
    <ul>Lists
      <li>First list</li>
      <li> Second lists</li>
    </ul>
    <p>Second paragraph</p>
  </div>
</body>

6. Select and style all the elements between <h3> and <span> starting from <h3> in the following

<body>
  <div> parent
    <span>Second span</span>
    <h1>Frist Title</h1>
    <h2> Second Title </h2>
    <h3>Third element</h3>
    <ul>Lists
      <li>First list</li>
      <li> Second lists</li>
    </ul>
    <p>Second paragraph</p>
  </div>
</body>