-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
135 lines (118 loc) · 4.28 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<title>Human readable Duration</title>
</head>
<body>
<h2>How much time is 1.000.000 seconds?</h2>
<p>Convert any seconds count to a human friendly format.</p>
<form>
<label for="user input">Enter the seconds count</label>
<input id="input" type="number" placeholder="eg. 6000">
<button id="btn">Convert</button>
</form>
<p id="output"></p>
<div id="test">
<pre></pre>
</div>
<script>
const input = document.getElementById('input').value;
const output = document.getElementById('output');
const btn = document.getElementById('btn');
const YEAR = 31536000;
const DAY = 86400;
const HOUR = 3600;
const MINUTE = 60;
let readableFormat;
let Time = {
years: 0,
days: 0,
hours: 0,
minutes: 0,
seconds: 0
}
// Declaring all functions
function calculateYears() {
while (Time.seconds >= YEAR) {
Time.years = Math.floor((Time.seconds / DAY) / 365);
Time.seconds -= (Time.years * YEAR);
}
(Time.years <= 0 || Time.years == undefined) ? delete Time.years : Time.years == 1 ? Time.years += ' year' : Time.years += ' years';
}
function calculateDays() {
while (Time.seconds >= DAY) {
Time.days = Math.floor(Time.seconds / DAY);
Time.seconds -= (Time.days * DAY);
}
(Time.days <= 0 || Time.days == undefined) ? delete Time.days : Time.days == 1 ? Time.days += ' day' : Time.days += ' days';
}
function calculateHours() {
while (Time.seconds >= HOUR) {
Time.hours = Math.floor(Time.seconds / HOUR);
Time.seconds -= (Time.hours * HOUR);
}
(Time.hours <= 0 || Time.hours == undefined) ? delete Time.hours : Time.hours == 1 ? Time.hours += ' hour' : Time.hours += ' hours';
}
function calculateMinutes() {
while (Time.seconds >= MINUTE) {
Time.minutes = Math.floor(Time.seconds / MINUTE);
Time.seconds -= (Time.minutes * MINUTE);
}
(Time.minutes <= 0 || Time.minutes == undefined) ? delete Time.minutes : Time.minutes == 1 ? Time.minutes += ' minute' : Time.minutes += ' minutes';
}
function calculateSeconds() {
(Time.seconds <= 0 || Time.seconds == undefined) ? delete Time.seconds : Time.seconds == 1 ? Time.seconds += ' second' : Time.seconds += ' seconds';
}
function formatResult() {
readableFormat = Object.values(Time).join(', ');
const lastCommaIndex = readableFormat.lastIndexOf(', ');
const lastValue = readableFormat.substring(lastCommaIndex, readableFormat.length).replace(/,/g, ' and ');
readableFormat = readableFormat.substring(0,lastCommaIndex) + lastValue;
}
function convertToReadable(a) {
console.log(Time.seconds);
Time.seconds = a;
calculateYears();
calculateDays();
calculateHours();
calculateMinutes();
calculateSeconds();
formatResult();
return readableFormat;
}
function getInput(e) {
e.preventDefault();
Time.seconds = Number(document.getElementById('input').value);
document.forms[0].reset();
// Display user input for test
let pre = document.querySelector('#test pre');
pre.textContent = `Based on last number you entered ${Time.seconds} seconds`;
console.warn('added', {Time});
console.log(`result = ${readableFormat}`);
if (Time.seconds <= 0 || Time.seconds == undefined) {
output.innerHTML = 'You entered 0 seconds';
pre.textContent = 'Try again';
}
else {
convertToReadable(Time.seconds);
output.innerHTML = readableFormat;
}
Time = {
years: 0,
days: 0,
hours: 0,
minutes: 0,
seconds: 0
}
}
// Start at document ready
document.addEventListener('DOMContentLoaded', () => {
btn.addEventListener('click', getInput);
});
</script>
</body>
</html>