Skip to content

Commit 79cf92e

Browse files
mtrythallmtrythall
committed
Starts in on invitation page
1 parent 7a3b67d commit 79cf92e

File tree

2 files changed

+215
-0
lines changed

2 files changed

+215
-0
lines changed

‎src/assets/js/invitation.js

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
2+
const form = document.getElementById("form");
3+
form.addEventListener("submit", start);
4+
5+
const loader = document.querySelector("#loading");
6+
// showing loading
7+
function displayLoading() {
8+
loader.classList.add("display");
9+
}
10+
11+
// hiding loading
12+
function hideLoading() {
13+
loader.classList.remove("display");
14+
}
15+
16+
async function start(ev) {
17+
ev.preventDefault();
18+
console.log("start form");
19+
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
31+
32+
displayLoading();
33+
34+
if (lettertype == "none") {
35+
data = {
36+
"fullname": fullname,
37+
"address": address,
38+
"email": email,
39+
"dob": dob,
40+
"passport_no": passport_no
41+
}
42+
43+
} else if (lettertype == "og") {
44+
data = {
45+
"fullname": fullname,
46+
"address": address,
47+
"email": email,
48+
"dob": dob,
49+
"passport_no": passport_no,
50+
"letteropt": {
51+
"key": "og",
52+
"value": og
53+
}
54+
};
55+
} else if (lettertype == "speaker") {
56+
data = {
57+
"fullname": fullname,
58+
"address": address,
59+
"email": email,
60+
"dob": dob,
61+
"passport_no": passport_no,
62+
"letteropt": {
63+
"key": "speaker",
64+
"value": speaker
65+
}
66+
};
67+
}
68+
69+
displayLoading()
70+
$("#form").hide();
71+
await fetch('https://djc-invitation-letter-api-noahalorwu.vercel.app/invitation', {
72+
method: 'POST',
73+
headers: {
74+
'Content-Type': 'application/json',
75+
},
76+
body: JSON.stringify(data)
77+
}).then(res => res.json()).then(data => {
78+
hideLoading()
79+
console.log(data)
80+
$("#inprogress").hide();
81+
$("#ready").show();
82+
});
83+
}
84+
85+
$(document).ready(function () {
86+
$("#letterselection").change(function () {
87+
var selected = $(this).val();
88+
if (selected == "none") {
89+
$("#og").hide();
90+
$("#speaker").hide();
91+
}
92+
else if (selected == "og") {
93+
$("#og").show();
94+
$("#speaker").hide();
95+
}
96+
else if (selected == "speaker") {
97+
$("#og").hide();
98+
$("#speaker").show();
99+
}
100+
});
101+
});

‎src/invitation.html

Lines changed: 114 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,114 @@
1+
---
2+
layout: default
3+
4+
description: >
5+
Request your visa invitation letter for DjangoCon US 2023 here.
6+
7+
title: Visa Invitation Letter
8+
---
9+
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">
48+
<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!">
100+
</div>
101+
<button id="submit" type="submit" class="button">Submit</button>
102+
</form>
103+
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
106+
</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>
110+
</div>
111+
</div>
112+
</div>
113+
114+
<script src="/assets/js/invitation.js"></script>

0 commit comments

Comments
 (0)