Skip to content

Commit 567608f

Browse files
davepagurekdavepagurek
committed
Add chatbot
1 parent 1f32963 commit 567608f

5 files changed

Lines changed: 80 additions & 7 deletions

File tree

‎chatbot.js‎

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
const elt = document.getElementById('chatbot')
2+
const rsvp = document.getElementById('apply')
3+
let opened = false
4+
5+
rsvp.addEventListener('mouseenter', startChatbot)
6+
function startChatbot() {
7+
if (opened) return
8+
opened = true
9+
elt.setAttribute('style', '')
10+
setTimeout(() => {
11+
document.getElementById('speech').setAttribute('style', '')
12+
}, 1000)
13+
}
14+
15+
document.getElementById('holp').addEventListener('click', () => {
16+
document.body.style.backgroundColor = '#0f0';
17+
document.body.style.color = '#f00';
18+
document.getElementById('p1').setAttribute('style', 'display: none')
19+
document.getElementById('p2').setAttribute('style', '')
20+
setTimeout(() => {
21+
elt.setAttribute('style', 'bottom: -200px')
22+
}, 2000)
23+
})

‎cloppy.png‎

2.19 KB
Loading

‎index.html‎

Lines changed: 35 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -87,11 +87,45 @@ <h5>By Ena Bukal, Maddy Leadbetter and Yangzi Guo for TerribleHack VR, 2020</h5>
8787
<p>Take a look at <a href="https://www.youtube.com/channel/UCznbFDr2mhqFBadguRnG8Hg/videos">past demos on YouTube</a> or one of <a href="https://terriblehack-xiii.devpost.com/">our</a> <a href="https://terriblehack6.devpost.com/">many</a> <a href="https://terriblehack-xi.devpost.com/">old</a> <a href="https://terriblehack-x.devpost.com/">Devposts</a> for more inspiration. You can also <a href="history.html" target="_blank">read about the event's history,</a> which is also pretty dank.</p>
8888

8989
<h2 id="signup">Sign up</h2>
90+
<form>
91+
<div class="item">
92+
<input type="text" name="name" class="question" id="name" required autocomplete="off" />
93+
<label for="name"><span>What's your name?</span></label>
94+
</div>
95+
96+
<div class="item">
97+
<input type="text" name="email" class="question" id="email" required autocomplete="off" />
98+
<label for="email"><span>What's your email?</span></label>
99+
</div>
100+
101+
<!--<div class="item">
102+
<input type="text" name="spacejam" class="question" id="spacejam" required autocomplete="off" />
103+
<label for="cats"><span><i>Optional:</i> Did <em>Space Jam: A New Legacy</em> (2021) live up to the hype?</span></label>
104+
</div>-->
105+
106+
107+
<p style="text-align: center"><a class="button" href="https://docs.google.com/forms/d/e/1FAIpQLScMyg56oS2CEknFhEurWTl8OSXcEQW-7NrLT5rU9JNzYWokZw/viewform?usp=header" id="apply">Register</a></p>
90108

91-
<p style="text-align: center"><a class="button" href="#" id="apply">RSVP on Meetup.com</a></p>
92109
<p style="text-align: center">...and also <a href="https://discord.gg/ux9txXPsdJ">join the Creative Code Toronto discord!</a></p>
93110

111+
</form>
112+
113+
94114
<p style="text-align: center"><a href="https://creativecodetoronto.github.io/">Creative Code Toronto</a> - <a href="https://interaccess.org/">InterAccess</a> - <a href="conduct.html">Code of Conduct</a> - <a href="history.html">History</a></p>
95115
</div>
116+
<div id="chatbot" style="bottom: -100px">
117+
<img src="cloppy.png" />
118+
<div id="speech" style="display: none">
119+
<div id="p1">
120+
<p>It looks like you're trying to apply to a hackathon. Let me help you with that!</p>
121+
<button id="holp">HOLP ME</button>
122+
</div>
123+
<div id="p2" style="display: none">
124+
<p>I hope this helps!</p>
125+
</div>
126+
</div>
127+
</div>
128+
<script src="index.js"></script>
129+
<script src="chatbot.js"></script>
96130
</body>
97131
</html>

‎index.js‎

Lines changed: 3 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,16 @@
11
const nameInput = document.getElementById('name');
2-
const locationInput = document.getElementById('location');
3-
const spacejamInput = document.getElementById('spacejam');
42
const emailInput = document.getElementById('email');
53
const applyLink = document.getElementById('apply');
64

75
const getLink = () => {
86
const name = encodeURIComponent(nameInput.value);
9-
const location = encodeURIComponent(locationInput.value);
10-
const spacejam = encodeURIComponent(spacejamInput.value);
117
const email = encodeURIComponent(emailInput.value);
128

13-
return `https://docs.google.com/forms/d/e/1FAIpQLSdDoCWLhEOt_hVR04474f2xKHJe0jrEuoO87Ra5BQlXtXLyGQ/viewform?usp=pp_url&entry.1160134771=${name}&entry.1912821810=${email}&entry.2117272494=${location}&entry.42582944=${spacejam}`;
9+
return `https://docs.google.com/forms/d/e/1FAIpQLScMyg56oS2CEknFhEurWTl8OSXcEQW-7NrLT5rU9JNzYWokZw/viewform?usp=pp_url&entry.498838656=${name}&entry.932453923=${email}`;
1410
};
1511

16-
[nameInput, locationInput, spacejamInput, emailInput].forEach(input => {
12+
[nameInput, emailInput].forEach(input => {
13+
console.log(input)
1714
input.addEventListener('change', () => {
1815
applyLink.setAttribute('href', getLink());
1916
});

‎style.css‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -404,3 +404,22 @@ input.question:invalid ~ input[type="submit"], textarea.question:invalid ~ input
404404
margin-top: 10px;
405405
font-size: 15px;
406406
}
407+
408+
#chatbot {
409+
position: fixed;
410+
right: 20px;
411+
bottom: 20px;
412+
transition: all ease 0.5s;
413+
}
414+
415+
#speech {
416+
position: absolute;
417+
right: 120px;
418+
top: -40px;
419+
padding: 10px;
420+
background: white;
421+
border: 1px solid #000;
422+
border-radius: 5px;
423+
width: 200px;
424+
font-size: 0.8em;
425+
}

0 commit comments

Comments
 (0)