-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathsamples.html
107 lines (91 loc) · 4.33 KB
/
samples.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
<!DOCTYPE html>
<html>
<head>
<meta property="og:image" content="./turtle.png" />
<meta property="og:image:width" content="319" />
<meta property="og:image:height" content="297" />
<meta property="og:description" content="The homepage of Chris Johnson." />
<meta property="og:title" content="Chris Johnson's homepage" />
<title>Work page - Chris Johnson</title>
<link rel="preload" href="/assets/fonts/EBGaramond-VariableFont_wght.ttf" as="font" type="font/ttf" crossorigin>
<link rel="preload" href="/assets/fonts/EBGaramond-Italic-VariableFont_wght.ttf" as="font" type="font/ttf" crossorigin>
<link rel="shortcut icon" href="./favicon.ico" type="image/x-icon">
<link rel="stylesheet" href="https://unpkg.com/tachyons@4/css/tachyons.min.css">
<link rel="stylesheet" href="/styles/fonts.css"></link>
<link rel="stylesheet" href="/styles/typography.css"></link>
<link rel="stylesheet" href="/styles/index.css"></link>
</head>
<body class="body-main">
<div class="content-left">
<img class="content-left-logo marg-0" src="/assets/img/logos/logo-cjohnson-clipped.png" />
<div class="sm-list">
<a href="https://www.facebook.com/christopher.keit.johnson" target="_blank"><img class="sm-icon" src="/assets/img/icons/icon-fb.png"/></a>
<a href="https://www.instagram.com/theboywhocriedinsta/" target="_blank"><img class="sm-icon" src="/assets/img/icons/icon-insta.png"/></a>
<a href="https://www.linkedin.com/in/ckjohnson7/" target="_blank"><img class="sm-icon" src="/assets/img/icons/icon-linkedin.png"/></a>
<a href="mailto:chris@cjohnson.io"><img class="sm-icon sm-icon-email" src="/assets/img/icons/icon-email.png"/></a>
</div>
</div>
<div class="content-main">
<nav class="nav-main">
<a class="link-nav link-active" href="/">Home</a>
<a class="link-nav" href="/work">Work & Services</a>
<a class="link-nav" href="/assets/files/resume.pdf" target="_blank">Resume</a>
<a class="link-nav" href="/samples">Samples</a>
</nav>
<div class="content-main-body">
<div class="construction-area">
<h2 class="construction-stripes"></h2>
<p class="construction-text">Page is under construction, come back soon!</p>
<h2 class="construction-stripes"></h2>
</div>
</div>
<div>
<h3>Web forms</h3>
<hr />
<div>
<form>
<div class="toast-notification marquee-container">
<div id="text-submit-1-notification" class="marquee paused" style="color: green;">Text submitted successfully.</div>
</div>
<div style="padding: 12px; display: flex; justify-content: space-between;">
<div>
<label for="text-submit-1-input" style="margin-right:12px" >Text input</label>
<input name="sample-input" type="text" id="text-submit-1-input"></input>
</div>
<div>
<button type="button" id="text-submit-1">Submit</button>
</div>
</div>
</form>
</div>
</div>
</div>
<script type="text/javascript">
document.addEventListener("DOMContentLoaded", function() {
// Your code here
console.log("DOM is fully loaded and parsed");
const textSubmit1Button = document.getElementById('text-submit-1');
const textSubmit1Notification = document.getElementById('text-submit-1-notification');
const textSubmit1Input = document.getElementById('text-submit-1-input');
textSubmit1Button.addEventListener('click', (event) => {
event.stopPropagation();
event.stopImmediatePropagation();
textSubmit1Input.value = "";
textSubmit1Notification.classList.add('running');
textSubmit1Notification.classList.remove('paused');
setTimeout(() => {
textSubmit1Notification.classList.add('paused');
textSubmit1Notification.classList.remove('running');
}, 1000);
setTimeout(() => {
textSubmit1Notification.classList.add('running');
textSubmit1Notification.classList.remove('paused');
}, 2000);
setTimeout(() => {
textSubmit1Notification.classList.add('hidden');
}, 3000);
});
});
</script>
</body>
</html>