@@ -41,63 +41,64 @@ WOO! Now that you've got an idea of how we're going to approach this challenge,
4141
4242 1 . Declare a ` const ` and define as an _ array of HTML Node elements_ with a ` data-time ` property.
4343
44- ``` JavaScript
45- // Option 1. Using the spread operator to convert the NodeList into an array
46- const allTimes = [... document .querySelectorAll (' [data-time]' )]
44+ ``` JavaScript
45+ // Option 1. Using the spread operator to convert the NodeList into an array
46+ const allTimes = [... document .querySelectorAll (' [data-time]' )]
4747
48- // Option 2. Converting the NodeList into an array using the `Array.from()` methods
49- const allTimes = Array .from (document .querySelectorAll (' [data-time]' ))
50- ```
48+ // Option 2. Converting the NodeList into an array using the `Array.from()` methods
49+ const allTimes = Array .from (document .querySelectorAll (' [data-time]' ))
50+ ```
5151
52522. Declare a ` const` and define it as the _return value_ of ** mapping** over each item
5353 in the array TWICE , and ** reducing** the result of those maps to a single integer value.
5454
55- ` ` ` JavaScript
56- const seconds = allTimes
57- .map(listItem => listItem.dataset.time) // Get the 'data-time' property
58- .map(timeValue => {
59- /** Declare constants minutes & seconds using array destructuring
60- * and define as the result of splitting the 'data-time' property
61- * a list item at ':' and parsing the returned two strings
62- * as float numbers
63- */
64- const [minutes, seconds] = timeValue.split(':').map(parseFloat)
65- return minutes * 60 + seconds // Return the total seconds
66- })
67- // Add up all the seconds
68- .reduce((runningTotal, seconds) => runningTotal + seconds)
69- ` ` `
55+ ` ` ` JavaScript
56+ const seconds = allTimes
57+ .map(listItem => listItem.dataset.time) // Get the 'data-time' property
58+ .map(timeValue => {
59+ /** Declare constants minutes & seconds using array destructuring
60+ * and define as the result of splitting the 'data-time' property
61+ * a list item at ':' and parsing the returned two strings
62+ * as float numbers
63+ */
64+ const [minutes, seconds] = timeValue.split(':').map(parseFloat)
65+ return minutes * 60 + seconds // Return the total seconds
66+ })
67+ // Add up all the seconds
68+ .reduce((runningTotal, seconds) => runningTotal + seconds)
69+ ` ` `
70+
70713. Declare a ` const` and define it as the seconds converted to hours.
7172
72- ` ` ` JavaScript
73- const hours = Math.floor(seconds / 3600)
74- ` ` `
73+ ` ` ` JavaScript
74+ const hours = Math.floor(seconds / 3600)
75+ ` ` `
7576
76774. Declare a ` let` variable and define it as the remaining seconds after
7778 calculating hours.
7879
79- ` ` ` JavaScript
80- let secondsLeft = seconds % 3600
81- ` ` `
80+ ` ` ` JavaScript
81+ let secondsLeft = seconds % 3600
82+ ` ` `
8283
83845. Declare a ` const` and define it as the remaining seconds converted to minutes.
8485
85- ` ` ` JavaScript
86- const minutes = Math.floor(secondsLeft / 60)
87- ` ` `
86+ ` ` ` JavaScript
87+ const minutes = Math.floor(secondsLeft / 60)
88+ ` ` `
8889
89906. Update the value of the ` let` variable to reflect the remaining seconds after
9091 calculating the minutes.
9192
92- ` ` ` JavaScript
93- secondsLeft %= 60
94- ` ` `
93+ ` ` ` JavaScript
94+ secondsLeft %= 60
95+ ` ` `
9596
96977. Log out the values.
9798
98- ` ` ` JavaScript
99- console.log(` Total video time: ${hours} hours, ${minutes} minutes, and ${secondsLeft} seconds` )
100- ` ` `
99+ ` ` ` JavaScript
100+ console.log(` Total video time: ${hours} hours, ${minutes} minutes, and ${secondsLeft} seconds` )
101+ ` ` `
101102If your result is 4 hours, 58 minutes, and 58 seconds, you did it! WOOOOOO ! Learning
102103 how to effectively use these array methods can greatly increase the clarity of your code
103104 and simplify your workflow . Learn them well!
0 commit comments