<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Videos</title>
<link rel="stylesheet" href="./styles.css"/>
<ul class="videos">
<li data-time="5:43">Video 1</li>
<li data-time="2:33">Video 2</li>
<li data-time="3:45">Video 3</li>
<li data-time="0:47">Video 4</li>
<li data-time="5:21">Video 5</li>
<li data-time="6:56">Video 6</li>
<li data-time="3:46">Video 7</li>
<li data-time="5:25">Video 8</li>
<li data-time="3:14">Video 9</li>
<li data-time="3:31">Video 10</li>
<li data-time="5:59">Video 11</li>
<li data-time="3:07">Video 12</li>
<li data-time="11:29">Video 13</li>
<li data-time="8:57">Video 14</li>
<li data-time="5:49">Video 15</li>
<li data-time="5:52">Video 16</li>
<li data-time="5:50">Video 17</li>
<li data-time="9:13">Video 18</li>
<li data-time="11:51">Video 19</li>
<li data-time="7:58">Video 20</li>
<li data-time="4:40">Video 21</li>
<li data-time="4:45">Video 22</li>
<li data-time="6:46">Video 23</li>
<li data-time="7:24">Video 24</li>
<li data-time="7:12">Video 25</li>
<li data-time="5:23">Video 26</li>
<li data-time="3:34">Video 27</li>
<li data-time="8:22">Video 28</li>
<li data-time="5:17">Video 29</li>
<li data-time="3:10">Video 30</li>
<li data-time="4:43">Video 31</li>
<li data-time="19:43">Video 32</li>
<li data-time="0:47">Video 33</li>
<li data-time="0:47">Video 34</li>
<li data-time="3:14">Video 35</li>
<li data-time="3:59">Video 36</li>
<li data-time="2:43">Video 37</li>
<li data-time="4:17">Video 38</li>
<li data-time="6:56">Video 39</li>
<li data-time="3:05">Video 40</li>
<li data-time="2:06">Video 41</li>
<li data-time="1:59">Video 42</li>
<li data-time="1:49">Video 43</li>
<li data-time="3:36">Video 44</li>
<li data-time="7:10">Video 45</li>
<li data-time="3:44">Video 46</li>
<li data-time="3:44">Video 47</li>
<li data-time="4:36">Video 48</li>
<li data-time="3:16">Video 49</li>
<li data-time="1:10">Video 50</li>
<li data-time="6:10">Video 51</li>
<li data-time="2:14">Video 52</li>
<li data-time="3:44">Video 53</li>
<li data-time="5:05">Video 54</li>
<li data-time="6:03">Video 55</li>
<li data-time="12:39">Video 56</li>
<li data-time="1:56">Video 57</li>
<li data-time="4:04">Video 58</li>
</ul>
<script src="./scripts.js"></script>
</body>
</html>
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
height: 100vh;
display: flex;
justify-content: space-evenly;
align-items: center;
flex-direction: column;
color: #FFF;
background: linear-gradient(to right, #4b6cb7, #182848);
}
.videos {
width: 65vw;
height: 65vh;
display: flex;
justify-content: center;
flex-wrap: wrap;
overflow-x: scroll;
}
.videos li {
list-style: none;
margin: 10px;
display: flex;
flex-direction: column;
align-items: center;
}
.videos li .image {
width: 64px;
height: 64px;
}
.full-length {
font-size: 22px;
display: flex;
align-items: center;
}
.clock {
width: 30px;
margin-right: 10px;
}
@media screen and (max-width: 775px) {
.videos {
width: 90vw;
height: 80vh;
}
body { justify-content: space-around; }
.videos li { margin: 0 10px 15px; }
}
const videoList = document.querySelector('.videos'),
videos = Array.from(document.querySelectorAll('[data-time]'));
(function calculateTotalTime() {
let hours, minutes, seconds, totalTime, min, sec;
seconds = videos.map(video => video.dataset.time)
.map(timeCode => {
[min, sec] = timeCode.split(':').map(parseFloat);
return min * 60 + sec;
}).reduce((total, secs) => total + secs);
hours = Math.floor(seconds / 3600);
seconds = seconds % 3600;
minutes = Math.floor(seconds / 60);
seconds = seconds % 60;
totalTime = `
<div class="full-length">
<img class="clock" src="./img/clock.png" />
<span>Total length: ${hours}h ${minutes}m ${seconds}s</span>
</div>
`;
videoList.insertAdjacentHTML('afterend', totalTime);
})();
(function buildTemplate() {
videos.forEach((video, index) => {
let name = index % 2 === 0 ? 'wooden-' : '';
video.innerHTML = `
<img class="image video"️ src="./img/${name}video.png"/>
<span class="duration">🕰️ ${video.dataset.time}</span>
`;
});
})();
