JSFiddle - React, Tailwind, and code Playground

by srmor

HTML

<!DOCTYPE html> 
<html> 
    <head>
        
        <style type="text/css" media="screen">@import "../../includes/testpg_styles.css";</style><script type="text/javascript" src="../../includes/jquery.js"></script><script type="text/javascript" src="../../includes/navbar.js"></script><script type="text/javasript" src="../../includes/study.js"></script> 
    </head> 
    
    
    <body id="defaultBackground" > 
        
        <div class="headerContainer"><img id="blankitLogo" src="../../images/blankit_logo.png"><span id="headerRight"> 
            <a class="navLink" title="Still under Development">Settings</a> 
            <a class="navLink" href="http://blankit.co.cc/logout.php">Logout</a></span><div id="pgHeader" class="headerin"> 
            <span id="homeNavLinks"> 
                <a class="navLink" id="homeBttn" href="http://blankit.co.cc/">Home</a> 
                <span id="subHomeNav" style="display: none;"> 
                    <a class="navLink" href="http://blankit.co.cc/feed/">My Feed</a> 
                    <a class="navLink" href="http://blankit.co.cc/tests/">All Tests</a> 
                </span> 
            </span> 
            <input type="text" id="searchBox" placeholder="Search Tests, Subjects, and Users" autocomplete="off" title="Still under development"> 
            <input type="button" value="New Test" id="newTestBttn"> 
            </div></div> 
    </div> 
        
        <div id="pgContent"> <!-- div will be closed in footer.inc --> 
            
            <!-- End of header.inc --> 
            <div id="testSubNav"> 
                <span class="subNavItem" id="studyTestLink">Study</span> 
                <span class="subNavItem" id="discussTestLink">Discuss</span> 
                <span class="subNavItem" id="editTestLink">Edit</span> 
            </div> 
            
            <div id="testBar"> 
                <div class="segmentHeader">Related Tests</div> 
                <div class="segmentHeader">Share</div> 
          ...

JavaScript

$(function() {

    var testContent = $('#testContent').val();
    var contentArray = testContent.split(" ");

    $('#studyTestLink').click(function() {

        $('#testContent').hide();


    });



    //shows links for All Tests and My Feed on hovering over Home link
    $('#homeNavLinks').hover(

    function() {
        $('#subHomeNav').show();
        $('#homeBttn').hide();
        $(this).css("margin-left", "-90px");
    }, function() {
        $('#subHomeNav').hide();
        $('#homeBttn').show();
        $(this).css("margin-left", "0px");
    });

    //goes home on clicking blankit logo
    $('#blankitLogo').click(function() {
        window.location = "http://blankit.co.cc/"
    });

    //creates new test on clicking new test button
    $('#newTestBttn').click(function() {
        window.location = "http://blankit.co.cc/create_test/"
    });


});