Skip to content

Commit a4ce26b

Browse files
hnasrhnasr
committed
stateless app
1 parent 2b7a3f9 commit a4ce26b

File tree

2 files changed

+255
-0
lines changed

2 files changed

+255
-0
lines changed

‎timer-app/stateful.html

+111
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>Stateful Timer App</title>
8+
<style>
9+
#divTimer{
10+
font-size: 3em;
11+
}
12+
</style>
13+
</head>
14+
<body>
15+
<h3>Stateful App</h3>
16+
<button id = 'btnStartTimer'>Start Timer</button>
17+
<button id = 'btnCancelTimer'>Cancel Timer</button>
18+
19+
<div id = 'divTimer'>
20+
21+
</div>
22+
<script>
23+
/*
24+
stateful application
25+
0 No Timer - Start Button is visible and Cancel is hidden
26+
1 Timer Running - Start button is hidden cancel is visible
27+
*/
28+
//initial state is always 0
29+
//if the state is 1 then timeEnd should have the time it ends
30+
let appState = {
31+
"state": 0,
32+
"timeEnd" : null
33+
}
34+
35+
const btnStartTimer = document.getElementById("btnStartTimer");
36+
const btnCancelTimer = document.getElementById("btnCancelTimer");
37+
const divTimer = document.getElementById("divTimer");
38+
39+
updateState(appState)
40+
41+
btnStartTimer.addEventListener("click" , e => {
42+
const timeEnd = new Date(new Date().getTime() + 30*1000)
43+
startTimer(timeEnd)
44+
});
45+
46+
47+
btnCancelTimer.addEventListener("click" , e => {
48+
cancelTimer()
49+
});
50+
51+
52+
function startTimer(timeEnd) {
53+
appState.state = 1;
54+
appState.timeEnd = timeEnd.toString();
55+
updateState(appState);
56+
updateTimer(timeEnd);
57+
}
58+
59+
function cancelTimer(){
60+
appState.state = 0;
61+
appState.timeEnd = null;
62+
updateState(appState)
63+
}
64+
65+
function updateTimer(){
66+
const timeEnd = new Date(appState.timeEnd)
67+
const remainSeconds = Math.round((timeEnd - (new Date()).getTime())/1000)
68+
69+
divTimer.textContent = remainSeconds
70+
//a cancel event might be sent
71+
72+
if (remainSeconds <= 0 || appState.state === 0) {
73+
appState.state = 0;
74+
appState.timeEnd = null;
75+
updateState(appState)
76+
return;
77+
}
78+
79+
80+
setTimeout(updateTimer, 1000);
81+
}
82+
83+
function resumeState(state){
84+
appState = state;
85+
if (appState.state === 1) {
86+
startTimer(appState.timeEnd)
87+
}
88+
else
89+
cancelTimer();
90+
91+
}
92+
93+
function updateState(appState) {
94+
if (appState.state === 0 )
95+
{
96+
btnStartTimer.style.display = "block"
97+
btnCancelTimer.style.display = "none"
98+
divTimer.textContent = "";
99+
}
100+
else
101+
{
102+
btnStartTimer.style.display = "none"
103+
btnCancelTimer.style.display = "block"
104+
divTimer.textContent = "";
105+
}
106+
}
107+
108+
109+
</script>
110+
</body>
111+
</html>

‎timer-app/stateless.html

+144
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0">
6+
<meta http-equiv="X-UA-Compatible" content="ie=edge">
7+
<title>Stateless Timer App</title>
8+
<style>
9+
#divTimer{
10+
font-size: 3em;
11+
}
12+
</style>
13+
</head>
14+
<body>
15+
<h3>Stateless App</h3>
16+
17+
<button id = 'btnStartTimer'>Start Timer</button>
18+
<button id = 'btnCancelTimer'>Cancel Timer</button>
19+
20+
<div id = 'divTimer'>
21+
22+
</div>
23+
<script>
24+
/*
25+
stateful application
26+
0 No Timer - Start Button is visible and Cancel is hidden
27+
1 Timer Running - Start button is hidden cancel is visible
28+
*/
29+
//initial state is always 0
30+
//if the state is 1 then timeEnd should have the time it ends
31+
let appState = {
32+
"state": 0,
33+
"timeEnd" : null
34+
}
35+
36+
const btnStartTimer = document.getElementById("btnStartTimer");
37+
const btnCancelTimer = document.getElementById("btnCancelTimer");
38+
const divTimer = document.getElementById("divTimer");
39+
40+
const result = getCookie("timerState");
41+
if (result != "")
42+
appState = JSON.parse(result);
43+
44+
updateState(appState)
45+
resumeState(appState)
46+
47+
btnStartTimer.addEventListener("click" , e => {
48+
const timeEnd = new Date(new Date().getTime() + 30*1000)
49+
startTimer(timeEnd)
50+
});
51+
52+
53+
btnCancelTimer.addEventListener("click" , e => {
54+
cancelTimer()
55+
});
56+
57+
58+
function startTimer(timeEnd) {
59+
appState.state = 1;
60+
appState.timeEnd = timeEnd.toString();
61+
updateState(appState);
62+
updateTimer(timeEnd);
63+
}
64+
65+
function cancelTimer(){
66+
appState.state = 0;
67+
appState.timeEnd = null;
68+
updateState(appState)
69+
}
70+
71+
function updateTimer(){
72+
const timeEnd = new Date(appState.timeEnd)
73+
const remainSeconds = Math.round((timeEnd - (new Date()).getTime())/1000)
74+
75+
divTimer.textContent = remainSeconds
76+
//a cancel event might be sent
77+
78+
if (remainSeconds <= 0 || appState.state === 0) {
79+
appState.state = 0;
80+
appState.timeEnd = null;
81+
updateState(appState)
82+
return;
83+
}
84+
85+
86+
setTimeout(updateTimer, 1000);
87+
}
88+
89+
function resumeState(state){
90+
appState = state;
91+
if (appState.state === 1) {
92+
startTimer(appState.timeEnd)
93+
}
94+
else
95+
cancelTimer();
96+
97+
}
98+
99+
function updateState(appState) {
100+
if (appState.state === 0 )
101+
{
102+
btnStartTimer.style.display = "block"
103+
btnCancelTimer.style.display = "none"
104+
divTimer.textContent = "";
105+
}
106+
else
107+
{
108+
btnStartTimer.style.display = "none"
109+
btnCancelTimer.style.display = "block"
110+
divTimer.textContent = "";
111+
}
112+
113+
setCookie("timerState", JSON.stringify(appState))
114+
}
115+
116+
117+
function getCookie(cname) {
118+
var name = cname + "=";
119+
var decodedCookie = decodeURIComponent(document.cookie);
120+
var ca = decodedCookie.split(';');
121+
for(var i = 0; i <ca.length; i++) {
122+
var c = ca[i];
123+
while (c.charAt(0) == ' ') {
124+
c = c.substring(1);
125+
}
126+
if (c.indexOf(name) == 0) {
127+
return c.substring(name.length, c.length);
128+
}
129+
}
130+
return "";
131+
}
132+
133+
function setCookie(cname, cvalue, exdays) {
134+
var d = new Date();
135+
d.setTime(d.getTime() + (exdays*24*60*60*1000));
136+
var expires = "expires="+ d.toUTCString();
137+
document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/";
138+
}
139+
140+
141+
142+
</script>
143+
</body>
144+
</html>

0 commit comments

Comments
 (0)