From ab419cb9556c8e894d83e09b2362f9854b4d9ef8 Mon Sep 17 00:00:00 2001 From: Shaun Date: Mon, 11 Feb 2019 21:50:32 +0000 Subject: [PATCH 001/100] lesson-5 --- README.md | 10 ---------- chapter_two/index.html | 15 +++++++++++++++ chapter_two/sandbox.js | 1 + 3 files changed, 16 insertions(+), 10 deletions(-) delete mode 100644 README.md create mode 100644 chapter_two/index.html create mode 100644 chapter_two/sandbox.js diff --git a/README.md b/README.md deleted file mode 100644 index 8c0f25b2..00000000 --- a/README.md +++ /dev/null @@ -1,10 +0,0 @@ -## Modern JavaScript - Novice to Ninja -All lecture files from the Modern JavaScript (Novice to Ninja) course on Udemy. - -### How to use this repository - -Each lesson in the course has it's own branch in the repository. To see the code for a specific lesson, just select that branch from the branch drop-down (top-left). E.g. The lesson-20 branch contains the final code for lesson 20 in the course. - -**Course link:** [Modern JavaScript - Novice to Ninja](https://pages.github.com/) - - diff --git a/chapter_two/index.html b/chapter_two/index.html new file mode 100644 index 00000000..8cdd1062 --- /dev/null +++ b/chapter_two/index.html @@ -0,0 +1,15 @@ + + + + + + JavaScript + + +

I am a page title

+ + + + \ No newline at end of file diff --git a/chapter_two/sandbox.js b/chapter_two/sandbox.js new file mode 100644 index 00000000..0911aab9 --- /dev/null +++ b/chapter_two/sandbox.js @@ -0,0 +1 @@ +alert('hello, world'); \ No newline at end of file From e7df1437ca2cd365d810c4168bf231eb208ef032 Mon Sep 17 00:00:00 2001 From: Shaun Date: Tue, 12 Feb 2019 07:51:45 +0000 Subject: [PATCH 002/100] lesson-6 --- chapter_two/sandbox.js | 3 ++- 1 file changed, 2 insertions(+), 1 deletion(-) diff --git a/chapter_two/sandbox.js b/chapter_two/sandbox.js index 0911aab9..6e41f796 100644 --- a/chapter_two/sandbox.js +++ b/chapter_two/sandbox.js @@ -1 +1,2 @@ -alert('hello, world'); \ No newline at end of file +console.log(1); +console.log(2); \ No newline at end of file From b904f58edb15bca8158e4495fad868f9e0e237bb Mon Sep 17 00:00:00 2001 From: Shaun Date: Tue, 12 Feb 2019 09:21:31 +0000 Subject: [PATCH 003/100] lesson-7 --- chapter_two/sandbox.js | 16 ++++++++++++++-- 1 file changed, 14 insertions(+), 2 deletions(-) diff --git a/chapter_two/sandbox.js b/chapter_two/sandbox.js index 6e41f796..4d895a6b 100644 --- a/chapter_two/sandbox.js +++ b/chapter_two/sandbox.js @@ -1,2 +1,14 @@ -console.log(1); -console.log(2); \ No newline at end of file +let age = 25; +let year = 2019; + +console.log(age, year); + +// age = 30; +// console.log(age); + +// const points = 100; +// points = 50; +// console.log(points); + +// var score = 75; +// console.log(score); From 01c317c52f8fc424ffc2edb1e695537f8b42523e Mon Sep 17 00:00:00 2001 From: Shaun Date: Tue, 12 Feb 2019 09:41:15 +0000 Subject: [PATCH 004/100] lesson-9 --- chapter_two/sandbox.js | 35 +++++++++++++++++++++++++---------- 1 file changed, 25 insertions(+), 10 deletions(-) diff --git a/chapter_two/sandbox.js b/chapter_two/sandbox.js index 4d895a6b..098492b8 100644 --- a/chapter_two/sandbox.js +++ b/chapter_two/sandbox.js @@ -1,14 +1,29 @@ -let age = 25; -let year = 2019; +// strings +console.log('hello, world'); -console.log(age, year); +let email = 'mario@thenetninja.co.uk'; +console.log(email); -// age = 30; -// console.log(age); +// string concatenation +let firstName = 'Brandon'; +let lastName = 'Sanderson'; + +let fullName = firstName + ' ' + lastName; + +console.log(fullName); + +// getting individual characters +console.log(fullName[2]); + +// string length +console.log(fullName.length); + +// string methods +console.log(fullName.toUpperCase()); +let result = fullName.toLocaleLowerCase(); +console.log(result); + +let index = email.indexOf('@'); +console.log('index of the @ sign:', index); -// const points = 100; -// points = 50; -// console.log(points); -// var score = 75; -// console.log(score); From f5375f92159ce6d3558ddfd79e7e10136fd977ab Mon Sep 17 00:00:00 2001 From: Shaun Date: Tue, 12 Feb 2019 09:58:47 +0000 Subject: [PATCH 005/100] lesson-10 --- chapter_two/sandbox.js | 25 ++++++------------------- 1 file changed, 6 insertions(+), 19 deletions(-) diff --git a/chapter_two/sandbox.js b/chapter_two/sandbox.js index 098492b8..35c986c1 100644 --- a/chapter_two/sandbox.js +++ b/chapter_two/sandbox.js @@ -1,29 +1,16 @@ -// strings -console.log('hello, world'); +// common string methods let email = 'mario@thenetninja.co.uk'; -console.log(email); -// string concatenation -let firstName = 'Brandon'; -let lastName = 'Sanderson'; +//let result = email.lastIndexOf('n'); -let fullName = firstName + ' ' + lastName; +//let result = email.slice(0,5); -console.log(fullName); +//let result = email.substr(5,12); -// getting individual characters -console.log(fullName[2]); +//let result = email.replace('m', 'w'); -// string length -console.log(fullName.length); +let result = email.replace('n', 'w'); -// string methods -console.log(fullName.toUpperCase()); -let result = fullName.toLocaleLowerCase(); console.log(result); -let index = email.indexOf('@'); -console.log('index of the @ sign:', index); - - From cd84c40d101e5d375ca0aca1864ebe61689155dd Mon Sep 17 00:00:00 2001 From: Shaun Date: Tue, 12 Feb 2019 10:50:16 +0000 Subject: [PATCH 006/100] lesson-11 --- chapter_two/index.html | 4 +--- chapter_two/sandbox.js | 46 +++++++++++++++++++++++++++++++++++------- 2 files changed, 40 insertions(+), 10 deletions(-) diff --git a/chapter_two/index.html b/chapter_two/index.html index 8cdd1062..6ff2be06 100644 --- a/chapter_two/index.html +++ b/chapter_two/index.html @@ -7,9 +7,7 @@

I am a page title

- + \ No newline at end of file diff --git a/chapter_two/sandbox.js b/chapter_two/sandbox.js index 35c986c1..c94b1d95 100644 --- a/chapter_two/sandbox.js +++ b/chapter_two/sandbox.js @@ -1,16 +1,48 @@ -// common string methods +// numbers -let email = 'mario@thenetninja.co.uk'; +let radius = 10; +let pi = 3.14; -//let result = email.lastIndexOf('n'); +// console.log(radius, pi); -//let result = email.slice(0,5); +// math operators - +, -, *, /, **, % -//let result = email.substr(5,12); +// console.log(10 / 2); +// let result = radius % 3; +// let result = pi * radius**2; -//let result = email.replace('m', 'w'); +// order of operation - B I D M A S -let result = email.replace('n', 'w'); +// let result = 5 * (10 - 3)**2; +// console.log(result); + +// shorthands +let likes = 10; + +// likes = likes + 1; +// likes++; + +// likes = likes + 10; +// likes += 10; + +// likes *= 2; +// likes /= 2; + +// console.log(likes); + +// NaN - not a number + +// console.log(5 / 'hello'); +// console.log(5 * 'hello'); + +let result = 'the blog has ' + likes + ' likes.'; console.log(result); + + + + + + + From b8bef936d77c5e7ae976acc4279da823d4bc3793 Mon Sep 17 00:00:00 2001 From: Shaun Date: Tue, 12 Feb 2019 11:04:09 +0000 Subject: [PATCH 007/100] lesson-12 --- chapter_two/sandbox.js | 51 +++++++++++++----------------------------- 1 file changed, 16 insertions(+), 35 deletions(-) diff --git a/chapter_two/sandbox.js b/chapter_two/sandbox.js index c94b1d95..0640e4ed 100644 --- a/chapter_two/sandbox.js +++ b/chapter_two/sandbox.js @@ -1,45 +1,26 @@ -// numbers +// template strings +const title = 'Best reads of 2019'; +const author = 'Mario'; +const likes = 30; -let radius = 10; -let pi = 3.14; - -// console.log(radius, pi); - -// math operators - +, -, *, /, **, % - -// console.log(10 / 2); -// let result = radius % 3; -// let result = pi * radius**2; - -// order of operation - B I D M A S - -// let result = 5 * (10 - 3)**2; +// concatenation way +// let result = 'The blog called ' + title + ' by ' + author + ' has ' + likes + ' likes'; // console.log(result); -// shorthands -let likes = 10; - -// likes = likes + 1; -// likes++; +// template string way -// likes = likes + 10; -// likes += 10; - -// likes *= 2; -// likes /= 2; - -// console.log(likes); - -// NaN - not a number - -// console.log(5 / 'hello'); -// console.log(5 * 'hello'); - -let result = 'the blog has ' + likes + ' likes.'; -console.log(result); +// let result = `The blog called ${title} by ${author} has ${likes} likes`; +// console.log(result); +// creating html templates +let html = ` +

${title}

+

By ${author}

+ This blog has ${likes} likes +`; +console.log(html); From b4ff9bc531173b334c480603950bfe569d016176 Mon Sep 17 00:00:00 2001 From: Shaun Date: Tue, 12 Feb 2019 11:47:12 +0000 Subject: [PATCH 008/100] lesson-13 --- chapter_two/sandbox.js | 39 ++++++++++++++++++++++----------------- 1 file changed, 22 insertions(+), 17 deletions(-) diff --git a/chapter_two/sandbox.js b/chapter_two/sandbox.js index 0640e4ed..0c07aa71 100644 --- a/chapter_two/sandbox.js +++ b/chapter_two/sandbox.js @@ -1,26 +1,31 @@ -// template strings -const title = 'Best reads of 2019'; -const author = 'Mario'; -const likes = 30; +// arrays -// concatenation way +let ninjas = ['shaun', 'ryu', 'chun-li']; -// let result = 'The blog called ' + title + ' by ' + author + ' has ' + likes + ' likes'; -// console.log(result); +// ninjas[1] = 'ken'; +// console.log(ninjas[1]); -// template string way +// let ages = [20, 25, 30, 35]; +// console.log(ages[2]); + +// let random = ['shaun', 'crystal', 30, 20]; + +// array length +// console.log(ninjas.length); + +// array methods + +// let result = ninjas.join(','); +// let result = ninjas.indexOf('chun-li'); +// let result = ninjas.concat(['ken', 'crystal']); +let result = ninjas.push('ken'); +let result = ninjas.pop(); + +console.log(result); +console.log(ninjas); -// let result = `The blog called ${title} by ${author} has ${likes} likes`; -// console.log(result); -// creating html templates -let html = ` -

${title}

-

By ${author}

- This blog has ${likes} likes -`; -console.log(html); From 9ec6f63264ebb280f9a0e2b325e57b26841463c5 Mon Sep 17 00:00:00 2001 From: Shaun Date: Tue, 12 Feb 2019 11:57:34 +0000 Subject: [PATCH 009/100] lesson-14 --- chapter_two/sandbox.js | 27 +++------------------------ 1 file changed, 3 insertions(+), 24 deletions(-) diff --git a/chapter_two/sandbox.js b/chapter_two/sandbox.js index 0c07aa71..8148ed18 100644 --- a/chapter_two/sandbox.js +++ b/chapter_two/sandbox.js @@ -1,28 +1,7 @@ -// arrays +// null & undefined +let age = null; -let ninjas = ['shaun', 'ryu', 'chun-li']; - -// ninjas[1] = 'ken'; -// console.log(ninjas[1]); - -// let ages = [20, 25, 30, 35]; -// console.log(ages[2]); - -// let random = ['shaun', 'crystal', 30, 20]; - -// array length -// console.log(ninjas.length); - -// array methods - -// let result = ninjas.join(','); -// let result = ninjas.indexOf('chun-li'); -// let result = ninjas.concat(['ken', 'crystal']); -let result = ninjas.push('ken'); -let result = ninjas.pop(); - -console.log(result); -console.log(ninjas); +console.log(age, age + 3, `the age is ${age}`); From fd44d9248ac9462c9e492febbcc84e2d9817b3c0 Mon Sep 17 00:00:00 2001 From: Shaun Date: Tue, 12 Feb 2019 12:17:15 +0000 Subject: [PATCH 010/100] lesson-15 --- chapter_two/sandbox.js | 36 +++++++++++++++++++++++++++++++++--- 1 file changed, 33 insertions(+), 3 deletions(-) diff --git a/chapter_two/sandbox.js b/chapter_two/sandbox.js index 8148ed18..0d95495a 100644 --- a/chapter_two/sandbox.js +++ b/chapter_two/sandbox.js @@ -1,7 +1,37 @@ -// null & undefined -let age = null; +// booleans & comparisons +// console.log(true, false, 'true', 'false'); + +// methods can return booleans +// let email = 'luigi@thenetninja.co.uk'; +// let names = ['mario', 'luigi', 'toad']; + +// let result = email.includes('@'); +// let result = names.includes('luigi'); + +// console.log(result); + +// comparison operators +let age = 25; + +console.log(age == 25); +console.log(age == 30); +console.log(age != 30); +console.log(age > 20); +console.log(age < 20); +console.log(age <= 25); +console.log(age >= 25); + +let name = 'shaun'; + +console.log(name == 'shaun'); +console.log(name == 'Shaun'); +console.log(name > 'crystal'); +console.log(name > 'Shaun'); +console.log(name > 'Crystal'); + + + -console.log(age, age + 3, `the age is ${age}`); From bdbad720eec39c39d7ff56bc4712040fcb4c8e97 Mon Sep 17 00:00:00 2001 From: Shaun Date: Tue, 12 Feb 2019 12:27:18 +0000 Subject: [PATCH 011/100] lesson-16 --- chapter_two/sandbox.js | 48 +++++++++--------------------------------- 1 file changed, 10 insertions(+), 38 deletions(-) diff --git a/chapter_two/sandbox.js b/chapter_two/sandbox.js index 0d95495a..5950622a 100644 --- a/chapter_two/sandbox.js +++ b/chapter_two/sandbox.js @@ -1,43 +1,15 @@ -// booleans & comparisons -// console.log(true, false, 'true', 'false'); - -// methods can return booleans -// let email = 'luigi@thenetninja.co.uk'; -// let names = ['mario', 'luigi', 'toad']; - -// let result = email.includes('@'); -// let result = names.includes('luigi'); - -// console.log(result); - -// comparison operators let age = 25; -console.log(age == 25); -console.log(age == 30); -console.log(age != 30); -console.log(age > 20); -console.log(age < 20); -console.log(age <= 25); -console.log(age >= 25); - -let name = 'shaun'; - -console.log(name == 'shaun'); -console.log(name == 'Shaun'); -console.log(name > 'crystal'); -console.log(name > 'Shaun'); -console.log(name > 'Crystal'); - - - - - - - - - - +// loose comparison (different types can still be equal) +// console.log(age == 25); +// console.log(age == '25'); +// console.log(age != 25); +// console.log(age != '25'); +// strict comparison (different types cannot be equal) +// console.log(age === 25); +// console.log(age === '25'); +// console.log(age !== 25); +// console.log(age !== '25'); \ No newline at end of file From 35183c14b60ba8daaba9c69567b681a7fe7d7f1a Mon Sep 17 00:00:00 2001 From: Shaun Date: Tue, 12 Feb 2019 12:49:52 +0000 Subject: [PATCH 012/100] lesson-17 --- chapter_two/sandbox.js | 24 ++++++++++++------------ 1 file changed, 12 insertions(+), 12 deletions(-) diff --git a/chapter_two/sandbox.js b/chapter_two/sandbox.js index 5950622a..473f8919 100644 --- a/chapter_two/sandbox.js +++ b/chapter_two/sandbox.js @@ -1,15 +1,15 @@ -let age = 25; +// type conversion +// let score = '100'; -// loose comparison (different types can still be equal) +// score = Number(score); +// console.log(score + 1); +// console.log(typeof score); -// console.log(age == 25); -// console.log(age == '25'); -// console.log(age != 25); -// console.log(age != '25'); +// let result = Number('hello'); +// let result = String(50); +// let result = Boolean(100); +// let result = Boolean(0); +// let result = Boolean('0'); +let result = Boolean(''); -// strict comparison (different types cannot be equal) - -// console.log(age === 25); -// console.log(age === '25'); -// console.log(age !== 25); -// console.log(age !== '25'); \ No newline at end of file +console.log(result, typeof result); \ No newline at end of file From de50d2bfc2c7db0a232eba6fbed4e27af426c55b Mon Sep 17 00:00:00 2001 From: Shaun Date: Tue, 12 Feb 2019 13:10:01 +0000 Subject: [PATCH 013/100] lesson-19 --- {chapter_two => chapter_three}/index.html | 0 chapter_three/sandbox.js | 13 +++++++++++++ chapter_two/sandbox.js | 15 --------------- 3 files changed, 13 insertions(+), 15 deletions(-) rename {chapter_two => chapter_three}/index.html (100%) create mode 100644 chapter_three/sandbox.js delete mode 100644 chapter_two/sandbox.js diff --git a/chapter_two/index.html b/chapter_three/index.html similarity index 100% rename from chapter_two/index.html rename to chapter_three/index.html diff --git a/chapter_three/sandbox.js b/chapter_three/sandbox.js new file mode 100644 index 00000000..01604c51 --- /dev/null +++ b/chapter_three/sandbox.js @@ -0,0 +1,13 @@ +// for loops + +// for(let i = 0; i < 5; i++){ +// console.log('loop: ', i); +// } + +const names = ['shaun', 'mario', 'luigi']; + +for(let i = 0; i < names.length; i++){ + // console.log(names[i]); + let html = `
${names[i]}
`; + console.log(html); +} \ No newline at end of file diff --git a/chapter_two/sandbox.js b/chapter_two/sandbox.js deleted file mode 100644 index 473f8919..00000000 --- a/chapter_two/sandbox.js +++ /dev/null @@ -1,15 +0,0 @@ -// type conversion -// let score = '100'; - -// score = Number(score); -// console.log(score + 1); -// console.log(typeof score); - -// let result = Number('hello'); -// let result = String(50); -// let result = Boolean(100); -// let result = Boolean(0); -// let result = Boolean('0'); -let result = Boolean(''); - -console.log(result, typeof result); \ No newline at end of file From cf0b823f34b29651472aa75fc0c151b41408a29f Mon Sep 17 00:00:00 2001 From: Shaun Date: Tue, 12 Feb 2019 13:47:02 +0000 Subject: [PATCH 014/100] lesson-20 --- chapter_three/sandbox.js | 17 +++++++++-------- 1 file changed, 9 insertions(+), 8 deletions(-) diff --git a/chapter_three/sandbox.js b/chapter_three/sandbox.js index 01604c51..fbbde598 100644 --- a/chapter_three/sandbox.js +++ b/chapter_three/sandbox.js @@ -1,13 +1,14 @@ -// for loops +// while loops +const names = ['shaun', 'mario', 'luigi']; +let i = 0; -// for(let i = 0; i < 5; i++){ +// while(i < 5){ // console.log('loop: ', i); +// i++; // } -const names = ['shaun', 'mario', 'luigi']; +while(i < names.length){ + console.log(names[i]); + i++; +} -for(let i = 0; i < names.length; i++){ - // console.log(names[i]); - let html = `
${names[i]}
`; - console.log(html); -} \ No newline at end of file From eb3e1da302f4ca6212ce803f0a303feaf561513f Mon Sep 17 00:00:00 2001 From: Shaun Date: Tue, 12 Feb 2019 15:00:28 +0000 Subject: [PATCH 015/100] lesson-21 --- chapter_three/sandbox.js | 16 +++++----------- 1 file changed, 5 insertions(+), 11 deletions(-) diff --git a/chapter_three/sandbox.js b/chapter_three/sandbox.js index fbbde598..882927c9 100644 --- a/chapter_three/sandbox.js +++ b/chapter_three/sandbox.js @@ -1,14 +1,8 @@ -// while loops -const names = ['shaun', 'mario', 'luigi']; -let i = 0; +// do while loops +let i = 5; -// while(i < 5){ -// console.log('loop: ', i); -// i++; -// } - -while(i < names.length){ - console.log(names[i]); +do{ + console.log('val of i is: ', i); i++; -} +} while(i < 5); From be5bc48fb1e2ff065e2ace9ba5d9c3efd3763f44 Mon Sep 17 00:00:00 2001 From: Shaun Date: Tue, 12 Feb 2019 15:19:21 +0000 Subject: [PATCH 016/100] lesson-22 --- chapter_three/sandbox.js | 22 ++++++++++++++++------ 1 file changed, 16 insertions(+), 6 deletions(-) diff --git a/chapter_three/sandbox.js b/chapter_three/sandbox.js index 882927c9..34500ce9 100644 --- a/chapter_three/sandbox.js +++ b/chapter_three/sandbox.js @@ -1,8 +1,18 @@ -// do while loops -let i = 5; +// if statements +// const age = 25; -do{ - console.log('val of i is: ', i); - i++; -} while(i < 5); +// if(age > 20){ +// console.log('you are over 20 years old'); +// } +// const ninjas = ['shaun', 'ryu', 'chun-li', 'yoshi']; + +// if(ninjas.length > 3){ +// console.log("that's a lot of ninjas!"); +// } + +const password = 'p@ssword'; + +if(password.length >= 8){ + console.log('that password is long enough'); +} From 59bd310e7dd2dd507285bc1b390277c688d1ffda Mon Sep 17 00:00:00 2001 From: Shaun Date: Tue, 12 Feb 2019 15:24:11 +0000 Subject: [PATCH 017/100] lesson-23 --- chapter_three/sandbox.js | 22 +++++++--------------- 1 file changed, 7 insertions(+), 15 deletions(-) diff --git a/chapter_three/sandbox.js b/chapter_three/sandbox.js index 34500ce9..b16f85ed 100644 --- a/chapter_three/sandbox.js +++ b/chapter_three/sandbox.js @@ -1,18 +1,10 @@ -// if statements -// const age = 25; +// else if statements +const password = 'p@ssword123456'; -// if(age > 20){ -// console.log('you are over 20 years old'); -// } - -// const ninjas = ['shaun', 'ryu', 'chun-li', 'yoshi']; - -// if(ninjas.length > 3){ -// console.log("that's a lot of ninjas!"); -// } - -const password = 'p@ssword'; - -if(password.length >= 8){ +if(password.length >= 12){ + console.log('that password is mighty strong'); +} else if(password.length >= 8){ console.log('that password is long enough'); +} else { + console.log('password should be at least 8 characters long'); } From 95655fc6fb0a6aa447952022016ff5d48ad6602e Mon Sep 17 00:00:00 2001 From: Shaun Date: Tue, 12 Feb 2019 15:33:00 +0000 Subject: [PATCH 018/100] lesson-24 --- chapter_three/sandbox.js | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) diff --git a/chapter_three/sandbox.js b/chapter_three/sandbox.js index b16f85ed..f627ee4e 100644 --- a/chapter_three/sandbox.js +++ b/chapter_three/sandbox.js @@ -1,10 +1,10 @@ // else if statements -const password = 'p@ssword123456'; +const password = 'p@ss12'; -if(password.length >= 12){ +if(password.length >= 12 && password.includes('@')){ console.log('that password is mighty strong'); -} else if(password.length >= 8){ - console.log('that password is long enough'); +} else if(password.length >= 8 || password.includes('@') && password.length > 5){ + console.log('that password is strong enough'); } else { - console.log('password should be at least 8 characters long'); -} + console.log('that password is not strong enough'); +} \ No newline at end of file From a1d4bc66627799602b216376b8b98769053f7e25 Mon Sep 17 00:00:00 2001 From: Shaun Date: Tue, 12 Feb 2019 15:49:56 +0000 Subject: [PATCH 019/100] lesson-25 --- chapter_three/sandbox.js | 18 +++++++++--------- 1 file changed, 9 insertions(+), 9 deletions(-) diff --git a/chapter_three/sandbox.js b/chapter_three/sandbox.js index f627ee4e..393caa10 100644 --- a/chapter_three/sandbox.js +++ b/chapter_three/sandbox.js @@ -1,10 +1,10 @@ -// else if statements -const password = 'p@ss12'; +// Logical NOT +const user = false; -if(password.length >= 12 && password.includes('@')){ - console.log('that password is mighty strong'); -} else if(password.length >= 8 || password.includes('@') && password.length > 5){ - console.log('that password is strong enough'); -} else { - console.log('that password is not strong enough'); -} \ No newline at end of file +if(!user){ + // do something + console.log('you must be logged in to continue'); +} + +console.log(!true); +console.log(!false); \ No newline at end of file From cf01a95fe9126f182cc89dc43db6691e00889011 Mon Sep 17 00:00:00 2001 From: Shaun Date: Tue, 12 Feb 2019 15:57:29 +0000 Subject: [PATCH 020/100] lesson-26 --- chapter_three/sandbox.js | 23 +++++++++++++++-------- 1 file changed, 15 insertions(+), 8 deletions(-) diff --git a/chapter_three/sandbox.js b/chapter_three/sandbox.js index 393caa10..ef3cc6ad 100644 --- a/chapter_three/sandbox.js +++ b/chapter_three/sandbox.js @@ -1,10 +1,17 @@ -// Logical NOT -const user = false; +// break & continue +const scores = [50, 25, 0, 30, 100, 20, 10]; -if(!user){ - // do something - console.log('you must be logged in to continue'); -} +for(let i = 0; i < scores.length; i++){ + + if(scores[i] === 0){ + continue; + } + + console.log('your score:', scores[i]); -console.log(!true); -console.log(!false); \ No newline at end of file + if(scores[i] === 100){ + console.log('congrats, you got the top score!'); + break; + } + +} From dfbd828a36451337f7ffc560f5e25d69d8ba51f5 Mon Sep 17 00:00:00 2001 From: Shaun Date: Tue, 12 Feb 2019 16:28:47 +0000 Subject: [PATCH 021/100] lesson-27 --- chapter_three/sandbox.js | 44 +++++++++++++++++++++++++++++----------- 1 file changed, 32 insertions(+), 12 deletions(-) diff --git a/chapter_three/sandbox.js b/chapter_three/sandbox.js index ef3cc6ad..f6ba0207 100644 --- a/chapter_three/sandbox.js +++ b/chapter_three/sandbox.js @@ -1,17 +1,37 @@ -// break & continue -const scores = [50, 25, 0, 30, 100, 20, 10]; +// switch statements +const grade = 'D'; -for(let i = 0; i < scores.length; i++){ +switch(grade){ + case 'A': + console.log('you got an A!'); + break; + case 'B': + console.log('you got a B!'); + break; + case 'C': + console.log('you got a C!'); + break; + case 'D': + console.log('you got a D!'); + break; + case 'E': + console.log('you got an E!'); + break; + default: + console.log('not a valid grade'); +} - if(scores[i] === 0){ - continue; - } +// using if statements +// if(grade === 'A'){ - console.log('your score:', scores[i]); +// } else if(grade === 'B'){ - if(scores[i] === 100){ - console.log('congrats, you got the top score!'); - break; - } +// } else if(grade === 'C'){ -} +// } else if(grade === 'D'){ + +// } else if(grade === 'E'){ + +// } else { + +// } From 0a790dea26ae0dcd179067024b937a20395685a2 Mon Sep 17 00:00:00 2001 From: Shaun Date: Tue, 12 Feb 2019 16:42:08 +0000 Subject: [PATCH 022/100] lesson-28 --- chapter_three/sandbox.js | 43 ++++++++++++---------------------------- 1 file changed, 13 insertions(+), 30 deletions(-) diff --git a/chapter_three/sandbox.js b/chapter_three/sandbox.js index f6ba0207..20ef75b0 100644 --- a/chapter_three/sandbox.js +++ b/chapter_three/sandbox.js @@ -1,37 +1,20 @@ -// switch statements -const grade = 'D'; +// variables & block scope +let age = 30; -switch(grade){ - case 'A': - console.log('you got an A!'); - break; - case 'B': - console.log('you got a B!'); - break; - case 'C': - console.log('you got a C!'); - break; - case 'D': - console.log('you got a D!'); - break; - case 'E': - console.log('you got an E!'); - break; - default: - console.log('not a valid grade'); -} - -// using if statements -// if(grade === 'A'){ +if(true){ -// } else if(grade === 'B'){ + // age = 40; + let age = 40; + let name = 'shaun'; + console.log('inside 1st code block:', age, name); -// } else if(grade === 'C'){ + if(true){ -// } else if(grade === 'D'){ + let age = 50; + console.log('inside 2nd code block:', age, name); -// } else if(grade === 'E'){ + } -// } else { +} -// } +console.log('outside code block:', age, name); \ No newline at end of file From bda9d915bf91056d05f20c855ac6a9bd2320e994 Mon Sep 17 00:00:00 2001 From: Shaun Date: Tue, 12 Feb 2019 16:56:15 +0000 Subject: [PATCH 023/100] lesson-30 --- {chapter_three => chapter_four}/index.html | 0 chapter_four/sandbox.js | 14 ++++++++++++++ chapter_three/sandbox.js | 20 -------------------- 3 files changed, 14 insertions(+), 20 deletions(-) rename {chapter_three => chapter_four}/index.html (100%) create mode 100644 chapter_four/sandbox.js delete mode 100644 chapter_three/sandbox.js diff --git a/chapter_three/index.html b/chapter_four/index.html similarity index 100% rename from chapter_three/index.html rename to chapter_four/index.html diff --git a/chapter_four/sandbox.js b/chapter_four/sandbox.js new file mode 100644 index 00000000..ae5596e1 --- /dev/null +++ b/chapter_four/sandbox.js @@ -0,0 +1,14 @@ +// function declaration +function greet(){ + console.log('hello there'); +} + +// function expression +const speak = function(){ + console.log('good day!'); +}; + +// greet(); +// greet(); + +speak(); \ No newline at end of file diff --git a/chapter_three/sandbox.js b/chapter_three/sandbox.js deleted file mode 100644 index 20ef75b0..00000000 --- a/chapter_three/sandbox.js +++ /dev/null @@ -1,20 +0,0 @@ -// variables & block scope -let age = 30; - -if(true){ - - // age = 40; - let age = 40; - let name = 'shaun'; - console.log('inside 1st code block:', age, name); - - if(true){ - - let age = 50; - console.log('inside 2nd code block:', age, name); - - } - -} - -console.log('outside code block:', age, name); \ No newline at end of file From f1f5777a24dad3288c590bb489a9f38e17209480 Mon Sep 17 00:00:00 2001 From: Shaun Date: Tue, 12 Feb 2019 17:11:08 +0000 Subject: [PATCH 024/100] lesson-31 --- chapter_four/sandbox.js | 17 ++++++----------- 1 file changed, 6 insertions(+), 11 deletions(-) diff --git a/chapter_four/sandbox.js b/chapter_four/sandbox.js index ae5596e1..09c467f2 100644 --- a/chapter_four/sandbox.js +++ b/chapter_four/sandbox.js @@ -1,14 +1,9 @@ -// function declaration -function greet(){ - console.log('hello there'); -} +// arguments & parameters -// function expression -const speak = function(){ - console.log('good day!'); +const speak = function(name = 'luigi', time = 'night'){ + console.log(`good ${time}, ${name}!`); }; -// greet(); -// greet(); - -speak(); \ No newline at end of file +// speak('mario', 'morning'); +// speak(); +speak('shaun'); \ No newline at end of file From cdff15f768cd51cb6d1b746e32cdea36ab3d9a9b Mon Sep 17 00:00:00 2001 From: Shaun Date: Wed, 13 Feb 2019 09:17:18 +0000 Subject: [PATCH 025/100] lesson-32 --- chapter_four/sandbox.js | 18 +++++++++++------- 1 file changed, 11 insertions(+), 7 deletions(-) diff --git a/chapter_four/sandbox.js b/chapter_four/sandbox.js index 09c467f2..7b41a5f1 100644 --- a/chapter_four/sandbox.js +++ b/chapter_four/sandbox.js @@ -1,9 +1,13 @@ -// arguments & parameters +// return statements -const speak = function(name = 'luigi', time = 'night'){ - console.log(`good ${time}, ${name}!`); -}; +// const speak = function(name, time){ +// console.log(`good ${time}, ${name}!`); +// }; -// speak('mario', 'morning'); -// speak(); -speak('shaun'); \ No newline at end of file +const calcArea = function(radius){ + let area = 3.14 * radius**2; + return area; +} + +const area = calcArea(5); +console.log('area is:', area); \ No newline at end of file From 563c623bf1a4c99833a151e1487a86af9461c1e1 Mon Sep 17 00:00:00 2001 From: Shaun Date: Wed, 13 Feb 2019 09:37:19 +0000 Subject: [PATCH 026/100] lesson-33 --- chapter_four/sandbox.js | 44 ++++++++++++++++++++++++++++++++--------- 1 file changed, 35 insertions(+), 9 deletions(-) diff --git a/chapter_four/sandbox.js b/chapter_four/sandbox.js index 7b41a5f1..4da9468a 100644 --- a/chapter_four/sandbox.js +++ b/chapter_four/sandbox.js @@ -1,13 +1,39 @@ -// return statements +// arrow functions -// const speak = function(name, time){ -// console.log(`good ${time}, ${name}!`); -// }; +// regular function +// const calcArea = function(radius){ +// return 3.14 * radius**2; +// } -const calcArea = function(radius){ - let area = 3.14 * radius**2; - return area; -} +// arrow function +const calcArea = radius => 3.14 * radius**2; const area = calcArea(5); -console.log('area is:', area); \ No newline at end of file +console.log('area is:', area); + +// practise arrow functions + +// const greet = function(){ +// return 'hello, world'; +// } + +const greet = () => 'hello, world'; + +// const bill = function(products, tax){ +// let total = 0; +// for(let i = 0; i < products.length; i++){ +// total += products[i] + products[i] * tax; +// } +// return total; +// } + +const bill = (products, tax) => { + let total = 0; + for(let i = 0; i < products.length; i++){ + total += products[i] + products[i] * tax; + } + return total; +} + +console.log(greet()); +console.log(bill([10,15,30], 0.2)); \ No newline at end of file From d573f797c799d343ea1a43a2326b3c75731a59e3 Mon Sep 17 00:00:00 2001 From: Shaun Date: Wed, 13 Feb 2019 09:52:45 +0000 Subject: [PATCH 027/100] lesson-34 --- chapter_four/sandbox.js | 44 ++++++++++------------------------------- 1 file changed, 10 insertions(+), 34 deletions(-) diff --git a/chapter_four/sandbox.js b/chapter_four/sandbox.js index 4da9468a..456e50ff 100644 --- a/chapter_four/sandbox.js +++ b/chapter_four/sandbox.js @@ -1,39 +1,15 @@ -// arrow functions +const name = 'shaun'; -// regular function -// const calcArea = function(radius){ -// return 3.14 * radius**2; -// } +// function -// arrow function -const calcArea = radius => 3.14 * radius**2; +const greet = () => { + return 'hello'; +}; -const area = calcArea(5); -console.log('area is:', area); +let resultOne = greet(); +console.log(resultOne); -// practise arrow functions +// method -// const greet = function(){ -// return 'hello, world'; -// } - -const greet = () => 'hello, world'; - -// const bill = function(products, tax){ -// let total = 0; -// for(let i = 0; i < products.length; i++){ -// total += products[i] + products[i] * tax; -// } -// return total; -// } - -const bill = (products, tax) => { - let total = 0; - for(let i = 0; i < products.length; i++){ - total += products[i] + products[i] * tax; - } - return total; -} - -console.log(greet()); -console.log(bill([10,15,30], 0.2)); \ No newline at end of file +let resultTwo = name.toUpperCase(); +console.log(resultTwo); From ecfa54bf699d7a977a95db1a2d7546406d22b7c9 Mon Sep 17 00:00:00 2001 From: Shaun Date: Fri, 15 Feb 2019 10:06:17 +0000 Subject: [PATCH 028/100] lesson-35 --- chapter_four/sandbox.js | 19 +++++-------------- 1 file changed, 5 insertions(+), 14 deletions(-) diff --git a/chapter_four/sandbox.js b/chapter_four/sandbox.js index 456e50ff..9501bfc0 100644 --- a/chapter_four/sandbox.js +++ b/chapter_four/sandbox.js @@ -1,15 +1,6 @@ -const name = 'shaun'; +// callbacks & forEach +let people = ['mario', 'luigi', 'ryu', 'shaun', 'chun-li']; -// function - -const greet = () => { - return 'hello'; -}; - -let resultOne = greet(); -console.log(resultOne); - -// method - -let resultTwo = name.toUpperCase(); -console.log(resultTwo); +people.forEach(person => { + console.log(`hello ${person}`); +}); From 30c5d52c1224e87af3a31fa3dcea4824b5330b99 Mon Sep 17 00:00:00 2001 From: Shaun Date: Fri, 15 Feb 2019 10:32:07 +0000 Subject: [PATCH 029/100] lesson-35 --- chapter_four/sandbox.js | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/chapter_four/sandbox.js b/chapter_four/sandbox.js index 9501bfc0..407ab4e5 100644 --- a/chapter_four/sandbox.js +++ b/chapter_four/sandbox.js @@ -1,6 +1,12 @@ // callbacks & forEach let people = ['mario', 'luigi', 'ryu', 'shaun', 'chun-li']; -people.forEach(person => { +const logPerson = person => { console.log(`hello ${person}`); -}); +} + +// people.forEach(person => { +// console.log(`hello ${person}`); +// }); + +people.forEach(logPerson); From aac6888973c977f8eac0852cab3786a1019afece Mon Sep 17 00:00:00 2001 From: Shaun Date: Fri, 15 Feb 2019 10:39:54 +0000 Subject: [PATCH 030/100] lesson-38 --- chapter_four/index.html | 2 +- chapter_four/sandbox.js | 27 ++++++++++++++++++--------- 2 files changed, 19 insertions(+), 10 deletions(-) diff --git a/chapter_four/index.html b/chapter_four/index.html index 6ff2be06..f95165e5 100644 --- a/chapter_four/index.html +++ b/chapter_four/index.html @@ -6,7 +6,7 @@ JavaScript -

I am a page title

+

Objects

diff --git a/chapter_four/sandbox.js b/chapter_four/sandbox.js index 407ab4e5..e9ddce44 100644 --- a/chapter_four/sandbox.js +++ b/chapter_four/sandbox.js @@ -1,12 +1,21 @@ -// callbacks & forEach -let people = ['mario', 'luigi', 'ryu', 'shaun', 'chun-li']; +// object literals -const logPerson = person => { - console.log(`hello ${person}`); -} +let user = { + name: 'crystal', + age: 30, + email: 'crystal@thenetninja.co.uk', + location: 'berlin', + blogs: ['why mac & cheese rules', '10 things to make with marmite'] +}; -// people.forEach(person => { -// console.log(`hello ${person}`); -// }); +console.log(user); +console.log(user.age); -people.forEach(logPerson); +user.age = 35; +console.log(user.age); + +console.log(user['name']); +user['name'] = 'chun-li'; +console.log(user['name']); + +console.log(typeof user); From dde0235a636f018d5000e5fb2bef3ad56c759d90 Mon Sep 17 00:00:00 2001 From: Shaun Date: Fri, 15 Feb 2019 10:50:07 +0000 Subject: [PATCH 031/100] lesson-39 --- {chapter_four => chapter_five}/index.html | 0 chapter_five/sandbox.js | 25 +++++++++++++++++++++++ chapter_four/sandbox.js | 21 ------------------- 3 files changed, 25 insertions(+), 21 deletions(-) rename {chapter_four => chapter_five}/index.html (100%) create mode 100644 chapter_five/sandbox.js delete mode 100644 chapter_four/sandbox.js diff --git a/chapter_four/index.html b/chapter_five/index.html similarity index 100% rename from chapter_four/index.html rename to chapter_five/index.html diff --git a/chapter_five/sandbox.js b/chapter_five/sandbox.js new file mode 100644 index 00000000..2b4c60f2 --- /dev/null +++ b/chapter_five/sandbox.js @@ -0,0 +1,25 @@ +// object literals + +let user = { + name: 'crystal', + age: 30, + email: 'crystal@thenetninja.co.uk', + location: 'berlin', + blogs: ['why mac & cheese rules', '10 things to make with marmite'], + login: function(){ + console.log('the user logged in'); + }, + logout: function(){ + console.log('the user logged out'); + }, + logBlogs: function(){ + // access the blogs here + } +}; + +user.login(); +user.logout(); + +const name = 'shaun'; +name.toUpperCase(); + diff --git a/chapter_four/sandbox.js b/chapter_four/sandbox.js deleted file mode 100644 index e9ddce44..00000000 --- a/chapter_four/sandbox.js +++ /dev/null @@ -1,21 +0,0 @@ -// object literals - -let user = { - name: 'crystal', - age: 30, - email: 'crystal@thenetninja.co.uk', - location: 'berlin', - blogs: ['why mac & cheese rules', '10 things to make with marmite'] -}; - -console.log(user); -console.log(user.age); - -user.age = 35; -console.log(user.age); - -console.log(user['name']); -user['name'] = 'chun-li'; -console.log(user['name']); - -console.log(typeof user); From 00e56d472900b4267301623422acfd31200ecd0e Mon Sep 17 00:00:00 2001 From: Shaun Date: Fri, 15 Feb 2019 11:12:25 +0000 Subject: [PATCH 032/100] lesson-40 --- chapter_five/sandbox.js | 19 ++++++++++--------- 1 file changed, 10 insertions(+), 9 deletions(-) diff --git a/chapter_five/sandbox.js b/chapter_five/sandbox.js index 2b4c60f2..ea98487f 100644 --- a/chapter_five/sandbox.js +++ b/chapter_five/sandbox.js @@ -6,20 +6,21 @@ let user = { email: 'crystal@thenetninja.co.uk', location: 'berlin', blogs: ['why mac & cheese rules', '10 things to make with marmite'], - login: function(){ + login(){ console.log('the user logged in'); }, - logout: function(){ + logout(){ console.log('the user logged out'); }, - logBlogs: function(){ + logBlogs(){ // access the blogs here + // console.log(this); + console.log('this user has written these blogs:'); + this.blogs.forEach(blog => { + console.log(blog); + }) } }; -user.login(); -user.logout(); - -const name = 'shaun'; -name.toUpperCase(); - +// console.log(this); +user.logBlogs(); \ No newline at end of file From 85743ade5eaf8c8fd8b62de2ae30487ba3604698 Mon Sep 17 00:00:00 2001 From: Shaun Date: Fri, 15 Feb 2019 11:23:52 +0000 Subject: [PATCH 033/100] lesson-41 --- chapter_five/sandbox.js | 14 +++++++++++--- 1 file changed, 11 insertions(+), 3 deletions(-) diff --git a/chapter_five/sandbox.js b/chapter_five/sandbox.js index ea98487f..41bce7a4 100644 --- a/chapter_five/sandbox.js +++ b/chapter_five/sandbox.js @@ -1,11 +1,19 @@ -// object literals +// const blogs = [ +// {title: 'why mac & cheese rules', likes: 30}, +// {title: '10 things to make with marmite', likes: 50} +// ]; + +// console.log(blogs[0].title); let user = { name: 'crystal', age: 30, email: 'crystal@thenetninja.co.uk', location: 'berlin', - blogs: ['why mac & cheese rules', '10 things to make with marmite'], + blogs: [ + {title: 'why mac & cheese rules', likes: 30}, + {title: '10 things to make with marmite', likes: 50} + ], login(){ console.log('the user logged in'); }, @@ -17,7 +25,7 @@ let user = { // console.log(this); console.log('this user has written these blogs:'); this.blogs.forEach(blog => { - console.log(blog); + console.log(`${blog.title} has ${blog.likes} likes`); }) } }; From 4f6f59ee06361eb2ec798323b00b0e18b7a5df67 Mon Sep 17 00:00:00 2001 From: Shaun Date: Fri, 15 Feb 2019 11:31:31 +0000 Subject: [PATCH 034/100] lesson-42 --- chapter_five/sandbox.js | 47 ++++++++++++++--------------------------- 1 file changed, 16 insertions(+), 31 deletions(-) diff --git a/chapter_five/sandbox.js b/chapter_five/sandbox.js index 41bce7a4..4c98657b 100644 --- a/chapter_five/sandbox.js +++ b/chapter_five/sandbox.js @@ -1,34 +1,19 @@ -// const blogs = [ -// {title: 'why mac & cheese rules', likes: 30}, -// {title: '10 things to make with marmite', likes: 50} -// ]; +// Math object -// console.log(blogs[0].title); +console.log(Math); +console.log(Math.PI); +console.log(Math.E); -let user = { - name: 'crystal', - age: 30, - email: 'crystal@thenetninja.co.uk', - location: 'berlin', - blogs: [ - {title: 'why mac & cheese rules', likes: 30}, - {title: '10 things to make with marmite', likes: 50} - ], - login(){ - console.log('the user logged in'); - }, - logout(){ - console.log('the user logged out'); - }, - logBlogs(){ - // access the blogs here - // console.log(this); - console.log('this user has written these blogs:'); - this.blogs.forEach(blog => { - console.log(`${blog.title} has ${blog.likes} likes`); - }) - } -}; +const area = 7.7; -// console.log(this); -user.logBlogs(); \ No newline at end of file +console.log(Math.round(area)); +console.log(Math.floor(area)); +console.log(Math.ceil(area)); +console.log(Math.trunc(area)); + +// random numbers + +const random = Math.random(); + +console.log(random); +console.log(Math.round(random * 100)); \ No newline at end of file From 57750b1aaec650abe246cdcca71e88fa22776d75 Mon Sep 17 00:00:00 2001 From: Shaun Date: Fri, 15 Feb 2019 11:36:58 +0000 Subject: [PATCH 035/100] lesson-43 --- chapter_five/sandbox.js | 26 ++++++++++++-------------- 1 file changed, 12 insertions(+), 14 deletions(-) diff --git a/chapter_five/sandbox.js b/chapter_five/sandbox.js index 4c98657b..10bc473b 100644 --- a/chapter_five/sandbox.js +++ b/chapter_five/sandbox.js @@ -1,19 +1,17 @@ -// Math object +// primitive values -console.log(Math); -console.log(Math.PI); -console.log(Math.E); +let scoreOne = 50; +let scoreTwo = scoreOne; +console.log(`scoreOne: ${scoreOne}`, `scoreTwo: ${scoreTwo}`); -const area = 7.7; +scoreOne = 100; +console.log(`scoreOne: ${scoreOne}`, `scoreTwo: ${scoreTwo}`); -console.log(Math.round(area)); -console.log(Math.floor(area)); -console.log(Math.ceil(area)); -console.log(Math.trunc(area)); +// reference values -// random numbers +userOne = { name: 'ryu', age: 30 }; +userTwo = userOne; +console.log(userOne, userTwo); -const random = Math.random(); - -console.log(random); -console.log(Math.round(random * 100)); \ No newline at end of file +userOne.name = 'chun-li'; +console.log(userOne, userTwo); \ No newline at end of file From 3cce4ec57a14d025986ced50303a481495ef13c8 Mon Sep 17 00:00:00 2001 From: Shaun Date: Fri, 15 Feb 2019 11:55:17 +0000 Subject: [PATCH 036/100] lesson-46 --- chapter_five/sandbox.js | 17 ----------------- {chapter_five => chapter_six}/index.html | 10 +++++++++- chapter_six/sandbox.js | 12 ++++++++++++ 3 files changed, 21 insertions(+), 18 deletions(-) delete mode 100644 chapter_five/sandbox.js rename {chapter_five => chapter_six}/index.html (58%) create mode 100644 chapter_six/sandbox.js diff --git a/chapter_five/sandbox.js b/chapter_five/sandbox.js deleted file mode 100644 index 10bc473b..00000000 --- a/chapter_five/sandbox.js +++ /dev/null @@ -1,17 +0,0 @@ -// primitive values - -let scoreOne = 50; -let scoreTwo = scoreOne; -console.log(`scoreOne: ${scoreOne}`, `scoreTwo: ${scoreTwo}`); - -scoreOne = 100; -console.log(`scoreOne: ${scoreOne}`, `scoreTwo: ${scoreTwo}`); - -// reference values - -userOne = { name: 'ryu', age: 30 }; -userTwo = userOne; -console.log(userOne, userTwo); - -userOne.name = 'chun-li'; -console.log(userOne, userTwo); \ No newline at end of file diff --git a/chapter_five/index.html b/chapter_six/index.html similarity index 58% rename from chapter_five/index.html rename to chapter_six/index.html index f95165e5..b8c1bd88 100644 --- a/chapter_five/index.html +++ b/chapter_six/index.html @@ -6,7 +6,15 @@ JavaScript -

Objects

+

The DOM

+ +
+

hello, world

+

lorem ipsum

+

this is an error message

+
+ +
this is another eror message
diff --git a/chapter_six/sandbox.js b/chapter_six/sandbox.js new file mode 100644 index 00000000..166b7d6a --- /dev/null +++ b/chapter_six/sandbox.js @@ -0,0 +1,12 @@ +// const para = document.querySelector('p'); +// const para = document.querySelector('.error'); +const para = document.querySelector('div.error'); + +console.log(para); + +// query multiple elements at once +const paras = document.querySelectorAll('p'); +const errors = document.querySelectorAll('.error'); + +console.log(paras, errors); +console.log(paras[1], errors[0]); \ No newline at end of file From fdb0140874671a5002eb75f12a3c5b51b6190a73 Mon Sep 17 00:00:00 2001 From: Shaun Date: Fri, 15 Feb 2019 12:09:14 +0000 Subject: [PATCH 037/100] lesson-47 --- chapter_six/index.html | 2 +- chapter_six/sandbox.js | 21 +++++++++++---------- 2 files changed, 12 insertions(+), 11 deletions(-) diff --git a/chapter_six/index.html b/chapter_six/index.html index b8c1bd88..0f710f4f 100644 --- a/chapter_six/index.html +++ b/chapter_six/index.html @@ -6,7 +6,7 @@ JavaScript -

The DOM

+

The DOM

hello, world

diff --git a/chapter_six/sandbox.js b/chapter_six/sandbox.js index 166b7d6a..724825f6 100644 --- a/chapter_six/sandbox.js +++ b/chapter_six/sandbox.js @@ -1,12 +1,13 @@ -// const para = document.querySelector('p'); -// const para = document.querySelector('.error'); -const para = document.querySelector('div.error'); +// get an element by ID +const title= document.getElementById('page-title'); +console.log(title); -console.log(para); +// get elements by their class name +const errors = document.getElementsByClassName('error'); +console.log(errors); +console.log(errors[0]); -// query multiple elements at once -const paras = document.querySelectorAll('p'); -const errors = document.querySelectorAll('.error'); - -console.log(paras, errors); -console.log(paras[1], errors[0]); \ No newline at end of file +// get elements by their tag name +const paras = document.getElementsByTagName('p'); +console.log(paras); +console.log(paras[1]); \ No newline at end of file From d82d1593c3fd810831b68d5af7931a90780ca269 Mon Sep 17 00:00:00 2001 From: Shaun Date: Fri, 15 Feb 2019 12:24:41 +0000 Subject: [PATCH 038/100] lesson-48 --- chapter_six/index.html | 6 ++++-- chapter_six/sandbox.js | 37 ++++++++++++++++++++++++------------- 2 files changed, 28 insertions(+), 15 deletions(-) diff --git a/chapter_six/index.html b/chapter_six/index.html index 0f710f4f..8fbcbcff 100644 --- a/chapter_six/index.html +++ b/chapter_six/index.html @@ -11,10 +11,12 @@

The DOM

hello, world

lorem ipsum

-

this is an error message

+

this is an error message

-
this is another eror message
+
+

this is the content

+
diff --git a/chapter_six/sandbox.js b/chapter_six/sandbox.js index 724825f6..c9216929 100644 --- a/chapter_six/sandbox.js +++ b/chapter_six/sandbox.js @@ -1,13 +1,24 @@ -// get an element by ID -const title= document.getElementById('page-title'); -console.log(title); - -// get elements by their class name -const errors = document.getElementsByClassName('error'); -console.log(errors); -console.log(errors[0]); - -// get elements by their tag name -const paras = document.getElementsByTagName('p'); -console.log(paras); -console.log(paras[1]); \ No newline at end of file +const para = document.querySelector('p'); + +// console.log(para.innerText); +// para.innerText = 'ninjas are awesome'; + +const paras = document.querySelectorAll('p'); + +// paras.forEach(p => { +// console.log(p.innerText); +// p.innerText = 'new text!'; +// }); + +const content = document.querySelector('.content'); + +// console.log(content.innerHTML); +// content.innerHTML = '

this is a new h2

'; + +// content.innerHTML += '

this is an h2 added to the content

'; + +const people = ['mario', 'luigi', 'yoshi']; + +people.forEach(person => { + content.innerHTML += `

${person}

`; +}); \ No newline at end of file From 458d0f3620888b1dbdfa5c5b8976ec2230a8a17c Mon Sep 17 00:00:00 2001 From: Shaun Date: Fri, 15 Feb 2019 12:43:28 +0000 Subject: [PATCH 039/100] lesson-49 --- chapter_six/index.html | 12 +++--------- chapter_six/sandbox.js | 29 ++++++++--------------------- 2 files changed, 11 insertions(+), 30 deletions(-) diff --git a/chapter_six/index.html b/chapter_six/index.html index 8fbcbcff..a6865e52 100644 --- a/chapter_six/index.html +++ b/chapter_six/index.html @@ -6,17 +6,11 @@ JavaScript -

The DOM

+

The DOM

-
-

hello, world

-

lorem ipsum

-

this is an error message

-
+ Link to somewhere cool... -
-

this is the content

-
+

lorem ipsum

diff --git a/chapter_six/sandbox.js b/chapter_six/sandbox.js index c9216929..ccf4c487 100644 --- a/chapter_six/sandbox.js +++ b/chapter_six/sandbox.js @@ -1,24 +1,11 @@ -const para = document.querySelector('p'); +const link = document.querySelector('a'); -// console.log(para.innerText); -// para.innerText = 'ninjas are awesome'; +console.log(link.getAttribute('href')); +link.setAttribute('href', 'https://www.thenetninja.co.uk'); +link.textContent = 'The Net Ninja webiste'; -const paras = document.querySelectorAll('p'); +const mssg = document.querySelector('p'); -// paras.forEach(p => { -// console.log(p.innerText); -// p.innerText = 'new text!'; -// }); - -const content = document.querySelector('.content'); - -// console.log(content.innerHTML); -// content.innerHTML = '

this is a new h2

'; - -// content.innerHTML += '

this is an h2 added to the content

'; - -const people = ['mario', 'luigi', 'yoshi']; - -people.forEach(person => { - content.innerHTML += `

${person}

`; -}); \ No newline at end of file +console.log(mssg.getAttribute('class')); +mssg.setAttribute('class', 'success'); +mssg.setAttribute('style', 'color: green'); \ No newline at end of file From 910990a263d99f5e8aa225d7065823cf688c595c Mon Sep 17 00:00:00 2001 From: Shaun Date: Fri, 15 Feb 2019 13:01:27 +0000 Subject: [PATCH 040/100] lesson-50 --- chapter_six/index.html | 6 +----- chapter_six/sandbox.js | 16 ++++++++-------- 2 files changed, 9 insertions(+), 13 deletions(-) diff --git a/chapter_six/index.html b/chapter_six/index.html index a6865e52..50827b53 100644 --- a/chapter_six/index.html +++ b/chapter_six/index.html @@ -6,11 +6,7 @@ JavaScript -

The DOM

- - Link to somewhere cool... - -

lorem ipsum

+

The DOM

diff --git a/chapter_six/sandbox.js b/chapter_six/sandbox.js index ccf4c487..30a53881 100644 --- a/chapter_six/sandbox.js +++ b/chapter_six/sandbox.js @@ -1,11 +1,11 @@ -const link = document.querySelector('a'); +const title = document.querySelector('h1'); -console.log(link.getAttribute('href')); -link.setAttribute('href', 'https://www.thenetninja.co.uk'); -link.textContent = 'The Net Ninja webiste'; +// title.setAttribute('style', 'margin: 50px;'); -const mssg = document.querySelector('p'); +console.log(title.style); +console.log(title.style.color); -console.log(mssg.getAttribute('class')); -mssg.setAttribute('class', 'success'); -mssg.setAttribute('style', 'color: green'); \ No newline at end of file +title.style.margin = '50px'; +title.style.color = 'crimson'; +title.style.fontSize = '60px'; +title.style.margin = ''; \ No newline at end of file From 0ed709b76cd2a92aee7d6118bd3d07d188be6c8f Mon Sep 17 00:00:00 2001 From: Shaun Date: Fri, 15 Feb 2019 15:25:20 +0000 Subject: [PATCH 041/100] lesson-51 --- chapter_six/index.html | 16 +++++++++++++++- chapter_six/sandbox.js | 20 ++++++++++++-------- chapter_six/styles.css | 11 +++++++++++ 3 files changed, 38 insertions(+), 9 deletions(-) create mode 100644 chapter_six/styles.css diff --git a/chapter_six/index.html b/chapter_six/index.html index 50827b53..9eab55db 100644 --- a/chapter_six/index.html +++ b/chapter_six/index.html @@ -3,10 +3,24 @@ + JavaScript -

The DOM

+

The DOM

+ + + +

lorem error ipsum

+

lorem success ipsum

+

lorem ipsum lorem

+

lorem ipsum success

+

error lorem ipsum

+

lorem ipsum lorem

+

lorem ipsum error

+

success lorem ipsum

diff --git a/chapter_six/sandbox.js b/chapter_six/sandbox.js index 30a53881..32464dab 100644 --- a/chapter_six/sandbox.js +++ b/chapter_six/sandbox.js @@ -1,11 +1,15 @@ -const title = document.querySelector('h1'); +// const content = document.querySelector('p'); -// title.setAttribute('style', 'margin: 50px;'); +// console.log(content.classList); +// content.classList.add('error'); +// content.classList.remove('success'); -console.log(title.style); -console.log(title.style.color); +const paras = document.querySelectorAll('p'); -title.style.margin = '50px'; -title.style.color = 'crimson'; -title.style.fontSize = '60px'; -title.style.margin = ''; \ No newline at end of file +paras.forEach(p => { + if(p.textContent.includes('error')){ + p.classList.add('error'); + } else if(p.textContent.includes('success')) { + p.classList.add('success'); + } +}) \ No newline at end of file diff --git a/chapter_six/styles.css b/chapter_six/styles.css new file mode 100644 index 00000000..e801b492 --- /dev/null +++ b/chapter_six/styles.css @@ -0,0 +1,11 @@ +.error{ + padding: 10px; + color: crimson; + border: 1px dotted crimson; +} + +.success{ + padding: 10px; + color: limegreen; + border: 1px dotted limegreen; +} \ No newline at end of file From aeb459f213f672e3373b2a53c795fd269042cc6b Mon Sep 17 00:00:00 2001 From: Shaun Date: Fri, 15 Feb 2019 15:55:31 +0000 Subject: [PATCH 042/100] lesson-52 --- chapter_six/index.html | 21 ++++++++------------- chapter_six/sandbox.js | 33 +++++++++++++++++++++------------ chapter_six/styles.css | 11 ----------- 3 files changed, 29 insertions(+), 36 deletions(-) delete mode 100644 chapter_six/styles.css diff --git a/chapter_six/index.html b/chapter_six/index.html index 9eab55db..ae357302 100644 --- a/chapter_six/index.html +++ b/chapter_six/index.html @@ -3,24 +3,19 @@ - JavaScript

The DOM

- - -

lorem error ipsum

-

lorem success ipsum

-

lorem ipsum lorem

-

lorem ipsum success

-

error lorem ipsum

-

lorem ipsum lorem

-

lorem ipsum error

-

success lorem ipsum

+
+

new sibling

+

article title

+

Lorem ipsum dolor sit amet consectetur adipisicing elit.

+

Lorem ipsum dolor sit amet consectetur adipisicing elit.

+

Lorem ipsum dolor sit amet consectetur adipisicing elit.

+
written by the net ninja
+
diff --git a/chapter_six/sandbox.js b/chapter_six/sandbox.js index 32464dab..35ad802d 100644 --- a/chapter_six/sandbox.js +++ b/chapter_six/sandbox.js @@ -1,15 +1,24 @@ -// const content = document.querySelector('p'); +const article = document.querySelector('article'); + +// console.log(article.children); +// console.log(Array.from(article.children)); +// console.log(article.children); + +Array.from(article.children).forEach(child => { + child.classList.add('article-element'); +}); + +const title = document.querySelector('h2'); + +console.log(title.parentElement); +console.log(title.parentElement.parentElement); +console.log(title.nextElementSibling); +console.log(title.previousElementSibling); + +// chaining +console.log(title.nextElementSibling.parentElement.children); + + -// console.log(content.classList); -// content.classList.add('error'); -// content.classList.remove('success'); -const paras = document.querySelectorAll('p'); -paras.forEach(p => { - if(p.textContent.includes('error')){ - p.classList.add('error'); - } else if(p.textContent.includes('success')) { - p.classList.add('success'); - } -}) \ No newline at end of file diff --git a/chapter_six/styles.css b/chapter_six/styles.css deleted file mode 100644 index e801b492..00000000 --- a/chapter_six/styles.css +++ /dev/null @@ -1,11 +0,0 @@ -.error{ - padding: 10px; - color: crimson; - border: 1px dotted crimson; -} - -.success{ - padding: 10px; - color: limegreen; - border: 1px dotted limegreen; -} \ No newline at end of file From 3e9e9b73dd496325e0c73939cbaeff42928d938f Mon Sep 17 00:00:00 2001 From: Shaun Date: Fri, 15 Feb 2019 17:10:11 +0000 Subject: [PATCH 043/100] lesson-53 --- chapter_six/index.html | 27 ++++++++++++++++++--------- chapter_six/sandbox.js | 34 ++++++++++++++++------------------ 2 files changed, 34 insertions(+), 27 deletions(-) diff --git a/chapter_six/index.html b/chapter_six/index.html index ae357302..905330b7 100644 --- a/chapter_six/index.html +++ b/chapter_six/index.html @@ -4,18 +4,27 @@ JavaScript + -

The DOM

-
-

new sibling

-

article title

-

Lorem ipsum dolor sit amet consectetur adipisicing elit.

-

Lorem ipsum dolor sit amet consectetur adipisicing elit.

-

Lorem ipsum dolor sit amet consectetur adipisicing elit.

-
written by the net ninja
-
+
    +
  • buy milk
    • +
  • read a book
    • +
  • play the guitar
    • +
  • pay the bills :(
    • +
+ + diff --git a/chapter_six/sandbox.js b/chapter_six/sandbox.js index 35ad802d..4ca90c2c 100644 --- a/chapter_six/sandbox.js +++ b/chapter_six/sandbox.js @@ -1,23 +1,21 @@ -const article = document.querySelector('article'); - -// console.log(article.children); -// console.log(Array.from(article.children)); -// console.log(article.children); - -Array.from(article.children).forEach(child => { - child.classList.add('article-element'); +// const button = document.querySelector('button'); + +// button.addEventListener('click', () => { +// console.log('you clicked me'); +// }); + +const items = document.querySelectorAll('li'); + +items.forEach(item => { + item.addEventListener('click', e => { + // console.log('item clicked'); + // console.log(e); + // console.log(e.target); + // console.log(item); + e.target.style.textDecoration = 'line-through'; + }); }); -const title = document.querySelector('h2'); - -console.log(title.parentElement); -console.log(title.parentElement.parentElement); -console.log(title.nextElementSibling); -console.log(title.previousElementSibling); - -// chaining -console.log(title.nextElementSibling.parentElement.children); - From 3cb4c5047b7442183f0cacf49d2f8809545e1b0a Mon Sep 17 00:00:00 2001 From: Shaun Date: Fri, 15 Feb 2019 17:33:03 +0000 Subject: [PATCH 044/100] lesson-54 --- chapter_six/index.html | 2 +- chapter_six/sandbox.js | 22 ++++++++++++---------- 2 files changed, 13 insertions(+), 11 deletions(-) diff --git a/chapter_six/index.html b/chapter_six/index.html index 905330b7..5025c61c 100644 --- a/chapter_six/index.html +++ b/chapter_six/index.html @@ -24,7 +24,7 @@
  • pay the bills :(
    • - + diff --git a/chapter_six/sandbox.js b/chapter_six/sandbox.js index 4ca90c2c..e15f0c98 100644 --- a/chapter_six/sandbox.js +++ b/chapter_six/sandbox.js @@ -1,22 +1,24 @@ -// const button = document.querySelector('button'); +const ul = document.querySelector('ul'); +// ul.remove(); -// button.addEventListener('click', () => { -// console.log('you clicked me'); -// }); +const button = document.querySelector('button'); + +button.addEventListener('click', () => { + const li = document.createElement('li'); + li.textContent = 'something new to do'; + //ul.appendChild(li); + ul.prepend(li); +}); const items = document.querySelectorAll('li'); items.forEach(item => { item.addEventListener('click', e => { - // console.log('item clicked'); - // console.log(e); - // console.log(e.target); - // console.log(item); - e.target.style.textDecoration = 'line-through'; + // e.target.style.textDecoration = 'line-through'; + e.target.remove(); }); }); - From 1b372195a2d89bc46396908cc60ddc080ec751ba Mon Sep 17 00:00:00 2001 From: Shaun Date: Fri, 15 Feb 2019 17:43:57 +0000 Subject: [PATCH 045/100] lesson-55 --- chapter_six/sandbox.js | 24 +++++++++++++++--------- 1 file changed, 15 insertions(+), 9 deletions(-) diff --git a/chapter_six/sandbox.js b/chapter_six/sandbox.js index e15f0c98..fc5b338f 100644 --- a/chapter_six/sandbox.js +++ b/chapter_six/sandbox.js @@ -1,22 +1,28 @@ const ul = document.querySelector('ul'); -// ul.remove(); - const button = document.querySelector('button'); button.addEventListener('click', () => { const li = document.createElement('li'); li.textContent = 'something new to do'; - //ul.appendChild(li); - ul.prepend(li); + ul.appendChild(li); }); -const items = document.querySelectorAll('li'); +// const items = document.querySelectorAll('li'); + +// items.forEach(item => { +// item.addEventListener('click', e => { +// console.log('event in LI'); +// e.stopPropagation(); +// e.target.remove(); +// }); +// }); -items.forEach(item => { - item.addEventListener('click', e => { - // e.target.style.textDecoration = 'line-through'; +ul.addEventListener('click', e => { + // console.log('event in UL'); + console.log(e.target, e); + if(e.target.tagName === 'LI'){ e.target.remove(); - }); + } }); From 9684721d7922da198ebc1ab5a0566d8205fbdcc1 Mon Sep 17 00:00:00 2001 From: Shaun Date: Fri, 15 Feb 2019 18:23:59 +0000 Subject: [PATCH 046/100] lesson-56 --- chapter_six/index.html | 36 +++++++++++++++++++++++------------- chapter_six/sandbox.js | 35 +++++++++++------------------------ 2 files changed, 34 insertions(+), 37 deletions(-) diff --git a/chapter_six/index.html b/chapter_six/index.html index 5025c61c..19a5461e 100644 --- a/chapter_six/index.html +++ b/chapter_six/index.html @@ -5,26 +5,36 @@ JavaScript -
      -
    • buy milk
      • -
    • read a book
      • -
    • play the guitar
      • -
    • pay the bills :(
      • -
    +

    Lorem ipsum dolor sit, amet consectetur adipisicing elit.

    +
    move the mouse around this box
    - +

    Lorem ipsum dolor sit amet consectetur, adipisicing elit.

    +

    Lorem ipsum dolor sit amet consectetur, adipisicing elit.

    +

    Lorem ipsum dolor sit amet consectetur, adipisicing elit.

    +

    Lorem ipsum dolor sit amet consectetur, adipisicing elit.

    +

    Lorem ipsum dolor sit amet consectetur, adipisicing elit.

    +

    Lorem ipsum dolor sit amet consectetur, adipisicing elit.

    +

    Lorem ipsum dolor sit amet consectetur, adipisicing elit.

    +

    Lorem ipsum dolor sit amet consectetur, adipisicing elit.

    +

    Lorem ipsum dolor sit amet consectetur, adipisicing elit.

    +

    Lorem ipsum dolor sit amet consectetur, adipisicing elit.

    +

    Lorem ipsum dolor sit amet consectetur, adipisicing elit.

    +

    Lorem ipsum dolor sit amet consectetur, adipisicing elit.

    +

    Lorem ipsum dolor sit amet consectetur, adipisicing elit.

    +

    Lorem ipsum dolor sit amet consectetur, adipisicing elit.

    +

    Lorem ipsum dolor sit amet consectetur, adipisicing elit.

    diff --git a/chapter_six/sandbox.js b/chapter_six/sandbox.js index fc5b338f..d4f63858 100644 --- a/chapter_six/sandbox.js +++ b/chapter_six/sandbox.js @@ -1,30 +1,17 @@ -const ul = document.querySelector('ul'); -const button = document.querySelector('button'); +const copy = document.querySelector('.copy-me'); -button.addEventListener('click', () => { - const li = document.createElement('li'); - li.textContent = 'something new to do'; - ul.appendChild(li); +copy.addEventListener('copy', () => { + console.log('OI! my content is copyrighted!!'); }); -// const items = document.querySelectorAll('li'); +const box = document.querySelector('.box'); -// items.forEach(item => { -// item.addEventListener('click', e => { -// console.log('event in LI'); -// e.stopPropagation(); -// e.target.remove(); -// }); -// }); - -ul.addEventListener('click', e => { - // console.log('event in UL'); - console.log(e.target, e); - if(e.target.tagName === 'LI'){ - e.target.remove(); - } +box.addEventListener('mousemove', e => { + // console.log(e); + // console.log(e.offsetX, e.offsetY); + box.textContent = `x pos - ${e.offsetX} y pos - ${e.offsetY}`; }); - - - +document.addEventListener('wheel', e => { + console.log(e.pageX, e.pageY); +}); \ No newline at end of file From 45f133a3281a12cf9c056ac1b86e894350be6142 Mon Sep 17 00:00:00 2001 From: Shaun Date: Fri, 15 Feb 2019 18:40:40 +0000 Subject: [PATCH 047/100] lesson-57 --- chapter_six/index.html | 40 +++++++++++++++------------------------ chapter_six/sandbox.js | 24 +++++++++++------------ chapter_six/styles.css | 43 ++++++++++++++++++++++++++++++++++++++++++ 3 files changed, 70 insertions(+), 37 deletions(-) create mode 100644 chapter_six/styles.css diff --git a/chapter_six/index.html b/chapter_six/index.html index 19a5461e..2522b79b 100644 --- a/chapter_six/index.html +++ b/chapter_six/index.html @@ -3,39 +3,29 @@ + JavaScript -

    Lorem ipsum dolor sit, amet consectetur adipisicing elit.

    -
    move the mouse around this box
    + -

    Lorem ipsum dolor sit amet consectetur, adipisicing elit.

    -

    Lorem ipsum dolor sit amet consectetur, adipisicing elit.

    -

    Lorem ipsum dolor sit amet consectetur, adipisicing elit.

    -

    Lorem ipsum dolor sit amet consectetur, adipisicing elit.

    -

    Lorem ipsum dolor sit amet consectetur, adipisicing elit.

    -

    Lorem ipsum dolor sit amet consectetur, adipisicing elit.

    -

    Lorem ipsum dolor sit amet consectetur, adipisicing elit.

    -

    Lorem ipsum dolor sit amet consectetur, adipisicing elit.

    -

    Lorem ipsum dolor sit amet consectetur, adipisicing elit.

    -

    Lorem ipsum dolor sit amet consectetur, adipisicing elit.

    -

    Lorem ipsum dolor sit amet consectetur, adipisicing elit.

    -

    Lorem ipsum dolor sit amet consectetur, adipisicing elit.

    -

    Lorem ipsum dolor sit amet consectetur, adipisicing elit.

    -

    Lorem ipsum dolor sit amet consectetur, adipisicing elit.

    -

    Lorem ipsum dolor sit amet consectetur, adipisicing elit.

    +
    +
    +
    x
    +
    +

    NINJA SALE!!

    +

    50% off all ninja clothing. don't miss out!

    + view clothing +
    +
    + +
    + \ No newline at end of file diff --git a/chapter_six/sandbox.js b/chapter_six/sandbox.js index d4f63858..6e8cd3a1 100644 --- a/chapter_six/sandbox.js +++ b/chapter_six/sandbox.js @@ -1,17 +1,17 @@ -const copy = document.querySelector('.copy-me'); +const button = document.querySelector('button'); +const popup = document.querySelector('.popup-wrapper'); +const close = document.querySelector('.popup-close'); -copy.addEventListener('copy', () => { - console.log('OI! my content is copyrighted!!'); +button.addEventListener('click', () => { + popup.style.display = 'block'; }); -const box = document.querySelector('.box'); - -box.addEventListener('mousemove', e => { - // console.log(e); - // console.log(e.offsetX, e.offsetY); - box.textContent = `x pos - ${e.offsetX} y pos - ${e.offsetY}`; +close.addEventListener('click', () => { + popup.style.display = 'none'; }); -document.addEventListener('wheel', e => { - console.log(e.pageX, e.pageY); -}); \ No newline at end of file +popup.addEventListener('click', (e) => { + if(e.target.className === 'popup-wrapper'){ + popup.style.display = 'none'; + } +}); diff --git a/chapter_six/styles.css b/chapter_six/styles.css new file mode 100644 index 00000000..ed9755b1 --- /dev/null +++ b/chapter_six/styles.css @@ -0,0 +1,43 @@ +button{ + display: block; + margin: 20px auto; + background: crimson; + color: white; + border: 0; + padding: 6px 10px; +} + +.popup-wrapper{ + background: rgba(0,0,0,0.5); + position: fixed; + top: 0; + left: 0; + width: 100%; + height: 100%; + display: none; +} + +.popup{ + font-family: arial; + text-align: center; + width: 100%; + max-width: 300px; + margin: 10% auto; + padding: 20px; + background: white; + position: relative; +} + +.popup a{ + background: crimson; + color: white; + text-decoration: none; + padding: 6px 10px; +} + +.popup-close{ + position: absolute; + top: 5px; + right: 8px; + cursor: pointer; +} \ No newline at end of file From 26dcf8fdc56f009c985ae6d2fa2b15d233e0320b Mon Sep 17 00:00:00 2001 From: Shaun Date: Sat, 16 Feb 2019 09:45:54 +0000 Subject: [PATCH 048/100] lesson-59 --- chapter_seven/index.html | 33 ++++++++++++++++++++++++++++++ chapter_seven/sandbox.js | 9 +++++++++ chapter_six/index.html | 31 ----------------------------- chapter_six/sandbox.js | 17 ---------------- chapter_six/styles.css | 43 ---------------------------------------- 5 files changed, 42 insertions(+), 91 deletions(-) create mode 100644 chapter_seven/index.html create mode 100644 chapter_seven/sandbox.js delete mode 100644 chapter_six/index.html delete mode 100644 chapter_six/sandbox.js delete mode 100644 chapter_six/styles.css diff --git a/chapter_seven/index.html b/chapter_seven/index.html new file mode 100644 index 00000000..cebd825f --- /dev/null +++ b/chapter_seven/index.html @@ -0,0 +1,33 @@ + + + + + + JavaScript + + + + + + + + + \ No newline at end of file diff --git a/chapter_seven/sandbox.js b/chapter_seven/sandbox.js new file mode 100644 index 00000000..58cb8de7 --- /dev/null +++ b/chapter_seven/sandbox.js @@ -0,0 +1,9 @@ +const form = document.querySelector('.signup-form'); +// const username = document.querySelector('#username'); + +form.addEventListener('submit', e => { + e.preventDefault(); + // console.log('form submitted'); + // console.log(username.value); + console.log(form.username.value); +}); \ No newline at end of file diff --git a/chapter_six/index.html b/chapter_six/index.html deleted file mode 100644 index 2522b79b..00000000 --- a/chapter_six/index.html +++ /dev/null @@ -1,31 +0,0 @@ - - - - - - - JavaScript - - - - - - -
    - -
    -
    x
    -
    -

    NINJA SALE!!

    -

    50% off all ninja clothing. don't miss out!

    - view clothing -
    -
    - -
    - - - - \ No newline at end of file diff --git a/chapter_six/sandbox.js b/chapter_six/sandbox.js deleted file mode 100644 index 6e8cd3a1..00000000 --- a/chapter_six/sandbox.js +++ /dev/null @@ -1,17 +0,0 @@ -const button = document.querySelector('button'); -const popup = document.querySelector('.popup-wrapper'); -const close = document.querySelector('.popup-close'); - -button.addEventListener('click', () => { - popup.style.display = 'block'; -}); - -close.addEventListener('click', () => { - popup.style.display = 'none'; -}); - -popup.addEventListener('click', (e) => { - if(e.target.className === 'popup-wrapper'){ - popup.style.display = 'none'; - } -}); diff --git a/chapter_six/styles.css b/chapter_six/styles.css deleted file mode 100644 index ed9755b1..00000000 --- a/chapter_six/styles.css +++ /dev/null @@ -1,43 +0,0 @@ -button{ - display: block; - margin: 20px auto; - background: crimson; - color: white; - border: 0; - padding: 6px 10px; -} - -.popup-wrapper{ - background: rgba(0,0,0,0.5); - position: fixed; - top: 0; - left: 0; - width: 100%; - height: 100%; - display: none; -} - -.popup{ - font-family: arial; - text-align: center; - width: 100%; - max-width: 300px; - margin: 10% auto; - padding: 20px; - background: white; - position: relative; -} - -.popup a{ - background: crimson; - color: white; - text-decoration: none; - padding: 6px 10px; -} - -.popup-close{ - position: absolute; - top: 5px; - right: 8px; - cursor: pointer; -} \ No newline at end of file From c83cd9afc24e193cfd12a80d8495036b6951ddc5 Mon Sep 17 00:00:00 2001 From: Shaun Date: Sat, 16 Feb 2019 09:58:49 +0000 Subject: [PATCH 049/100] lesson-61 --- chapter_seven/sandbox.js | 22 ++++++++++++++++++---- 1 file changed, 18 insertions(+), 4 deletions(-) diff --git a/chapter_seven/sandbox.js b/chapter_seven/sandbox.js index 58cb8de7..69da7661 100644 --- a/chapter_seven/sandbox.js +++ b/chapter_seven/sandbox.js @@ -1,9 +1,23 @@ const form = document.querySelector('.signup-form'); -// const username = document.querySelector('#username'); form.addEventListener('submit', e => { e.preventDefault(); - // console.log('form submitted'); - // console.log(username.value); console.log(form.username.value); -}); \ No newline at end of file +}); + +// testing RegEx + +const username = 'shaunyp'; +const pattern = /^[a-z]{6,}$/; + +// let result = pattern.test(username); + +// if(result){ +// console.log('regex test passed :)'); +// } else { +// console.log('regex test failed :('); +// } + +let result = username.search(pattern); + +console.log(result); \ No newline at end of file From 522f7e2b3be11af54519995fc6b7c140834ab23d Mon Sep 17 00:00:00 2001 From: Shaun Date: Sat, 16 Feb 2019 10:20:16 +0000 Subject: [PATCH 050/100] lesson-62 --- chapter_seven/index.html | 1 + chapter_seven/sandbox.js | 28 ++++++++++------------------ 2 files changed, 11 insertions(+), 18 deletions(-) diff --git a/chapter_seven/index.html b/chapter_seven/index.html index cebd825f..c77b3c50 100644 --- a/chapter_seven/index.html +++ b/chapter_seven/index.html @@ -26,6 +26,7 @@ diff --git a/chapter_seven/sandbox.js b/chapter_seven/sandbox.js index 69da7661..62aaa3d8 100644 --- a/chapter_seven/sandbox.js +++ b/chapter_seven/sandbox.js @@ -1,23 +1,15 @@ const form = document.querySelector('.signup-form'); +const feedback = document.querySelector('.feedback'); form.addEventListener('submit', e => { e.preventDefault(); - console.log(form.username.value); + + const username = form.username.value; + const usernamePattern = /^[a-zA-Z]{6,12}$/; + + if(usernamePattern.test(username)){ + feedback.textContent = 'that username is valid!' + } else { + feedback.textContent = 'username must contain only letters & be between 6 & 12 characters'; + } }); - -// testing RegEx - -const username = 'shaunyp'; -const pattern = /^[a-z]{6,}$/; - -// let result = pattern.test(username); - -// if(result){ -// console.log('regex test passed :)'); -// } else { -// console.log('regex test failed :('); -// } - -let result = username.search(pattern); - -console.log(result); \ No newline at end of file From 54edca10cb599adcfa8c840b0feb407fee7f54dd Mon Sep 17 00:00:00 2001 From: Shaun Date: Sat, 16 Feb 2019 10:33:27 +0000 Subject: [PATCH 051/100] lesson-63 --- chapter_seven/index.html | 6 ++++++ chapter_seven/sandbox.js | 17 +++++++++++++++-- 2 files changed, 21 insertions(+), 2 deletions(-) diff --git a/chapter_seven/index.html b/chapter_seven/index.html index c77b3c50..469934a0 100644 --- a/chapter_seven/index.html +++ b/chapter_seven/index.html @@ -19,6 +19,12 @@ margin: 10px auto; padding: 4px; } + .success{ + border: 2px solid limegreen; + } + .error{ + border: 2px solid crimson; + } diff --git a/chapter_seven/sandbox.js b/chapter_seven/sandbox.js index 62aaa3d8..d5e19e5d 100644 --- a/chapter_seven/sandbox.js +++ b/chapter_seven/sandbox.js @@ -1,11 +1,12 @@ const form = document.querySelector('.signup-form'); const feedback = document.querySelector('.feedback'); +const usernamePattern = /^[a-zA-Z]{6,12}$/; +// validation form.addEventListener('submit', e => { e.preventDefault(); - + const username = form.username.value; - const usernamePattern = /^[a-zA-Z]{6,12}$/; if(usernamePattern.test(username)){ feedback.textContent = 'that username is valid!' @@ -13,3 +14,15 @@ form.addEventListener('submit', e => { feedback.textContent = 'username must contain only letters & be between 6 & 12 characters'; } }); + +// live feedback +form.username.addEventListener('keyup', e => { + // console.log(e.target.value, form.username.value); + if(usernamePattern.test(e.target.value)){ + //console.log('passed'); + form.username.setAttribute('class', 'success'); + } else { + //console.log('failed'); + form.username.setAttribute('class', 'error'); + } +}) From 3ad28406b0568a9173af482bafde4bcbc5fef161 Mon Sep 17 00:00:00 2001 From: Shaun Date: Sat, 16 Feb 2019 18:36:14 +0000 Subject: [PATCH 052/100] lesson-65 --- chapter_seven/index.html | 40 ------------------- chapter_seven/sandbox.js => ninja_quiz/app.js | 0 ninja_quiz/index.html | 15 +++++++ 3 files changed, 15 insertions(+), 40 deletions(-) delete mode 100644 chapter_seven/index.html rename chapter_seven/sandbox.js => ninja_quiz/app.js (100%) create mode 100644 ninja_quiz/index.html diff --git a/chapter_seven/index.html b/chapter_seven/index.html deleted file mode 100644 index 469934a0..00000000 --- a/chapter_seven/index.html +++ /dev/null @@ -1,40 +0,0 @@ - - - - - - JavaScript - - - - - - - - - \ No newline at end of file diff --git a/chapter_seven/sandbox.js b/ninja_quiz/app.js similarity index 100% rename from chapter_seven/sandbox.js rename to ninja_quiz/app.js diff --git a/ninja_quiz/index.html b/ninja_quiz/index.html new file mode 100644 index 00000000..011d8f87 --- /dev/null +++ b/ninja_quiz/index.html @@ -0,0 +1,15 @@ + + + + + + Ninja Quiz + + + + + + + + + \ No newline at end of file From 6f6144c8fa1433e4df5ab6a9142720f471712f9f Mon Sep 17 00:00:00 2001 From: Shaun Date: Sat, 16 Feb 2019 18:45:15 +0000 Subject: [PATCH 053/100] lesson-65 --- ninja_quiz/index.html | 23 ++++++++++++++++++++++- 1 file changed, 22 insertions(+), 1 deletion(-) diff --git a/ninja_quiz/index.html b/ninja_quiz/index.html index 011d8f87..71845024 100644 --- a/ninja_quiz/index.html +++ b/ninja_quiz/index.html @@ -8,7 +8,28 @@ - + + +
    +

    hello, world

    +

    hello, world

    +
    hello, world
    +
    From eec1d7a3369a78941ef09e117d6c4d13c7b0c145 Mon Sep 17 00:00:00 2001 From: Shaun Date: Sun, 17 Feb 2019 08:19:15 +0000 Subject: [PATCH 054/100] lesson-65 --- ninja_quiz/app.js | 28 ---------------------------- 1 file changed, 28 deletions(-) diff --git a/ninja_quiz/app.js b/ninja_quiz/app.js index d5e19e5d..e69de29b 100644 --- a/ninja_quiz/app.js +++ b/ninja_quiz/app.js @@ -1,28 +0,0 @@ -const form = document.querySelector('.signup-form'); -const feedback = document.querySelector('.feedback'); -const usernamePattern = /^[a-zA-Z]{6,12}$/; - -// validation -form.addEventListener('submit', e => { - e.preventDefault(); - - const username = form.username.value; - - if(usernamePattern.test(username)){ - feedback.textContent = 'that username is valid!' - } else { - feedback.textContent = 'username must contain only letters & be between 6 & 12 characters'; - } -}); - -// live feedback -form.username.addEventListener('keyup', e => { - // console.log(e.target.value, form.username.value); - if(usernamePattern.test(e.target.value)){ - //console.log('passed'); - form.username.setAttribute('class', 'success'); - } else { - //console.log('failed'); - form.username.setAttribute('class', 'error'); - } -}) From 880b11a31b3589644fb579e5f7403023d7ce79ff Mon Sep 17 00:00:00 2001 From: Shaun Date: Sun, 17 Feb 2019 08:29:23 +0000 Subject: [PATCH 055/100] lesson-66 --- ninja_quiz/index.html | 80 +++++++++++++++++++++++++++++++++---------- 1 file changed, 61 insertions(+), 19 deletions(-) diff --git a/ninja_quiz/index.html b/ninja_quiz/index.html index 71845024..8990cfd9 100644 --- a/ninja_quiz/index.html +++ b/ninja_quiz/index.html @@ -8,27 +8,69 @@ - +
    + + +
    +
    +

    On with the questions...

    -
    -

    hello, world

    -

    hello, world

    -
    hello, world
    +
    +
    +

    1. How do you give a ninja directions?

    +
    + + +
    +
    + + +
    +
    +
    +

    2. If a ninja has 3 apples, then gives one to Mario & one to Yoshi, how many apples does the ninja have left?

    +
    + + +
    +
    + + +
    +
    +
    +

    3. How do you know when you've met a ninja?

    +
    + + +
    +
    + + +
    +
    +
    +

    4. What's a ninja's favourite array method?

    +
    + + +
    +
    + + +
    +
    +
    + +
    +
    + +
    From 9fdd0b1a249ca6966ca0b260deda28233d39fcde Mon Sep 17 00:00:00 2001 From: Shaun Date: Sun, 17 Feb 2019 08:41:24 +0000 Subject: [PATCH 056/100] lesson-67 --- ninja_quiz/app.js | 20 ++++++++++++++++++++ 1 file changed, 20 insertions(+) diff --git a/ninja_quiz/app.js b/ninja_quiz/app.js index e69de29b..9fda4d83 100644 --- a/ninja_quiz/app.js +++ b/ninja_quiz/app.js @@ -0,0 +1,20 @@ +const correctAnswers = ['B', 'B', 'B', 'B']; +const form = document.querySelector('.quiz-form'); + +form.addEventListener('submit', e => { + e.preventDefault(); + + let score = 0; + const userAnswers = [form.q1.value, form.q2.value, form.q3.value, form.q4.value]; + + // check the answers + userAnswers.forEach((answer, index) => { + if (answer === correctAnswers[index]){ + score += 25; + } + }); + + // log the score to console + console.log(score); + +}); From 0a92c5d3bd6c260baa8cbaea9e2b849a8e288b4f Mon Sep 17 00:00:00 2001 From: Shaun Date: Sun, 17 Feb 2019 08:43:16 +0000 Subject: [PATCH 057/100] lesson-68 --- ninja_quiz/app.js | 6 ++++-- ninja_quiz/index.html | 7 +++++++ 2 files changed, 11 insertions(+), 2 deletions(-) diff --git a/ninja_quiz/app.js b/ninja_quiz/app.js index 9fda4d83..aacfbf94 100644 --- a/ninja_quiz/app.js +++ b/ninja_quiz/app.js @@ -1,5 +1,6 @@ const correctAnswers = ['B', 'B', 'B', 'B']; const form = document.querySelector('.quiz-form'); +const result = document.querySelector('.result'); form.addEventListener('submit', e => { e.preventDefault(); @@ -14,7 +15,8 @@ form.addEventListener('submit', e => { } }); - // log the score to console - console.log(score); + // show the result + result.querySelector('span').textContent = `${score}%`; + result.classList.remove('d-none'); }); diff --git a/ninja_quiz/index.html b/ninja_quiz/index.html index 8990cfd9..994a06f0 100644 --- a/ninja_quiz/index.html +++ b/ninja_quiz/index.html @@ -15,6 +15,13 @@

    Ninja Quiz

    + +
    +
    +

    You are 0% ninja

    +
    +
    +
    From be3b3ea3f24ea1f9d7e145c78147172cf5641a79 Mon Sep 17 00:00:00 2001 From: Shaun Date: Sun, 17 Feb 2019 08:49:35 +0000 Subject: [PATCH 058/100] lesson-69 --- ninja_quiz/app.js | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/ninja_quiz/app.js b/ninja_quiz/app.js index aacfbf94..ac57c284 100644 --- a/ninja_quiz/app.js +++ b/ninja_quiz/app.js @@ -16,7 +16,25 @@ form.addEventListener('submit', e => { }); // show the result + scrollTo(0, 0); result.querySelector('span').textContent = `${score}%`; result.classList.remove('d-none'); }); + +// window object (the global object) + +// console.log(window); + +// console.log('hello'); +// window.console.log('hello'); + +// console.log(document.querySelector('form')); +// console.log(window.document.querySelector('form')); + +// // alert('hello'); +// // window.alert('hello again'); + +// setTimeout(() => { +// alert('hello, ninjas'); +// }, 3000); From 3eaaa6bf748e2a3f8560ccddf688bd48119af8a9 Mon Sep 17 00:00:00 2001 From: Shaun Date: Sun, 17 Feb 2019 08:51:07 +0000 Subject: [PATCH 059/100] lesson-70 --- ninja_quiz/app.js | 28 ++++++++++------------------ 1 file changed, 10 insertions(+), 18 deletions(-) diff --git a/ninja_quiz/app.js b/ninja_quiz/app.js index ac57c284..a236e02a 100644 --- a/ninja_quiz/app.js +++ b/ninja_quiz/app.js @@ -17,24 +17,16 @@ form.addEventListener('submit', e => { // show the result scrollTo(0, 0); - result.querySelector('span').textContent = `${score}%`; result.classList.remove('d-none'); -}); - -// window object (the global object) - -// console.log(window); - -// console.log('hello'); -// window.console.log('hello'); - -// console.log(document.querySelector('form')); -// console.log(window.document.querySelector('form')); - -// // alert('hello'); -// // window.alert('hello again'); + let output = 0; + const timer = setInterval(() => { + result.querySelector('span').textContent = `${output}%`; + if(output === score){ + clearInterval(timer); + } else { + output++; + } + }, 10); -// setTimeout(() => { -// alert('hello, ninjas'); -// }, 3000); +}); \ No newline at end of file From 4895d1d783911b39c2aea245ed8000eb3696ad11 Mon Sep 17 00:00:00 2001 From: Shaun Date: Mon, 18 Feb 2019 12:23:15 +0000 Subject: [PATCH 060/100] lesson-71 --- chapter_nine/index.html | 12 ++++++ chapter_nine/sandbox.js | 14 +++++++ ninja_quiz/app.js | 32 ---------------- ninja_quiz/index.html | 85 ----------------------------------------- 4 files changed, 26 insertions(+), 117 deletions(-) create mode 100644 chapter_nine/index.html create mode 100644 chapter_nine/sandbox.js delete mode 100644 ninja_quiz/app.js delete mode 100644 ninja_quiz/index.html diff --git a/chapter_nine/index.html b/chapter_nine/index.html new file mode 100644 index 00000000..46008a24 --- /dev/null +++ b/chapter_nine/index.html @@ -0,0 +1,12 @@ + + + + + + Ninja Quiz + + +

    Array Methods

    + + + \ No newline at end of file diff --git a/chapter_nine/sandbox.js b/chapter_nine/sandbox.js new file mode 100644 index 00000000..fed75069 --- /dev/null +++ b/chapter_nine/sandbox.js @@ -0,0 +1,14 @@ +const scores = [10, 30, 15, 25, 50, 40, 5]; + +// const highScores = scores.filter(score => score > 20); +// console.log(highScores); + +const users = [ + {name: 'shaun', premium: true}, + {name: 'yoshi', premium: false}, + {name: 'mario', premium: false}, + {name: 'chun-li', premium: true} +]; + +const premiumUsers = users.filter(user => user.premium); +console.log(premiumUsers); \ No newline at end of file diff --git a/ninja_quiz/app.js b/ninja_quiz/app.js deleted file mode 100644 index a236e02a..00000000 --- a/ninja_quiz/app.js +++ /dev/null @@ -1,32 +0,0 @@ -const correctAnswers = ['B', 'B', 'B', 'B']; -const form = document.querySelector('.quiz-form'); -const result = document.querySelector('.result'); - -form.addEventListener('submit', e => { - e.preventDefault(); - - let score = 0; - const userAnswers = [form.q1.value, form.q2.value, form.q3.value, form.q4.value]; - - // check the answers - userAnswers.forEach((answer, index) => { - if (answer === correctAnswers[index]){ - score += 25; - } - }); - - // show the result - scrollTo(0, 0); - result.classList.remove('d-none'); - - let output = 0; - const timer = setInterval(() => { - result.querySelector('span').textContent = `${output}%`; - if(output === score){ - clearInterval(timer); - } else { - output++; - } - }, 10); - -}); \ No newline at end of file diff --git a/ninja_quiz/index.html b/ninja_quiz/index.html deleted file mode 100644 index 994a06f0..00000000 --- a/ninja_quiz/index.html +++ /dev/null @@ -1,85 +0,0 @@ - - - - - - Ninja Quiz - - - - - -
    -
    -

    Ninja Quiz

    -
    -
    - - -
    -
    -

    You are 0% ninja

    -
    -
    - - -
    -
    -

    On with the questions...

    - -
    -
    -

    1. How do you give a ninja directions?

    -
    - - -
    -
    - - -
    -
    -
    -

    2. If a ninja has 3 apples, then gives one to Mario & one to Yoshi, how many apples does the ninja have left?

    -
    - - -
    -
    - - -
    -
    -
    -

    3. How do you know when you've met a ninja?

    -
    - - -
    -
    - - -
    -
    -
    -

    4. What's a ninja's favourite array method?

    -
    - - -
    -
    - - -
    -
    -
    - -
    -
    - -
    -
    - - - - \ No newline at end of file From e65c2b7c562b18309aedea8955698e0084a7c972 Mon Sep 17 00:00:00 2001 From: Shaun Date: Mon, 18 Feb 2019 12:36:29 +0000 Subject: [PATCH 061/100] lesson-72 --- chapter_nine/sandbox.js | 28 ++++++++++++++++++---------- 1 file changed, 18 insertions(+), 10 deletions(-) diff --git a/chapter_nine/sandbox.js b/chapter_nine/sandbox.js index fed75069..0fbedf99 100644 --- a/chapter_nine/sandbox.js +++ b/chapter_nine/sandbox.js @@ -1,14 +1,22 @@ -const scores = [10, 30, 15, 25, 50, 40, 5]; +const prices = [20, 10, 30, 25, 15, 40, 80, 5]; -// const highScores = scores.filter(score => score > 20); -// console.log(highScores); +// const salePrices = prices.map(price => price / 2); +// console.log(salePrices); -const users = [ - {name: 'shaun', premium: true}, - {name: 'yoshi', premium: false}, - {name: 'mario', premium: false}, - {name: 'chun-li', premium: true} +const products = [ + {name: 'gold star', price: 20}, + {name: 'mushroom', price: 40}, + {name: 'green shells', price: 30}, + {name: 'banana skin', price: 10}, + {name: 'red shells', price: 50} ]; -const premiumUsers = users.filter(user => user.premium); -console.log(premiumUsers); \ No newline at end of file +const saleProducts = products.map(product => { + if(product.price > 30){ + return {name: product.name, price: product.price / 2} + } else { + return product; + } +}); + +console.log(products, saleProducts); \ No newline at end of file From 42125d00ec27bded9d697c231f06bfcb63ecc9b0 Mon Sep 17 00:00:00 2001 From: Shaun Date: Mon, 18 Feb 2019 14:21:20 +0000 Subject: [PATCH 062/100] lesson-73 --- chapter_nine/sandbox.js | 36 ++++++++++++++++++++---------------- 1 file changed, 20 insertions(+), 16 deletions(-) diff --git a/chapter_nine/sandbox.js b/chapter_nine/sandbox.js index 0fbedf99..d2b00180 100644 --- a/chapter_nine/sandbox.js +++ b/chapter_nine/sandbox.js @@ -1,22 +1,26 @@ -const prices = [20, 10, 30, 25, 15, 40, 80, 5]; +// const scores = [10, 20, 60, 40, 70, 90, 30]; -// const salePrices = prices.map(price => price / 2); -// console.log(salePrices); +// const result = scores.reduce((acc, curr) => { +// if(curr > 50){ +// acc++; +// } +// return acc; +// }, 0); -const products = [ - {name: 'gold star', price: 20}, - {name: 'mushroom', price: 40}, - {name: 'green shells', price: 30}, - {name: 'banana skin', price: 10}, - {name: 'red shells', price: 50} +// console.log(result); + +const scores = [ + {player: 'mario', score: 50}, + {player: 'yoshi', score: 30}, + {player: 'mario', score: 70}, + {player: 'crystal', score: 60} ]; -const saleProducts = products.map(product => { - if(product.price > 30){ - return {name: product.name, price: product.price / 2} - } else { - return product; +const marioTotal = scores.reduce((acc, curr) => { + if(curr.player === 'mario'){ + acc += curr.score; } -}); + return acc; +}, 0); -console.log(products, saleProducts); \ No newline at end of file +console.log(marioTotal); \ No newline at end of file From 7f4074e27a5372a8f3a690625dd2ef39783ee484 Mon Sep 17 00:00:00 2001 From: Shaun Date: Mon, 18 Feb 2019 14:24:28 +0000 Subject: [PATCH 063/100] lesson-74 --- chapter_nine/sandbox.js | 28 +++------------------------- 1 file changed, 3 insertions(+), 25 deletions(-) diff --git a/chapter_nine/sandbox.js b/chapter_nine/sandbox.js index d2b00180..5447fc28 100644 --- a/chapter_nine/sandbox.js +++ b/chapter_nine/sandbox.js @@ -1,26 +1,4 @@ -// const scores = [10, 20, 60, 40, 70, 90, 30]; +const scores = [10, 5, 0, 40, 60, 10, 20, 70]; -// const result = scores.reduce((acc, curr) => { -// if(curr > 50){ -// acc++; -// } -// return acc; -// }, 0); - -// console.log(result); - -const scores = [ - {player: 'mario', score: 50}, - {player: 'yoshi', score: 30}, - {player: 'mario', score: 70}, - {player: 'crystal', score: 60} -]; - -const marioTotal = scores.reduce((acc, curr) => { - if(curr.player === 'mario'){ - acc += curr.score; - } - return acc; -}, 0); - -console.log(marioTotal); \ No newline at end of file +const firstHighScore = scores.find(score => score > 50); +console.log(firstHighScore); From 2ecefac5b0ec6ef3b0c83c1b69ac2bd6237f6bd9 Mon Sep 17 00:00:00 2001 From: Shaun Date: Mon, 18 Feb 2019 14:38:04 +0000 Subject: [PATCH 064/100] lesson-75 --- chapter_nine/sandbox.js | 39 ++++++++++++++++++++++++++++++++++++--- 1 file changed, 36 insertions(+), 3 deletions(-) diff --git a/chapter_nine/sandbox.js b/chapter_nine/sandbox.js index 5447fc28..b6ed1b5b 100644 --- a/chapter_nine/sandbox.js +++ b/chapter_nine/sandbox.js @@ -1,4 +1,37 @@ -const scores = [10, 5, 0, 40, 60, 10, 20, 70]; +// example 1 - sorting strings +const names = ['mario', 'shaun', 'chun-li', 'yoshi', 'luigi']; + +// names.sort(); +names.reverse(); +console.log(names); + +// example 2 - sorting numbers +const scores = [10, 50, 20, 5, 35, 70, 45]; + +// scores.sort(); +scores.reverse(); +console.log(scores); + +// example 3 - sorting objects +const players = [ + {name: 'mario', score: 20}, + {name: 'luigi', score: 10}, + {name: 'chun-li', score: 50}, + {name: 'yoshi', score: 30}, + {name: 'shaun', score: 70} +]; + +// players.sort((a,b) => { +// if(a.score > b.score){ +// return -1; +// } else if (b.score > a.score){ +// return 1; +// } else { +// return 0; +// } +// }); + +players.sort((a,b) => b.score - a.score); + +console.log(players); -const firstHighScore = scores.find(score => score > 50); -console.log(firstHighScore); From 124126e9bc1201bfb518c7f984b5666b57f0bc6a Mon Sep 17 00:00:00 2001 From: Shaun Date: Mon, 18 Feb 2019 15:45:35 +0000 Subject: [PATCH 065/100] lesson-76 --- chapter_nine/sandbox.js | 46 +++++++++++++---------------------------- 1 file changed, 14 insertions(+), 32 deletions(-) diff --git a/chapter_nine/sandbox.js b/chapter_nine/sandbox.js index b6ed1b5b..cb38fe5c 100644 --- a/chapter_nine/sandbox.js +++ b/chapter_nine/sandbox.js @@ -1,37 +1,19 @@ -// example 1 - sorting strings -const names = ['mario', 'shaun', 'chun-li', 'yoshi', 'luigi']; - -// names.sort(); -names.reverse(); -console.log(names); - -// example 2 - sorting numbers -const scores = [10, 50, 20, 5, 35, 70, 45]; - -// scores.sort(); -scores.reverse(); -console.log(scores); - -// example 3 - sorting objects -const players = [ - {name: 'mario', score: 20}, - {name: 'luigi', score: 10}, - {name: 'chun-li', score: 50}, - {name: 'yoshi', score: 30}, - {name: 'shaun', score: 70} +const products = [ + {name: 'gold star', price: 30}, + {name: 'green shell', price: 10}, + {name: 'red shell', price: 40}, + {name: 'banana skin', price: 5}, + {name: 'mushroom', price: 50} ]; -// players.sort((a,b) => { -// if(a.score > b.score){ -// return -1; -// } else if (b.score > a.score){ -// return 1; -// } else { -// return 0; -// } -// }); +// const filtered = products.filter(product => product.price > 20); -players.sort((a,b) => b.score - a.score); +// const promos = filtered.map(product => { +// return `the ${product.name} is ${product.price / 2} pounds`; +// }); -console.log(players); +const promos = products + .filter(product => product.price > 20) + .map(product => `the ${product.name} is ${product.price / 2} pounds`); +console.log(promos); From 2056eb0001d5d3508ebb405a0bb9ecae1c455e22 Mon Sep 17 00:00:00 2001 From: Shaun Date: Mon, 18 Feb 2019 16:47:49 +0000 Subject: [PATCH 066/100] lesson-77 --- chapter_nine/index.html | 12 ------------ chapter_nine/sandbox.js | 19 ------------------- todos/app.js | 0 todos/index.html | 13 +++++++++++++ 4 files changed, 13 insertions(+), 31 deletions(-) delete mode 100644 chapter_nine/index.html delete mode 100644 chapter_nine/sandbox.js create mode 100644 todos/app.js create mode 100644 todos/index.html diff --git a/chapter_nine/index.html b/chapter_nine/index.html deleted file mode 100644 index 46008a24..00000000 --- a/chapter_nine/index.html +++ /dev/null @@ -1,12 +0,0 @@ - - - - - - Ninja Quiz - - -

    Array Methods

    - - - \ No newline at end of file diff --git a/chapter_nine/sandbox.js b/chapter_nine/sandbox.js deleted file mode 100644 index cb38fe5c..00000000 --- a/chapter_nine/sandbox.js +++ /dev/null @@ -1,19 +0,0 @@ -const products = [ - {name: 'gold star', price: 30}, - {name: 'green shell', price: 10}, - {name: 'red shell', price: 40}, - {name: 'banana skin', price: 5}, - {name: 'mushroom', price: 50} -]; - -// const filtered = products.filter(product => product.price > 20); - -// const promos = filtered.map(product => { -// return `the ${product.name} is ${product.price / 2} pounds`; -// }); - -const promos = products - .filter(product => product.price > 20) - .map(product => `the ${product.name} is ${product.price / 2} pounds`); - -console.log(promos); diff --git a/todos/app.js b/todos/app.js new file mode 100644 index 00000000..e69de29b diff --git a/todos/index.html b/todos/index.html new file mode 100644 index 00000000..63d0af1c --- /dev/null +++ b/todos/index.html @@ -0,0 +1,13 @@ + + + + + + + Ninja Quiz + + + + + + \ No newline at end of file From acec2df4ac5d5c3ed43cedf90e3ee826f784211f Mon Sep 17 00:00:00 2001 From: Shaun Date: Mon, 18 Feb 2019 18:07:07 +0000 Subject: [PATCH 067/100] lesson-78 --- todos/index.html | 36 +++++++++++++++++++++++++++++++++++- todos/styles.css | 28 ++++++++++++++++++++++++++++ 2 files changed, 63 insertions(+), 1 deletion(-) create mode 100644 todos/styles.css diff --git a/todos/index.html b/todos/index.html index 63d0af1c..724478be 100644 --- a/todos/index.html +++ b/todos/index.html @@ -4,10 +4,44 @@ - Ninja Quiz + + + Todo List +
    + +
    +

    Todo List

    +
    + +
    +
    + +
      +
    • + text + +
      • +
    • + text + +
      • +
    • + text + +
      • +
    + +
    + + +
    + +
    + + \ No newline at end of file diff --git a/todos/styles.css b/todos/styles.css new file mode 100644 index 00000000..6b37c2e8 --- /dev/null +++ b/todos/styles.css @@ -0,0 +1,28 @@ +body{ + background: #352f5b; +} +.container{ + max-width: 400px; +} +.form-control{ + color: #fff !important; + border: none; + background: rgba(0,0,0,0.2); + max-width: 400px; +} +.form-control:focus{ + background: rgba(0,0,0,0.2); + border: none; + box-shadow: none; +} +li.list-group-item{ + background: #423a6f; +} +ul.todos{ + max-width: 400px; +} +.delete{ + cursor: pointer; +} + + From 1953c7dacfc7e56bd2d8ff5a794bbbadc467fd61 Mon Sep 17 00:00:00 2001 From: Shaun Date: Tue, 19 Feb 2019 07:53:46 +0000 Subject: [PATCH 068/100] lesson-79 --- todos/app.js | 24 ++++++++++++++++++++++++ todos/styles.css | 19 +++++-------------- 2 files changed, 29 insertions(+), 14 deletions(-) diff --git a/todos/app.js b/todos/app.js index e69de29b..0374dda1 100644 --- a/todos/app.js +++ b/todos/app.js @@ -0,0 +1,24 @@ +const addForm = document.querySelector('.add'); +const list = document.querySelector('.todos'); + +const generateTemplate = todo => { + const html = ` +
  • + ${todo} + +
    • + `; + list.innerHTML += html; +}; + +addForm.addEventListener('submit', e => { + + e.preventDefault(); + const todo = addForm.add.value; + + if(todo.length){ + generateTemplate(todo); + addForm.reset(); + } + +}); \ No newline at end of file diff --git a/todos/styles.css b/todos/styles.css index 6b37c2e8..b73aa38e 100644 --- a/todos/styles.css +++ b/todos/styles.css @@ -4,25 +4,16 @@ body{ .container{ max-width: 400px; } -.form-control{ - color: #fff !important; +input[type=text], +input[type=text]:focus{ + color: #fff; border: none; background: rgba(0,0,0,0.2); max-width: 400px; } -.form-control:focus{ - background: rgba(0,0,0,0.2); - border: none; - box-shadow: none; -} -li.list-group-item{ +.todos li{ background: #423a6f; } -ul.todos{ - max-width: 400px; -} .delete{ cursor: pointer; -} - - +} \ No newline at end of file From 1d54d0292b85e2fb7f46af7be53071429e80ef75 Mon Sep 17 00:00:00 2001 From: Shaun Date: Tue, 19 Feb 2019 08:17:08 +0000 Subject: [PATCH 069/100] lesson-79 --- todos/app.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/todos/app.js b/todos/app.js index 0374dda1..55a7dd33 100644 --- a/todos/app.js +++ b/todos/app.js @@ -14,7 +14,7 @@ const generateTemplate = todo => { addForm.addEventListener('submit', e => { e.preventDefault(); - const todo = addForm.add.value; + const todo = addForm.add.value.trim(); if(todo.length){ generateTemplate(todo); From 7309f96aceb5dbbba7c97017ee797c68a02a17d7 Mon Sep 17 00:00:00 2001 From: Shaun Date: Tue, 19 Feb 2019 08:31:51 +0000 Subject: [PATCH 070/100] lesson-80 --- todos/app.js | 12 +++++++++++- todos/index.html | 6 +++--- 2 files changed, 14 insertions(+), 4 deletions(-) diff --git a/todos/app.js b/todos/app.js index 55a7dd33..8f8f5f41 100644 --- a/todos/app.js +++ b/todos/app.js @@ -11,6 +11,7 @@ const generateTemplate = todo => { list.innerHTML += html; }; +// add todos addForm.addEventListener('submit', e => { e.preventDefault(); @@ -21,4 +22,13 @@ addForm.addEventListener('submit', e => { addForm.reset(); } -}); \ No newline at end of file +}); + +// delete todos +list.addEventListener('click', e => { + + if(e.target.classList.contains('delete')){ + e.target.parentElement.remove(); + } + +}); diff --git a/todos/index.html b/todos/index.html index 724478be..2ae334fe 100644 --- a/todos/index.html +++ b/todos/index.html @@ -21,15 +21,15 @@

    Todo List

    • - text + play mariokart
    • - text + defeat ganon in zelda
    • - text + make a veggie pie
    From 9f9190e3a360638d54ac916c7b627b4ac6ea9d07 Mon Sep 17 00:00:00 2001 From: Shaun Date: Tue, 19 Feb 2019 09:25:31 +0000 Subject: [PATCH 071/100] lesson-81 --- todos/app.js | 24 ++++++++++++++++++++++-- todos/styles.css | 3 +++ 2 files changed, 25 insertions(+), 2 deletions(-) diff --git a/todos/app.js b/todos/app.js index 8f8f5f41..8cd29a99 100644 --- a/todos/app.js +++ b/todos/app.js @@ -1,4 +1,5 @@ const addForm = document.querySelector('.add'); +const search = document.querySelector('.search input'); const list = document.querySelector('.todos'); const generateTemplate = todo => { @@ -11,7 +12,18 @@ const generateTemplate = todo => { list.innerHTML += html; }; -// add todos +const filterTodos = term => { + Array.from(list.children).forEach(todo => { + const text = todo.textContent.trim().toLowerCase(); + if(!text.includes(term)){ + todo.classList.add('filtered'); + } else { + todo.classList.remove('filtered'); + } + }); +}; + +// add todos event addForm.addEventListener('submit', e => { e.preventDefault(); @@ -24,7 +36,7 @@ addForm.addEventListener('submit', e => { }); -// delete todos +// delete todos event list.addEventListener('click', e => { if(e.target.classList.contains('delete')){ @@ -32,3 +44,11 @@ list.addEventListener('click', e => { } }); + +// filter todos event +search.addEventListener('keyup', () => { + + const term = search.value.trim().toLowerCase(); + filterTodos(term); + +}); diff --git a/todos/styles.css b/todos/styles.css index b73aa38e..b1cfa633 100644 --- a/todos/styles.css +++ b/todos/styles.css @@ -16,4 +16,7 @@ input[type=text]:focus{ } .delete{ cursor: pointer; +} +.filtered{ + display: none !important; } \ No newline at end of file From e0dc927d2e50a10bc77e7eb285581dae24796177 Mon Sep 17 00:00:00 2001 From: Shaun Date: Tue, 19 Feb 2019 11:35:03 +0000 Subject: [PATCH 072/100] lesson-81 --- todos/app.js | 19 +++++++++++-------- 1 file changed, 11 insertions(+), 8 deletions(-) diff --git a/todos/app.js b/todos/app.js index 8cd29a99..6451d736 100644 --- a/todos/app.js +++ b/todos/app.js @@ -13,14 +13,17 @@ const generateTemplate = todo => { }; const filterTodos = term => { - Array.from(list.children).forEach(todo => { - const text = todo.textContent.trim().toLowerCase(); - if(!text.includes(term)){ - todo.classList.add('filtered'); - } else { - todo.classList.remove('filtered'); - } - }); + + // add filtered class + Array.from(list.children) + .filter(todo => !todo.textContent.toLowerCase().includes(term)) + .forEach(todo => todo.classList.add('filtered')); + + // remove filtered class + Array.from(list.children) + .filter(todo => todo.textContent.toLowerCase().includes(term)) + .forEach(todo => todo.classList.remove('filtered')); + }; // add todos event From d8cc465cf6380df061acc64cab9e3d2ff45c4397 Mon Sep 17 00:00:00 2001 From: Shaun Date: Tue, 19 Feb 2019 16:38:53 +0000 Subject: [PATCH 073/100] lesson-82 --- chapter_11/index.html | 13 ++++++++++ chapter_11/sandbox.js | 21 ++++++++++++++++ todos/app.js | 57 ------------------------------------------- todos/index.html | 47 ----------------------------------- todos/styles.css | 22 ----------------- 5 files changed, 34 insertions(+), 126 deletions(-) create mode 100644 chapter_11/index.html create mode 100644 chapter_11/sandbox.js delete mode 100644 todos/app.js delete mode 100644 todos/index.html delete mode 100644 todos/styles.css diff --git a/chapter_11/index.html b/chapter_11/index.html new file mode 100644 index 00000000..bfbde7b3 --- /dev/null +++ b/chapter_11/index.html @@ -0,0 +1,13 @@ + + + + + + Dates + + + + + + + \ No newline at end of file diff --git a/chapter_11/sandbox.js b/chapter_11/sandbox.js new file mode 100644 index 00000000..06d2e263 --- /dev/null +++ b/chapter_11/sandbox.js @@ -0,0 +1,21 @@ +const now = new Date(); + +console.log(now); +console.log(typeof now); + +// years, months, days, times +console.log('getFullYear:', now.getFullYear()); +console.log('getMonth (0-based):', now.getMonth()); +console.log('getDate:', now.getDate()); +console.log('getDay (0-based):', now.getDay()); +console.log('getHours:', now.getHours()); +console.log('getMinutes:', now.getMinutes()); +console.log('getSeconds:', now.getSeconds()); + +// timestamps +console.log('timestamp:', now.getTime()); + +// date strings +console.log(now.toDateString()); +console.log(now.toTimeString()); +console.log(now.toLocaleString()); \ No newline at end of file diff --git a/todos/app.js b/todos/app.js deleted file mode 100644 index 6451d736..00000000 --- a/todos/app.js +++ /dev/null @@ -1,57 +0,0 @@ -const addForm = document.querySelector('.add'); -const search = document.querySelector('.search input'); -const list = document.querySelector('.todos'); - -const generateTemplate = todo => { - const html = ` -
  • - ${todo} - -
    • - `; - list.innerHTML += html; -}; - -const filterTodos = term => { - - // add filtered class - Array.from(list.children) - .filter(todo => !todo.textContent.toLowerCase().includes(term)) - .forEach(todo => todo.classList.add('filtered')); - - // remove filtered class - Array.from(list.children) - .filter(todo => todo.textContent.toLowerCase().includes(term)) - .forEach(todo => todo.classList.remove('filtered')); - -}; - -// add todos event -addForm.addEventListener('submit', e => { - - e.preventDefault(); - const todo = addForm.add.value.trim(); - - if(todo.length){ - generateTemplate(todo); - addForm.reset(); - } - -}); - -// delete todos event -list.addEventListener('click', e => { - - if(e.target.classList.contains('delete')){ - e.target.parentElement.remove(); - } - -}); - -// filter todos event -search.addEventListener('keyup', () => { - - const term = search.value.trim().toLowerCase(); - filterTodos(term); - -}); diff --git a/todos/index.html b/todos/index.html deleted file mode 100644 index 2ae334fe..00000000 --- a/todos/index.html +++ /dev/null @@ -1,47 +0,0 @@ - - - - - - - - - Todo List - - - -
    - -
    -

    Todo List

    -
    - -
    -
    - -
      -
    • - play mariokart - -
      • -
    • - defeat ganon in zelda - -
      • -
    • - make a veggie pie - -
      • -
    - -
    - - -
    - -
    - - - - - \ No newline at end of file diff --git a/todos/styles.css b/todos/styles.css deleted file mode 100644 index b1cfa633..00000000 --- a/todos/styles.css +++ /dev/null @@ -1,22 +0,0 @@ -body{ - background: #352f5b; -} -.container{ - max-width: 400px; -} -input[type=text], -input[type=text]:focus{ - color: #fff; - border: none; - background: rgba(0,0,0,0.2); - max-width: 400px; -} -.todos li{ - background: #423a6f; -} -.delete{ - cursor: pointer; -} -.filtered{ - display: none !important; -} \ No newline at end of file From a91f39e53753630359532b325a0eeb4b0ccfb88a Mon Sep 17 00:00:00 2001 From: Shaun Date: Tue, 19 Feb 2019 16:40:10 +0000 Subject: [PATCH 074/100] lesson-83 --- chapter_11/sandbox.js | 31 +++++++++++++++---------------- 1 file changed, 15 insertions(+), 16 deletions(-) diff --git a/chapter_11/sandbox.js b/chapter_11/sandbox.js index 06d2e263..6388db36 100644 --- a/chapter_11/sandbox.js +++ b/chapter_11/sandbox.js @@ -1,21 +1,20 @@ +//const before = new Date('02/01/2019 7:30:59'); +const before = new Date('February 1 2019 7:30:59'); const now = new Date(); -console.log(now); -console.log(typeof now); +const diff = now.getTime() - before.getTime(); +// const diff = now - before; -// years, months, days, times -console.log('getFullYear:', now.getFullYear()); -console.log('getMonth (0-based):', now.getMonth()); -console.log('getDate:', now.getDate()); -console.log('getDay (0-based):', now.getDay()); -console.log('getHours:', now.getHours()); -console.log('getMinutes:', now.getMinutes()); -console.log('getSeconds:', now.getSeconds()); +console.log(diff); -// timestamps -console.log('timestamp:', now.getTime()); +const mins = Math.round(diff / 1000 / 60); +const hours = Math.round(mins / 60); +const days = Math.round(hours / 24); -// date strings -console.log(now.toDateString()); -console.log(now.toTimeString()); -console.log(now.toLocaleString()); \ No newline at end of file +console.log(`the before date was ${mins} mins ago`); +console.log(`the before date was ${hours} hours ago`); +console.log(`the before date was ${days} days ago`); + +// converting timestamps to dates +const timestamp = 1675938474990; +console.log(new Date(timestamp)); \ No newline at end of file From feeef159eb0c87bcadb60e45d546eadac5220d30 Mon Sep 17 00:00:00 2001 From: Shaun Date: Tue, 19 Feb 2019 16:45:25 +0000 Subject: [PATCH 075/100] lesson-84 --- chapter_11/index.html | 17 +++++++++++++++++ chapter_11/sandbox.js | 31 ++++++++++++++++--------------- 2 files changed, 33 insertions(+), 15 deletions(-) diff --git a/chapter_11/index.html b/chapter_11/index.html index bfbde7b3..a8ecab67 100644 --- a/chapter_11/index.html +++ b/chapter_11/index.html @@ -4,9 +4,26 @@ Dates + +
    diff --git a/chapter_11/sandbox.js b/chapter_11/sandbox.js index 6388db36..230c1bee 100644 --- a/chapter_11/sandbox.js +++ b/chapter_11/sandbox.js @@ -1,20 +1,21 @@ -//const before = new Date('02/01/2019 7:30:59'); -const before = new Date('February 1 2019 7:30:59'); -const now = new Date(); +const clock = document.querySelector('.clock'); -const diff = now.getTime() - before.getTime(); -// const diff = now - before; +const tick = () => { -console.log(diff); + const now = new Date(); + + const h = now.getHours(); + const m = now.getMinutes(); + const s = now.getSeconds(); -const mins = Math.round(diff / 1000 / 60); -const hours = Math.round(mins / 60); -const days = Math.round(hours / 24); + const html = ` + ${h} : + ${m} : + ${s} + `; -console.log(`the before date was ${mins} mins ago`); -console.log(`the before date was ${hours} hours ago`); -console.log(`the before date was ${days} days ago`); + clock.innerHTML = html; -// converting timestamps to dates -const timestamp = 1675938474990; -console.log(new Date(timestamp)); \ No newline at end of file +}; + +setInterval(tick, 1000); \ No newline at end of file From e0f884d9b41928754592106f9486a4439510c6ad Mon Sep 17 00:00:00 2001 From: Shaun Date: Tue, 19 Feb 2019 17:06:12 +0000 Subject: [PATCH 076/100] lesson-85 --- chapter_11/index.html | 17 +---------------- chapter_11/sandbox.js | 28 +++++++++++----------------- 2 files changed, 12 insertions(+), 33 deletions(-) diff --git a/chapter_11/index.html b/chapter_11/index.html index a8ecab67..8f5c878d 100644 --- a/chapter_11/index.html +++ b/chapter_11/index.html @@ -4,27 +4,12 @@ Dates -
    + \ No newline at end of file diff --git a/chapter_11/sandbox.js b/chapter_11/sandbox.js index 230c1bee..11fc742b 100644 --- a/chapter_11/sandbox.js +++ b/chapter_11/sandbox.js @@ -1,21 +1,15 @@ -const clock = document.querySelector('.clock'); +const now = new Date(); -const tick = () => { +console.log(dateFns.isToday(now)); - const now = new Date(); - - const h = now.getHours(); - const m = now.getMinutes(); - const s = now.getSeconds(); +// formatting options +console.log(dateFns.format(now, 'YYYY')); +console.log(dateFns.format(now, 'MMMM')); +console.log(dateFns.format(now, 'dddd')); +console.log(dateFns.format(now, 'Do')); +console.log(dateFns.format(now, 'dddd, Do MMMM, YYYY')); - const html = ` - ${h} : - ${m} : - ${s} - `; +// comparing dates +const before = new Date('February 1 2019 12:00:00'); - clock.innerHTML = html; - -}; - -setInterval(tick, 1000); \ No newline at end of file +console.log(dateFns.distanceInWords(now, before, {addSuffix: true})); From c943f33e40c737ede278415c03a87a54bc7151f8 Mon Sep 17 00:00:00 2001 From: Shaun Date: Thu, 21 Feb 2019 11:00:30 +0000 Subject: [PATCH 077/100] lesson-87 --- chapter_11/index.html | 5 ++--- chapter_11/sandbox.js | 20 +++++++------------- 2 files changed, 9 insertions(+), 16 deletions(-) diff --git a/chapter_11/index.html b/chapter_11/index.html index 8f5c878d..8266e47c 100644 --- a/chapter_11/index.html +++ b/chapter_11/index.html @@ -3,13 +3,12 @@ - Dates + Asynchronous JavaScript -
    +

    Async JavaScript

    - \ No newline at end of file diff --git a/chapter_11/sandbox.js b/chapter_11/sandbox.js index 11fc742b..412d6b70 100644 --- a/chapter_11/sandbox.js +++ b/chapter_11/sandbox.js @@ -1,15 +1,9 @@ -const now = new Date(); +console.log(1); +console.log(2); -console.log(dateFns.isToday(now)); +setTimeout(() => { + console.log('callback function fired'); +}, 2000); -// formatting options -console.log(dateFns.format(now, 'YYYY')); -console.log(dateFns.format(now, 'MMMM')); -console.log(dateFns.format(now, 'dddd')); -console.log(dateFns.format(now, 'Do')); -console.log(dateFns.format(now, 'dddd, Do MMMM, YYYY')); - -// comparing dates -const before = new Date('February 1 2019 12:00:00'); - -console.log(dateFns.distanceInWords(now, before, {addSuffix: true})); +console.log(3); +console.log(4); \ No newline at end of file From 0a5f767db67e58afedbd926212b2d071926c785a Mon Sep 17 00:00:00 2001 From: Shaun Date: Thu, 21 Feb 2019 15:32:38 +0000 Subject: [PATCH 078/100] lesson-89 --- chapter_11/sandbox.js | 19 ++++++++++++------- 1 file changed, 12 insertions(+), 7 deletions(-) diff --git a/chapter_11/sandbox.js b/chapter_11/sandbox.js index 412d6b70..0b5d3890 100644 --- a/chapter_11/sandbox.js +++ b/chapter_11/sandbox.js @@ -1,9 +1,14 @@ -console.log(1); -console.log(2); +const request = new XMLHttpRequest(); -setTimeout(() => { - console.log('callback function fired'); -}, 2000); +request.addEventListener('readystatechange', () => { + // console.log(request, request.readyState); + if(request.readyState === 4){ + // console.log(request); + console.log(request.responseText); + } else if(request.readyState === 4) { + console.log('error with request'); + } +}); -console.log(3); -console.log(4); \ No newline at end of file +request.open('GET', 'https://jsonplaceholder.typicode.com/todos/'); +request.send(); \ No newline at end of file From 0c4e97ff2e72afc1a171febc74fd269ffba74380 Mon Sep 17 00:00:00 2001 From: Shaun Date: Thu, 21 Feb 2019 16:01:22 +0000 Subject: [PATCH 079/100] lesson-89 --- chapter_11/sandbox.js | 4 +--- 1 file changed, 1 insertion(+), 3 deletions(-) diff --git a/chapter_11/sandbox.js b/chapter_11/sandbox.js index 0b5d3890..f299f114 100644 --- a/chapter_11/sandbox.js +++ b/chapter_11/sandbox.js @@ -5,9 +5,7 @@ request.addEventListener('readystatechange', () => { if(request.readyState === 4){ // console.log(request); console.log(request.responseText); - } else if(request.readyState === 4) { - console.log('error with request'); - } + } }); request.open('GET', 'https://jsonplaceholder.typicode.com/todos/'); From 9b3bd2e85d4d0037c16385643f041b9aeb2b3b60 Mon Sep 17 00:00:00 2001 From: Shaun Date: Thu, 21 Feb 2019 16:01:49 +0000 Subject: [PATCH 080/100] lesson-89 --- {chapter_11 => chapter_12}/index.html | 0 {chapter_11 => chapter_12}/sandbox.js | 0 2 files changed, 0 insertions(+), 0 deletions(-) rename {chapter_11 => chapter_12}/index.html (100%) rename {chapter_11 => chapter_12}/sandbox.js (100%) diff --git a/chapter_11/index.html b/chapter_12/index.html similarity index 100% rename from chapter_11/index.html rename to chapter_12/index.html diff --git a/chapter_11/sandbox.js b/chapter_12/sandbox.js similarity index 100% rename from chapter_11/sandbox.js rename to chapter_12/sandbox.js From 8ce51bef8b8ab52e7fd4ef50983aa861d46f3fc0 Mon Sep 17 00:00:00 2001 From: Shaun Date: Thu, 21 Feb 2019 16:03:32 +0000 Subject: [PATCH 081/100] lesson-90 --- chapter_12/sandbox.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/chapter_12/sandbox.js b/chapter_12/sandbox.js index f299f114..a99728d8 100644 --- a/chapter_12/sandbox.js +++ b/chapter_12/sandbox.js @@ -1,11 +1,12 @@ const request = new XMLHttpRequest(); request.addEventListener('readystatechange', () => { - // console.log(request, request.readyState); - if(request.readyState === 4){ - // console.log(request); + // console.log(request); + if(request.readyState === 4 && request.status === 200){ console.log(request.responseText); - } + } else if (request.readyState === 4){ + console.log('could not fetch the data'); + } }); request.open('GET', 'https://jsonplaceholder.typicode.com/todos/'); From 2559ac82464296416609455060aa0040c4c372d1 Mon Sep 17 00:00:00 2001 From: Shaun Date: Thu, 21 Feb 2019 16:07:26 +0000 Subject: [PATCH 082/100] lesson-91 --- chapter_12/sandbox.js | 40 ++++++++++++++++++++++++++++++---------- 1 file changed, 30 insertions(+), 10 deletions(-) diff --git a/chapter_12/sandbox.js b/chapter_12/sandbox.js index a99728d8..cfb6e91a 100644 --- a/chapter_12/sandbox.js +++ b/chapter_12/sandbox.js @@ -1,13 +1,33 @@ -const request = new XMLHttpRequest(); - -request.addEventListener('readystatechange', () => { - // console.log(request); - if(request.readyState === 4 && request.status === 200){ - console.log(request.responseText); - } else if (request.readyState === 4){ - console.log('could not fetch the data'); +const getTodos = (callback) => { + + const request = new XMLHttpRequest(); + + request.addEventListener('readystatechange', () => { + + if(request.readyState === 4 && request.status === 200){ + callback(undefined, request.responseText); + } else if (request.readyState === 4){ + callback('could not fetch the data', undefined); + } + + }); + + request.open('GET', 'https://jsonplaceholder.typicode.com/todos/'); + request.send(); + +}; + +console.log(1); +console.log(2); + +getTodos((err, data) => { + console.log('callback function fired'); + if(err){ + console.log(err); + } else { + console.log(data); } }); -request.open('GET', 'https://jsonplaceholder.typicode.com/todos/'); -request.send(); \ No newline at end of file +console.log(3); +console.log(4); \ No newline at end of file From e61deeb8a48e635ffdf602e70c879abceedf6688 Mon Sep 17 00:00:00 2001 From: Shaun Date: Thu, 21 Feb 2019 16:12:03 +0000 Subject: [PATCH 083/100] lesson-92 --- chapter_12/sandbox.js | 5 +++-- chapter_12/todos.json | 5 +++++ 2 files changed, 8 insertions(+), 2 deletions(-) create mode 100644 chapter_12/todos.json diff --git a/chapter_12/sandbox.js b/chapter_12/sandbox.js index cfb6e91a..54e9daab 100644 --- a/chapter_12/sandbox.js +++ b/chapter_12/sandbox.js @@ -5,14 +5,15 @@ const getTodos = (callback) => { request.addEventListener('readystatechange', () => { if(request.readyState === 4 && request.status === 200){ - callback(undefined, request.responseText); + const data = JSON.parse(request.responseText); + callback(undefined, data); } else if (request.readyState === 4){ callback('could not fetch the data', undefined); } }); - request.open('GET', 'https://jsonplaceholder.typicode.com/todos/'); + request.open('GET', 'todos.json'); request.send(); }; diff --git a/chapter_12/todos.json b/chapter_12/todos.json new file mode 100644 index 00000000..b05007d9 --- /dev/null +++ b/chapter_12/todos.json @@ -0,0 +1,5 @@ +[ + {"text": "play mariokart", "author": "Shaun"}, + {"text": "buy some bread", "author": "Mario"}, + {"text": "do the plumming", "author": "Luigi"} +] \ No newline at end of file From d24b0ebf717fafecd1a652bd803d69da33a81af9 Mon Sep 17 00:00:00 2001 From: Shaun Date: Thu, 21 Feb 2019 16:36:45 +0000 Subject: [PATCH 084/100] lesson-93 --- chapter_12/json/luigi.json | 5 +++++ chapter_12/json/mario.json | 5 +++++ chapter_12/json/shaun.json | 5 +++++ chapter_12/sandbox.js | 25 ++++++++++--------------- chapter_12/todos.json | 5 ----- 5 files changed, 25 insertions(+), 20 deletions(-) create mode 100644 chapter_12/json/luigi.json create mode 100644 chapter_12/json/mario.json create mode 100644 chapter_12/json/shaun.json delete mode 100644 chapter_12/todos.json diff --git a/chapter_12/json/luigi.json b/chapter_12/json/luigi.json new file mode 100644 index 00000000..0a7cdf67 --- /dev/null +++ b/chapter_12/json/luigi.json @@ -0,0 +1,5 @@ +[ + {"text": "do the plumming", "author": "Luigi"}, + {"text": "avoid mario", "author": "Luigi"}, + {"text": "go kart racing", "author": "Luigi"} +] \ No newline at end of file diff --git a/chapter_12/json/mario.json b/chapter_12/json/mario.json new file mode 100644 index 00000000..5ab76086 --- /dev/null +++ b/chapter_12/json/mario.json @@ -0,0 +1,5 @@ +[ + {"text": "make fun of luigi", "author": "Mario"}, + {"text": "rescue peach (again)", "author": "Mario"}, + {"text": "go kart racing", "author": "Mario"} +] \ No newline at end of file diff --git a/chapter_12/json/shaun.json b/chapter_12/json/shaun.json new file mode 100644 index 00000000..838ef9af --- /dev/null +++ b/chapter_12/json/shaun.json @@ -0,0 +1,5 @@ +[ + {"text": "play mariokart", "author": "Shaun"}, + {"text": "buy some bread", "author": "Shaun"}, + {"text": "take a nap", "author": "Shaun"} +] \ No newline at end of file diff --git a/chapter_12/sandbox.js b/chapter_12/sandbox.js index 54e9daab..17b3d6a6 100644 --- a/chapter_12/sandbox.js +++ b/chapter_12/sandbox.js @@ -1,4 +1,4 @@ -const getTodos = (callback) => { +const getTodos = (resource, callback) => { const request = new XMLHttpRequest(); @@ -13,22 +13,17 @@ const getTodos = (callback) => { }); - request.open('GET', 'todos.json'); + request.open('GET', resource); request.send(); }; -console.log(1); -console.log(2); - -getTodos((err, data) => { - console.log('callback function fired'); - if(err){ - console.log(err); - } else { +getTodos('json/luigi.json', (err, data) => { + console.log(data); + getTodos('json/mario.json', (err, data) => { console.log(data); - } -}); - -console.log(3); -console.log(4); \ No newline at end of file + getTodos('json/shaun.json', (err, data) => { + console.log(data); + }); + }); +}); \ No newline at end of file diff --git a/chapter_12/todos.json b/chapter_12/todos.json deleted file mode 100644 index b05007d9..00000000 --- a/chapter_12/todos.json +++ /dev/null @@ -1,5 +0,0 @@ -[ - {"text": "play mariokart", "author": "Shaun"}, - {"text": "buy some bread", "author": "Mario"}, - {"text": "do the plumming", "author": "Luigi"} -] \ No newline at end of file From b461abdd04d22b6134282f45ea905fe4298086c4 Mon Sep 17 00:00:00 2001 From: Shaun Date: Thu, 21 Feb 2019 16:54:20 +0000 Subject: [PATCH 085/100] lesson-94 --- chapter_12/sandbox.js | 64 +++++++++++++++++++++++++++++-------------- 1 file changed, 43 insertions(+), 21 deletions(-) diff --git a/chapter_12/sandbox.js b/chapter_12/sandbox.js index 17b3d6a6..c4baeb2d 100644 --- a/chapter_12/sandbox.js +++ b/chapter_12/sandbox.js @@ -1,29 +1,51 @@ -const getTodos = (resource, callback) => { +const getTodos = (resource) => { - const request = new XMLHttpRequest(); + return new Promise((resolve, reject) => { + const request = new XMLHttpRequest(); - request.addEventListener('readystatechange', () => { + request.addEventListener('readystatechange', () => { + + if(request.readyState === 4 && request.status === 200){ + const data = JSON.parse(request.responseText); + resolve(data); + } else if (request.readyState === 4){ + reject('could not fetch the data'); + } + + }); + + request.open('GET', resource); + request.send(); + }); + +}; - if(request.readyState === 4 && request.status === 200){ - const data = JSON.parse(request.responseText); - callback(undefined, data); - } else if (request.readyState === 4){ - callback('could not fetch the data', undefined); - } +getTodos('json/luigi.json').then(data => { + console.log('promise resolved:', data); +}).catch(err => { + console.log('promise rejected:', err); +}); +// promise example +const getSomething = () => { + + return new Promise((resolve, reject) => { + // do something (fetch data) + // resolve('some data'); + reject('some error'); }); - - request.open('GET', resource); - request.send(); }; -getTodos('json/luigi.json', (err, data) => { - console.log(data); - getTodos('json/mario.json', (err, data) => { - console.log(data); - getTodos('json/shaun.json', (err, data) => { - console.log(data); - }); - }); -}); \ No newline at end of file +// getSomething().then(data => { +// console.log('promise resolved:', data); +// }, err => { +// console.log('promise rejected:', err); +// }); + +// getSomething().then(data => { +// console.log('promise resolved:', data); +// }).catch(err => { +// console.log('promise rejected:', err); +// }); + From 275f9278c43733fa778c851137e3cd2926efd0ad Mon Sep 17 00:00:00 2001 From: Shaun Date: Thu, 21 Feb 2019 16:58:47 +0000 Subject: [PATCH 086/100] lesson-95 --- chapter_12/sandbox.js | 34 ++++++++-------------------------- 1 file changed, 8 insertions(+), 26 deletions(-) diff --git a/chapter_12/sandbox.js b/chapter_12/sandbox.js index c4baeb2d..7b603bfc 100644 --- a/chapter_12/sandbox.js +++ b/chapter_12/sandbox.js @@ -21,31 +21,13 @@ const getTodos = (resource) => { }; getTodos('json/luigi.json').then(data => { - console.log('promise resolved:', data); + console.log('promise 1 resolved:', data); + return getTodos('json/mario.json'); +}).then(data => { + console.log('promise 2 resolved:', data); + return getTodos('json/shaun.json'); +}).then(data => { + console.log('promise 3 resolved:', data); }).catch(err => { console.log('promise rejected:', err); -}); - -// promise example -const getSomething = () => { - - return new Promise((resolve, reject) => { - // do something (fetch data) - // resolve('some data'); - reject('some error'); - }); - -}; - -// getSomething().then(data => { -// console.log('promise resolved:', data); -// }, err => { -// console.log('promise rejected:', err); -// }); - -// getSomething().then(data => { -// console.log('promise resolved:', data); -// }).catch(err => { -// console.log('promise rejected:', err); -// }); - +}); \ No newline at end of file From 868d9ca4c221dc038c87a5e373c1792d2ea12f3a Mon Sep 17 00:00:00 2001 From: Shaun Date: Thu, 21 Feb 2019 17:17:57 +0000 Subject: [PATCH 087/100] lesson-96 --- chapter_12/sandbox.js | 43 ++++++++++--------------------------------- 1 file changed, 10 insertions(+), 33 deletions(-) diff --git a/chapter_12/sandbox.js b/chapter_12/sandbox.js index 7b603bfc..3fb4e394 100644 --- a/chapter_12/sandbox.js +++ b/chapter_12/sandbox.js @@ -1,33 +1,10 @@ -const getTodos = (resource) => { - - return new Promise((resolve, reject) => { - const request = new XMLHttpRequest(); - - request.addEventListener('readystatechange', () => { - - if(request.readyState === 4 && request.status === 200){ - const data = JSON.parse(request.responseText); - resolve(data); - } else if (request.readyState === 4){ - reject('could not fetch the data'); - } - - }); - - request.open('GET', resource); - request.send(); - }); - -}; - -getTodos('json/luigi.json').then(data => { - console.log('promise 1 resolved:', data); - return getTodos('json/mario.json'); -}).then(data => { - console.log('promise 2 resolved:', data); - return getTodos('json/shaun.json'); -}).then(data => { - console.log('promise 3 resolved:', data); -}).catch(err => { - console.log('promise rejected:', err); -}); \ No newline at end of file +// fetch API + +fetch('json/luigi.json').then(response => { + //console.log(response); + return response.json(); + }).then(data => { + console.log(data); + }).catch(err => { + console.log(err); + }); \ No newline at end of file From 06cdc27a846171630f76b23c7a1d7346cec65fe3 Mon Sep 17 00:00:00 2001 From: Shaun Date: Thu, 21 Feb 2019 17:26:31 +0000 Subject: [PATCH 088/100] lesson-97 --- chapter_12/sandbox.js | 30 ++++++++++++++++++++---------- 1 file changed, 20 insertions(+), 10 deletions(-) diff --git a/chapter_12/sandbox.js b/chapter_12/sandbox.js index 3fb4e394..96bea4ca 100644 --- a/chapter_12/sandbox.js +++ b/chapter_12/sandbox.js @@ -1,10 +1,20 @@ -// fetch API - -fetch('json/luigi.json').then(response => { - //console.log(response); - return response.json(); - }).then(data => { - console.log(data); - }).catch(err => { - console.log(err); - }); \ No newline at end of file +// async & await + +const getTodos = async () => { + + let response = await fetch('json/luigi.json'); + let data = await response.json(); + return data; + +}; + +console.log(1); +console.log(2); + +getTodos() + .then(data => console.log('resolved:', data)); + +console.log(3); +console.log(4); + +// console.log(getTodos()); \ No newline at end of file From 27777e1e466b20796ce673563a2df60c6fc61ec4 Mon Sep 17 00:00:00 2001 From: Shaun Date: Thu, 21 Feb 2019 17:28:32 +0000 Subject: [PATCH 089/100] lesson-98 --- chapter_12/sandbox.js | 16 +++++++--------- 1 file changed, 7 insertions(+), 9 deletions(-) diff --git a/chapter_12/sandbox.js b/chapter_12/sandbox.js index 96bea4ca..caa3cf02 100644 --- a/chapter_12/sandbox.js +++ b/chapter_12/sandbox.js @@ -3,18 +3,16 @@ const getTodos = async () => { let response = await fetch('json/luigi.json'); + + if(response.status !== 200){ + throw new Error('cannot fetch the data'); + } + let data = await response.json(); return data; }; -console.log(1); -console.log(2); - getTodos() - .then(data => console.log('resolved:', data)); - -console.log(3); -console.log(4); - -// console.log(getTodos()); \ No newline at end of file + .then(data => console.log('resolved:', data)) + .catch(err => console.log('rejected:', err.message)); \ No newline at end of file From 5a59bf296f74369a4a8b0b17987560e4477038e0 Mon Sep 17 00:00:00 2001 From: Shaun Date: Mon, 25 Feb 2019 10:15:53 +0000 Subject: [PATCH 090/100] lesson-99 --- chapter_12/index.html | 14 -------------- chapter_12/json/luigi.json | 5 ----- chapter_12/json/mario.json | 5 ----- chapter_12/json/shaun.json | 5 ----- chapter_12/sandbox.js | 18 ------------------ weather_app/index.html | 15 +++++++++++++++ weather_app/scripts/app.js | 0 weather_app/scripts/forecast.js | 0 weather_app/styles.css | 0 9 files changed, 15 insertions(+), 47 deletions(-) delete mode 100644 chapter_12/index.html delete mode 100644 chapter_12/json/luigi.json delete mode 100644 chapter_12/json/mario.json delete mode 100644 chapter_12/json/shaun.json delete mode 100644 chapter_12/sandbox.js create mode 100644 weather_app/index.html create mode 100644 weather_app/scripts/app.js create mode 100644 weather_app/scripts/forecast.js create mode 100644 weather_app/styles.css diff --git a/chapter_12/index.html b/chapter_12/index.html deleted file mode 100644 index 8266e47c..00000000 --- a/chapter_12/index.html +++ /dev/null @@ -1,14 +0,0 @@ - - - - - - Asynchronous JavaScript - - - -

    Async JavaScript

    - - - - \ No newline at end of file diff --git a/chapter_12/json/luigi.json b/chapter_12/json/luigi.json deleted file mode 100644 index 0a7cdf67..00000000 --- a/chapter_12/json/luigi.json +++ /dev/null @@ -1,5 +0,0 @@ -[ - {"text": "do the plumming", "author": "Luigi"}, - {"text": "avoid mario", "author": "Luigi"}, - {"text": "go kart racing", "author": "Luigi"} -] \ No newline at end of file diff --git a/chapter_12/json/mario.json b/chapter_12/json/mario.json deleted file mode 100644 index 5ab76086..00000000 --- a/chapter_12/json/mario.json +++ /dev/null @@ -1,5 +0,0 @@ -[ - {"text": "make fun of luigi", "author": "Mario"}, - {"text": "rescue peach (again)", "author": "Mario"}, - {"text": "go kart racing", "author": "Mario"} -] \ No newline at end of file diff --git a/chapter_12/json/shaun.json b/chapter_12/json/shaun.json deleted file mode 100644 index 838ef9af..00000000 --- a/chapter_12/json/shaun.json +++ /dev/null @@ -1,5 +0,0 @@ -[ - {"text": "play mariokart", "author": "Shaun"}, - {"text": "buy some bread", "author": "Shaun"}, - {"text": "take a nap", "author": "Shaun"} -] \ No newline at end of file diff --git a/chapter_12/sandbox.js b/chapter_12/sandbox.js deleted file mode 100644 index caa3cf02..00000000 --- a/chapter_12/sandbox.js +++ /dev/null @@ -1,18 +0,0 @@ -// async & await - -const getTodos = async () => { - - let response = await fetch('json/luigi.json'); - - if(response.status !== 200){ - throw new Error('cannot fetch the data'); - } - - let data = await response.json(); - return data; - -}; - -getTodos() - .then(data => console.log('resolved:', data)) - .catch(err => console.log('rejected:', err.message)); \ No newline at end of file diff --git a/weather_app/index.html b/weather_app/index.html new file mode 100644 index 00000000..f43e0895 --- /dev/null +++ b/weather_app/index.html @@ -0,0 +1,15 @@ + + + + + + + + Ninja Weather + + + + + + + \ No newline at end of file diff --git a/weather_app/scripts/app.js b/weather_app/scripts/app.js new file mode 100644 index 00000000..e69de29b diff --git a/weather_app/scripts/forecast.js b/weather_app/scripts/forecast.js new file mode 100644 index 00000000..e69de29b diff --git a/weather_app/styles.css b/weather_app/styles.css new file mode 100644 index 00000000..e69de29b From db4ce972ca007b9f6ccb869e71b92cf7f78d1356 Mon Sep 17 00:00:00 2001 From: Shaun Date: Mon, 25 Feb 2019 10:26:21 +0000 Subject: [PATCH 091/100] lesson-100 --- weather_app/index.html | 26 ++++++++++++++++++++++++++ weather_app/styles.css | 8 ++++++++ 2 files changed, 34 insertions(+) diff --git a/weather_app/index.html b/weather_app/index.html index f43e0895..8d8835a3 100644 --- a/weather_app/index.html +++ b/weather_app/index.html @@ -8,6 +8,32 @@ Ninja Weather + +
    + +

    Weather Ninja

    + +
    + + +
    + +
    + +
    + +
    +
    +
    City name
    +
    Weather condition
    +
    + temp + °C +
    +
    +
    + +
    diff --git a/weather_app/styles.css b/weather_app/styles.css index e69de29b..00c07271 100644 --- a/weather_app/styles.css +++ b/weather_app/styles.css @@ -0,0 +1,8 @@ +body{ + background: #eeedec; + letter-spacing: 0.2em; + font-size: 0.8em; +} +.container{ + max-width: 400px; +} \ No newline at end of file From 934d1ce65143d1a00f4cdb96365bf0222656b44b Mon Sep 17 00:00:00 2001 From: Shaun Date: Mon, 25 Feb 2019 10:43:08 +0000 Subject: [PATCH 092/100] lesson-101 --- weather_app/scripts/forecast.js | 1 + 1 file changed, 1 insertion(+) diff --git a/weather_app/scripts/forecast.js b/weather_app/scripts/forecast.js index e69de29b..1d512179 100644 --- a/weather_app/scripts/forecast.js +++ b/weather_app/scripts/forecast.js @@ -0,0 +1 @@ +const key = ' xvpOBAAypFh84YftzPvUCh8ZM80gbYIG'; \ No newline at end of file From 4cda4d5620a6e15927f23637ad828ed3d05ca07e Mon Sep 17 00:00:00 2001 From: Shaun Date: Mon, 25 Feb 2019 10:45:25 +0000 Subject: [PATCH 093/100] lesson-102 --- weather_app/scripts/forecast.js | 19 ++++++++++++++++++- 1 file changed, 18 insertions(+), 1 deletion(-) diff --git a/weather_app/scripts/forecast.js b/weather_app/scripts/forecast.js index 1d512179..f78cb6f4 100644 --- a/weather_app/scripts/forecast.js +++ b/weather_app/scripts/forecast.js @@ -1 +1,18 @@ -const key = ' xvpOBAAypFh84YftzPvUCh8ZM80gbYIG'; \ No newline at end of file +const key = ' xvpOBAAypFh84YftzPvUCh8ZM80gbYIG'; + +// get city information +const getCity = async (city) => { + + const base = 'http://dataservice.accuweather.com/locations/v1/cities/search'; + const query = `?apikey=${key}&q=${city}`; + + const response = await fetch(base + query); + const data = await response.json(); + + return data[0]; + +}; + +getCity('manchester') + .then(data => console.log(data)) + .catch(err => console.log(err)); \ No newline at end of file From dbc38fe3572eb0f056002aad9dfd443d91987925 Mon Sep 17 00:00:00 2001 From: Shaun Date: Mon, 25 Feb 2019 10:49:05 +0000 Subject: [PATCH 094/100] lesson-103 --- weather_app/scripts/forecast.js | 21 ++++++++++++++++++--- 1 file changed, 18 insertions(+), 3 deletions(-) diff --git a/weather_app/scripts/forecast.js b/weather_app/scripts/forecast.js index f78cb6f4..10498815 100644 --- a/weather_app/scripts/forecast.js +++ b/weather_app/scripts/forecast.js @@ -1,5 +1,18 @@ const key = ' xvpOBAAypFh84YftzPvUCh8ZM80gbYIG'; +// get weather information +const getWeather = async (id) => { + + const base = 'http://dataservice.accuweather.com/currentconditions/v1/'; + const query = `${id}?apikey=${key}`; + + const response = await fetch(base + query); + const data = await response.json(); + + return data[0]; + +}; + // get city information const getCity = async (city) => { @@ -13,6 +26,8 @@ const getCity = async (city) => { }; -getCity('manchester') - .then(data => console.log(data)) - .catch(err => console.log(err)); \ No newline at end of file +getCity('manchester').then(data => { + return getWeather(data.Key); +}).then(data => { + console.log(data); +}).catch(err => console.log(err)); \ No newline at end of file From e59f7e5bd6dc5f186cd4b5d5f0e2335020bd4fd3 Mon Sep 17 00:00:00 2001 From: Shaun Date: Mon, 25 Feb 2019 10:59:31 +0000 Subject: [PATCH 095/100] lesson-104 --- weather_app/scripts/app.js | 26 ++++++++++++++++++++++++++ weather_app/scripts/forecast.js | 8 +------- 2 files changed, 27 insertions(+), 7 deletions(-) diff --git a/weather_app/scripts/app.js b/weather_app/scripts/app.js index e69de29b..b5b3e916 100644 --- a/weather_app/scripts/app.js +++ b/weather_app/scripts/app.js @@ -0,0 +1,26 @@ +const cityForm = document.querySelector('form'); + +const updateCity = async (city) => { + + const cityDets = await getCity(city); + const weather = await getWeather(cityDets.Key); + return { + cityDets: cityDets, + weather: weather + }; + +}; + +cityForm.addEventListener('submit', e => { + // prevent default action + e.preventDefault(); + + // get city value + const city = cityForm.city.value.trim(); + cityForm.reset(); + + // update the ui with new city + updateCity(city) + .then(data => console.log(data)) + .catch(err => console.log(err)); +}); \ No newline at end of file diff --git a/weather_app/scripts/forecast.js b/weather_app/scripts/forecast.js index 10498815..84777858 100644 --- a/weather_app/scripts/forecast.js +++ b/weather_app/scripts/forecast.js @@ -24,10 +24,4 @@ const getCity = async (city) => { return data[0]; -}; - -getCity('manchester').then(data => { - return getWeather(data.Key); -}).then(data => { - console.log(data); -}).catch(err => console.log(err)); \ No newline at end of file +}; \ No newline at end of file From 5f82a5fb0eda9a7f2c7cdf64fd386d77315ab050 Mon Sep 17 00:00:00 2001 From: Shaun Date: Mon, 25 Feb 2019 11:05:32 +0000 Subject: [PATCH 096/100] lesson-105 --- weather_app/scripts/app.js | 5 +---- 1 file changed, 1 insertion(+), 4 deletions(-) diff --git a/weather_app/scripts/app.js b/weather_app/scripts/app.js index b5b3e916..cc829a50 100644 --- a/weather_app/scripts/app.js +++ b/weather_app/scripts/app.js @@ -4,10 +4,7 @@ const updateCity = async (city) => { const cityDets = await getCity(city); const weather = await getWeather(cityDets.Key); - return { - cityDets: cityDets, - weather: weather - }; + return { cityDets, weather }; }; From 275114dd9b762e81751e58071911ef270a3c1e7d Mon Sep 17 00:00:00 2001 From: Shaun Date: Mon, 25 Feb 2019 11:09:37 +0000 Subject: [PATCH 097/100] lesson-106 --- weather_app/index.html | 11 ++--------- weather_app/scripts/app.js | 25 ++++++++++++++++++++++++- 2 files changed, 26 insertions(+), 10 deletions(-) diff --git a/weather_app/index.html b/weather_app/index.html index 8d8835a3..d1100667 100644 --- a/weather_app/index.html +++ b/weather_app/index.html @@ -18,19 +18,12 @@

    Weather Ninja

    -
    +
    -
    -
    City name
    -
    Weather condition
    -
    - temp - °C -
    -
    +
    diff --git a/weather_app/scripts/app.js b/weather_app/scripts/app.js index cc829a50..cf9b3eb5 100644 --- a/weather_app/scripts/app.js +++ b/weather_app/scripts/app.js @@ -1,4 +1,27 @@ const cityForm = document.querySelector('form'); +const card = document.querySelector('.card'); +const details = document.querySelector('.details'); + +const updateUI = (data) => { + + const cityDets = data.cityDets; + const weather = data.weather; + + // update details template + details.innerHTML = ` +
    ${cityDets.EnglishName}
    +
    ${weather.WeatherText}
    +
    + ${weather.Temperature.Metric.Value} + °C +
    + `; + + // remove the d-none class if present + if(card.classList.contains('d-none')){ + card.classList.remove('d-none'); + } +}; const updateCity = async (city) => { @@ -18,6 +41,6 @@ cityForm.addEventListener('submit', e => { // update the ui with new city updateCity(city) - .then(data => console.log(data)) + .then(data => updateUI(data)) .catch(err => console.log(err)); }); \ No newline at end of file From 0c3a1d4dca00533cb1f345d484052a86eaddf229 Mon Sep 17 00:00:00 2001 From: Shaun Date: Mon, 25 Feb 2019 11:16:11 +0000 Subject: [PATCH 098/100] lesson-107 --- weather_app/scripts/app.js | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/weather_app/scripts/app.js b/weather_app/scripts/app.js index cf9b3eb5..3ed0132f 100644 --- a/weather_app/scripts/app.js +++ b/weather_app/scripts/app.js @@ -3,9 +3,8 @@ const card = document.querySelector('.card'); const details = document.querySelector('.details'); const updateUI = (data) => { - - const cityDets = data.cityDets; - const weather = data.weather; + // destructure properties + const { cityDets, weather } = data; // update details template details.innerHTML = ` From 4fa8460583b40f180fbb42126cb2c35c628dc629 Mon Sep 17 00:00:00 2001 From: Shaun Date: Mon, 25 Feb 2019 11:28:13 +0000 Subject: [PATCH 099/100] lesson-108 --- weather_app/img/day.svg | 14 ++++++++++ weather_app/img/icons/1.svg | 19 ++++++++++++++ weather_app/img/icons/11.svg | 13 +++++++++ weather_app/img/icons/12.svg | 13 +++++++++ weather_app/img/icons/13.svg | 22 ++++++++++++++++ weather_app/img/icons/14.svg | 21 +++++++++++++++ weather_app/img/icons/15.svg | 12 +++++++++ weather_app/img/icons/16.svg | 12 +++++++++ weather_app/img/icons/17.svg | 21 +++++++++++++++ weather_app/img/icons/18.svg | 14 ++++++++++ weather_app/img/icons/19.svg | 18 +++++++++++++ weather_app/img/icons/2.svg | 20 ++++++++++++++ weather_app/img/icons/20.svg | 19 ++++++++++++++ weather_app/img/icons/21.svg | 19 ++++++++++++++ weather_app/img/icons/22.svg | 15 +++++++++++ weather_app/img/icons/23.svg | 17 ++++++++++++ weather_app/img/icons/24.svg | 15 +++++++++++ weather_app/img/icons/25.svg | 17 ++++++++++++ weather_app/img/icons/26.svg | 17 ++++++++++++ weather_app/img/icons/27.svg | 18 +++++++++++++ weather_app/img/icons/3.svg | 20 ++++++++++++++ weather_app/img/icons/30.svg | 11 ++++++++ weather_app/img/icons/31.svg | 11 ++++++++ weather_app/img/icons/32.svg | 14 ++++++++++ weather_app/img/icons/33.svg | 11 ++++++++ weather_app/img/icons/34.svg | 11 ++++++++ weather_app/img/icons/35.svg | 16 +++++++++++ weather_app/img/icons/36.svg | 16 +++++++++++ weather_app/img/icons/37.svg | 17 ++++++++++++ weather_app/img/icons/38.svg | 16 +++++++++++ weather_app/img/icons/39.svg | 23 ++++++++++++++++ weather_app/img/icons/4.svg | 20 ++++++++++++++ weather_app/img/icons/40.svg | 23 ++++++++++++++++ weather_app/img/icons/41.svg | 18 +++++++++++++ weather_app/img/icons/42.svg | 18 +++++++++++++ weather_app/img/icons/43.svg | 21 +++++++++++++++ weather_app/img/icons/44.svg | 21 +++++++++++++++ weather_app/img/icons/5.svg | 21 +++++++++++++++ weather_app/img/icons/6.svg | 11 ++++++++ weather_app/img/icons/7.svg | 11 ++++++++ weather_app/img/icons/8.svg | 11 ++++++++ weather_app/img/night.svg | 51 ++++++++++++++++++++++++++++++++++++ weather_app/index.html | 2 +- weather_app/scripts/app.js | 14 ++++++++++ weather_app/styles.css | 7 +++++ 45 files changed, 750 insertions(+), 1 deletion(-) create mode 100644 weather_app/img/day.svg create mode 100644 weather_app/img/icons/1.svg create mode 100644 weather_app/img/icons/11.svg create mode 100644 weather_app/img/icons/12.svg create mode 100644 weather_app/img/icons/13.svg create mode 100644 weather_app/img/icons/14.svg create mode 100644 weather_app/img/icons/15.svg create mode 100644 weather_app/img/icons/16.svg create mode 100644 weather_app/img/icons/17.svg create mode 100644 weather_app/img/icons/18.svg create mode 100644 weather_app/img/icons/19.svg create mode 100644 weather_app/img/icons/2.svg create mode 100644 weather_app/img/icons/20.svg create mode 100644 weather_app/img/icons/21.svg create mode 100644 weather_app/img/icons/22.svg create mode 100644 weather_app/img/icons/23.svg create mode 100644 weather_app/img/icons/24.svg create mode 100644 weather_app/img/icons/25.svg create mode 100644 weather_app/img/icons/26.svg create mode 100644 weather_app/img/icons/27.svg create mode 100644 weather_app/img/icons/3.svg create mode 100644 weather_app/img/icons/30.svg create mode 100644 weather_app/img/icons/31.svg create mode 100644 weather_app/img/icons/32.svg create mode 100644 weather_app/img/icons/33.svg create mode 100644 weather_app/img/icons/34.svg create mode 100644 weather_app/img/icons/35.svg create mode 100644 weather_app/img/icons/36.svg create mode 100644 weather_app/img/icons/37.svg create mode 100644 weather_app/img/icons/38.svg create mode 100644 weather_app/img/icons/39.svg create mode 100644 weather_app/img/icons/4.svg create mode 100644 weather_app/img/icons/40.svg create mode 100644 weather_app/img/icons/41.svg create mode 100644 weather_app/img/icons/42.svg create mode 100644 weather_app/img/icons/43.svg create mode 100644 weather_app/img/icons/44.svg create mode 100644 weather_app/img/icons/5.svg create mode 100644 weather_app/img/icons/6.svg create mode 100644 weather_app/img/icons/7.svg create mode 100644 weather_app/img/icons/8.svg create mode 100644 weather_app/img/night.svg diff --git a/weather_app/img/day.svg b/weather_app/img/day.svg new file mode 100644 index 00000000..de48965e --- /dev/null +++ b/weather_app/img/day.svg @@ -0,0 +1,14 @@ + + + + + + + + + + + + + + diff --git a/weather_app/img/icons/1.svg b/weather_app/img/icons/1.svg new file mode 100644 index 00000000..00eaf5f6 --- /dev/null +++ b/weather_app/img/icons/1.svg @@ -0,0 +1,19 @@ + + + + + + diff --git a/weather_app/img/icons/11.svg b/weather_app/img/icons/11.svg new file mode 100644 index 00000000..2eb3dea2 --- /dev/null +++ b/weather_app/img/icons/11.svg @@ -0,0 +1,13 @@ + + + + + + diff --git a/weather_app/img/icons/12.svg b/weather_app/img/icons/12.svg new file mode 100644 index 00000000..724bb2f2 --- /dev/null +++ b/weather_app/img/icons/12.svg @@ -0,0 +1,13 @@ + + + + + + diff --git a/weather_app/img/icons/13.svg b/weather_app/img/icons/13.svg new file mode 100644 index 00000000..036d5270 --- /dev/null +++ b/weather_app/img/icons/13.svg @@ -0,0 +1,22 @@ + + + + + + diff --git a/weather_app/img/icons/14.svg b/weather_app/img/icons/14.svg new file mode 100644 index 00000000..eb4e4fc8 --- /dev/null +++ b/weather_app/img/icons/14.svg @@ -0,0 +1,21 @@ + + + + + + diff --git a/weather_app/img/icons/15.svg b/weather_app/img/icons/15.svg new file mode 100644 index 00000000..0e9b2c64 --- /dev/null +++ b/weather_app/img/icons/15.svg @@ -0,0 +1,12 @@ + + + + + + diff --git a/weather_app/img/icons/16.svg b/weather_app/img/icons/16.svg new file mode 100644 index 00000000..0e9b2c64 --- /dev/null +++ b/weather_app/img/icons/16.svg @@ -0,0 +1,12 @@ + + + + + + diff --git a/weather_app/img/icons/17.svg b/weather_app/img/icons/17.svg new file mode 100644 index 00000000..f01f2606 --- /dev/null +++ b/weather_app/img/icons/17.svg @@ -0,0 +1,21 @@ + + + + + + diff --git a/weather_app/img/icons/18.svg b/weather_app/img/icons/18.svg new file mode 100644 index 00000000..c7d0cc2c --- /dev/null +++ b/weather_app/img/icons/18.svg @@ -0,0 +1,14 @@ + + + + + + diff --git a/weather_app/img/icons/19.svg b/weather_app/img/icons/19.svg new file mode 100644 index 00000000..ebc775c0 --- /dev/null +++ b/weather_app/img/icons/19.svg @@ -0,0 +1,18 @@ + + + + + + diff --git a/weather_app/img/icons/2.svg b/weather_app/img/icons/2.svg new file mode 100644 index 00000000..c1fc09c0 --- /dev/null +++ b/weather_app/img/icons/2.svg @@ -0,0 +1,20 @@ + + + + + + diff --git a/weather_app/img/icons/20.svg b/weather_app/img/icons/20.svg new file mode 100644 index 00000000..888a922e --- /dev/null +++ b/weather_app/img/icons/20.svg @@ -0,0 +1,19 @@ + + + + + + + + + + diff --git a/weather_app/img/icons/21.svg b/weather_app/img/icons/21.svg new file mode 100644 index 00000000..888a922e --- /dev/null +++ b/weather_app/img/icons/21.svg @@ -0,0 +1,19 @@ + + + + + + + + + + diff --git a/weather_app/img/icons/22.svg b/weather_app/img/icons/22.svg new file mode 100644 index 00000000..c6d2fb5f --- /dev/null +++ b/weather_app/img/icons/22.svg @@ -0,0 +1,15 @@ + + + + + + diff --git a/weather_app/img/icons/23.svg b/weather_app/img/icons/23.svg new file mode 100644 index 00000000..e8851987 --- /dev/null +++ b/weather_app/img/icons/23.svg @@ -0,0 +1,17 @@ + + + + + + diff --git a/weather_app/img/icons/24.svg b/weather_app/img/icons/24.svg new file mode 100644 index 00000000..c6d2fb5f --- /dev/null +++ b/weather_app/img/icons/24.svg @@ -0,0 +1,15 @@ + + + + + + diff --git a/weather_app/img/icons/25.svg b/weather_app/img/icons/25.svg new file mode 100644 index 00000000..3bf11e15 --- /dev/null +++ b/weather_app/img/icons/25.svg @@ -0,0 +1,17 @@ + + + + + + diff --git a/weather_app/img/icons/26.svg b/weather_app/img/icons/26.svg new file mode 100644 index 00000000..77fbd77c --- /dev/null +++ b/weather_app/img/icons/26.svg @@ -0,0 +1,17 @@ + + + + + + diff --git a/weather_app/img/icons/27.svg b/weather_app/img/icons/27.svg new file mode 100644 index 00000000..367b602d --- /dev/null +++ b/weather_app/img/icons/27.svg @@ -0,0 +1,18 @@ + + + + + + diff --git a/weather_app/img/icons/3.svg b/weather_app/img/icons/3.svg new file mode 100644 index 00000000..c1fc09c0 --- /dev/null +++ b/weather_app/img/icons/3.svg @@ -0,0 +1,20 @@ + + + + + + diff --git a/weather_app/img/icons/30.svg b/weather_app/img/icons/30.svg new file mode 100644 index 00000000..b45d03f5 --- /dev/null +++ b/weather_app/img/icons/30.svg @@ -0,0 +1,11 @@ + + + + + + diff --git a/weather_app/img/icons/31.svg b/weather_app/img/icons/31.svg new file mode 100644 index 00000000..caf0fd15 --- /dev/null +++ b/weather_app/img/icons/31.svg @@ -0,0 +1,11 @@ + + + + + + diff --git a/weather_app/img/icons/32.svg b/weather_app/img/icons/32.svg new file mode 100644 index 00000000..03e12e54 --- /dev/null +++ b/weather_app/img/icons/32.svg @@ -0,0 +1,14 @@ + + + + + + diff --git a/weather_app/img/icons/33.svg b/weather_app/img/icons/33.svg new file mode 100644 index 00000000..a3d7f863 --- /dev/null +++ b/weather_app/img/icons/33.svg @@ -0,0 +1,11 @@ + + + + + + diff --git a/weather_app/img/icons/34.svg b/weather_app/img/icons/34.svg new file mode 100644 index 00000000..a3d7f863 --- /dev/null +++ b/weather_app/img/icons/34.svg @@ -0,0 +1,11 @@ + + + + + + diff --git a/weather_app/img/icons/35.svg b/weather_app/img/icons/35.svg new file mode 100644 index 00000000..ee057b31 --- /dev/null +++ b/weather_app/img/icons/35.svg @@ -0,0 +1,16 @@ + + + + + + diff --git a/weather_app/img/icons/36.svg b/weather_app/img/icons/36.svg new file mode 100644 index 00000000..ee057b31 --- /dev/null +++ b/weather_app/img/icons/36.svg @@ -0,0 +1,16 @@ + + + + + + diff --git a/weather_app/img/icons/37.svg b/weather_app/img/icons/37.svg new file mode 100644 index 00000000..f1f462a9 --- /dev/null +++ b/weather_app/img/icons/37.svg @@ -0,0 +1,17 @@ + + + + + + diff --git a/weather_app/img/icons/38.svg b/weather_app/img/icons/38.svg new file mode 100644 index 00000000..ee057b31 --- /dev/null +++ b/weather_app/img/icons/38.svg @@ -0,0 +1,16 @@ + + + + + + diff --git a/weather_app/img/icons/39.svg b/weather_app/img/icons/39.svg new file mode 100644 index 00000000..8bb77cad --- /dev/null +++ b/weather_app/img/icons/39.svg @@ -0,0 +1,23 @@ + + + + + + + + + + diff --git a/weather_app/img/icons/4.svg b/weather_app/img/icons/4.svg new file mode 100644 index 00000000..c1fc09c0 --- /dev/null +++ b/weather_app/img/icons/4.svg @@ -0,0 +1,20 @@ + + + + + + diff --git a/weather_app/img/icons/40.svg b/weather_app/img/icons/40.svg new file mode 100644 index 00000000..8bb77cad --- /dev/null +++ b/weather_app/img/icons/40.svg @@ -0,0 +1,23 @@ + + + + + + + + + + diff --git a/weather_app/img/icons/41.svg b/weather_app/img/icons/41.svg new file mode 100644 index 00000000..b17070b5 --- /dev/null +++ b/weather_app/img/icons/41.svg @@ -0,0 +1,18 @@ + + + + + + diff --git a/weather_app/img/icons/42.svg b/weather_app/img/icons/42.svg new file mode 100644 index 00000000..b17070b5 --- /dev/null +++ b/weather_app/img/icons/42.svg @@ -0,0 +1,18 @@ + + + + + + diff --git a/weather_app/img/icons/43.svg b/weather_app/img/icons/43.svg new file mode 100644 index 00000000..e90922c1 --- /dev/null +++ b/weather_app/img/icons/43.svg @@ -0,0 +1,21 @@ + + + + + + diff --git a/weather_app/img/icons/44.svg b/weather_app/img/icons/44.svg new file mode 100644 index 00000000..952452dd --- /dev/null +++ b/weather_app/img/icons/44.svg @@ -0,0 +1,21 @@ + + + + + + diff --git a/weather_app/img/icons/5.svg b/weather_app/img/icons/5.svg new file mode 100644 index 00000000..6564301c --- /dev/null +++ b/weather_app/img/icons/5.svg @@ -0,0 +1,21 @@ + + + + + + diff --git a/weather_app/img/icons/6.svg b/weather_app/img/icons/6.svg new file mode 100644 index 00000000..3ca9a4c8 --- /dev/null +++ b/weather_app/img/icons/6.svg @@ -0,0 +1,11 @@ + + + + + + diff --git a/weather_app/img/icons/7.svg b/weather_app/img/icons/7.svg new file mode 100644 index 00000000..3ca9a4c8 --- /dev/null +++ b/weather_app/img/icons/7.svg @@ -0,0 +1,11 @@ + + + + + + diff --git a/weather_app/img/icons/8.svg b/weather_app/img/icons/8.svg new file mode 100644 index 00000000..3ca9a4c8 --- /dev/null +++ b/weather_app/img/icons/8.svg @@ -0,0 +1,11 @@ + + + + + + diff --git a/weather_app/img/night.svg b/weather_app/img/night.svg new file mode 100644 index 00000000..73823b3d --- /dev/null +++ b/weather_app/img/night.svg @@ -0,0 +1,51 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/weather_app/index.html b/weather_app/index.html index d1100667..59757644 100644 --- a/weather_app/index.html +++ b/weather_app/index.html @@ -21,7 +21,7 @@

    Weather Ninja

    - +
    diff --git a/weather_app/scripts/app.js b/weather_app/scripts/app.js index 3ed0132f..1171bf9b 100644 --- a/weather_app/scripts/app.js +++ b/weather_app/scripts/app.js @@ -1,6 +1,8 @@ const cityForm = document.querySelector('form'); const card = document.querySelector('.card'); const details = document.querySelector('.details'); +const time = document.querySelector('img.time'); +const icon = document.querySelector('.icon img'); const updateUI = (data) => { // destructure properties @@ -16,6 +18,18 @@ const updateUI = (data) => {
    `; + // update the night/day & icon images + const iconSrc = `img/icons/${weather.WeatherIcon}.svg`; + icon.setAttribute('src', iconSrc); + + let timeSrc = null; + if(weather.IsDayTime){ + timeSrc = 'img/day.svg'; + } else { + timeSrc = 'img/night.svg'; + } + time.setAttribute('src', timeSrc); + // remove the d-none class if present if(card.classList.contains('d-none')){ card.classList.remove('d-none'); diff --git a/weather_app/styles.css b/weather_app/styles.css index 00c07271..4d056139 100644 --- a/weather_app/styles.css +++ b/weather_app/styles.css @@ -5,4 +5,11 @@ body{ } .container{ max-width: 400px; +} +.icon{ + position: relative; + top: -50px; + border-radius: 50%; + width: 100px; + margin-bottom: -50px; } \ No newline at end of file From 14efdc5a363f9e351041efff4f045978ad3642b9 Mon Sep 17 00:00:00 2001 From: Shaun Date: Mon, 25 Feb 2019 11:30:15 +0000 Subject: [PATCH 100/100] lesson-109 --- weather_app/scripts/app.js | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/weather_app/scripts/app.js b/weather_app/scripts/app.js index 1171bf9b..3233f2f2 100644 --- a/weather_app/scripts/app.js +++ b/weather_app/scripts/app.js @@ -22,12 +22,7 @@ const updateUI = (data) => { const iconSrc = `img/icons/${weather.WeatherIcon}.svg`; icon.setAttribute('src', iconSrc); - let timeSrc = null; - if(weather.IsDayTime){ - timeSrc = 'img/day.svg'; - } else { - timeSrc = 'img/night.svg'; - } + const timeSrc = weather.IsDayTime ? 'img/day.svg' : 'img/night.svg'; time.setAttribute('src', timeSrc); // remove the d-none class if present