JS + CSS Clock

From 01c559f82aaec3f31398185851418ee679cd6776 Mon Sep 17 00:00:00 2001 From: "laryl.li" Date: Tue, 4 Feb 2020 15:34:39 -0800 Subject: [PATCH 01/14] completed working version of clock --- 02 - JS and CSS Clock/ClockStart/index.html | 22 ++++++ 02 - JS and CSS Clock/ClockStart/script.js | 26 ++++++++ 02 - JS and CSS Clock/ClockStart/style.css | 53 +++++++++++++++ 02 - JS and CSS Clock/index-START.html | 74 --------------------- 4 files changed, 101 insertions(+), 74 deletions(-) create mode 100644 02 - JS and CSS Clock/ClockStart/index.html create mode 100644 02 - JS and CSS Clock/ClockStart/script.js create mode 100644 02 - JS and CSS Clock/ClockStart/style.css delete mode 100644 02 - JS and CSS Clock/index-START.html diff --git a/02 - JS and CSS Clock/ClockStart/index.html b/02 - JS and CSS Clock/ClockStart/index.html new file mode 100644 index 0000000000..c47c8629e4 --- /dev/null +++ b/02 - JS and CSS Clock/ClockStart/index.html @@ -0,0 +1,22 @@ + + + + + JS + CSS Clock + + + + + +

+ + + + + \ No newline at end of file diff --git a/02 - JS and CSS Clock/ClockStart/script.js b/02 - JS and CSS Clock/ClockStart/script.js new file mode 100644 index 0000000000..13d5694f10 --- /dev/null +++ b/02 - JS and CSS Clock/ClockStart/script.js @@ -0,0 +1,26 @@ +const secondHand = document.querySelector('.second-hand'); +const minHand = document.querySelector('.min-hand') +const hourHand = document.querySelector('.hour-hand') + + +function setDate(){ + const now = new Date(); + const seconds = now.getSeconds(); + const minutes = now.getMinutes(); + const hours = now.getHours(); + const secondsDegrees = (((seconds/60)*360)+90); + const minuteDegrees = (((minutes/60)*360)+90); + const hourDegrees = (((hours/12)*360)+90); + secondHand.style.transform = `rotate(${secondsDegrees}deg)`; + minHand.style.transform = `rotate(${minuteDegrees}deg)`; + hourHand.style.transform = `rotate(${hourDegrees}deg)`; + //console.log(hourDegrees); + //console.log(minutes); + +} + + + + +setInterval(setDate, 1000); + diff --git a/02 - JS and CSS Clock/ClockStart/style.css b/02 - JS and CSS Clock/ClockStart/style.css new file mode 100644 index 0000000000..48840801aa --- /dev/null +++ b/02 - JS and CSS Clock/ClockStart/style.css @@ -0,0 +1,53 @@ + +html { + background: #018DED url(http://unsplash.it/1500/1000?image=881&blur=5); + background-size: cover; + font-family: 'helvetica neue'; + text-align: center; + font-size: 10px; +} + +body { + margin: 0; + font-size: 2rem; + display: flex; + flex: 1; + min-height: 100vh; + align-items: center; +} + +.clock { + width: 30rem; + height: 30rem; + border: 20px solid white; + border-radius: 50%; + margin: 50px auto; + position: relative; + padding: 2rem; + box-shadow: + 0 0 0 4px rgba(0,0,0,0.1), + inset 0 0 0 3px #EFEFEF, + inset 0 0 10px black, + 0 0 10px rgba(0,0,0,0.2); +} + +.clock-face { + position: relative; + width: 100%; + height: 100%; + transform: translateY(-3px); /* account for the height of the clock hands */ +} + +.hand { + width: 50%; + height: 6px; + background: black; + position: absolute; + top: 50%; + transform-origin: 100%; + transform:rotate(90deg); + transition: all 0.05s; + transition-timing-function: cubic-bezier(0, 2.7, 0.58, 1); +} + + diff --git a/02 - JS and CSS Clock/index-START.html b/02 - JS and CSS Clock/index-START.html deleted file mode 100644 index 12f721b183..0000000000 --- a/02 - JS and CSS Clock/index-START.html +++ /dev/null @@ -1,74 +0,0 @@ - - - - - JS + CSS Clock - - - - -

- - - - - - - From 107d2612ffd2fb4ce31368b413490c647d6d1910 Mon Sep 17 00:00:00 2001 From: "laryl.li" Date: Sun, 9 Feb 2020 12:36:34 -0800 Subject: [PATCH 02/14] Solved #1 Array.prototype.filter() --- 04 - Array Cardio Day 1/index-START.html | 3 +++ 1 file changed, 3 insertions(+) diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index d19181b6b4..6d595b4de4 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -32,6 +32,9 @@ // Array.prototype.filter() // 1. Filter the list of inventors for those who were born in the 1500's + const born = inventors.filter(x => x.year >=1500 && x.year < 1600); + console.log(born); + // Array.prototype.map() // 2. Give us an array of the inventors first and last names From e51a0da8d1747ed7b9772ecc2848567391fbf8d5 Mon Sep 17 00:00:00 2001 From: "laryl.li" Date: Sun, 9 Feb 2020 12:40:38 -0800 Subject: [PATCH 03/14] Solved #2 Array.prototype.map() --- 04 - Array Cardio Day 1/index-START.html | 10 +++++++++- 1 file changed, 9 insertions(+), 1 deletion(-) diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index 6d595b4de4..c3d380b21f 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -34,9 +34,17 @@ const born = inventors.filter(x => x.year >=1500 && x.year < 1600); console.log(born); - + // Array.prototype.map() // 2. Give us an array of the inventors first and last names + const finalnamestring = inventors.map(firstandlastname) + function firstandlastname (x){ + const space = ' ' + const namestring = x.first + space + x.last; + return namestring; + //console.log(namestring); + } + console.log(finalnamestring); // Array.prototype.sort() // 3. Sort the inventors by birthdate, oldest to youngest From 1a9b6c85f59e04fcbef922c77f2763262a55092d Mon Sep 17 00:00:00 2001 From: "laryl.li" Date: Sun, 9 Feb 2020 12:48:05 -0800 Subject: [PATCH 04/14] Solved #3 Array.prototype.sort() --- 04 - Array Cardio Day 1/index-START.html | 7 ++++++- 1 file changed, 6 insertions(+), 1 deletion(-) diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index c3d380b21f..bf2a575857 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -37,7 +37,7 @@ // Array.prototype.map() // 2. Give us an array of the inventors first and last names - const finalnamestring = inventors.map(firstandlastname) + const finalnamestring = inventors.map(firstandlastname); function firstandlastname (x){ const space = ' ' const namestring = x.first + space + x.last; @@ -48,6 +48,11 @@ // Array.prototype.sort() // 3. Sort the inventors by birthdate, oldest to youngest + const sort = inventors.sort(oldesttoyoungest); + function oldesttoyoungest(a,b){ + return a.year-b.year; + } + console.log(sort); // Array.prototype.reduce() // 4. How many years did all the inventors live all together? From 3ecdfedbd076e12ebe190c1cf50918ab3d6d6805 Mon Sep 17 00:00:00 2001 From: "laryl.li" Date: Sun, 9 Feb 2020 13:01:32 -0800 Subject: [PATCH 05/14] Solved #4 Array.prototype.reduce() --- 04 - Array Cardio Day 1/index-START.html | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index bf2a575857..1c55220115 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -56,6 +56,11 @@ // Array.prototype.reduce() // 4. How many years did all the inventors live all together? + const year = inventors.reduce(livetogether, 0); + function livetogether(totalyears, x){ + return totalyears+ (x.passed - x.year); + } + console.log(year); // 5. Sort the inventors by years lived From 1f50dceb9c4d331408fbac388560a245ad23a56f Mon Sep 17 00:00:00 2001 From: "laryl.li" Date: Sun, 9 Feb 2020 13:09:41 -0800 Subject: [PATCH 06/14] Solved #5 Sort the inventors by years lived --- 04 - Array Cardio Day 1/index-START.html | 5 +++++ 1 file changed, 5 insertions(+) diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index 1c55220115..c9be7e4c32 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -63,6 +63,11 @@ console.log(year); // 5. Sort the inventors by years lived + const sortedyearslived = inventors.sort(yearslived); + function yearslived(a,b){ + return ((b.passed-b.year)-(a.passed-a.year)); + } + console.log(sortedyearslived); // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris From 630ff5404a500707a740a281c6ab48f6bbe1c2ee Mon Sep 17 00:00:00 2001 From: "laryl.li" Date: Sun, 9 Feb 2020 13:30:38 -0800 Subject: [PATCH 07/14] Solved #7 Sort the people alphabetically by last name --- 04 - Array Cardio Day 1/index-START.html | 12 ++++++++++++ 1 file changed, 12 insertions(+) diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index c9be7e4c32..998b3e8aba 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -75,6 +75,18 @@ // 7. sort Exercise // Sort the people alphabetically by last name + const sortedlastname = people.sort(sortbylastname); + + function sortbylastname(a,b){ + return (getlastname(a)>getlastname(b)); + } + + function getlastname(namevalue){ + fullname = namevalue.split(", "); + return fullname[0]; + } + + console.log(sortedlastname); // 8. Reduce Exercise // Sum up the instances of each of these From 96be817ba9f667514d29e93581b4b4aa4148f271 Mon Sep 17 00:00:00 2001 From: "laryl.li" Date: Sun, 9 Feb 2020 13:38:32 -0800 Subject: [PATCH 08/14] Added Linebreaks for readability --- 04 - Array Cardio Day 1/index-START.html | 9 ++++++++- 1 file changed, 8 insertions(+), 1 deletion(-) diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index 998b3e8aba..fa999a5297 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -31,42 +31,49 @@ // Array.prototype.filter() // 1. Filter the list of inventors for those who were born in the 1500's - const born = inventors.filter(x => x.year >=1500 && x.year < 1600); console.log(born); // Array.prototype.map() // 2. Give us an array of the inventors first and last names const finalnamestring = inventors.map(firstandlastname); + function firstandlastname (x){ const space = ' ' const namestring = x.first + space + x.last; return namestring; //console.log(namestring); } + console.log(finalnamestring); // Array.prototype.sort() // 3. Sort the inventors by birthdate, oldest to youngest const sort = inventors.sort(oldesttoyoungest); + function oldesttoyoungest(a,b){ return a.year-b.year; } + console.log(sort); // Array.prototype.reduce() // 4. How many years did all the inventors live all together? const year = inventors.reduce(livetogether, 0); + function livetogether(totalyears, x){ return totalyears+ (x.passed - x.year); } + console.log(year); // 5. Sort the inventors by years lived const sortedyearslived = inventors.sort(yearslived); + function yearslived(a,b){ return ((b.passed-b.year)-(a.passed-a.year)); } + console.log(sortedyearslived); // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name From 3ed6bd398a3708218b71ce2e3dac08513c7a29c6 Mon Sep 17 00:00:00 2001 From: "laryl.li" Date: Sun, 9 Feb 2020 14:50:14 -0800 Subject: [PATCH 09/14] Solved #8 Reduce Exercise. I need more practice with reduce function --- 04 - Array Cardio Day 1/index-START.html | 18 ++++++++++++++++++ 1 file changed, 18 insertions(+) diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index fa999a5297..d6643f0ca6 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -99,6 +99,24 @@ // Sum up the instances of each of these const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck' ]; + const dataobjectarray=[] + for(let i = 0; i vehicle.type == data[i]))) { + let newvehicle = new Object(); + newvehicle.type = data[i]; + newvehicle.amount = 1; + dataobjectarray.push(newvehicle); + } + } + console.log(dataobjectarray); + + + From 6a4cf6c1398266e95bc298acc8f7beb62f597a28 Mon Sep 17 00:00:00 2001 From: "laryl.li" Date: Mon, 17 Feb 2020 15:19:58 -0800 Subject: [PATCH 10/14] fixing camelcasing for functions --- 04 - Array Cardio Day 1/index-START.html | 62 ++++++++++++------------ 1 file changed, 31 insertions(+), 31 deletions(-) diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index d6643f0ca6..6c703f6d17 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -36,22 +36,22 @@ // Array.prototype.map() // 2. Give us an array of the inventors first and last names - const finalnamestring = inventors.map(firstandlastname); + const finalNameString = inventors.map(firstAndLastName); - function firstandlastname (x){ + function firstAndLastName (x){ const space = ' ' - const namestring = x.first + space + x.last; - return namestring; - //console.log(namestring); + const nameString = x.first + space + x.last; + return nameString; + //console.log(nameString); } - console.log(finalnamestring); + console.log(finalNameString); // Array.prototype.sort() // 3. Sort the inventors by birthdate, oldest to youngest - const sort = inventors.sort(oldesttoyoungest); + const sort = inventors.sort(oldestToYoungest); - function oldesttoyoungest(a,b){ + function oldestToYoungest(a,b){ return a.year-b.year; } @@ -59,22 +59,22 @@ // Array.prototype.reduce() // 4. How many years did all the inventors live all together? - const year = inventors.reduce(livetogether, 0); + const year = inventors.reduce(liveTogether, 0); - function livetogether(totalyears, x){ - return totalyears+ (x.passed - x.year); + function liveTogether(totalYears, x){ + return totalYears+ (x.passed - x.year); } console.log(year); // 5. Sort the inventors by years lived - const sortedyearslived = inventors.sort(yearslived); + const sortedYearsLived = inventors.sort(yearsLived); - function yearslived(a,b){ + function yearsLived(a,b){ return ((b.passed-b.year)-(a.passed-a.year)); } - console.log(sortedyearslived); + console.log(sortedYearsLived); // 6. create a list of Boulevards in Paris that contain 'de' anywhere in the name // https://en.wikipedia.org/wiki/Category:Boulevards_in_Paris @@ -82,38 +82,38 @@ // 7. sort Exercise // Sort the people alphabetically by last name - const sortedlastname = people.sort(sortbylastname); + const sortedLastName = people.sort(sortByLastName); - function sortbylastname(a,b){ - return (getlastname(a)>getlastname(b)); + function sortByLastName(a,b){ + return (getLastName(a)>getLastName(b)); } - function getlastname(namevalue){ - fullname = namevalue.split(", "); - return fullname[0]; + function getLastName(nameValue){ + let fullName = nameValue.split(", "); + return fullName[0]; } - console.log(sortedlastname); + console.log(sortedLastName); // 8. Reduce Exercise // Sum up the instances of each of these const data = ['car', 'car', 'truck', 'truck', 'bike', 'walk', 'car', 'van', 'bike', 'walk', 'car', 'van', 'car', 'truck' ]; - const dataobjectarray=[] + const dataObjectArray=[] for(let i = 0; i vehicle.type == data[i]))) { - let newvehicle = new Object(); - newvehicle.type = data[i]; - newvehicle.amount = 1; - dataobjectarray.push(newvehicle); + if(!(dataObjectArray.some(vehicle => vehicle.type == data[i]))) { + let newVehicle = new Object(); + newVehicle.type = data[i]; + newVehicle.amount = 1; + dataObjectArray.push(newVehicle); } } - console.log(dataobjectarray); + console.log(dataObjectArray); From 3a9a740d1066c10a2feec213f3faeb5b4910148a Mon Sep 17 00:00:00 2001 From: "laryl.li" Date: Mon, 17 Feb 2020 15:24:26 -0800 Subject: [PATCH 11/14] converted string to ES6 syntax and used string literal syntax --- 04 - Array Cardio Day 1/index-START.html | 10 +--------- 1 file changed, 1 insertion(+), 9 deletions(-) diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index 6c703f6d17..ea1e566742 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -36,15 +36,7 @@ // Array.prototype.map() // 2. Give us an array of the inventors first and last names - const finalNameString = inventors.map(firstAndLastName); - - function firstAndLastName (x){ - const space = ' ' - const nameString = x.first + space + x.last; - return nameString; - //console.log(nameString); - } - + const finalNameString = inventors.map(inventor => `${inventor.first} ${inventor.last}`); console.log(finalNameString); // Array.prototype.sort() From 11e19e89dce543d2048029a3a1c603c9ff075414 Mon Sep 17 00:00:00 2001 From: "laryl.li" Date: Mon, 17 Feb 2020 15:34:37 -0800 Subject: [PATCH 12/14] changed #3 to ES6 arrow function --- 04 - Array Cardio Day 1/index-START.html | 7 +------ 1 file changed, 1 insertion(+), 6 deletions(-) diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index ea1e566742..03b3ea58de 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -41,12 +41,7 @@ // Array.prototype.sort() // 3. Sort the inventors by birthdate, oldest to youngest - const sort = inventors.sort(oldestToYoungest); - - function oldestToYoungest(a,b){ - return a.year-b.year; - } - + const sort = inventors.sort(((a, b) => a.year - b.year)); console.log(sort); // Array.prototype.reduce() From 3fbcb863c0949d51807ade5324f79aed36daccca Mon Sep 17 00:00:00 2001 From: "laryl.li" Date: Mon, 17 Feb 2020 15:40:38 -0800 Subject: [PATCH 13/14] changed #5 to ES6 arrow function --- 04 - Array Cardio Day 1/index-START.html | 9 +++------ 1 file changed, 3 insertions(+), 6 deletions(-) diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index 03b3ea58de..26155d20da 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -46,12 +46,9 @@ // Array.prototype.reduce() // 4. How many years did all the inventors live all together? - const year = inventors.reduce(liveTogether, 0); - - function liveTogether(totalYears, x){ - return totalYears+ (x.passed - x.year); - } - + const year = inventors.reduce((totalYears,x) => { + return totalYears + (x.passed - x.year); + }, 0); console.log(year); // 5. Sort the inventors by years lived From e51ecfbf0fddec4b7300cc83b43d77f96583e755 Mon Sep 17 00:00:00 2001 From: "laryl.li" Date: Mon, 17 Feb 2020 15:43:19 -0800 Subject: [PATCH 14/14] small codestyle fixes --- 04 - Array Cardio Day 1/index-START.html | 6 +++--- 1 file changed, 3 insertions(+), 3 deletions(-) diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index 26155d20da..5673eae911 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -54,7 +54,7 @@ // 5. Sort the inventors by years lived const sortedYearsLived = inventors.sort(yearsLived); - function yearsLived(a,b){ + function yearsLived(a,b) { return ((b.passed-b.year)-(a.passed-a.year)); } @@ -68,11 +68,11 @@ // Sort the people alphabetically by last name const sortedLastName = people.sort(sortByLastName); - function sortByLastName(a,b){ + function sortByLastName(a,b) { return (getLastName(a)>getLastName(b)); } - function getLastName(nameValue){ + function getLastName(nameValue) { let fullName = nameValue.split(", "); return fullName[0]; }