JSFiddle - React, Tailwind, and code Playground

by jquerybyexample

HTML

<ul>
<li class="Font22">Chrome<span></li>
<li class="Font18">Firefox</li>
<li class="Font14">IE</li>
<li class="Font10">Safari</li>
</ul>

CSS

.Font22{
    font-size:22pt;
}
.Font18{
    font-size:18pt;
}
.Font14{
    font-size:14pt;
}
.Font10{
    font-size:10pt;
}
body
{
    font-family: Tahoma;
}

JavaScript

$(function(){
    $("ul").click(function(event) {
     var $target = $(event.target);
     if ($target.is(".Font22")) {
         $target.css("background-color", "green");
         alert('Chrome is the most popular browser.');
     }
     if ($target.is(".Font18")) {
         $target.css("background-color", "orange");
         alert('Need to work harder to beat Chrome.');
     }
     if ($target.is(".Font14")) {
         $target.css("background-color", "Lightblue");
         alert('Microsoft is loosing the market in browser war.');
     }
     if ($target.is(".Font10")) {
         $target.css("background-color", "red");
         alert('Safari has great fetures but not used by many.');  
     }  
  });
});