diff --git a/week-1/Homework/mandatory/1-debugging-practice/script.js b/week-1/Homework/mandatory/1-debugging-practice/script.js index dc14a77..ee59e50 100644 --- a/week-1/Homework/mandatory/1-debugging-practice/script.js +++ b/week-1/Homework/mandatory/1-debugging-practice/script.js @@ -37,8 +37,8 @@ function submit() { alert("Please fill all fields!"); return false; } else { - let book = new Book(title.value, title.value, pages.value, check.checked); - library.push(book); + let book = new Book(title.value, author.value, pages.value, check.checked); + myLibrary.push(book); render(); } } @@ -54,7 +54,7 @@ function render() { let table = document.getElementById("display"); let rowsNumber = table.rows.length; //delete old table - for (let n = rowsNumber - 1; n > 0; n-- { + for (let n = rowsNumber - 1; n > 0; n--) { table.deleteRow(n); } //insert updated row and cells @@ -76,7 +76,7 @@ function render() { changeBut.className = "btn btn-success"; cell4.appendChild(changeBut); let readStatus = ""; - if (myLibrary[i].check == false) { + if (myLibrary[i].check == true) { readStatus = "Yes"; } else { readStatus = "No"; @@ -90,11 +90,11 @@ function render() { //add delete button to every row and render again let delButton = document.createElement("button"); - delBut.id = i + 5; - cell5.appendChild(delBut); - delBut.className = "btn btn-warning"; - delBut.innerHTML = "Delete"; - delBut.addEventListener("clicks", function () { + delButton.id = i + 5; + cell5.appendChild(delButton); + delButton.className = "btn btn-warning"; + delButton.innerHTML = "Delete"; + delButton.addEventListener("click", function () { alert(`You've deleted title: ${myLibrary[i].title}`); myLibrary.splice(i, 1); render(); diff --git a/week-2/Homework/mandatory/2-fetch-exercise/exercise.js b/week-2/Homework/mandatory/2-fetch-exercise/exercise.js index fb3a39c..5c64b14 100644 --- a/week-2/Homework/mandatory/2-fetch-exercise/exercise.js +++ b/week-2/Homework/mandatory/2-fetch-exercise/exercise.js @@ -17,10 +17,12 @@ Open index.html in your browser. Every time you refresh the page, a different greeting should be displayed in the box. */ -fetch('*** Write the API address here ***') +fetch('https://codeyourfuture.herokuapp.com/api/greetings') .then(function(response) { return response.text(); }) .then(function(greeting) { // Write the code to display the greeting text here - }); \ No newline at end of file + let pEl = document.getElementById("greeting-text"); + pEl.innerHTML = greeting; + }).catch(error => console.log(error)); \ No newline at end of file diff --git a/week-2/Homework/mandatory/3-dog-photo-gallery/exercise.js b/week-2/Homework/mandatory/3-dog-photo-gallery/exercise.js new file mode 100644 index 0000000..9eb12ce --- /dev/null +++ b/week-2/Homework/mandatory/3-dog-photo-gallery/exercise.js @@ -0,0 +1,50 @@ +let submit = document.getElementById("my-button"); +submit.addEventListener("click", function(){ + fetch("https://dog.ceo/api/breeds/image/random") + + .then(function(response){ + return response.json(); + }) + .then(function(data){ + let ul = document.createElement("ul"); + + let list = document.createElement("li"); + + let image = document.createElement("img"); + + image.src = data.message; + + list.appendChild(image); + + document.body.appendChild(list); + image.style.width = "100%" + list.style.listStyle = "none"; + list.style.display = "flex"; + list.style.justifyContent = "center"; + list.style.margin ="10px"; + list.style.width = "40%"; + + var del = document.createElement('button'); + del.style.textDecoration = 'none'; + del.innerHTML = 'Remove this?'; + del.style.color = 'white'; + del.style.backgroundColor = '#3CAEA3'; + //assign a function for it when clicked + del.onclick = function() { deleteButton(list,this)}; + document.body.appendChild(del) + + }) +}) + +.catch(function (error){ + console.log(error); +}); +function deleteButton(x,y) { + + var parent = document.getElementsByTagName("BODY")[0]; + //remove the list + parent.removeChild(x); + //remove the button + parent.removeChild(y); + +} \ No newline at end of file diff --git a/week-2/Homework/mandatory/3-dog-photo-gallery/index.html b/week-2/Homework/mandatory/3-dog-photo-gallery/index.html new file mode 100644 index 0000000..166ad66 --- /dev/null +++ b/week-2/Homework/mandatory/3-dog-photo-gallery/index.html @@ -0,0 +1,13 @@ + + + + + + + Dog Photo Gallery + + + + + + \ No newline at end of file diff --git a/week-2/Homework/mandatory/4-programmer-humour/index.html b/week-2/Homework/mandatory/4-programmer-humour/index.html new file mode 100644 index 0000000..49056fe --- /dev/null +++ b/week-2/Homework/mandatory/4-programmer-humour/index.html @@ -0,0 +1,12 @@ + + + + + + + Document + + + + + \ No newline at end of file diff --git a/week-2/Homework/mandatory/4-programmer-humour/main.css b/week-2/Homework/mandatory/4-programmer-humour/main.css new file mode 100644 index 0000000..0c84cda --- /dev/null +++ b/week-2/Homework/mandatory/4-programmer-humour/main.css @@ -0,0 +1,5 @@ +.container{ + display: flex; + justify-content: center; + padding-top: 150px; +} \ No newline at end of file diff --git a/week-2/Homework/mandatory/4-programmer-humour/script.js b/week-2/Homework/mandatory/4-programmer-humour/script.js new file mode 100644 index 0000000..dd2b2b2 --- /dev/null +++ b/week-2/Homework/mandatory/4-programmer-humour/script.js @@ -0,0 +1,26 @@ +fetch("https://xkcd.now.sh/?comic=latest") +.then(function(response){ + return response.json(); +}) +.then(function(data){ + console.log(data.img); + let ul = document.createElement("ul"); + let li = document.createElement("li"); + let img = document.createElement("img"); + li.appendChild(img); + ul.className = "container" + ul.style.display = "flex" + ul.style.margin = "0 auto" + ul.style.width ="150px" + li.style.listStyleType = "none"; + document.body.style.backgroundColor = "silver" + img.className = "image" + img.src = data.img; + ul.appendChild(li) + console.log(ul) + document.body.appendChild(ul) +}) +.catch(function (error){ + + console.log(error); +}); \ No newline at end of file diff --git a/week-3/Homework/mandatory/1-practice/index.html b/week-3/Homework/mandatory/1-practice/index.html new file mode 100644 index 0000000..955551d --- /dev/null +++ b/week-3/Homework/mandatory/1-practice/index.html @@ -0,0 +1,27 @@ + + + + + + + + + Weather + + +
+

Timezone

+ +
+
+
+

34

+ F +
+ +
Its cold
+
+ + + + \ No newline at end of file diff --git a/week-3/Homework/mandatory/1-practice/skycons.js b/week-3/Homework/mandatory/1-practice/skycons.js new file mode 100644 index 0000000..a869a20 --- /dev/null +++ b/week-3/Homework/mandatory/1-practice/skycons.js @@ -0,0 +1,726 @@ +(function(global) { + "use strict"; + + /* Set up a RequestAnimationFrame shim so we can animate efficiently FOR + * GREAT JUSTICE. */ + var requestInterval, cancelInterval; + + (function() { + var raf = global.requestAnimationFrame || + global.webkitRequestAnimationFrame || + global.mozRequestAnimationFrame || + global.oRequestAnimationFrame || + global.msRequestAnimationFrame , + caf = global.cancelAnimationFrame || + global.webkitCancelAnimationFrame || + global.mozCancelAnimationFrame || + global.oCancelAnimationFrame || + global.msCancelAnimationFrame ; + + if(raf && caf) { + requestInterval = function(fn) { + var handle = {value: null}; + + function loop() { + handle.value = raf(loop); + fn(); + } + + loop(); + return handle; + }; + + cancelInterval = function(handle) { + caf(handle.value); + }; + } + + else { + requestInterval = setInterval; + cancelInterval = clearInterval; + } + }()); + + /* Catmull-rom spline stuffs. */ + /* + function upsample(n, spline) { + var polyline = [], + len = spline.length, + bx = spline[0], + by = spline[1], + cx = spline[2], + cy = spline[3], + dx = spline[4], + dy = spline[5], + i, j, ax, ay, px, qx, rx, sx, py, qy, ry, sy, t; + + for(i = 6; i !== spline.length; i += 2) { + ax = bx; + bx = cx; + cx = dx; + dx = spline[i ]; + px = -0.5 * ax + 1.5 * bx - 1.5 * cx + 0.5 * dx; + qx = ax - 2.5 * bx + 2.0 * cx - 0.5 * dx; + rx = -0.5 * ax + 0.5 * cx ; + sx = bx ; + + ay = by; + by = cy; + cy = dy; + dy = spline[i + 1]; + py = -0.5 * ay + 1.5 * by - 1.5 * cy + 0.5 * dy; + qy = ay - 2.5 * by + 2.0 * cy - 0.5 * dy; + ry = -0.5 * ay + 0.5 * cy ; + sy = by ; + + for(j = 0; j !== n; ++j) { + t = j / n; + + polyline.push( + ((px * t + qx) * t + rx) * t + sx, + ((py * t + qy) * t + ry) * t + sy + ); + } + } + + polyline.push( + px + qx + rx + sx, + py + qy + ry + sy + ); + + return polyline; + } + + function downsample(n, polyline) { + var len = 0, + i, dx, dy; + + for(i = 2; i !== polyline.length; i += 2) { + dx = polyline[i ] - polyline[i - 2]; + dy = polyline[i + 1] - polyline[i - 1]; + len += Math.sqrt(dx * dx + dy * dy); + } + + len /= n; + + var small = [], + target = len, + min = 0, + max, t; + + small.push(polyline[0], polyline[1]); + + for(i = 2; i !== polyline.length; i += 2) { + dx = polyline[i ] - polyline[i - 2]; + dy = polyline[i + 1] - polyline[i - 1]; + max = min + Math.sqrt(dx * dx + dy * dy); + + if(max > target) { + t = (target - min) / (max - min); + + small.push( + polyline[i - 2] + dx * t, + polyline[i - 1] + dy * t + ); + + target += len; + } + + min = max; + } + + small.push(polyline[polyline.length - 2], polyline[polyline.length - 1]); + + return small; + } + */ + + /* Define skycon things. */ + /* FIXME: I'm *really really* sorry that this code is so gross. Really, I am. + * I'll try to clean it up eventually! Promise! */ + var KEYFRAME = 500, + STROKE = 0.08, + TAU = 2.0 * Math.PI, + TWO_OVER_SQRT_2 = 2.0 / Math.sqrt(2); + + function circle(ctx, x, y, r) { + ctx.beginPath(); + ctx.arc(x, y, r, 0, TAU, false); + ctx.fill(); + } + + function line(ctx, ax, ay, bx, by) { + ctx.beginPath(); + ctx.moveTo(ax, ay); + ctx.lineTo(bx, by); + ctx.stroke(); + } + + function puff(ctx, t, cx, cy, rx, ry, rmin, rmax) { + var c = Math.cos(t * TAU), + s = Math.sin(t * TAU); + + rmax -= rmin; + + circle( + ctx, + cx - s * rx, + cy + c * ry + rmax * 0.5, + rmin + (1 - c * 0.5) * rmax + ); + } + + function puffs(ctx, t, cx, cy, rx, ry, rmin, rmax) { + var i; + + for(i = 5; i--; ) + puff(ctx, t + i / 5, cx, cy, rx, ry, rmin, rmax); + } + + function cloud(ctx, t, cx, cy, cw, s, color) { + t /= 30000; + + var a = cw * 0.21, + b = cw * 0.12, + c = cw * 0.24, + d = cw * 0.28; + + ctx.fillStyle = color; + puffs(ctx, t, cx, cy, a, b, c, d); + + ctx.globalCompositeOperation = 'destination-out'; + puffs(ctx, t, cx, cy, a, b, c - s, d - s); + ctx.globalCompositeOperation = 'source-over'; + } + + function sun(ctx, t, cx, cy, cw, s, color) { + t /= 120000; + + var a = cw * 0.25 - s * 0.5, + b = cw * 0.32 + s * 0.5, + c = cw * 0.50 - s * 0.5, + i, p, cos, sin; + + ctx.strokeStyle = color; + ctx.lineWidth = s; + ctx.lineCap = "round"; + ctx.lineJoin = "round"; + + ctx.beginPath(); + ctx.arc(cx, cy, a, 0, TAU, false); + ctx.stroke(); + + for(i = 8; i--; ) { + p = (t + i / 8) * TAU; + cos = Math.cos(p); + sin = Math.sin(p); + line(ctx, cx + cos * b, cy + sin * b, cx + cos * c, cy + sin * c); + } + } + + function moon(ctx, t, cx, cy, cw, s, color) { + t /= 15000; + + var a = cw * 0.29 - s * 0.5, + b = cw * 0.05, + c = Math.cos(t * TAU), + p = c * TAU / -16; + + ctx.strokeStyle = color; + ctx.lineWidth = s; + ctx.lineCap = "round"; + ctx.lineJoin = "round"; + + cx += c * b; + + ctx.beginPath(); + ctx.arc(cx, cy, a, p + TAU / 8, p + TAU * 7 / 8, false); + ctx.arc(cx + Math.cos(p) * a * TWO_OVER_SQRT_2, cy + Math.sin(p) * a * TWO_OVER_SQRT_2, a, p + TAU * 5 / 8, p + TAU * 3 / 8, true); + ctx.closePath(); + ctx.stroke(); + } + + function rain(ctx, t, cx, cy, cw, s, color) { + t /= 1350; + + var a = cw * 0.16, + b = TAU * 11 / 12, + c = TAU * 7 / 12, + i, p, x, y; + + ctx.fillStyle = color; + + for(i = 4; i--; ) { + p = (t + i / 4) % 1; + x = cx + ((i - 1.5) / 1.5) * (i === 1 || i === 2 ? -1 : 1) * a; + y = cy + p * p * cw; + ctx.beginPath(); + ctx.moveTo(x, y - s * 1.5); + ctx.arc(x, y, s * 0.75, b, c, false); + ctx.fill(); + } + } + + function sleet(ctx, t, cx, cy, cw, s, color) { + t /= 750; + + var a = cw * 0.1875, + i, p, x, y; + + ctx.strokeStyle = color; + ctx.lineWidth = s * 0.5; + ctx.lineCap = "round"; + ctx.lineJoin = "round"; + + for(i = 4; i--; ) { + p = (t + i / 4) % 1; + x = Math.floor(cx + ((i - 1.5) / 1.5) * (i === 1 || i === 2 ? -1 : 1) * a) + 0.5; + y = cy + p * cw; + line(ctx, x, y - s * 1.5, x, y + s * 1.5); + } + } + + function snow(ctx, t, cx, cy, cw, s, color) { + t /= 3000; + + var a = cw * 0.16, + b = s * 0.75, + u = t * TAU * 0.7, + ux = Math.cos(u) * b, + uy = Math.sin(u) * b, + v = u + TAU / 3, + vx = Math.cos(v) * b, + vy = Math.sin(v) * b, + w = u + TAU * 2 / 3, + wx = Math.cos(w) * b, + wy = Math.sin(w) * b, + i, p, x, y; + + ctx.strokeStyle = color; + ctx.lineWidth = s * 0.5; + ctx.lineCap = "round"; + ctx.lineJoin = "round"; + + for(i = 4; i--; ) { + p = (t + i / 4) % 1; + x = cx + Math.sin((p + i / 4) * TAU) * a; + y = cy + p * cw; + + line(ctx, x - ux, y - uy, x + ux, y + uy); + line(ctx, x - vx, y - vy, x + vx, y + vy); + line(ctx, x - wx, y - wy, x + wx, y + wy); + } + } + + function fogbank(ctx, t, cx, cy, cw, s, color) { + t /= 30000; + + var a = cw * 0.21, + b = cw * 0.06, + c = cw * 0.21, + d = cw * 0.28; + + ctx.fillStyle = color; + puffs(ctx, t, cx, cy, a, b, c, d); + + ctx.globalCompositeOperation = 'destination-out'; + puffs(ctx, t, cx, cy, a, b, c - s, d - s); + ctx.globalCompositeOperation = 'source-over'; + } + + /* + var WIND_PATHS = [ + downsample(63, upsample(8, [ + -1.00, -0.28, + -0.75, -0.18, + -0.50, 0.12, + -0.20, 0.12, + -0.04, -0.04, + -0.07, -0.18, + -0.19, -0.18, + -0.23, -0.05, + -0.12, 0.11, + 0.02, 0.16, + 0.20, 0.15, + 0.50, 0.07, + 0.75, 0.18, + 1.00, 0.28 + ])), + downsample(31, upsample(16, [ + -1.00, -0.10, + -0.75, 0.00, + -0.50, 0.10, + -0.25, 0.14, + 0.00, 0.10, + 0.25, 0.00, + 0.50, -0.10, + 0.75, -0.14, + 1.00, -0.10 + ])) + ]; + */ + + var WIND_PATHS = [ + [ + -0.7500, -0.1800, -0.7219, -0.1527, -0.6971, -0.1225, + -0.6739, -0.0910, -0.6516, -0.0588, -0.6298, -0.0262, + -0.6083, 0.0065, -0.5868, 0.0396, -0.5643, 0.0731, + -0.5372, 0.1041, -0.5033, 0.1259, -0.4662, 0.1406, + -0.4275, 0.1493, -0.3881, 0.1530, -0.3487, 0.1526, + -0.3095, 0.1488, -0.2708, 0.1421, -0.2319, 0.1342, + -0.1943, 0.1217, -0.1600, 0.1025, -0.1290, 0.0785, + -0.1012, 0.0509, -0.0764, 0.0206, -0.0547, -0.0120, + -0.0378, -0.0472, -0.0324, -0.0857, -0.0389, -0.1241, + -0.0546, -0.1599, -0.0814, -0.1876, -0.1193, -0.1964, + -0.1582, -0.1935, -0.1931, -0.1769, -0.2157, -0.1453, + -0.2290, -0.1085, -0.2327, -0.0697, -0.2240, -0.0317, + -0.2064, 0.0033, -0.1853, 0.0362, -0.1613, 0.0672, + -0.1350, 0.0961, -0.1051, 0.1213, -0.0706, 0.1397, + -0.0332, 0.1512, 0.0053, 0.1580, 0.0442, 0.1624, + 0.0833, 0.1636, 0.1224, 0.1615, 0.1613, 0.1565, + 0.1999, 0.1500, 0.2378, 0.1402, 0.2749, 0.1279, + 0.3118, 0.1147, 0.3487, 0.1015, 0.3858, 0.0892, + 0.4236, 0.0787, 0.4621, 0.0715, 0.5012, 0.0702, + 0.5398, 0.0766, 0.5768, 0.0890, 0.6123, 0.1055, + 0.6466, 0.1244, 0.6805, 0.1440, 0.7147, 0.1630, + 0.7500, 0.1800 + ], + [ + -0.7500, 0.0000, -0.7033, 0.0195, -0.6569, 0.0399, + -0.6104, 0.0600, -0.5634, 0.0789, -0.5155, 0.0954, + -0.4667, 0.1089, -0.4174, 0.1206, -0.3676, 0.1299, + -0.3174, 0.1365, -0.2669, 0.1398, -0.2162, 0.1391, + -0.1658, 0.1347, -0.1157, 0.1271, -0.0661, 0.1169, + -0.0170, 0.1046, 0.0316, 0.0903, 0.0791, 0.0728, + 0.1259, 0.0534, 0.1723, 0.0331, 0.2188, 0.0129, + 0.2656, -0.0064, 0.3122, -0.0263, 0.3586, -0.0466, + 0.4052, -0.0665, 0.4525, -0.0847, 0.5007, -0.1002, + 0.5497, -0.1130, 0.5991, -0.1240, 0.6491, -0.1325, + 0.6994, -0.1380, 0.7500, -0.1400 + ] + ], + WIND_OFFSETS = [ + {start: 0.36, end: 0.11}, + {start: 0.56, end: 0.16} + ]; + + function leaf(ctx, t, x, y, cw, s, color) { + var a = cw / 8, + b = a / 3, + c = 2 * b, + d = (t % 1) * TAU, + e = Math.cos(d), + f = Math.sin(d); + + ctx.fillStyle = color; + ctx.strokeStyle = color; + ctx.lineWidth = s; + ctx.lineCap = "round"; + ctx.lineJoin = "round"; + + ctx.beginPath(); + ctx.arc(x , y , a, d , d + Math.PI, false); + ctx.arc(x - b * e, y - b * f, c, d + Math.PI, d , false); + ctx.arc(x + c * e, y + c * f, b, d + Math.PI, d , true ); + ctx.globalCompositeOperation = 'destination-out'; + ctx.fill(); + ctx.globalCompositeOperation = 'source-over'; + ctx.stroke(); + } + + function swoosh(ctx, t, cx, cy, cw, s, index, total, color) { + t /= 2500; + + var path = WIND_PATHS[index], + a = (t + index - WIND_OFFSETS[index].start) % total, + c = (t + index - WIND_OFFSETS[index].end ) % total, + e = (t + index ) % total, + b, d, f, i; + + ctx.strokeStyle = color; + ctx.lineWidth = s; + ctx.lineCap = "round"; + ctx.lineJoin = "round"; + + if(a < 1) { + ctx.beginPath(); + + a *= path.length / 2 - 1; + b = Math.floor(a); + a -= b; + b *= 2; + b += 2; + + ctx.moveTo( + cx + (path[b - 2] * (1 - a) + path[b ] * a) * cw, + cy + (path[b - 1] * (1 - a) + path[b + 1] * a) * cw + ); + + if(c < 1) { + c *= path.length / 2 - 1; + d = Math.floor(c); + c -= d; + d *= 2; + d += 2; + + for(i = b; i !== d; i += 2) + ctx.lineTo(cx + path[i] * cw, cy + path[i + 1] * cw); + + ctx.lineTo( + cx + (path[d - 2] * (1 - c) + path[d ] * c) * cw, + cy + (path[d - 1] * (1 - c) + path[d + 1] * c) * cw + ); + } + + else + for(i = b; i !== path.length; i += 2) + ctx.lineTo(cx + path[i] * cw, cy + path[i + 1] * cw); + + ctx.stroke(); + } + + else if(c < 1) { + ctx.beginPath(); + + c *= path.length / 2 - 1; + d = Math.floor(c); + c -= d; + d *= 2; + d += 2; + + ctx.moveTo(cx + path[0] * cw, cy + path[1] * cw); + + for(i = 2; i !== d; i += 2) + ctx.lineTo(cx + path[i] * cw, cy + path[i + 1] * cw); + + ctx.lineTo( + cx + (path[d - 2] * (1 - c) + path[d ] * c) * cw, + cy + (path[d - 1] * (1 - c) + path[d + 1] * c) * cw + ); + + ctx.stroke(); + } + + if(e < 1) { + e *= path.length / 2 - 1; + f = Math.floor(e); + e -= f; + f *= 2; + f += 2; + + leaf( + ctx, + t, + cx + (path[f - 2] * (1 - e) + path[f ] * e) * cw, + cy + (path[f - 1] * (1 - e) + path[f + 1] * e) * cw, + cw, + s, + color + ); + } + } + + var Skycons = function(opts) { + this.list = []; + this.interval = null; + this.color = opts && opts.color ? opts.color : "black"; + this.resizeClear = !!(opts && opts.resizeClear); + }; + + Skycons.CLEAR_DAY = function(ctx, t, color) { + var w = ctx.canvas.width, + h = ctx.canvas.height, + s = Math.min(w, h); + + sun(ctx, t, w * 0.5, h * 0.5, s, s * STROKE, color); + }; + + Skycons.CLEAR_NIGHT = function(ctx, t, color) { + var w = ctx.canvas.width, + h = ctx.canvas.height, + s = Math.min(w, h); + + moon(ctx, t, w * 0.5, h * 0.5, s, s * STROKE, color); + }; + + Skycons.PARTLY_CLOUDY_DAY = function(ctx, t, color) { + var w = ctx.canvas.width, + h = ctx.canvas.height, + s = Math.min(w, h); + + sun(ctx, t, w * 0.625, h * 0.375, s * 0.75, s * STROKE, color); + cloud(ctx, t, w * 0.375, h * 0.625, s * 0.75, s * STROKE, color); + }; + + Skycons.PARTLY_CLOUDY_NIGHT = function(ctx, t, color) { + var w = ctx.canvas.width, + h = ctx.canvas.height, + s = Math.min(w, h); + + moon(ctx, t, w * 0.667, h * 0.375, s * 0.75, s * STROKE, color); + cloud(ctx, t, w * 0.375, h * 0.625, s * 0.75, s * STROKE, color); + }; + + Skycons.CLOUDY = function(ctx, t, color) { + var w = ctx.canvas.width, + h = ctx.canvas.height, + s = Math.min(w, h); + + cloud(ctx, t, w * 0.5, h * 0.5, s, s * STROKE, color); + }; + + Skycons.RAIN = function(ctx, t, color) { + var w = ctx.canvas.width, + h = ctx.canvas.height, + s = Math.min(w, h); + + rain(ctx, t, w * 0.5, h * 0.37, s * 0.9, s * STROKE, color); + cloud(ctx, t, w * 0.5, h * 0.37, s * 0.9, s * STROKE, color); + }; + + Skycons.SLEET = function(ctx, t, color) { + var w = ctx.canvas.width, + h = ctx.canvas.height, + s = Math.min(w, h); + + sleet(ctx, t, w * 0.5, h * 0.37, s * 0.9, s * STROKE, color); + cloud(ctx, t, w * 0.5, h * 0.37, s * 0.9, s * STROKE, color); + }; + + Skycons.SNOW = function(ctx, t, color) { + var w = ctx.canvas.width, + h = ctx.canvas.height, + s = Math.min(w, h); + + snow(ctx, t, w * 0.5, h * 0.37, s * 0.9, s * STROKE, color); + cloud(ctx, t, w * 0.5, h * 0.37, s * 0.9, s * STROKE, color); + }; + + Skycons.WIND = function(ctx, t, color) { + var w = ctx.canvas.width, + h = ctx.canvas.height, + s = Math.min(w, h); + + swoosh(ctx, t, w * 0.5, h * 0.5, s, s * STROKE, 0, 2, color); + swoosh(ctx, t, w * 0.5, h * 0.5, s, s * STROKE, 1, 2, color); + }; + + Skycons.FOG = function(ctx, t, color) { + var w = ctx.canvas.width, + h = ctx.canvas.height, + s = Math.min(w, h), + k = s * STROKE; + + fogbank(ctx, t, w * 0.5, h * 0.32, s * 0.75, k, color); + + t /= 5000; + + var a = Math.cos((t ) * TAU) * s * 0.02, + b = Math.cos((t + 0.25) * TAU) * s * 0.02, + c = Math.cos((t + 0.50) * TAU) * s * 0.02, + d = Math.cos((t + 0.75) * TAU) * s * 0.02, + n = h * 0.936, + e = Math.floor(n - k * 0.5) + 0.5, + f = Math.floor(n - k * 2.5) + 0.5; + + ctx.strokeStyle = color; + ctx.lineWidth = k; + ctx.lineCap = "round"; + ctx.lineJoin = "round"; + + line(ctx, a + w * 0.2 + k * 0.5, e, b + w * 0.8 - k * 0.5, e); + line(ctx, c + w * 0.2 + k * 0.5, f, d + w * 0.8 - k * 0.5, f); + }; + + Skycons.prototype = { + _determineDrawingFunction: function(draw) { + if(typeof draw === "string") + draw = Skycons[draw.toUpperCase().replace(/-/g, "_")] || null; + + return draw; + }, + add: function(el, draw) { + var obj; + + if(typeof el === "string") + el = document.getElementById(el); + + // Does nothing if canvas name doesn't exists + if(el === null || el === undefined) + return; + + draw = this._determineDrawingFunction(draw); + + // Does nothing if the draw function isn't actually a function + if(typeof draw !== "function") + return; + + obj = { + element: el, + context: el.getContext("2d"), + drawing: draw + }; + + this.list.push(obj); + this.draw(obj, KEYFRAME); + }, + set: function(el, draw) { + var i; + + if(typeof el === "string") + el = document.getElementById(el); + + for(i = this.list.length; i--; ) + if(this.list[i].element === el) { + this.list[i].drawing = this._determineDrawingFunction(draw); + this.draw(this.list[i], KEYFRAME); + return; + } + + this.add(el, draw); + }, + remove: function(el) { + var i; + + if(typeof el === "string") + el = document.getElementById(el); + + for(i = this.list.length; i--; ) + if(this.list[i].element === el) { + this.list.splice(i, 1); + return; + } + }, + draw: function(obj, time) { + var canvas = obj.context.canvas; + + if(this.resizeClear) + canvas.width = canvas.width; + + else + obj.context.clearRect(0, 0, canvas.width, canvas.height); + + obj.drawing(obj.context, time, this.color); + }, + play: function() { + var self = this; + + this.pause(); + this.interval = requestInterval(function() { + var now = Date.now(), + i; + + for(i = self.list.length; i--; ) + self.draw(self.list[i], now); + }, 1000 / 60); + }, + pause: function() { + if(this.interval) { + cancelInterval(this.interval); + this.interval = null; + } + } + }; + + global.Skycons = Skycons; +}(this)); diff --git a/week-3/Homework/mandatory/1-practice/weather.css b/week-3/Homework/mandatory/1-practice/weather.css new file mode 100644 index 0000000..e4b5d5d --- /dev/null +++ b/week-3/Homework/mandatory/1-practice/weather.css @@ -0,0 +1,38 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} + +body{ + height: 100vh; + display: flex; + justify-content: center; + flex-direction: column; + align-items: center; + background: linear-gradient(rgb(47, 150, 163), rgb(48, 62, 143)); + font-family: sans-serif; + color: white; +} +.location, .temperature{ + height: 30vh; + width: 50%; + display: flex; + justify-content: space-around; + align-items: center; +} +.temperature{ +flex-direction: column; +} +.degree-section{ +display: flex; +align-items: center; +cursor: pointer; +} +.degree-section span { +margin: 10px; +font-size: 30px; +} +.degree-section h2 { +font-size: 40px; +} \ No newline at end of file diff --git a/week-3/Homework/mandatory/1-practice/weather.js b/week-3/Homework/mandatory/1-practice/weather.js new file mode 100644 index 0000000..f7cfdb1 --- /dev/null +++ b/week-3/Homework/mandatory/1-practice/weather.js @@ -0,0 +1,43 @@ +window.addEventListener("load", () =>{ +let long; +let lat; +let temperatureDescription = document.querySelector(".temperature-description"); +let temperatureDegree = document.querySelector(".temperature-degree"); +let locationTimezone = document.querySelector(".location-timezone"); +if(navigator.geolocation){ + navigator.geolocation.getCurrentPosition(position => { + long = position.coords.longitude; + lat = position.coords.latitude; + // let key = "ee6c36f7c660287c7cd84f4305b570ba" + const proxy = 'https://cors-anywhere.herokuapp.com/'; + + const api = `${proxy}https://api.darksky.net/forecast/fd9d9c6418c23d94745b836767721ad1/${lat},${long}`; + + + fetch(api) + .then(response => { + return response.json() + }) + .then(function(data){ + console.log(data); + const {temperature, summary, icon} = data.currently; + // set DOM element from API + temperatureDegree.textContent = temperature; + temperatureDescription.textContent = summary; + locationTimezone.textContent = data.timezone; + // set Icons + setIcons(icon, document.querySelector(".icon")) + }); + + }); +} + + function setIcons(icon, iconID){ + const skycons = new Skycons({color: "white"}); + const currentIcon = icon.replace(/-/g, "_").toUpperCase(); + console.log(currentIcon); + skycons.play(); + return skycons.set(iconID, Skycons[currentIcon]); + } + +}); \ No newline at end of file diff --git a/week-3/Homework/mandatory/2-exercises/exercise-1/exercise-1.js b/week-3/Homework/mandatory/2-exercises/exercise-1/exercise-1.js index 10b93ba..f18f0a2 100644 --- a/week-3/Homework/mandatory/2-exercises/exercise-1/exercise-1.js +++ b/week-3/Homework/mandatory/2-exercises/exercise-1/exercise-1.js @@ -1,11 +1,12 @@ const personOne = { - name: 'Popeye', - age: 34, - favouriteFood: 'Spinach' + name: 'Adebola', + age: 37, + favoriteFood: 'Eba' } +let {name, age, favoriteFood} = personOne function introduceYourself(___________________________) { - console.log (`Hello, my name is ${name}. I am ${age} years old and my favourite food is ${favouriteFood}.`); + console.log (`Hello, my name is ${name}. I am ${age} years old and my favourite food is ${favoriteFood}.`); } introduceYourself(personOne); \ No newline at end of file diff --git a/week-3/Homework/mandatory/2-exercises/exercise-1/exercise-1.md b/week-3/Homework/mandatory/2-exercises/exercise-1/exercise-1.md index 9c3ac97..6f33ed4 100644 --- a/week-3/Homework/mandatory/2-exercises/exercise-1/exercise-1.md +++ b/week-3/Homework/mandatory/2-exercises/exercise-1/exercise-1.md @@ -8,6 +8,7 @@ let person = { lastName: "Wayne" } + let { firstName, lastName } = person; console.log(`Batman is ${firstName}, ${lastName}`); diff --git a/week-3/Homework/mandatory/2-exercises/exercise-2/exercise-2.js b/week-3/Homework/mandatory/2-exercises/exercise-2/exercise-2.js index 0d3ade0..23dbd8e 100644 --- a/week-3/Homework/mandatory/2-exercises/exercise-2/exercise-2.js +++ b/week-3/Homework/mandatory/2-exercises/exercise-2/exercise-2.js @@ -9,3 +9,14 @@ let hogwarts = [ { firstName: "Minerva", lastName: "McGonagall", house: "Gryffindor", pet: null, occupation: "Teacher" }, { firstName: "Albus", lastName: "Dumbledore", house: "Gryffindor", pet: "Phoenix", occupation: "Teacher" } ] + +var [Harry,Hermione, Draco, Cedric, Severus, Filius, Pomona, Minerva, Albus ] = hogwarts; +// var [Gryffindor, Slytherin, Hufflepuff, Ravenclaw] = hogwarts; +console.log(`${Harry.firstName} ${Harry.lastName}`); +console.log(`${Hermione.firstName} ${Hermione.lastName}`); +console.log(`${Minerva.firstName} ${Minerva.lastName}`); +console.log(`${Albus.firstName} ${Albus.lastName}`); + + + + diff --git a/week-3/Homework/mandatory/2-exercises/exercise-2/exercise-2.md b/week-3/Homework/mandatory/2-exercises/exercise-2/exercise-2.md index 12b8948..3e4e3df 100644 --- a/week-3/Homework/mandatory/2-exercises/exercise-2/exercise-2.md +++ b/week-3/Homework/mandatory/2-exercises/exercise-2/exercise-2.md @@ -1,5 +1,6 @@ # Exercise 2 + _Need some help? Refresh your memory with [this article](https://www.freecodecamp.org/news/array-destructuring-in-es6-30e398f21d10/)_ In `exercise-2.js`, you have an array that contains a list of people who are at Hogwarts School of Witchcraft and Wizardry. diff --git a/week-3/Homework/mandatory/2-exercises/exercise-3/exercise-3.js b/week-3/Homework/mandatory/2-exercises/exercise-3/exercise-3.js index b60d527..67f8df5 100644 --- a/week-3/Homework/mandatory/2-exercises/exercise-3/exercise-3.js +++ b/week-3/Homework/mandatory/2-exercises/exercise-3/exercise-3.js @@ -1,4 +1,5 @@ let order = [ + { itemName: "Hot cakes", quantity: 1, unitPrice: 2.29}, { itemName: "Apple Pie", quantity: 2, unitPrice: 1.39}, { itemName: "Egg McMuffin", quantity: 1, unitPrice: 2.80}, @@ -6,4 +7,19 @@ { itemName: "Hot Coffee", quantity: 2, unitPrice: 1.00}, { itemName: "Hash Brown", quantity: 4, unitPrice: 0.40} ] - \ No newline at end of file + + let[quantity1, quantity2, quantity3, quantity4, quantity5, quantity6 ] = order; + let [qty1,qty2, qty4] = [1, 2, 4] + let quantity = "Qty"; + let Item = "Item"; + let Total = "TOTAL" + + console.log(`${quantity} ${Item} ${Total}`) + console.log(` 1 ${quantity1.itemName} ${quantity1.unitPrice * qty1}`); + console.log(` 2 ${quantity2.itemName} ${quantity2.unitPrice * qty2}`); + console.log(` 3 ${quantity3.itemName} ${quantity3.unitPrice * qty1}`); + console.log(` 4 ${quantity4.itemName} ${quantity4.unitPrice * qty1}.0`); + console.log(` 5 ${quantity5.itemName} ${quantity5.unitPrice *qty2}.00`); + console.log(` 6 ${quantity6.itemName} ${quantity6.unitPrice * qty4}0`); + console.log(`TOTAL:${quantity1.unitPrice *qty1 + quantity2.unitPrice *qty2+ quantity3.unitPrice *qty1 + + quantity4.unitPrice*qty1 + quantity5.unitPrice*qty2 + quantity6.unitPrice *qty4}`) \ No newline at end of file