Skip to content

Instantly share code, notes, and snippets.

@tariquesani

tariquesani/index.html

Last active November 6, 2018 03:50
Show Gist options
  • Save tariquesani/9a660b8c2805e74fcce489108c1a09ea to your computer and use it in GitHub Desktop.
Save tariquesani/9a660b8c2805e74fcce489108c1a09ea to your computer and use it in GitHub Desktop.
Download ZIP
Sort Values for life coaching!
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
<style>
html {
position: relative;
min-height: 100%;
}
body {
margin-bottom: 40px; /* Margin bottom by footer height */
}
.footer {
position: absolute;
bottom: 0;
width: 100%;
height: 40px; /* Set the fixed height of the footer here */
line-height: 40px; /* Vertically center the text there */
background-color: #f5f5f5;
font-size: 0.7rem;
}
</style>
<title>Rational Redo - Value Sorter</title>
</head>
<body>
<main role="main" class="container-fluid">
<nav class="navbar navbar-dark bg-dark">
<a class="navbar-brand" href="https://facebook.com/rationalredo/">Rational Redo - Value Sorter</a>
</nav>
<form id="valueForm">
<h1>Fill Values</h1>
<p>Leave blank if you don't have as many...</p>
<div class="form-group row">
<label for="1" class="col-sm-2 col-form-label">1</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="1" id="1" value="">
</div>
</div>
<div class="form-group row">
<label for="2" class="col-sm-2 col-form-label">2</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="2" id="2" value="">
</div>
</div>
<div class="form-group row">
<label for="3" class="col-sm-2 col-form-label">3</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="3" id="3" value="">
</div>
</div>
<div class="form-group row">
<label for="4" class="col-sm-2 col-form-label">4</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="4" id="4" value="">
</div>
</div>
<div class="form-group row">
<label for="5" class="col-sm-2 col-form-label">5</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="5" id="5" value="">
</div>
</div>
<div class="form-group row">
<label for="6" class="col-sm-2 col-form-label">6</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="6" id="6" value="">
</div>
</div>
<div class="form-group row">
<label for="7" class="col-sm-2 col-form-label">7</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="7" id="7" value="">
</div>
</div>
<div class="form-group row">
<label for="8" class="col-sm-2 col-form-label">8</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="8" id="8" value="">
</div>
</div>
<div class="form-group row">
<label for="9" class="col-sm-2 col-form-label">9</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="9" id="9" value="">
</div>
</div>
<div class="form-group row">
<label for="10" class="col-sm-2 col-form-label">10</label>
<div class="col-sm-10">
<input type="text" class="form-control" name="10" id="10" value="">
</div>
</div>
<button type="submit" id="valueSubmit" class="btn btn-primary">Submit</button>
</form>
<form id="compareForm" style="display:none"; >
<h1>Which is a higher value?</h1>
<button type="submit" id="valueOne" class="btn btn-primary">One</button> OR
<button type="submit" id="valueTwo" class="btn btn-primary">Two</button>
</form>
<div id="results"></div>
</main>
<footer class="footer">
<div class="container text-center">
<!-- Would appreciate the credit line not being modified -->
<span class="text-muted">Created by Dr. Tarique Sani for <a href="https://facebook.com/rationalredo/">Rational Redo.</a></span>
</div>
</footer>
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
<script>
$(document).ready(function(){
$("form").submit(function(e){
e.preventDefault();
});
var x;
var values = new Object();
localStorage.setItem("valueOneCount", 0);
localStorage.setItem("valueTwoCount", 1);
$("#valueSubmit").click(function(){
x = $("form").serializeArray();
var y = [];
$.each(x, function(i, field){
if(field.value !==''){
values[field.value] = 0;
y.push(field);
}
});
x = y; //blanks eliminated
localStorage.setItem("x", JSON.stringify(x));
localStorage.setItem("values", JSON.stringify(values));
$("#valueForm").hide(1500);
fill_values();
});
$("#valueOne").click(function(){
thisValue = $("#valueOne").html();
loop_over(thisValue);
})
$("#valueTwo").click(function(){
thisValue = $("#valueTwo").html();
loop_over(thisValue);
})
function loop_over(thisValue){
$("#valueOne").prop('disabled', true);
$("#valueTwo").prop('disabled', true);
values = JSON.parse(localStorage.getItem("values"));
values[thisValue] = values[thisValue]+1
console.log(values);
localStorage.setItem("values", JSON.stringify(values));
x = JSON.parse(localStorage.getItem("x"));
var valueOneCount = localStorage.getItem("valueOneCount");
var valueTwoCount = localStorage.getItem("valueTwoCount");
numberOfValues = Object.keys(x).length;
if (valueTwoCount < (numberOfValues - 1)) {
valueTwoCount++;
localStorage.setItem("valueTwoCount", valueTwoCount);
fill_values();
} else if(valueOneCount < (numberOfValues - 2)) {
valueOneCount++;
valueTwoCount = valueOneCount +1;
localStorage.setItem("valueOneCount", valueOneCount);
localStorage.setItem("valueTwoCount", valueTwoCount);
fill_values();
}else{
$("#compareForm").hide(1500);
sortedValues = getSortedKeys(values);
var list = '<h1>Results</h1><ul><li>' + sortedValues.join('</li><li>') + '</li></ul>';
$("#results").html(list);
}
}
function getSortedKeys(obj) {
var keys = Object.keys(obj);
return keys.sort(function(a,b){return obj[b]-obj[a]});
}
function fill_values(){
$("#compareForm").show(1500);
var valueOneCount = localStorage.getItem("valueOneCount");
var valueTwoCount = localStorage.getItem("valueTwoCount");
x = JSON.parse(localStorage.getItem("x"));
$("#valueOne").html(x[valueOneCount].value);
$("#valueTwo").html(x[valueTwoCount].value);
$("#valueOne").prop('disabled', false);
$("#valueTwo").prop('disabled', false);
}
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment