@@ -41,63 +41,64 @@ WOO! Now that you've got an idea of how we're going to approach this challenge,
41
41
42
42
1 . Declare a ` const ` and define as an _ array of HTML Node elements_ with a ` data-time ` property.
43
43
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]' )]
47
47
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
+ ```
51
51
52
52
2. Declare a ` const` and define it as the _return value_ of ** mapping** over each item
53
53
in the array TWICE , and ** reducing** the result of those maps to a single integer value.
54
54
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
+
70
71
3. Declare a ` const` and define it as the seconds converted to hours.
71
72
72
- ` ` ` JavaScript
73
- const hours = Math.floor(seconds / 3600)
74
- ` ` `
73
+ ` ` ` JavaScript
74
+ const hours = Math.floor(seconds / 3600)
75
+ ` ` `
75
76
76
77
4. Declare a ` let` variable and define it as the remaining seconds after
77
78
calculating hours.
78
79
79
- ` ` ` JavaScript
80
- let secondsLeft = seconds % 3600
81
- ` ` `
80
+ ` ` ` JavaScript
81
+ let secondsLeft = seconds % 3600
82
+ ` ` `
82
83
83
84
5. Declare a ` const` and define it as the remaining seconds converted to minutes.
84
85
85
- ` ` ` JavaScript
86
- const minutes = Math.floor(secondsLeft / 60)
87
- ` ` `
86
+ ` ` ` JavaScript
87
+ const minutes = Math.floor(secondsLeft / 60)
88
+ ` ` `
88
89
89
90
6. Update the value of the ` let` variable to reflect the remaining seconds after
90
91
calculating the minutes.
91
92
92
- ` ` ` JavaScript
93
- secondsLeft %= 60
94
- ` ` `
93
+ ` ` ` JavaScript
94
+ secondsLeft %= 60
95
+ ` ` `
95
96
96
97
7. Log out the values.
97
98
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
+ ` ` `
101
102
If your result is 4 hours, 58 minutes, and 58 seconds, you did it! WOOOOOO ! Learning
102
103
how to effectively use these array methods can greatly increase the clarity of your code
103
104
and simplify your workflow . Learn them well!
0 commit comments