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 - - - - -
-
-
-
-
-
-
- - - - - - - diff --git a/04 - Array Cardio Day 1/index-START.html b/04 - Array Cardio Day 1/index-START.html index d19181b6b4..5673eae911 100644 --- a/04 - Array Cardio Day 1/index-START.html +++ b/04 - Array Cardio Day 1/index-START.html @@ -31,17 +31,34 @@ // 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(inventor => `${inventor.first} ${inventor.last}`); + console.log(finalNameString); // Array.prototype.sort() // 3. Sort the inventors by birthdate, oldest to youngest + const sort = inventors.sort(((a, b) => 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((totalYears,x) => { + return totalYears + (x.passed - x.year); + }, 0); + 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 @@ -49,11 +66,41 @@ // 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) { + let fullName = nameValue.split(", "); + return fullName[0]; + } + + 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=[] + 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); + + +