JSFiddle - React, Tailwind, and code Playground

by jmcausing

HTML

<html>
    <head>
        <script src="js/jquery1.9.1.js"></script>
        <script src="js/main.js"></script>
		<script src="js/apprise-1.5.full.js"></script>
        <link href="css/main.css" type="text/css" rel="stylesheet" >
		<link rel="stylesheet" href="css/apprise.css" type="text/css" />
		
    </head>
    <body>
    <div id="pane">
        <div id="question">
            <ol>
               <li id="modem_offline">Modem offline</li>
               <li id="wireless">Wireless Issue?</li>
            </ol>
        </div>
        <div id="report">
            <ul id="rlist"></ul>
                
        </div>
    </div>
	
    </body>

CSS

#pane {
   float: left;
   width: 100%; 
}
#question, #report {
    float: left;
    width: 48%;
    height: 300px;
    background-color: #DDD;
    margin: 5px;
}
#question li {
    cursor: pointer;
}

.appriseOverlay
	{
	position:fixed;
	top:0;
	left:0;
	background:rgba(0, 0, 0, 0.3);
	display:none;
	}
.appriseOuter
	{
	background:#eee;
	border:1px solid #fff;
	box-shadow:0px 3px 7px #333;
	-moz-box-shadow:0px 3px 7px #333;
	-webkit-box-shadow:0px 3px 7px #333;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
	-khtml-border-radius:4px;
	position:absolute;
	z-index:99999999;
	min-width:200px;
	min-height:50px;
	max-width:75%;
	position:fixed;
	display:none;
	}
.appriseInner
	{
	padding:20px;
	color:#333;
	text-shadow:0px 1px 0px #fff;
	}
.appriseInner button
	{
	border:1px solid #bbb;
	-moz-border-radius:3px;
	-webkit-border-radius:3px;
	border-radius:3px;
	-khtml-border-radius:3px;
	background: -moz-linear-gradient(100% 100% 90deg, #eee, #d5d5d5);
  	background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#eee), to(#d5d5d5));
  	background: -webkit-linear-gradient(#eee, #d5d5d5);
    background: -o-linear-gradient(#eee, #d5d5d5);
	color:#232d3d;
	font-size:12px;
	font-weight:bold;
	padding:4px 10px;
	margin:0 3px;
	text-shadow:0px 1px 0px #fff;
	cursor:pointer;
	box-shadow:0px 1px 2px #ccc;
	-moz-box-shadow:0px 1px 2px #ccc;
	-webkit-box-shadow:0px 1px 2px #ccc;
	}
.appriseInner button:hover
	{
	color:#d85054;
	}
.aButtons, .aInput
	{
	margin:20px 10px 0px 10px;
	text-align:center;
	}
.aTextbox
	{
	border:1px solid #aaa;
	-moz-border-radius:4px;
	-webkit-border-radius:4px;
	border-radius:4px;
	-khtml-border-radius:4px;
	box-shadow:0px 1px 0px #fff;
	-moz-box-shadow:0px 1px 0px #fff;
	-webkit-box-shadow:0px 1px 0px #fff;
	width:180px;
	font-size:12px;
	font-weight:bold;
	padding:5px 10px;
	}

JavaScript

// Declined TC [start]
function no_ts() {
apprise('Trouble-Call exceptions:', {'verify':true, 'textYes':'Refer to local office!', 'textNo':'Customer will callback for reschedule'}, function(r) {
		if(r) { $("#report #rlist").append('<li> Referred customer to local office</li>'); }
		 else { $("#report #rlist").append('<li> Customer will callback to reschedule </li>'); }
	})
}
// Declined TC [ e n d ]



// Modem offline TS (NO OUTAGE) [start]
function offline_ts() {

	apprise('Physical connection checked?', {'animate':true}, function(r) {
					if(r) { $("#report #rlist").append('<li> Physical connection checked </li>'); }
					 else { $("#report #rlist").append('<li> ONS TR#: N/A </li>'); }
							
							apprise('Reset modem procedure: Hit YES if done. ', {'animate':true}, function(r) {
								if(r) { $("#report #rlist").append('<li> Modem reset done. </li>'); }
							// [removed]		else { $("#report #rlist").append('<li> ONS TR#: N/A </li>'); }
							
									apprise('Proceed trouble call? ', {'confirm':true}, function(r) {
										if(r) { $("#report #rlist").append('<li> Touble Call created </li>'); }
											else { 
											
													$("#report #rlist").append('<li> TS Declined </li>'); 
													$(document).ready(function() { no_ts(); }); 
													return false;
											
											
											}
											
											
											apprise('Make sure to educate cx about pre-call policy. ', {'animate':true}, function(r) {
												if(r) { $("#report #rlist").append('<li> Pre-call policy provided </li>'); }
													// [removed]		else { $("#report #rlist").append('<li> ONS TR#: N/A </li>'); }
							
											
						   })	
					 })		
				})
					 
			})
			
			
}
// Modem offline TS (NO OUTAGE) [ e n d ]



$(document).ready(function() {
  $("#question li").click(function(){
		var question=$(this).html();
		var question_id = $(this).attr('id');
		apprise($(this).html(), {'verify':true}, function(r) {	// How to remove this and...