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.
+***********************************************************************************************************************
+
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..4b03219
--- /dev/null
+++ b/week-3/Homework/mandatory/1-practice/app.js
@@ -0,0 +1,57 @@
+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');
+let temperatureSection = document.querySelector('.temperature');
+const temperatureSpan = document.querySelector('.temperature span');
+
+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;
+//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;
+ }
+});
+});
+
+});
+
+}
+
+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;
+}
+
+
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}.`);
}
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..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
@@ -9,3 +9,22 @@ 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);
+
+function teachersHavePets([...rest]){
+ for(i=0;i