You’ve made it to the end of camp!
Today, we’re going to finish that super cool surprise that we started yesterday, we’re going to make our own online “Mad-Libs” game, and we’re going to put everything together on the webpage that we built on Monday.
Since we received requests for this project to be on Codepen and Glitch, we’re going to show you how to do it on both! It’s essentially the same app on platforms, with the only difference being that all of the messages you send will be saved forever if you use Codepen (they’ll be deleted once you exit the app if you’re using Glitch).
Instructions to Build The Surprise on Codepen
Step 1. Fork the Codepen below
Open up this codepen and click “fork” in the bottom right. That will create a new database for you to use which will store all of the messages you send.
Step 2. Add the following code to the HTML tab
Paste the following HTML code into the HTML tab on the Codepen that you just forked.
Step 3. Add the following CSS code
Copy and paste the following CSS code into the CSS tab on the Codepen that you just forked.
And there you have it! A beautiful chat app that stores all of your messages!
If you click “Change View” and then “Full Page View” on Codepen your chat app will take up the whole screen.
You can share the link to your chat app with your friends and family and you guys can all communicate with each other!
Instructions to Build the Surprise on Glitch
Step 1. Create a new project on Glitch
Go to Glitch.com and click on the button that says “New Project”, and then click on “hello-express”
Step 2. Add Socketio to Package.json
Click on the file on the left that says “package.json”. Then, where it says “Add Package”, search “socketio”. A package should come up that’s called “2.3.0 socketio”. Click on that to add it.
Step 3. Replace Server.js
Click on the file on the left that says “server.js” and delete whatever’s in it now. Then, copy and paste the following code and put it in “server.js”:
Step 4. Replace the code in index.html
Now, find where it says “views/” on the left and click on that. You should then see a file that’s called “index.html”. Go into “index.html”. Delete whatever code is in there now, and paste in the code below:
Step 5. View your new chat app!
Click on the sunglasses that say “Show”, and then choose if you want to see your awesome new app in a new window or the same one.
If you share the link of your app (the link for it when you view it in a new window) with your friends and family, then you can all talk to each other at the same time!
Unlike the Codepen app, since this one does not use a database, once you exit out of the app you will no longer be able to see the messages.
MAD LIBS with friends!
Now we’ll have you make your own MAD LIBS stories that you can play with friends even across the internet.
Take a look at these example MAD LIBS stories:
Step 1: FORK the pen
Go to this sample MadLibs and click “fork” in the bottom right to make your own copy (just like we’ve been doing).
Step 2: Edit yourMadLibStory
Find where it says
let yourMadLibStory = and then edit that story to say whatever you like! When you’re editing your story use the words you see in the
wordFinder (NOUN,VERB,ADJECTIVE,ADVERB,PLURALNOUN,NUMBER,PROPERNAME,LOCATION,ANIMAL,ING-VERB,PLACE) whenever you want to ask people to make-up their own words in your story. Make sure that when you sub those words into your story that they’re written in uppercase letters!
Step 3: Edit yourMadLibTitle
Make any title you want!
Step 4: Share your URL
Now as people fill out your story it will show on your screen and vice-versa. Once every answer has been filled out you can click “All Done” to show the answer then “Play Again?” to undo those answers.
Sharing your creations on your website
You all have made a creative alchemy game, a choose your own adventure game, a chat app, a MAD LIBs story, and a website. What a week! Now we encourage you to make a site to share with your friends and family that let’s them find all of your cool creations in one easy place.
Pick your main page location
Make a new pen, new glitch.com project, OR take the one you made on Monday.
Gather up your links
Copy the URLs for each of your creations (and feel free to keep adding things) and add links to those URLs like this:
<a href="GAME_URL_HERE">Friendly Description of your creation here</a>
Add a badge of accomplishment!
We made you some badges to show-off your Summer of Cyber week 1 experience! Place these badges anywhere that you want on your website!
Just add this badge to your site with an
<img src="https://udel.codes/images/creativecoder.svg"/> tag.
Just add this badge to your site with an
<img src="https://udel.codes/images/cyberscholar.svg"/> tag.
Thanks for being a part of this!
Here’s some other cool stuff for you if you want to do more at home:
Contact-us Form Starter Kit
The idea here is that, if you go to make a website for a business or a club, you’ll probably want to let people let you know they are interested in joining/buying/whatever. So you make a “FORM” that takes some information and shows it on a dashboard.
The FORM part:
Fork this page, copy the crazy ID at the top and paste it into the NEXT (dashboard) pen, then delete the crazy ID part.
Now you can fork this dashboard part and paste your form ID into the
Now people can reach out to you through your site and you can check in to see what they say.
A crazy air hockey game
This was more to show you how you can use databases a little differently. If you go to this pen you’ll either be player1, player2, or an observer. If you’re a player you can play air-hockey against someone else on the same site.
It’s a little wonky, but I used a cool technique to make it. Just search codepen for something you’d like to make then fork theirs and edit the code! Just give them some love in the comments.
A move the Pikachu “game”
Not a true game (yet) but you can move Pikachu and have everyone else change it’s direction too. It uses the same database style as the other apps we did so lot’s of people are altering the direction at the same time.