Hard Work Progress Chart

Developer
John Stammerman
Size
8,791 Kb
Views
38,456
  1. Hard Work Progress Chart Previews
  2. Hard Work Progress Chart HTML Codes
  3. Hard Work Progress Chart CSS Codes
  4. Hard Work Progress Chart JS Codes

How do I make an hard work progress chart?

This is still a work in progress.. What is a hard work progress chart? How do you make a hard work progress chart? This script and codes were developed by John Stammerman on 23 July 2022, Saturday.

Hard Work Progress Chart Previews
IQ Test

Hard Work Progress Chart - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Hard Work Progress Chart</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.1.0/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.0.3/css/font-awesome.min.css'>
<link rel='stylesheet prefetch' href='css/hkcby.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <!-- Still working on this thing as I have time. Not yet completed.
-->
<h1>Hard Work Progress Chart</h1>
<div class="chart"> <header> <h3>Your Hard Work</h3> <button name="calculate" id="calculate"><i class="icon-refresh"></i>Calculate</button> </header> <section></section> <footer> <h3>Week of <span id="date">April 23, 2012</span></h3> <table class="results"> <thead> <tr> <th>Description</th> <th>Type</th> <th>Date</th> </tr> </thead> <tbody></tbody> </table> </footer>
</div>
<div class="inputs"> <h2>Report Your Work</h2> <fieldset> <label>Type of work:</label> <select name="type" id="type"> <option>Homework assignment</option> <option>Read a book</option> <option>Spelling words</option> <option>Math practice</option> <option>Clean my room</option> <option>Put away my toys</option> <option>Helped mom or dad</option> </select><br /> <label>Description:</label> <textarea name="description" id="description" placeholder="Describe the work you did."></textarea><br /> <button type="submit" name="add" id="add">Add</button> </fieldset>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Hard Work Progress Chart - Script Codes CSS Codes

/* Still working on this thing as I have time. Not yet completed.
*/
/* Mixins & Vars
---------------------------*/
@font-face { font-family: 'Pictos Custom'; src: url("/fonts/icomoon.eot"); src: url("/fonts/icomoon.eot?#iefix") format("embedded-opentype"), url("/fonts/icomoon.woff") format("woff"), url("/fonts/icomoon.ttf") format("truetype"), url("/fonts/icomoon.svg#PictosRegular") format("svg");
}
/* Main CSS
---------------------------*/
i.icon { font-family: 'Pictos Custom'; font-style: normal;
}
div.chart header h3 { float: left;
}
div.chart section { background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjEuMCIgeDI9IjAuNSIgeTI9IjAuMCI+PHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iIzZiMmUyZSIvPjxzdG9wIG9mZnNldD0iMTAwJSIgc3RvcC1jb2xvcj0iI2NjNjY2NiIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 100%, 50% 0%, color-stop(0%, #6b2e2e), color-stop(100%, #cc6666)); background: -moz-linear-gradient(bottom, #6b2e2e 0%, #cc6666 100%); background: -webkit-linear-gradient(bottom, #6b2e2e 0%, #cc6666 100%); background: linear-gradient(to top, #6b2e2e 0%, #cc6666 100%); border: solid 1px #262626; -moz-box-shadow: 0 8px 16px #262626; -webkit-box-shadow: 0 8px 16px #262626; box-shadow: 0 8px 16px #262626; clear: both; height: 10px; margin: 50px 0 20px 0;
}
div.chart footer { font-size: 0.8em;
}
div.chart footer table.results { border: 0; border-collapse: collapse; -moz-box-shadow: 0 8px 16px #262626; -webkit-box-shadow: 0 8px 16px #262626; box-shadow: 0 8px 16px #262626; font-size: 0.9em; width: 100%;
}
div.chart footer table.results td, div.chart footer table.results th { border: solid 1px #262626; color: #a3a38f; margin: 0; padding: 3px 6px;
}
div.chart footer table.results th { background: url('data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4gPHN2ZyB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+PGRlZnM+PGxpbmVhckdyYWRpZW50IGlkPSJncmFkIiBncmFkaWVudFVuaXRzPSJvYmplY3RCb3VuZGluZ0JveCIgeDE9IjAuNSIgeTE9IjAuMCIgeDI9IjAuNSIgeTI9IjEuMCI+PHN0b3Agb2Zmc2V0PSIzMCUiIHN0b3AtY29sb3I9IiM5OTk5OTkiIHN0b3Atb3BhY2l0eT0iMC41Ii8+PHN0b3Agb2Zmc2V0PSI3MCUiIHN0b3AtY29sb3I9IiM5OTk5OTkiIHN0b3Atb3BhY2l0eT0iMC4yNSIvPjwvbGluZWFyR3JhZGllbnQ+PC9kZWZzPjxyZWN0IHg9IjAiIHk9IjAiIHdpZHRoPSIxMDAlIiBoZWlnaHQ9IjEwMCUiIGZpbGw9InVybCgjZ3JhZCkiIC8+PC9zdmc+IA=='); background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(30%, rgba(153, 153, 153, 0.5)), color-stop(70%, rgba(153, 153, 153, 0.25))); background: -moz-linear-gradient(top, rgba(153, 153, 153, 0.5) 30%, rgba(153, 153, 153, 0.25) 70%); background: -webkit-linear-gradient(top, rgba(153, 153, 153, 0.5) 30%, rgba(153, 153, 153, 0.25) 70%); background: linear-gradient(to bottom, rgba(153, 153, 153, 0.5) 30%, rgba(153, 153, 153, 0.25) 70%); color: #e0e06c; text-shadow: 0 1px 3px #262626;
}
div.chart footer table.results tr:nth-child(even) td { background: #4d4d4d; color: #afaf9d;
}
div.inputs fieldset { border: solid 1px #262626; border-radius: 8px;
}
div.inputs label { display: inline-block; margin: 0 6px 12px 0; text-align: right; vertical-align: top; width: 25%;
}
div.inputs textarea { width: 50%;
}
button { font-size: 90%;
}

Hard Work Progress Chart - Script Codes JS Codes

/* Still working on this thing as I have time. Not yet completed.
*/
// local storage detection
//------------------------------
var storage, fail, uid;
try { uid = new Date; (storage = window.localStorage).setItem(uid, uid); fail = storage.getItem(uid) != uid; storage.removeItem(uid); fail && (storage = false);
} catch(e) {}
/* usage -----
if (storage) { // Use `storage` here, e.g.
var users = { user : { userId : 0, firstName : 'Steve', lastName : 'Jobs' }, user : { userId : 42, firstName : 'Jack', lastName : 'Bauer' },
}; storage.setItem('users', JSON.stringify(users)); storage.setItem('foo', 'bar'); storage.lol = 'wat'; storage.removeItem('foo'); var values = JSON.parse(this.getItem('users'));
}
*/
// pub sub
//------------------------------
(function(d){ var cache = {}; d.publish = function(topic, args){ try{ d.each(cache[topic], function(){ this.apply(d, args || []); }); } catch (err) { // handle this error console.log(err); } }; d.subscribe = function(topic, callback){ if(!cache[topic]){ cache[topic] = []; } cache[topic].push(callback); return [topic, callback]; // Array }; d.unsubscribe = function(handle){ var t = handle[0]; cache[t] && d.each(cache[t], function(idx){ if(this == handle[1]){ cache[t].splice(idx, 1); } }); };
})(jQuery);
// page controller
//------------------------------
// Initialize the panels
var workHistory = [], workRecord, refreshDisplay = function () { var work = JSON.parse( storage.getItem('workHistory') ), tableBody = $('.chart footer .results tbody'), workDate; if (work) { console.log(work.length); console.dir(work); tableBody.empty(); for(var i = 0, len = work.length; i < len; ++i) { workDate = new Date(work[i].date); tableBody.append('<tr><td>' + work[i].desc + '</td><td>' + work[i].type + '</td><td>' + workDate.getMonth() + '-' + workDate.getDate() + '-' + workDate.getFullYear() + ' ' + workDate.getHours() + ':' + workDate.getMinutes() + '</td></tr>'); } } }, resultsPanel = new UpdatePanel('update.all', function(type, description) { workRecord = { 'desc' : description, 'type' : type, 'date' : new Date() } workHistory.push(workRecord); if (storage) { storage.workHistory = JSON.stringify(workHistory); storage.setItem( 'workHistory', storage.workHistory ); } refreshDisplay(); });
$('#add').click(function(){ // Get & clean the values from the form var regex = /<(.|\n)*?>/gi, type = $('#type').val(), description = $('#description').val().replace(regex, ""); // Publish the new data $.publish('update.all', [type, description]); return false;
});
$('#calculate').click(function(){ var work = JSON.parse( storage.getItem('workHistory') ); if (work) { console.dir(work); } return false;
});
refreshDisplay();
// subscription method
function UpdatePanel(event, htmlAction){ var _subscribe = function(event){ $.subscribe(event, htmlAction); } if (event !== undefined){ _subscribe(event); }
}
Hard Work Progress Chart - Script Codes
Hard Work Progress Chart - Script Codes
Home Page Home
Developer John Stammerman
Username jstam
Uploaded July 23, 2022
Rating 3
Size 8,791 Kb
Views 38,456
Do you need developer help for Hard Work Progress Chart?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

John Stammerman (jstam) Script Codes
Name
J5T4M Jumbotron
LESS CSS multiple background gradient mixin
Toying with Flexbox
Select field variations across browsers
CSS3 dry-erase clipboard
Hidden Sidebar Menu
Checkbox select all example
JSTAM svg logo test
Vertical Rhythm Typography example
Burpee Equivalent Calculator
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!