JSFiddle - React, Tailwind, and code Playground

by srmor

HTML

<!DOCTYPE html>
<html>
<head>

<meta charset=utf-8 />

<title id="pageTitle">Word 4 Word Alpha</title>

<!--<style src="main.css"></style>-->

<script src="jquery-1.4.3.min.js"></script>
<script src="pgload.js"></script>
<script src="globals.js"></script>
<script src="htmlblocks.js"></script>
<link rel="stylesheet" type="text/css" href="main.css" />
<link rel="stylesheet" type="text/css" href="reset.css" />

</head>

<body>

<div id="topNav">

<div id="topNav1">
<span class="topNavLink" id="headingTitle" >Word 4 Word</span>

<span id="topNav1two"
<a href="#" id="home" class="topNavLink">Home</a>
<a href="#" id="new" class="topNavLink">New Test</a>
</span>
</div>

<div id="topNav2">
<input type="search" size="35" id="searchInput">
<input type="button" value="Search" id="searchBttn">
</div>



<div id="topNav3">
<a id="feedback" href="#" class="topNavLink">Give Feedback</a>

<a href="#" id="settings" class="topNavLink">Settings</a><!--eventually will be the username instead-->

<!--below will be a dropdown on the Settings menu once CSS is add to hide it when not clicked-->
<!--<ul>
    <li>Account Settings</li>
    <li>Sign Out</li>
</ul>-->
</div>

</div>

<div id="divider">

</div>

<div id="tests">

    <div id="countingOptions">

    </div>


    <div id="studyModes">

    </div>

    <div id="testingCenter">

        <div id="test"><!--Includes the answers-->

        </div>
 
        <div id="bottomNav"> <!-- for done/grade/next button -->

        </div>

    </div>

</div>

    <ul id="UInavList">
        <li class="selectedNav">My Activity</li>
        <li >My Tests</li>
        <li >Messaging</li>
        <li >Search</li>
    </ul>


    <div id="selectedPane">

    </div>

    <div id="popups">

    </div>

<div id="footer">
<!-- this is the copyright notice if I decide I still want it included -->
<!--<p id="copyright">Copyright &copy; 2010 Stephen Morrison</p>-->
</div>

</body>
</html>

JavaScript

$formHtml = '<div id="createform"><div id="createformInside"><input type="text" id="testTitle" size="20"><input type="text" id="testSubj"><span id="testOptions">More Options</span><br/><textarea id="testContent" ></textarea><input type="button" id="saveBttn" value="Save Test"></div></div></div>';

$('document').ready( function() {

$('#UInavList li').click( function() {//if a secondary nav is clicked...
    $(this).addClass('selectedNav').siblings().removeClass('selectedNav');//make it selected in the ui
    $(this).removeClass('hoveredNav');//make it not hovered over at the same time
})

$('#UInavList li').mouseover( function() {//if a secondary nav is moused over...
    $('#UInavList li').removeClass('hoveredNav');//clear the last moused over button
    $(this).not('.selectedNav').addClass('hoveredNav');//make it looked hovered over in the ui
})

$('#UInavList li').mouseout( function() {//if a secondary nav is moused out...
    $(this).removeClass('hoveredNav');//make all the nav buttons look normal
})

$('#new').click( function() {//if a new test is wanted to be created...
    $('#popups').append($formHtml);
})

$('#saveBttn').click( function() {//if the save button on the create test form is clicked...
    $('#createform').empty();//gets rid of the create test form
})

})