JSFiddle - React, Tailwind, and code Playground

by akang2

HTML

<link rel="stylesheet" href="http://tapmodo.github.io/jsintro/css/styles.css">
<h1>jQuery Test-drive</h1>
<hr />
<!-- ****************************** -->
<h2>Modify, add, and remove elements</h2>

<p class="firstPara">We'll start by making some simple modifications to elements in the DOM. The following steps may require slight HTML changes, such as adding IDs for easier selecting.</p>

<ol class="theList">
    <li>Make the paragraph above appear in red text.</li>
    <li>Give this list a red border</li>
    <li>
        Make the font-size of this list "28px"
        using <code>.css()</code>
    </li>
    <li class="hidden">
        Show this list item (using .removeClass())
    </li>
    <li class="select-me" style="display: none;">
        Show this list item (using .show())
    </li>
    <li class="hide-me">Hide this list item.</li>
    <li class="remove-me">Remove this list item.</li>
</ol>

<div>Finally, create an <code>&lt;li&gt;</code>, and .append() it to the list.</div>

<hr />
<!-- ****************************** -->
<h2>Read and set input elements</h2>

<input id="text-input" type="text" value="default text" />

<div class="button-bar">
    <button id="read-text">Alert me</button>
    <button id="set-text">Set value</button>
    <button id="select-text">Select</button>
</div>

<ol>
    <li>Make the first button show an alert that displays
        the input value.</li>
    <li>Make the second button set the value to "Hello World".</li>
    <li>Make the third button <code>.select()</code> the input.</li>
</ol>

<hr />
<!-- ****************************** -->
<h2>Simple click event</h2>

<div id="my-box" class="graybox">#my-box</div>
<button id="toggle-button">Toggle</button>
<p class="button-break">bleh</p>

<ol>
    <li>When the button is clicked, <code>.toggle()</code> #my-box</li>
    <li>Add another button and try .fadeIn()/.fadeOut()</li>
</ol>

<hr />
<h2>Checkboxes</h2>

<div id="box2" class="graybox"></div>
<div><label>
<input type="checkbox"...

CSS

/* Use these styles or add your own */
.redden { color: red; }
.redline { border: 1px red solid; }
.fancy { border: 3px red solid; }
.hidden { display: none; }

JavaScript

/* Use jQuery, HTML, and CSS to complete numbered instructions
   Your jQuery code goes in this panel. */


//Exercise 1
$(".firstPara").addClass("redden");

//Exercise 2
$(".theList").addClass("fancy");

//Exercise 3
$(".theList").css("fontSize", "28px");

//Exercise 4
$(".hidden").removeClass("hidden");

//Exercise 5
$(".remove-me").remove();

//Exercise 6
var $myLi = ("<li>Adding me</li>");
$(".theList").append($myLi);

//Exercise 7 Read and set input elements
$("#read-text").click(function(e) {
    var $theValue = $("#text-input").val();
    alert($theValue);
});

$("#set-text").click(function(i) {
    $("#text-input").val("Hello World");
});

$("#select-text").click(function(o) {
    $("#text-input").select();
});

$("#toggle-button").click(function(e) {
    $("#my-box").toggle();
});

//adding the fade in fade out button
var $theFadeOut = $("<button id='fade-button-out'>Fade Out</button>");
$(".button-break").append($theFadeOut);

$("#fade-button-out").click(function(e){
    $("#my-box").fadeOut();
});

var $theFadeIn = $("<button id='fade-button-in'>Fade In</button>");
$(".button-break").append($theFadeIn);
$("#fade-button-in").click(function(e){
    $("#my-box").fadeIn();
});

//Checkboxes
var is_checked = $("#check-toggle").prop('checked');

$("#check-toggle").click(function(g){
   $("#box2").toggleClass("fancy");
    console.log(g.target.checked);
});

/*
if(is_checked) {
    $('#box2').addClass('fancy');
}
*/