├── Arrays ├── every.html ├── filter.html ├── forEach.html ├── join.html ├── map.html ├── project.js ├── reduce.html ├── some.html ├── splice.html └── unshift.html ├── Canvas ├── canvas-1.html ├── canvas-1.js ├── canvas-2.html └── canvas-2.js ├── Events ├── customevent.html ├── customevent.js ├── customeventplugin.js ├── events-1.html ├── events-1.js ├── events-2.html ├── events-2.js ├── events-3.html ├── events-3.js ├── events-4.html ├── events-4.js ├── events-5.html ├── events-5.js ├── events-6.html ├── events-7.html ├── onload.html └── onresize.html ├── Loops and Jumps ├── break.html ├── continue.html ├── do-while-loop.html ├── error-handling-1.html ├── error-handling-2.html ├── factorial-iterative.html ├── factorial-recursive.html ├── for-in.html ├── for-loop-1.html ├── for-loop-2.html ├── for-loop-3.html ├── higher-order-functions-1.html ├── higher-order-functions-2.html ├── labeled-statements.html └── while-loop.html ├── Objects and Functions ├── arguments-variable.html ├── bank-accounts.html ├── function-arguments.html ├── hoisting-1.html ├── hoisting-2.html ├── hoisting-3.html ├── looping-over-an-object-1.html ├── looping-over-an-object-2.html ├── pig-latin.html ├── project-1.js ├── reading-from-objects.html ├── scope-1.html └── scope-2.html ├── Project ├── css │ └── todo.css ├── index.html └── todo.js ├── Setting Up ├── external-js.html ├── hello.js └── js-in-html.html ├── The Document Object Model and CSS ├── getElementById.html ├── insertBefore.html ├── isEqualNode.html └── style.html ├── Variables ├── project.js └── time-of-day.html └── readme.txt /Arrays/every.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /Arrays/filter.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 16 | 17 | 18 | -------------------------------------------------------------------------------- /Arrays/forEach.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 18 | 19 | 20 | -------------------------------------------------------------------------------- /Arrays/join.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Arrays/map.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /Arrays/project.js: -------------------------------------------------------------------------------- 1 | var tasks; 2 | 3 | tasks = [ 4 | "Pay phone bill", 5 | "Write best-selling novel", 6 | "Walk the dog" 7 | ]; -------------------------------------------------------------------------------- /Arrays/reduce.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /Arrays/some.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 15 | 16 | 17 | -------------------------------------------------------------------------------- /Arrays/splice.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /Arrays/unshift.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /Canvas/canvas-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Todo 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /Canvas/canvas-1.js: -------------------------------------------------------------------------------- 1 | var canvas = document.getElementById("canvas"); 2 | var context = canvas.getContext("2d"); 3 | 4 | context.strokeStyle = '#000000'; 5 | context.strokeRect(0, 0, canvas.width, canvas.height); 6 | context.fillRect(100, 100, 200, 100); 7 | -------------------------------------------------------------------------------- /Canvas/canvas-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Todo 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /Canvas/canvas-2.js: -------------------------------------------------------------------------------- 1 | var canvas = document.getElementById("canvas"); 2 | var context = canvas.getContext("2d"); 3 | var message = "Hello world"; 4 | var xCoord = canvas.width / 2; 5 | var yCoord = canvas.height / 2; 6 | 7 | context.font = "italic 30pt Times New Roman"; 8 | context.fillStyle = "blue"; 9 | context.textAlign = "center"; 10 | context.textBaseline = "middle"; 11 | context.fillText(message, xCoord, yCoord); 12 | -------------------------------------------------------------------------------- /Events/customevent.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Events 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /Events/customevent.js: -------------------------------------------------------------------------------- 1 | var taskEvent = new CustomEvent("TaskAdded", { 2 | detail: { 3 | message: "A task has been added", 4 | }, 5 | bubbles: true, 6 | cancelable: true 7 | }); 8 | var btnAdd = document.getElementById("btnAdd"); 9 | 10 | btnAdd.onclick = function(e) { 11 | document.dispatchEvent(taskEvent); 12 | }; 13 | -------------------------------------------------------------------------------- /Events/customeventplugin.js: -------------------------------------------------------------------------------- 1 | function handleTaskAdded(e) { 2 | alert(e.detail.message); 3 | } 4 | 5 | document.addEventListener("TaskAdded", handleTaskAdded, false); 6 | -------------------------------------------------------------------------------- /Events/events-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Events 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /Events/events-1.js: -------------------------------------------------------------------------------- 1 | var myButton = document.getElementById("btnClickMe"); 2 | 3 | function handleClick() { 4 | alert("addEventListener clicked!"); 5 | } 6 | 7 | myButton.addEventListener("click", handleClick, false); 8 | -------------------------------------------------------------------------------- /Events/events-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Events 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /Events/events-2.js: -------------------------------------------------------------------------------- 1 | var myButton = document.getElementById("btnClickMe"); 2 | 3 | myButton.onclick = function(e) { 4 | alert("onclick click!"); 5 | }; 6 | -------------------------------------------------------------------------------- /Events/events-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Events 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Events/events-3.js: -------------------------------------------------------------------------------- 1 | var myButton = document.getElementById("btnClickMe"); 2 | 3 | function handleClick() { 4 | alert("addEventListener clicked!"); 5 | } 6 | 7 | function handleClick2() { 8 | alert("addEventListener2 clicked!"); 9 | } 10 | 11 | myButton.addEventListener("click", handleClick, false); 12 | myButton.addEventListener("click", handleClick2, false); 13 | -------------------------------------------------------------------------------- /Events/events-4.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Events 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Events/events-4.js: -------------------------------------------------------------------------------- 1 | var myButton = document.getElementById("btnClickMe"); 2 | 3 | function handleClick() { 4 | alert("addEventListener clicked!"); 5 | } 6 | 7 | function handleClick2() { 8 | alert("addEventListener2 clicked!"); 9 | } 10 | 11 | myButton.addEventListener("click", handleClick, false); 12 | myButton.addEventListener("click", handleClick2, false); 13 | 14 | window.onmousemove = function(e) { 15 | console.log(e.x + ", " + e.y); 16 | }; 17 | -------------------------------------------------------------------------------- /Events/events-5.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Events 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Events/events-5.js: -------------------------------------------------------------------------------- 1 | var myButton = document.getElementById("btnClickMe"); 2 | 3 | function handleClick() { 4 | alert("addEventListener clicked!"); 5 | } 6 | 7 | function handleClick2() { 8 | alert("addEventListener2 clicked!"); 9 | } 10 | 11 | myButton.addEventListener("click", handleClick, false); 12 | myButton.addEventListener("click", handleClick2, false); 13 | 14 | window.onmousemove = function(e) { 15 | console.log(e.x + ", " + e.y); 16 | }; 17 | 18 | var txtArea = document.getElementById("myTextArea"); 19 | 20 | txtArea.onkeypress = function(e) { 21 | console.log(String.fromCharCode(e.keyCode)); 22 | }; 23 | -------------------------------------------------------------------------------- /Events/events-6.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Events 5 | 6 | 7 | 8 | 9 | 10 | 11 | -------------------------------------------------------------------------------- /Events/events-7.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Events 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /Events/onload.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Events 5 | 6 | 7 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Events/onresize.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Events 5 | 6 | 7 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /Loops and Jumps/break.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 25 | 26 | -------------------------------------------------------------------------------- /Loops and Jumps/continue.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 23 | 24 | -------------------------------------------------------------------------------- /Loops and Jumps/do-while-loop.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 15 | 16 | -------------------------------------------------------------------------------- /Loops and Jumps/error-handling-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 25 | 26 | -------------------------------------------------------------------------------- /Loops and Jumps/error-handling-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 24 | 25 | -------------------------------------------------------------------------------- /Loops and Jumps/factorial-iterative.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 19 | 20 | -------------------------------------------------------------------------------- /Loops and Jumps/factorial-recursive.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /Loops and Jumps/for-in.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 21 | 22 | -------------------------------------------------------------------------------- /Loops and Jumps/for-loop-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 11 | 12 | -------------------------------------------------------------------------------- /Loops and Jumps/for-loop-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 11 | 12 | -------------------------------------------------------------------------------- /Loops and Jumps/for-loop-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 11 | 12 | -------------------------------------------------------------------------------- /Loops and Jumps/higher-order-functions-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 24 | 25 | -------------------------------------------------------------------------------- /Loops and Jumps/higher-order-functions-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 23 | 24 | -------------------------------------------------------------------------------- /Loops and Jumps/labeled-statements.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 21 | 22 | -------------------------------------------------------------------------------- /Loops and Jumps/while-loop.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 14 | 15 | -------------------------------------------------------------------------------- /Objects and Functions/arguments-variable.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 20 | 21 | -------------------------------------------------------------------------------- /Objects and Functions/bank-accounts.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 57 | 58 | -------------------------------------------------------------------------------- /Objects and Functions/function-arguments.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 15 | 16 | -------------------------------------------------------------------------------- /Objects and Functions/hoisting-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 18 | 19 | -------------------------------------------------------------------------------- /Objects and Functions/hoisting-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 17 | 18 | -------------------------------------------------------------------------------- /Objects and Functions/hoisting-3.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 16 | 17 | -------------------------------------------------------------------------------- /Objects and Functions/looping-over-an-object-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 19 | 20 | -------------------------------------------------------------------------------- /Objects and Functions/looping-over-an-object-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 21 | 22 | -------------------------------------------------------------------------------- /Objects and Functions/pig-latin.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 48 | 49 | -------------------------------------------------------------------------------- /Objects and Functions/project-1.js: -------------------------------------------------------------------------------- 1 | var tasks; 2 | 3 | tasks = [ 4 | { 5 | text: "Pay phone bill", 6 | complete: false, 7 | priority: 1 8 | }, 9 | { 10 | text: "Write best-selling novel", 11 | complete: false, 12 | priority: 3 13 | }, 14 | { 15 | text: "Walk the dog", 16 | complete: false, 17 | priority: 2 18 | } 19 | ]; 20 | -------------------------------------------------------------------------------- /Objects and Functions/reading-from-objects.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | 14 | -------------------------------------------------------------------------------- /Objects and Functions/scope-1.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 22 | 23 | -------------------------------------------------------------------------------- /Objects and Functions/scope-2.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 43 | 44 | -------------------------------------------------------------------------------- /Project/css/todo.css: -------------------------------------------------------------------------------- 1 | #todo{ 2 | width: 320px; 3 | padding: 10px; 4 | background: #FFFFFA; 5 | -moz-box-shadow: 10px 10px 5px #888; 6 | -webkit-box-shadow: 10px 10px 5px #888; 7 | -moz-border-radius: 15px; 8 | border-radius: 15px; 9 | box-shadow: 10px 10px 5px #888; 10 | } 11 | 12 | .todo-right { 13 | display: block; 14 | float: right; 15 | } 16 | 17 | .task-text { 18 | width: 182px; 19 | } 20 | -------------------------------------------------------------------------------- /Project/index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Todo 5 | 6 | 20 | 21 | 22 | 23 | 24 |
25 |
26 |

Your To Do List

27 |
28 | 31 | 36 |
37 |
38 |
39 | 40 | 41 |

42 |
43 |
44 | 46 |
47 |
48 |
49 |

50 |

Productivity Chart

51 | 52 | To Do:
53 | Done:
54 | 55 |
56 | Print Chart 57 |
58 |
59 | 83 | 84 | 85 | 86 | 87 | 88 | -------------------------------------------------------------------------------- /Project/todo.js: -------------------------------------------------------------------------------- 1 | (function () { 2 | var tasks, newTaskField, taskListForm, taskListEl, warningEl, warn, clearWarning, addForm, removeTask, setPriority, 3 | toggleComplete, addTask, renderTaskList, sortByNameAnchor, sortByLowHighAnchor, sortByHighLowAnchor, columnNames, 4 | HIGHPRIORITY, NORMALPRIORITY, LOWPRIORITY; 5 | 6 | // DOM elements 7 | sortByLowHighAnchor = document.getElementById("sortByLowHigh"); 8 | sortByHighLowAnchor = document.getElementById("sortByHighLow"); 9 | sortByNameAnchor = document.getElementById("sortByName"); 10 | taskListForm = document.getElementById("tasks"); 11 | taskListEl = taskListForm.getElementsByTagName("ul")[0]; 12 | warningEl = document.getElementById("warning"); 13 | newTaskField = document.getElementById("newTask"); 14 | addForm = document.getElementById("add"); 15 | columnNames = [ "To Do", "Done" ]; 16 | HIGHPRIORITY = '1'; 17 | NORMALPRIORITY = '2'; 18 | LOWPRIORITY = '3'; 19 | tasks = []; 20 | 21 | renderTaskList = function () { 22 | var i, task, taskEl; 23 | 24 | clearList(); 25 | for (i = 0; i < tasks.length; i += 1) { 26 | task = tasks[i]; 27 | taskEl = newRow(i, task); 28 | taskListEl.appendChild(taskEl); 29 | } 30 | 31 | saveTasks(tasks); 32 | renderChart(tasks); 33 | }; 34 | 35 | // Load tasks from local storage and render initial list 36 | if(hasLocalStorage() && localStorage.tasks) { 37 | tasks = JSON.parse(localStorage.tasks); 38 | renderTaskList(); 39 | } 40 | 41 | warn = function (msg) { 42 | warningEl.innerHTML = msg; 43 | }; 44 | 45 | clearWarning = function () { 46 | warningEl.innerHTML = ""; 47 | }; 48 | 49 | addTask = function (task) { 50 | tasks.push({ 51 | text: task, 52 | complete: false, 53 | priority: NORMALPRIORITY 54 | }); 55 | renderTaskList(); 56 | return task; 57 | }; 58 | 59 | removeTask = function (idx) { 60 | tasks.splice(idx, 1); 61 | renderTaskList(); 62 | }; 63 | 64 | setPriority = function(idx, value) { 65 | tasks[idx].priority = value; 66 | renderTaskList(); 67 | }; 68 | 69 | 70 | toggleComplete = function (idx) { 71 | var val = tasks[idx].complete; 72 | tasks[idx].complete = !val; 73 | renderTaskList(); 74 | }; 75 | 76 | // Event handlers 77 | addForm.onsubmit = function (e) { 78 | var val; 79 | 80 | preventDefault(e); 81 | 82 | val = newTaskField.value; 83 | 84 | if (val === "") { 85 | warn("Please enter a task"); 86 | } else { 87 | newTaskField.value = ""; 88 | clearWarning(); 89 | addTask(val); 90 | } 91 | }; 92 | 93 | var sortByLowHigh = function(tasks) { 94 | return tasks.sort(function(task1, task2) { return task2.priority - task1.priority; }); 95 | 96 | } 97 | 98 | var sortByHighLow = function(tasks) { 99 | return tasks.sort(function(task1, task2) { return task1.priority - task2.priority; }); 100 | 101 | } 102 | 103 | var sortByName = function(tasks) { 104 | return tasks.sort(function(task1, task2) { return task1.text > task2.text;f }); 105 | 106 | } 107 | sortByLowHighAnchor.onclick = function(e) { 108 | preventDefault(e); 109 | tasks = sortByLowHigh(tasks); 110 | renderTaskList(); 111 | }; 112 | 113 | sortByHighLowAnchor.onclick = function(e) { 114 | preventDefault(e); 115 | tasks = sortByHighLow(tasks); 116 | renderTaskList(); 117 | }; 118 | 119 | // Sort tasks by name 120 | sortByNameAnchor.onclick = function(e) { 121 | preventDefault(e); 122 | tasks = sortByName(tasks); 123 | renderTaskList(); 124 | }; 125 | 126 | 127 | taskListForm.onclick = function (e) { 128 | var target, idx, targetClass; 129 | preventDefault(e); 130 | target = getTarget(e); 131 | idx = getIndex(target); 132 | 133 | if (idx) { 134 | idx = Number(idx); 135 | targetClass = target.getAttribute('class'); 136 | if (targetClass === 'highpriority' || targetClass === 'lowpriority' || targetClass === 'normalpriority') { 137 | setPriority(idx, target.getAttribute("value")); 138 | } else if (target.className.match("delete-task")) { 139 | removeTask(idx); 140 | } else if (target.type === "checkbox") { 141 | toggleComplete(idx); 142 | } 143 | } 144 | }; 145 | 146 | // Utility functions 147 | /** 148 | * Clones the template row from the HTML 149 | * @return {Node} 150 | */ 151 | function newRow(index, task) { 152 | var template, newRow, textEl; 153 | template = document.getElementsByClassName("template-item")[0]; 154 | newRow = template.cloneNode(true); 155 | newRow.setAttribute("data-idx", index.toString()); 156 | 157 | // get task text el 158 | textEl = newRow.getElementsByClassName("task-text")[0]; 159 | 160 | // set task priority 161 | if (task.priority == HIGHPRIORITY) { 162 | textEl.className += " label-important"; 163 | } else if (task.priority == LOWPRIORITY) { 164 | textEl.className += " label-success"; 165 | } 166 | 167 | // set task text 168 | textEl.appendChild(document.createTextNode(task.text)); 169 | 170 | // mark complete 171 | if (task.complete) { 172 | newRow.getElementsByTagName("input")[0].setAttribute("checked", "checked"); 173 | newRow.getElementsByTagName("span")[0].className += " complete"; 174 | } 175 | newRow.className = "task"; 176 | 177 | return newRow; 178 | } 179 | 180 | /** 181 | * Gets the task's index regardless of where inside the
  • the user clicked 182 | * @param el 183 | * @return {String} 184 | */ 185 | function getIndex(el) { 186 | while (!el.getAttribute("data-idx")) { 187 | el = el.parentNode; 188 | } 189 | return el.getAttribute("data-idx"); 190 | } 191 | 192 | function clearList() { 193 | while (taskListEl.hasChildNodes()) { 194 | taskListEl.removeChild(taskListEl.lastChild); 195 | } 196 | } 197 | 198 | // Local storage browser support 199 | function hasLocalStorage() { 200 | return typeof(Storage) !== "undefined"; 201 | } 202 | 203 | 204 | 205 | function preventDefault(e) { 206 | e = e || window.event; 207 | if (e.preventDefault) { 208 | e.preventDefault(); 209 | } else { 210 | e.returnValue = false; 211 | } 212 | } 213 | 214 | function getTarget(e) { 215 | return e.srcElement || e.target; 216 | } 217 | 218 | function saveTasks(tasks) { 219 | if (hasLocalStorage()) { 220 | localStorage.tasks = JSON.stringify(tasks); 221 | } 222 | } 223 | 224 | function countComplete(tasks) { 225 | return tasks.filter(function(task) {return task.complete}).length; 226 | } 227 | 228 | function renderChart(tasks) { 229 | 230 | var done = countComplete(tasks); 231 | var todo = tasks.length - done; 232 | 233 | document.getElementById("numToDo").innerHTML = todo; 234 | document.getElementById("numDone").innerHTML = done; 235 | 236 | var dataValue = [todo, done]; 237 | var maxVal = todo > done ? todo : done; 238 | 239 | var topMargin = 25; 240 | var bottomMargin = 1; 241 | var canvas = document.getElementById("canvas"); 242 | canvas.width = canvas.width; 243 | 244 | if (canvas && canvas.getContext) { 245 | 246 | var context = canvas.getContext("2d"); 247 | context.fillStyle = '#FFFFFF'; 248 | context.fillRect(0, 0, canvas.width, canvas.height); 249 | context.strokeStyle = '#000000'; 250 | context.strokeRect (0, 0, canvas.width, canvas.height); 251 | 252 | context.fillStyle = '#000000'; 253 | context.save(); 254 | var textX = 10; 255 | var textY = 190; 256 | context.translate(textX, textY); 257 | context.rotate(Math.PI * -90 / 180); 258 | context.fillText('Tasks Complete', 0, 0); 259 | context.restore(); 260 | 261 | var yScaleFactor = (canvas.height - topMargin) / (maxVal); 262 | var count = 0; 263 | for (var yAxisValue = maxVal; yAxisValue >= 0; yAxisValue -= 1) { 264 | var yCoord = topMargin - bottomMargin + (yScaleFactor * count); 265 | context.fillText(yAxisValue, 40, yCoord); 266 | count++; 267 | context.moveTo(0, yCoord); 268 | context.lineTo(canvas.width, yCoord); 269 | } 270 | 271 | function drawRect(context) { 272 | for (i = 0; i < dataValue.length; i++) { 273 | var startX = i+1, startY = bottomMargin/xScaleFactor, endX = 1, endY = dataValue[i], width = 0.5; 274 | var gradient = context.createLinearGradient(startX, startY, endX, endY); 275 | gradient.addColorStop(0.0,"#8ED6FF"); 276 | gradient.addColorStop(1.0,"#004CB3"); 277 | 278 | context.fillStyle = gradient; 279 | context.fillRect(startX, startY, width, endY); 280 | } 281 | } 282 | 283 | context.lineWidth = 0.1; 284 | context.stroke(); 285 | 286 | var xScaleFactor = canvas.width / (dataValue.length + 1); 287 | var dataName = [ "To Do", "Done" ]; 288 | context.textBaseline = "bottom"; 289 | for (i = 0; i < dataValue.length; i++) { 290 | var yCoord = canvas.height - dataValue[i] * yScaleFactor; 291 | context.fillText(dataName[i], xScaleFactor * (i + 1), yCoord); 292 | } 293 | context.translate(0, canvas.height); 294 | context.scale(xScaleFactor, -1 * yScaleFactor); 295 | context.shadowOffsetX = 2; 296 | context.shadowOffsetY = 2; 297 | context.shadowBlur = 2; 298 | context.shadowColor = "rgba(0, 0, 0, 0.5)"; 299 | drawRect(context); 300 | document.getElementById('printChart').href = canvas.toDataURL(); 301 | 302 | } 303 | 304 | } 305 | 306 | }()); 307 | -------------------------------------------------------------------------------- /Setting Up/external-js.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Code in a separate file 5 | 6 | 7 | 8 | 9 | 10 | -------------------------------------------------------------------------------- /Setting Up/hello.js: -------------------------------------------------------------------------------- 1 | alert("Hello, world!"); -------------------------------------------------------------------------------- /Setting Up/js-in-html.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | Code inside an HTML document 5 | 8 | 9 | 10 | 11 | 12 | -------------------------------------------------------------------------------- /The Document Object Model and CSS/getElementById.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
    Foo, baby. Foo!
    7 |
    Meh.
    8 | 12 | 13 | 14 | -------------------------------------------------------------------------------- /The Document Object Model and CSS/insertBefore.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 22 | 23 | 24 | -------------------------------------------------------------------------------- /The Document Object Model and CSS/isEqualNode.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /The Document Object Model and CSS/style.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 |
    Hello, world!
    7 | 17 | 18 | 19 | -------------------------------------------------------------------------------- /Variables/project.js: -------------------------------------------------------------------------------- 1 | var task1, task2, task3; 2 | 3 | task1 = "Pay phone bill"; 4 | task2 = "Write best-selling novel"; 5 | task3 = "Walk the dog"; 6 | -------------------------------------------------------------------------------- /Variables/time-of-day.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 44 | 45 | -------------------------------------------------------------------------------- /readme.txt: -------------------------------------------------------------------------------- 1 | This is the code archive for the SitePoint book Jump Start JavaScript. --------------------------------------------------------------------------------