Skip to content

Commit c4f8cc6

Browse files
mtrythallmtrythall
committed
Updates invitation letter
1 parent 79cf92e commit c4f8cc6

File tree

3 files changed

+139
-129
lines changed

3 files changed

+139
-129
lines changed

‎src/assets/css/main.css

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -38,6 +38,24 @@
3838
@apply text-sm text-center mt-3;
3939
}
4040

41+
input:not([type="checkbox"]):not([type="radio"]),
42+
select,
43+
textarea {
44+
@apply w-full;
45+
@apply px-3 py-2;
46+
@apply border border-gray-400 rounded;
47+
@apply shadow-sm;
48+
@apply focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-100 focus:ring-bull-blue;
49+
}
50+
51+
label {
52+
@apply block mb-2 font-medium;
53+
}
54+
55+
::placeholder {
56+
@apply text-gray-500;
57+
}
58+
4159
.link {
4260
@apply underline;
4361
}
@@ -92,6 +110,27 @@
92110
.photo-effect img {
93111
@apply rounded;
94112
}
113+
114+
115+
#loader {
116+
width: 2rem;
117+
height: 2rem;
118+
border: 5px solid #f3f3f3;
119+
border-top: 6px solid theme('colors.bull-blue');
120+
border-radius: 100%;
121+
margin: auto;
122+
animation: spin 1s infinite linear;
123+
}
124+
125+
@keyframes spin {
126+
from {
127+
transform: rotate(0deg);
128+
}
129+
130+
to {
131+
transform: rotate(360deg);
132+
}
133+
}
95134
}
96135

97136
@layer components {

‎src/assets/js/invitation.js

Lines changed: 47 additions & 34 deletions
Original file line numberDiff line numberDiff line change
@@ -1,33 +1,39 @@
1-
2-
const form = document.getElementById("form");
1+
const form = document.getElementById("inviteForm");
32
form.addEventListener("submit", start);
43

5-
const loader = document.querySelector("#loading");
6-
// showing loading
4+
const loader = document.getElementById("loader");
5+
76
function displayLoading() {
8-
loader.classList.add("display");
7+
loader.hidden = false;
98
}
109

11-
// hiding loading
1210
function hideLoading() {
13-
loader.classList.remove("display");
11+
loader.hidden = true;
1412
}
1513

1614
async function start(ev) {
1715
ev.preventDefault();
16+
1817
console.log("start form");
1918

20-
$("#inprogress").show();
21-
const form = new FormData(ev.target);
22-
const fullname = form.get("fullname");
23-
const address = form.get("address");
24-
const email = form.get("email");
25-
const dob = form.get("dob");
26-
const lettertype = form.get("letterselection");
27-
const og = form.get("og");
28-
const speaker = form.get("talk");
29-
const passport_no = form.get("passport_no");
30-
var data
19+
// Show in progress message
20+
const inProgressMsg = document.getElementById("inProgressMsg");
21+
inProgressMsg.hidden = false;
22+
23+
const form = new FormData(ev.target);;
24+
25+
const {
26+
fullname,
27+
address,
28+
email,
29+
dob,
30+
letterselection: lettertype,
31+
og,
32+
talk: speaker,
33+
passport_no
34+
} = Object.fromEntries(form);
35+
36+
let data;
3137

3238
displayLoading();
3339

@@ -39,7 +45,6 @@ async function start(ev) {
3945
"dob": dob,
4046
"passport_no": passport_no
4147
}
42-
4348
} else if (lettertype == "og") {
4449
data = {
4550
"fullname": fullname,
@@ -66,36 +71,44 @@ async function start(ev) {
6671
};
6772
}
6873

69-
displayLoading()
70-
$("#form").hide();
74+
displayLoading();
75+
76+
const formElem = document.getElementById("inviteForm");
77+
formElem.hidden = true;
78+
7179
await fetch('https://djc-invitation-letter-api-noahalorwu.vercel.app/invitation', {
7280
method: 'POST',
7381
headers: {
7482
'Content-Type': 'application/json',
7583
},
7684
body: JSON.stringify(data)
7785
}).then(res => res.json()).then(data => {
78-
hideLoading()
79-
console.log(data)
80-
$("#inprogress").hide();
81-
$("#ready").show();
86+
hideLoading();
87+
console.log(data);
88+
inProgressMsg.hidden = true;
89+
document.getElementById("readyMsg").hidden = false;
8290
});
8391
}
8492

85-
$(document).ready(function () {
86-
$("#letterselection").change(function () {
87-
var selected = $(this).val();
93+
// Update fields shown dependent upon attendee type
94+
document.addEventListener("DOMContentLoaded", function() {
95+
document.getElementById("letterselection").addEventListener("change", function() {
96+
let selected = this.value;
97+
98+
const ogElem = document.getElementById("og");
99+
const speakerElem = document.getElementById("speaker");
100+
88101
if (selected == "none") {
89-
$("#og").hide();
90-
$("#speaker").hide();
102+
ogElem.hidden = true;
103+
speakerElem.hidden = true;
91104
}
92105
else if (selected == "og") {
93-
$("#og").show();
94-
$("#speaker").hide();
106+
ogElem.hidden = false;
107+
speakerElem.hidden = true;
95108
}
96109
else if (selected == "speaker") {
97-
$("#og").hide();
98-
$("#speaker").show();
110+
ogElem.hidden = true;
111+
speakerElem.hidden = false;
99112
}
100113
});
101114
});

‎src/invitation.html

Lines changed: 53 additions & 95 deletions
Original file line numberDiff line numberDiff line change
@@ -7,106 +7,64 @@
77
title: Visa Invitation Letter
88
---
99

10-
<style>
11-
.myDiv,
12-
#inprogress,
13-
#ready {
14-
display: none;
15-
}
16-
17-
::placeholder {
18-
color: #5f082b;
19-
}
20-
21-
#loading {
22-
width: 2rem;
23-
height: 2rem;
24-
border: 5px solid #f3f3f3;
25-
border-top: 6px solid #9c41f2;
26-
border-radius: 100%;
27-
margin: auto;
28-
visibility: hidden;
29-
animation: spin 1s infinite linear;
30-
}
31-
32-
#loading.display {
33-
visibility: visible;
34-
}
35-
36-
@keyframes spin {
37-
from {
38-
transform: rotate(0deg);
39-
}
40-
41-
to {
42-
transform: rotate(360deg);
43-
}
44-
}
45-
</style>
46-
47-
<div class="hero">
10+
<div class="bg-gray-100 block-container">
4811
<div class="wrapper">
49-
<header>
50-
<h1 class="mb-6 pageheading">{{ title }}</h1>
51-
</header>
52-
</div>
53-
</div>
54-
55-
<div class="block-container">
56-
<div class="wrapper">
57-
<form id="form" method="POST" enctype="multipart/form-data">
58-
<div class="block">
59-
<label for="fullname">Full name (as it appears on your passport)</label>
60-
<input type="text" name="fullname" id="fullname" placeholder="Noah Doe" required>
61-
</div>
62-
63-
<div class="block">
64-
<label for="address">Address</label>
65-
<input type="text" name="address" id="address" placeholder="125 32nd Street, Durham, North Carolina, USA" required>
66-
</div>
67-
68-
<div class="block">
69-
<label for="dob">Date of Birth</label>
70-
<input type="text" name="dob" id="dob" placeholder="July 09 1990" required>
71-
</div>
72-
73-
<div class="block">
74-
<label for="email">Email</label>
75-
<input type="email" name="email" id="email" placeholder="visas@djangocon.us" required>
76-
</div>
77-
78-
<div class="block">
79-
<label for="passport_no">Passport Number</label>
80-
<input type="text" name="passport_no" id="passport_no" placeholder="A01923459B" required>
81-
</div>
82-
83-
<div class="block">
84-
<label for="letterselection">Are you a Speaker, an Opportunity Grant recipient, or a general attendee?</label>
85-
<select name="letterselection" id="letterselection" required>
86-
<option value="none">Attendee</option>
87-
<option value="og">Opportunity Grant recipient</option>
88-
<option value="speaker">Speaker</option>
89-
</select>
90-
</div>
91-
92-
93-
<div id="og" class="myDiv">
94-
<label for="og">Grant Amount (if applicable)</label>
95-
<input type="number" name="og" id="og" placeholder="2000.00">
96-
</div>
97-
<div id="speaker" class="myDiv">
98-
<label for="talk">Talk/Tutorial Title</label>
99-
<input type="text" name="talk" id="talk" placeholder="DjangoCon US is the best!">
12+
<h1 class="mb-6 text-center pageheading">{{ title }}</h1>
13+
<form
14+
class="max-w-2xl p-4 mx-auto bg-white rounded lg:p-12"
15+
id="inviteForm"
16+
method="POST"
17+
enctype="multipart/form-data">
18+
<ul class="space-y-8">
19+
<li>
20+
<label for="fullname">Full name (as it appears on your passport)</label>
21+
<input type="text" name="fullname" id="fullname" placeholder="Noah Doe" required>
22+
</li>
23+
<li>
24+
<label for="address">Address</label>
25+
<input type="text" name="address" id="address" placeholder="125 32nd Street, Durham, North Carolina, USA" required>
26+
</li>
27+
<li>
28+
<label for="dob">Date of Birth</label>
29+
<input type="text" name="dob" id="dob" placeholder="July 09 1990" required>
30+
</li>
31+
<li>
32+
<label for="email">Email</label>
33+
<input type="email" name="email" id="email" placeholder="visas@djangocon.us" required>
34+
</li>
35+
<li>
36+
<label for="passport_no">Passport Number</label>
37+
<input type="text" name="passport_no" id="passport_no" placeholder="A01923459B" required>
38+
</li>
39+
<li>
40+
<label for="letterselection">Are you a Speaker, an Opportunity Grant recipient, or a general attendee?</label>
41+
<select name="letterselection" id="letterselection" required>
42+
<option value="none">Attendee</option>
43+
<option value="og">Opportunity Grant recipient</option>
44+
<option value="speaker">Speaker</option>
45+
</select>
46+
</li>
47+
<li id="og" hidden>
48+
<label for="og">Grant Amount (if applicable)</label>
49+
<input type="number" name="og" id="og" placeholder="2000.00">
50+
</li>
51+
<li id="speaker" hidden>
52+
<label for="talk">Talk/Tutorial Title</label>
53+
<input type="text" name="talk" id="talk" placeholder="DjangoCon US is the best!">
54+
</li>
55+
</ul>
56+
57+
<div class="mt-8">
58+
<button id="submit" type="submit" class="button bg-mosaic-blue">Submit</button>
10059
</div>
101-
<button id="submit" type="submit" class="button">Submit</button>
10260
</form>
10361

104-
<div style="text-align:center; padding-bottom: 100px; margin-top: -30px;">
105-
<p id="inprogress">Thank you for your interest in DjangoCon US 2023! We're generating your invitation letter
62+
<div>
63+
<div id="loader" hidden></div>
64+
<p id="inProgressMsg" hidden class="max-w-2xl p-4 mx-auto text-lg bg-white border-4 rounded lg:p-12 text-medium lg:text-xl border-central-park-green">
65+
Thank you for your interest in DjangoCon US 2024! We're generating your invitation letter.
10666
</p>
107-
<div id="loading"></div>
108-
<p id="ready">Your invitation letter has been sent to the DjangoCon US organizers for review. Once they approve it,
109-
they will email it to you. Thanks for your interest!</p>
67+
<p id="readyMsg" hidden class="max-w-2xl p-4 mx-auto text-lg bg-white border-4 rounded lg:p-12 text-medium lg:text-xl border-central-park-green">Your invitation letter has been sent to the DjangoCon US organizers for review. Once they approve it, they will email it to you. Thanks for your interest!</p>
11068
</div>
11169
</div>
11270
</div>

0 commit comments

Comments
 (0)