JSFiddle - React, Tailwind, and code Playground

by hito

HTML

<div class="ad">Here is an ad!
    <div class="extra">Here is a bunch of extra really important information for the customer. They should really see this information via a super-annoying advertisement that drops down from the top of the page.
    </div>
</div>
<section class="news">
    <article>Vim ex appetere repudiandae, quo abhorreant necessitatibus ex. Blandit aliquyam constituto sed et, mei in lobortis pertinacia, te fugit audiam ius. Ut labitur eruditi intellegam mel, gubergren accommodare ei mei. Cu malorum petentium mei, te qui modo tollit dissentiet. Ancillae atomorum appellantur ut ius, quot vitae intellegam cu qui, vis id mutat vituperata. Hinc admodum an ius.</article>
    <article>Eos cetero offendit scaevola eu, sonet essent salutatus ea est. Te nec graeco nominavi, vix natum minim paulo ad. Facete accusata definiebas eu eam, vix stet verear et. Eu ubique possit definiebas usu, et mel alia fuisset molestiae. Nam ea nisl nonummy, aperiri quaeque conclusionemque vel te, sed omnes option an. Adversarium ullamcorper no eos, no suavitate intellegam dissentias na</article>
    <article>Vim ex appetere repudiandae, quo abhorreant necessitatibus ex. Blandit aliquyam constituto sed et, mei in lobortis pertinacia, te fugit audiam ius. Ut labitur eruditi intellegam mel, gubergren accommodare ei mei. Cu malorum petentium mei, te qui modo tollit dissentiet. Ancillae atomorum appellantur ut ius, quot vitae intellegam cu qui, vis id mutat vituperata. Hinc admodum an ius.</article>
</section>

CSS

.ad {
    text-align: center;
    background-color: #ddd;
}

.ad > .extra {
    display: none;
}

.special {
    font-size: 150%;
}

.news {
    border-top: 1px solid #777;
}

.news article {
    padding-top: 20px;
    padding-bottom: 20px;
    border-bottom: 1px dashed #999;
}
.news .lastArticle {
    border-bottom:5px dashed #999;
}

JavaScript

// Imaginge that the above HTML is being sent from the server for a news website. The HTML includes some basic articles with a text advertisement at the top in a div.

// Unfortunately marketing has a big push for more users to see more advertising. When the user first comes to the website, they want to:
// - add a fancy css class to make the add more flashy
// - show the extra add information (stored in the div.extra) with a fancy downward slide, showing extra add information
// - after 5 seconds slide the extra information back up. But leave the fancy class on.

// Exercise 1: Add a class of .special onto the ad at the top and then animate the ad in the manner described above. Hint: look up .slideDown(), delay(), and .slideUp() jQuery object methods.

// BEGIN Exercise 1 Answer
//$(".ad")
//    .addClass("special");
//$(".extra")
//    .slideDown(1000)
//    .delay(5000)
//    .slideUp(1000);
// or
$(".ad")
    .addClass("special")
     .find(".extra")
        .slideDown(1000)
        .delay(5000)
        .slideUp(1000);

// END Exercise 1 Answer


// Marketing has also decided that the articles need some extra pop. They want:
// more vertical padding between the articles.
// a big bottom border after the last article.

// Exercise 2: Add more padding to each of the articles. Add a big bottom-border to the last article. Hint; look up the ":last" selector.

// BEGIN Exercise 2 Answer
//$(".news > article").css("padding","20px 0"); Doing it directly in the css
$(".news > article:last")
    .addClass("lastArticle");
//    .css("border-bottom","5px dashed #999");
// END Exercise 2 Answer