Skip to content

Instantly share code, notes, and snippets.

@Ehawk82

Ehawk82/Graz

Created April 7, 2015 02:56
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save Ehawk82/041670b56ffbe5f4f20e to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save Ehawk82/041670b56ffbe5f4f20e to your computer and use it in GitHub Desktop.
Download ZIP
Raw
Graz
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no" >
<meta name="description" content="Jason's mobile web To-Do app, for resume">
<meta name="keywords" content="To-Do, Planner, mobile">
<meta name="author" content="Jason Graziano">
<link id="swapStyle" rel="stylesheet" type="text/css" href="styleMain1.css">
<title>Ehawk's Planner</title>
<script type="text/javascript">
function swapStylesheet(sheet){
document.getElementById('swapStyle').setAttribute('href', sheet)
}
</script>
</head>
<body>
<div id="wrapper">
<table id="tbH">
<tr>
<td><ul id="nav">
<ul><p id="btnHide">Home</p></ul>
<ul><p id="btnShow">Log &nbsp;<span id="spnLog">0</span></p></ul>
<ul><p id="btnContact">Settings</p></ul>
</ul>
</td>
</tr>
</table>
<table style="width:100%;" id="tbl">
<tbody>
<tr><td>&nbsp;</td></tr>
<tr>
<td>
<input id="txtname" type="text" class="c1" maxlength="8" placeholder="Name" autofocus />
</td>
</tr>
<tr><td><label for="txtTime" class="labelClass">Date</label></td></tr>
<tr>
<td>
<input id="txtDate" type="date" class="c1" />
</td>
</tr>
<tr>
<td>
<label for="txtTime" class="labelClass">Time</label>
</td>
</tr>
<tr>
<td>
<input id="txtTime" type="time" class="c1" />
</td>
</tr>
<tr><td><label for="txtDes">&nbsp;</label></td></tr>
<tr>
<td>
<input id="txtDes" class="c1" placeholder="About" />
</td>
</tr>
<tr>
<td>
<p id="btnclear" class="btnsC">clear</p>
</td>
</tr>
</tbody>
</table>
<br>
<div id="dvContact">
<br />
<div id="divStyle" class="">Choose a style below<br />
<br />
<div id="span1" class="spnsStyle1" onclick="swapStylesheet('styleMain2.css')">Hawaii</div><br />
<div id="span2" class="spnsStyle1">Desert</div><br />
<div id="span3" class="spnsStyle1">Woodland</div><br />
<div id="span4" class="spnsStyle1">Urban City</div><br />
<div id="span5" class="spnsStyle1">Spring</div><br />
<div id="span6" class="spnsStyle1">Standard</div>
</div>
</div>
<address>
<p><a href="mailto:[email protected]">Email me</a>&nbsp;for more information</p>
</address>
<div id="dvcontainer">
</div>
<hr />
</div>
<div>Ehawk's Planner V3.9</div>
<script type="text/javascript">
(function () {
//Goals Object
var Goals = {
Name: "",
Descript: "",
timeVal:"",
dateVal: ""
};
var Uilogic = {
//Clear all
clearuielements: function () {
var inputs = document.getElementsByClassName("c1");
for (i = 0; i < inputs.length; i++) {
inputs[i].value = "";
}
},
//Save to LS
saveitem: function () {
var lscount = localStorage.length; //Length
var inputs = document.getElementsByClassName("c1");
Goals.Name = inputs[0].value;
Goals.dateVal = inputs[1].value;
Goals.timeVal = inputs[2].value;
Goals.Descript = inputs[3].value;
//Convert to JSON/Store it
localStorage.setItem("Goals_" + lscount, JSON.stringify(Goals));
location.reload();
},
//Load Data from LS
loaddata: function () {
var datacount = localStorage.length;
if (datacount > 0) {
var renderData = "<br /><table id='tableRNDR'>";
renderData += "<tr><td>Log</td></tr><br /><tr id='topHead'><th>Id</th><th>Task</th><th>Info</th><th>Time</th><th>Date</th><th></th></tr>";
for (i = 0; i < datacount; i++) {
var key = localStorage.key(i); //Get Key
var Goals = localStorage.getItem(key); //Get Data
try{
var data = JSON.parse(Goals); //Parse Data
}
catch(e)
{
continue;
}
var iCount = i + 1;
renderData += "<tr><td class='tdC2'>" + iCount + "</td>";
renderData += "<td class='tdC2'>"+ data.Name + "</td>";
renderData += "<td class='tdCl'>" +"<marquee behavior='scroll' direction='left' scrollamount='1'>" + data.Descript + "</marquee>"+"</td>";
renderData += "<td class='tdC2'>" + data.timeVal + "</td>";
renderData += "<td class='tdC2'>" + data.dateVal + "</td>";
renderData += "<td class='xData' data-id='xData' data-index='"+key+"'>" + "x" + "</td></tr>";
//set a data-id and data-index to this element, we need them to select the correct information.
renderData += "<tr><td>&nbsp;</td></tr>"
spnLog.innerHTML = iCount;
}
renderData += "</table>";
renderData += "<p id='btnclearstorage'>Clear All</p><br /><br />";
dvcontainer.innerHTML = renderData;
Array.prototype.map.call(document.querySelectorAll("td[data-id='xData']"), function(element){
element.addEventListener("click", deleteRow, false); //attach a click handler to all delete buttons
} );
var btnclearstorage = document.getElementById('btnclearstorage');
btnclearstorage.addEventListener('click', Uilogic.clearstorage, false);
}
},
//Clear
clearstorage: function () {
var storagecount = localStorage.length; //Count
if (storagecount > 0)
{
for (i = 0; i < storagecount; i++) {
localStorage.clear();
}
}
window.location.reload();
}
};
//deleteThis
function deleteRow() {
localStorage.removeItem(this.getAttribute("data-index"));
window.location.reload();
}
//divHide function
function divHide() {
document.getElementById('dvContact').style.display = 'none';
document.getElementById('dvcontainer').style.display = 'none';
}
//divShow function
function divShow() {
document.getElementById('dvContact').style.display = 'none';
document.getElementById('dvcontainer').style.display = 'block';
}
//divContact
function divContact() {
document.getElementById('dvContact').style.display = 'block';
document.getElementById('dvcontainer').style.display = 'none';
}
//styleChange
function styleChange1() {
document.getElementById('dvContact').style.background = 'blue';
document.getElementById('dvcontainer').style.background = 'lightyellow';
document.getElementById('tbl').style.background = 'lightyellow';
document.getElementById('tableRNDR').style.background = 'yellow';
document.getElementById('tbH').style.background = 'lightyellow';
}
function styleChange2() {
document.getElementById('dvContact').style.background = 'yellow';
document.getElementById('dvcontainer').style.background = 'green';
document.getElementById('tbl').style.background = 'green';
document.getElementById('tableRNDR').style.background = 'yellow';
document.getElementById('tbH').style.background = 'lightBlue';
}
function styleChange3() {
document.getElementById('dvContact').style.background = 'yellow';
document.getElementById('dvcontainer').style.background = 'green';
document.getElementById('tbl').style.background = 'green';
document.getElementById('tableRNDR').style.background = 'yellow';
document.getElementById('tbH').style.background = 'lightBlue';
}
function styleChange4() {
document.getElementById('dvContact').style.background = 'yellow';
document.getElementById('dvcontainer').style.background = 'green';
document.getElementById('tbl').style.background = 'green';
document.getElementById('tableRNDR').style.background = 'yellow';
document.getElementById('tbH').style.background = 'lightBlue';
}
function styleChange5() {
document.getElementById('dvContact').style.background = 'yellow';
document.getElementById('dvcontainer').style.background = 'green';
document.getElementById('tbl').style.background = 'green';
document.getElementById('tableRNDR').style.background = 'yellow';
document.getElementById('tbH').style.background = 'lightBlue';
}
function styleChange6() {
document.getElementById('dvContact').style.background = '#fff';
document.getElementById('dvcontainer').style.background = '#fff';
document.getElementById('tbl').style.background = '#fff';
document.getElementById('tableRNDR').style.background = '#fff';
document.getElementById('tbH').style.background = 'lightgrey';
}
//Save
window.onkeyup = function(e) {
var inputs = document.getElementsByClassName("c1");
for (i = 0; i < inputs.length; i++) {
inputsVal = inputs[i].value;
if (!inputsVal || inputsVal == "" || inputsVal == " ") {
return false
}
}
if (event.which == 13) {
Uilogic.saveitem();
}
};
//Clear all
var btnclear = document.getElementById('btnclear');
btnclear.addEventListener('click', Uilogic.clearuielements, false);
//hidediv
var btnHide = document.getElementById('btnHide');
btnHide.addEventListener('click', divHide, false);
//divShow
var btnShow = document.getElementById('btnShow');
btnShow.addEventListener('click', divShow, false);
//divContact
var btnContact = document.getElementById('btnContact');
btnContact.addEventListener('click', divContact, false);
//styleBtns
var span1 = document.getElementById('span1');
span1.addEventListener('click', swapStylesheet('styleMain2.css'), false);
var span2 = document.getElementById('span2');
span2.addEventListener('click', styleChange2, false);
var span3 = document.getElementById('span3');
span3.addEventListener('click', styleChange3, false);
var span4 = document.getElementById('span4');
span4.addEventListener('click', styleChange4, false);
var span5 = document.getElementById('span5');
span5.addEventListener('click', styleChange5, false);
var span6 = document.getElementById('span6');
span6.addEventListener('click', styleChange6, false);
//Onload
window.onload = function () {
Uilogic.loaddata();
};
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment