A repo for my personal website
Adding in contact page
+120
-7
+18
contact.html
+18
contact.html
···
1
+
<!DOCTYPE html>
2
+
<html>
3
+
<head>
4
+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
5
+
<meta charset="utf-8" />
6
+
<meta name="viewport" content="width=device-width" />
7
+
<meta http-equiv="x-ua-compatible" content="ie=edge" />
8
+
<link rel="stylesheet" href="style.css" media="screen" />
9
+
<link href="fonts/righteous.css" rel="stylesheet" type="text/css" />
10
+
<link href="fonts/quicksand.css" rel="stylesheet" type="text/css" />
11
+
<script src="scripts/modernizr.js"></script>
12
+
<script src="scripts/showdown.min.js"></script>
13
+
<script src="https://unpkg.com/imagesloaded@4/imagesloaded.pkgd.min.js"></script>
14
+
<script src="https://smtpjs.com/v3/smtp.js"></script>
15
+
<script src="scripts/contact.js" type="module"></script>
16
+
</head>
17
+
<body></body>
18
+
</html>
+1
-1
scripts/about.js
+1
-1
scripts/about.js
···
4
4
import setupLink from './link_setup.js';
5
5
6
6
(function() {
7
-
document.body.innerHTML = getBase(false, false);
7
+
document.body.innerHTML = getBase(false, false, false);
8
8
document.querySelector('.site-content').innerHTML = `
9
9
<div class="page-desc">
10
10
<p class="markdown">"Creativity is an energy. It's a precious energy, and it's something to be protected. A lot of people take for granted that they're a creative person, but I know from experience, feeling it in myself, it is a magic; it is an energy. And it can't be taken for granted." --Ava DuVernay</p>
+3
-3
scripts/base.js
+3
-3
scripts/base.js
···
2
2
import getHeader from './head.js';
3
3
import getFoot from './foot.js';
4
4
5
-
function getBase(is_index, add_nav) {
5
+
function getBase(is_index, add_nav, is_contact) {
6
6
if (add_nav) {
7
7
return `
8
8
${getNav()}
9
9
<div class="site-container">
10
-
${getHeader(is_index)}
10
+
${getHeader(is_index, is_contact)}
11
11
<section class="site-content">
12
12
</section>
13
13
<nav role="navigation" id="foot-nav">
···
19
19
return `
20
20
${getNav()}
21
21
<div class="site-container">
22
-
${getHeader(is_index)}
22
+
${getHeader(is_index, is_contact)}
23
23
<section class="site-content">
24
24
</section>
25
25
${getFoot()}
+85
scripts/contact.js
+85
scripts/contact.js
···
1
+
import getBase from './base.js';
2
+
import parseMarkdown from './markdown.js';
3
+
import setupNavAnim from './nav_anim.js';
4
+
import setupLink from './link_setup.js';
5
+
6
+
var emailRegex = /^[^\s@]+@[^\s@]+\.[^\s@]+$/;
7
+
8
+
function validateForm() {
9
+
return (document.getElementById('contact-name').value !== '') && (document.getElementById('contact-email').value !== '') && (document.getElementById('contact-message').value !== '') && (document.getElementById('contact-email').value.match(emailRegex));
10
+
}
11
+
12
+
function showValidation(el, name) {
13
+
if (name === 'email') {
14
+
if (el.value === '') {
15
+
alert('Email field is empty.');
16
+
} else if (!el.value.match(emailRegex)) {
17
+
alert('Email field does not contain an email.');
18
+
}
19
+
} else {
20
+
if (el.value === '') {
21
+
alert(name + ' field is empty.');
22
+
}
23
+
}
24
+
}
25
+
26
+
(function () {
27
+
document.body.innerHTML = getBase(true, false, true);
28
+
29
+
document.querySelector('.site-content').innerHTML = `
30
+
<div class="input"><input type="text" required placeholder="Name *" name="name" id="contact-name" /></div>
31
+
<div class="input"><input type="email" required placeholder="Email *" name="email" id="contact-email" /></div>
32
+
<div class="input"><textarea name="message" id="contact-message" placeholder="Message *"></textarea></div>
33
+
<ul class="cd-pagination custom-icons">
34
+
<li class="button-submit"><a href="#"><i>Submit</i></a></li>
35
+
</ul>
36
+
`;
37
+
38
+
document.querySelectorAll('.cd-primary-nav li a').forEach((element, key, parent) => {
39
+
if (element.href.indexOf('contact.html') != -1) {
40
+
element.classList.add('selected');
41
+
} else {
42
+
element.classList.remove('selected');
43
+
}
44
+
});
45
+
46
+
document.querySelector('.button-submit a').addEventListener('click', (e) => {
47
+
e.preventDefault();
48
+
49
+
if (!validateForm()) {
50
+
showValidation(document.getElementById('contact-name'), 'Name');
51
+
showValidation(document.getElementById('contact-email'), 'email');
52
+
showValidation(document.getElementById('contact-message'), 'Message');
53
+
return false;
54
+
}
55
+
56
+
alert('Your message is sending. You will see a notification saying "OK" if your message sent correctly. Press Okay to close this message.');
57
+
58
+
var name = document.getElementById('contact-name').value;
59
+
var email = document.getElementById('contact-email').value;
60
+
var message = document.getElementById('contact-message').value;
61
+
62
+
document.getElementById('contact-name').value = '';
63
+
document.getElementById('contact-email').value = '';
64
+
document.getElementById('contact-message').value = '';
65
+
66
+
email.send({
67
+
SecureToken: '35f5af2e-8f3d-4aea-99a0-cefbd03bb7f6',
68
+
To: 'cityboundforest@gmail.com',
69
+
From: email,
70
+
Subject: 'Message from Website',
71
+
Body: name + ' just sent you a message!\n\n' + message
72
+
}).then(
73
+
message => alert(message)
74
+
);
75
+
});
76
+
77
+
setupNavAnim(document);
78
+
parseMarkdown(document);
79
+
80
+
setTimeout(() => {
81
+
document.body.classList.add('loaded');
82
+
}, 150);
83
+
84
+
setupLink(document);
85
+
})();
+11
-1
scripts/head.js
+11
-1
scripts/head.js
···
1
-
function getHeader(is_index) {
1
+
function getHeader(is_index, is_contact) {
2
2
if (is_index) {
3
3
return `
4
4
<header class="site-header cf">
···
6
6
<div class="cf"></div>
7
7
<div class="site-tagline">
8
8
<p><strong>CityboundForest</strong></p><div style="font-size:18pt;" class="markdown">Hello I'm **Cass Unterholzner.** \nI'm a storyteller working in the media of !1[**film**], !2[**theatre**], !3[**video games**], and !4[**music**].</div>
9
+
</div>
10
+
</header>
11
+
`;
12
+
} else if (is_contact) {
13
+
return `
14
+
<header class="site-header cf">
15
+
<div class="site-title"><a href="index.html">C/B/F</a></div>
16
+
<div class="cf"></div>
17
+
<div class="site-tagline">
18
+
<h1 id="blog-post-title">Contact Me</h1>
9
19
</div>
10
20
</header>
11
21
`;
+1
-1
scripts/main.js
+1
-1
scripts/main.js
···
5
5
import setupLink from './link_setup.js';
6
6
7
7
(function () {
8
-
document.body.innerHTML = getBase(true, false);
8
+
document.body.innerHTML = getBase(true, false, false);
9
9
document.querySelector('.site-content').innerHTML = `<div class="projects-feed cf"></div>`;
10
10
11
11
var projects = [{id: 'fourwoods', title: 'The Four Woods Podcast', description: 'An audio drama podcast about myth and magic - Writer, Director, Editor, Producer'}, {id: 'mememachine', title: 'Meme Machine', description: 'Download, Rate, and Create Memes - Programmer'}, {id: 'shutin', title: 'Shut In', description: 'Short Film - Gaffer, Foley Artist, Sound Editor'}, {id: 'bulletrush', title: 'Bullet Rush', description: 'Cuphead meets First Person Shooter games - Programmer, Project Manager'}, {id: 'dndcombatsim', title: 'Dungeons and Dragons Combat Simulator', description: 'Combat simulator for the 5th Edition of the Tabletop RPG Dungeons and Dragons - Programmer, Project Manager'}, {id: 'cansat', title: 'CanSat', description: 'A simulated sattelite in an enclosure the shape and size of a soda can - Programmer'}];