From 724a39fd2c2a3cd8ab7c9b7e399a74f3288de79b Mon Sep 17 00:00:00 2001 From: Hiba-moh Date: Sun, 13 Sep 2020 23:35:13 +0100 Subject: [PATCH 1/7] 1-practice-app.js --- week-3/Homework/mandatory/1-practice/app.js | 41 + .../Homework/mandatory/1-practice/index.html | 24 + .../Homework/mandatory/1-practice/skycons.js | 726 ++++++++++++++++++ .../Homework/mandatory/1-practice/style.css | 39 + 4 files changed, 830 insertions(+) create mode 100644 week-3/Homework/mandatory/1-practice/app.js create mode 100644 week-3/Homework/mandatory/1-practice/index.html create mode 100644 week-3/Homework/mandatory/1-practice/skycons.js create mode 100644 week-3/Homework/mandatory/1-practice/style.css diff --git a/week-3/Homework/mandatory/1-practice/app.js b/week-3/Homework/mandatory/1-practice/app.js new file mode 100644 index 0000000..51d418d --- /dev/null +++ b/week-3/Homework/mandatory/1-practice/app.js @@ -0,0 +1,41 @@ +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; + + 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(data =>{ + console.log(data) + const {temperature,summary, icon}= data.currently; +//set Dom Elements from the API +temperatureDegree.textContent = temperature; +temperatureDescription.textContent = summary; +locationTimeZone.textContent = data.timezone; +//set Icon +setIcons(icon,document.querySelector('.icon')); + }); + +}); + +} + +function setIcons(icon,iconID){ +const skycons = new Skycons({color:'white'}); +const currentIcon = icon.replace(/-/g, "_").toUpperCase(); +skycons.play(); +return skycons.set(iconID,Skycons[currentIcon]); +} + +}); 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..4c9367f --- /dev/null +++ b/week-3/Homework/mandatory/1-practice/index.html @@ -0,0 +1,24 @@ + + + + + + Weather + + + +
+

TimeZone

+ +
+
+
+

34

+F +
+
Its friggnin 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/style.css b/week-3/Homework/mandatory/1-practice/style.css new file mode 100644 index 0000000..b75696f --- /dev/null +++ b/week-3/Homework/mandatory/1-practice/style.css @@ -0,0 +1,39 @@ +*{ + 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; +} + + From 11c43320ffd1314914df7126e17117f669746546 Mon Sep 17 00:00:00 2001 From: Hiba-moh Date: Mon, 14 Sep 2020 23:19:33 +0100 Subject: [PATCH 2/7] Mandatory-1-Practice-app.js- Done --- week-3/Homework/mandatory/1-practice/app.js | 18 +++++++++++++++++- 1 file changed, 17 insertions(+), 1 deletion(-) diff --git a/week-3/Homework/mandatory/1-practice/app.js b/week-3/Homework/mandatory/1-practice/app.js index 51d418d..4b03219 100644 --- a/week-3/Homework/mandatory/1-practice/app.js +++ b/week-3/Homework/mandatory/1-practice/app.js @@ -4,6 +4,9 @@ let lat; let temperatureDescription = document.querySelector('.temperature-description'); let temperatureDegree = document.querySelector('.temperature-degree'); let locationTimeZone = document.querySelector('.location-timezone'); +let temperatureSection = document.querySelector('.temperature'); +const temperatureSpan = document.querySelector('.temperature span'); + if(navigator.geolocation){ navigator.geolocation.getCurrentPosition(position =>{ long=position.coords.longitude; @@ -23,9 +26,22 @@ if(navigator.geolocation){ temperatureDegree.textContent = temperature; temperatureDescription.textContent = summary; locationTimeZone.textContent = data.timezone; +//Formula For CELSIUS +let celsius = (temperature - 32) * (5 / 9); //set Icon setIcons(icon,document.querySelector('.icon')); - }); + +//change teperature to celsius/farenheit +temperatureSection.addEventListener('click',()=>{ + if(temperatureSpan.textContent === 'F'){ + temperatureSpan.textContent = 'C'; + temperatureDegree.textContent = Math.floor(celsius); + }else{ + temperatureSpan.textContent = 'F'; + temperatureDegree.textContent = temperature; + } +}); +}); }); From f4c29523aef34a207f31238086f46b661f7f6ba1 Mon Sep 17 00:00:00 2001 From: Hiba-moh Date: Mon, 14 Sep 2020 23:59:03 +0100 Subject: [PATCH 3/7] Mandatory-1-Practice-2-Code-Readind-Done --- .../mandatory/1-practice/2-code-reading.md | 21 +++++++++++++++++++ 1 file changed, 21 insertions(+) diff --git a/week-3/Homework/mandatory/1-practice/2-code-reading.md b/week-3/Homework/mandatory/1-practice/2-code-reading.md index 295964e..5e4ad90 100644 --- a/week-3/Homework/mandatory/1-practice/2-code-reading.md +++ b/week-3/Homework/mandatory/1-practice/2-code-reading.md @@ -15,6 +15,13 @@ Take a look at the following code: Explain why line 4 and line 6 output different numbers. +*********************************************************************************************************************** +# The answer is + + let is block scoped .. so x between {} will not work outside this scope, it will log 2 because the log is inside the scop and although it can take the value from the global declaration but always the value of the variable will be taken from the nearst so it will take 2 not 1.. but the x = 1 is global and will work for the global scope and will log 1 . +*********************************************************************************************************************** + + ## Question 2 Take a look at the following code: @@ -34,6 +41,12 @@ console.log(y) What will be the output of this code. Explain your answer in 50 words or less. +*********************************************************************************************************************** +# The answer is +it will log 10 as a value of x .. but it will give an error that y is not defined .. because the log for y made out side the scope the y had been defined in .. (let is block scoped) +*********************************************************************************************************************** + + ## Question 3 Take a look at the following code: @@ -61,3 +74,11 @@ console.log(y); ``` What will be the output of this code. Explain your answer in 50 words or less. + + +*********************************************************************************************************************** + +# The answer is +It will log 9 and {x:10} and the reason is x defined with const and const can not be reassined the same applied for the const object if we reassiend the object or we attemted to overwrite it, but the keys for that object are not protected so we can ressign them or overwrite them. +*********************************************************************************************************************** + From 003349e73cc5022b734d13fec51a19a37d9fc44f Mon Sep 17 00:00:00 2001 From: Hiba-moh Date: Tue, 15 Sep 2020 00:06:11 +0100 Subject: [PATCH 4/7] Mandatory-2-Exercises-1-Exercise-1-Done --- week-3/Homework/mandatory/2-exercises/exercise-1/exercise-1.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) 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..27d1025 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 @@ -4,7 +4,8 @@ const personOne = { favouriteFood: 'Spinach' } -function introduceYourself(___________________________) { + +function introduceYourself({name,age,favouriteFood}) { console.log (`Hello, my name is ${name}. I am ${age} years old and my favourite food is ${favouriteFood}.`); } From 04168a57c6ce93e614bf904ca12640b7af2149d0 Mon Sep 17 00:00:00 2001 From: Hiba-moh Date: Tue, 15 Sep 2020 00:36:20 +0100 Subject: [PATCH 5/7] Mandatory-2-Exercises-exercise-2-Done --- .../mandatory/2-exercises/exercise-2/exercise-2.js | 8 ++++++++ 1 file changed, 8 insertions(+) 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..7719414 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,11 @@ let hogwarts = [ { firstName: "Minerva", lastName: "McGonagall", house: "Gryffindor", pet: null, occupation: "Teacher" }, { firstName: "Albus", lastName: "Dumbledore", house: "Gryffindor", pet: "Phoenix", occupation: "Teacher" } ] + + +function GryffindorPeople([Harry,Hermione, , , , , ,Minerva,Albus]){ + console.log(Harry.firstName,Harry.lastName,'\n',Hermione.firstName,Hermione.lastName,'\n',Minerva.firstName,Minerva.lastName,'\n',Albus.firstName,Albus.lastName); + +} + +GryffindorPeople(hogwarts); \ No newline at end of file From cf02b1d534a424a147eef322ee5413b56eeb892b Mon Sep 17 00:00:00 2001 From: Hiba-moh Date: Tue, 15 Sep 2020 00:49:39 +0100 Subject: [PATCH 6/7] Mandatory-2-Exercises-Exercise-2- part2- Done --- .../mandatory/2-exercises/exercise-2/exercise-2.js | 13 ++++++++++++- 1 file changed, 12 insertions(+), 1 deletion(-) 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 7719414..a128293 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 @@ -16,4 +16,15 @@ function GryffindorPeople([Harry,Hermione, , , , , ,Minerva,Albus]){ } -GryffindorPeople(hogwarts); \ No newline at end of file +GryffindorPeople(hogwarts); + +function teachersHavePets([...rest]){ + for(i=0;i Date: Tue, 15 Sep 2020 03:30:51 +0100 Subject: [PATCH 7/7] Mandatory-2-Exercises-Exercise3-Done --- .../2-exercises/exercise-3/exercise-3.js | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) 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..53524a0 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 @@ -6,4 +6,21 @@ { itemName: "Hot Coffee", quantity: 2, unitPrice: 1.00}, { itemName: "Hash Brown", quantity: 4, unitPrice: 0.40} ] - \ No newline at end of file + + function receipt([...rest]){ + let sum = 0; + for(let i=0;i