JSFiddle - React, Tailwind, and code Playground

by Satish Kesiboyana

HTML

<div id="container">
     <h1>Hello, DOM!</h1>

    <button id="sorter">Sort fruit</button>
    
    <p>This is some old fruit:</p>
    
    <ul class="old">
        <li class="glyph-apple mushy" data-type="red">Apples</li>
        <li class="glyph-pear spoiled">Pears</li>
        <li class="glyph-cherry">Cherries</li>
    </ul>
    
    <p>This is some fresh fruit:</p>
    
    <ul class="new"></ul>
    
</div>

CSS

.spoiled{
    background-color:#ccc;
}

.fresh{
    border:1px dotted red;
}


ul li,
.glyph{
    padding:3px 0 3px 25px;
   background-repeat:no-repeat;
    background-size:20px 20px;
    background-position:middle left;
}

.glyph-cherry{
    background-image:url('http://cdn.flaticon.com/png/64/2146.png');
    
}
.glyph-apple{
     background-image: url('http://cdn.flaticon.com/png/64/18251.png');
    
}

.glyph-pear{
    background-image:url('http://cdn.flaticon.com/png/64/2158.png');
}

.glyph-grapes{
    background-image:url('http://cdn.flaticon.com/png/64/18353.png');
}

JavaScript

// Content manipulation
//
// Use jQuery to complete the following
// You will be adding, moving, and manipulating content
// 
// Warnings:
// a. Be sure to write your code so it runs on document ready only
// b. Take care not to REMOVE classes or attributes unless 
// told to do so in each task below

// 1
//     Create a new "Grapes" list item in the "new" list
//     Give it two additional classes: "fresh" and "glyph-grapes"
//     Then style it with white text and a purple background

var sort = function () {
    var $newUl = $(".new");
    var $grapeEl = $("<li>Grapes</li>");
    $grapeEl.addClass("fresh glyph-grapes");
    $grapeEl.css({color:"white", backgroundColor:"purple"});
    $grapeEl.appendTo($newUl);


    // 2
    //     Remove any "spoiled" (based on class)
    //     list items from the page entirely
    $(".spoiled").fadeOut( function() {$(this).remove()});

    // 3
    //     Move "Cherries" into the "new" list as the last item
    //     Add text to the list item, "(10)" to indicate you have ten cherries. 
    //    Resulting text: "Cherries (10)"
      $(".glyph-cherry").appendTo($newUl).append(" (10)");

    // 4
    //     Copy "Apples" into the "new" list as the first item
    //     Set it's data-type attribute value from "red" to "green" 
    //     Remove the class "mushy" and give it a class of "fresh"
        var $appleEl = $(".glyph-apple").clone().prependTo($newUl);
        $appleEl.attr("data-type", "green").removeClass("mushy").addClass("fresh");
    };

$(document).ready(function() {
    $("#sorter").one('click', function() {
       sort();
    });
});

var clickHandler = function(e) {
 
    $(this).hide();
    
}
// 5
//    Bring it together
//    Write a function, "sort()" that will perform all
//    the manipulations you wrote above
//    To test, uncomment the sort() invokation line
//    then press the sort button



// 6 (Bonus)
//    Animate your manipulations
//    Update your sort() function so that:
//    For any...