JSFiddle - React, Tailwind, and code Playground

by Akram kamal

HTML

<p>Click the following button to get the substring between the word "quick" and "lazy" from the string "The quick brown fox jumps over the lazy dog."</p>
    <button type="button">Get Substring</button>
<br/>

<!-------------------------------------------------------------------------- -->

 <div class="box">Box A</div>
    <div class="box hidden">Box B</div>
    <div class="box">Box C</div>
    <div class="box hidden">Box D</div>
    <div class="box">Box E</div>
    <br>
    <button type="button" class="get-visible-btn">Get Visible Boxes</button>
    <button type="button" class="get-hidden-btn">Get Hidden Boxes</button>

CSS

.box{
        padding: 50px;
        margin: 20px 0;
        display: inline-block;
        font: bold 22px sans-serif;
        background: #f4f4f4;
    }
    .hidden{
        display: none;
    }

JavaScript

//http://www.tutorialrepublic.com/codelab.php?topic=faq&file=jquery-get-substring-between-the-two-words

$(document).ready(function(){
        $("button").click(function(){
            var myStr = "The quick brown fox jumps over the lazy dog.";
            var subStr = myStr.match("quick(.*)lazy");
            alert(subStr[1]);
        });
  

// ---------------------------------------
//http://www.tutorialrepublic.com/codelab.php?topic=faq&file=jquery-check-an-element-is-visible-or-hidden

 // Get visible boxes
    $(".get-visible-btn").click(function(){
        var visibleBoxes = [];
        $.each($(".box"), function(){ 
            if($(this).is(":visible")) {
                visibleBoxes.push($(this).text());
            }
            
        });
        alert("Visible boxes are - " + visibleBoxes.join(", "));
    });
    
    // Get hidden boxes
    $(".get-hidden-btn").click(function(){
        var hiddenBoxes = [];
        $.each($(".box"), function(){ 
            if($(this).is(":hidden")) {
                hiddenBoxes.push($(this).text());
            }
        });
        alert("Hidden boxes are - " + hiddenBoxes.join(", "));
    });
    
      });