Summer of Cyber

Follow me on GitHub

You’ve made it to the end of camp!


Congratulations on making it all the way to day 4 of Learn To Code camp! We hope you guys all learned a lot about web development and JavaScript during your time here, but the fun isn’t over yet!

excited

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.

Surpise App

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.

Step 4. Add JavaScript

Add the following JavaScript to line 36 in the JavaScript tab on your codepen. (Place this code below everything that’s already in the JS tab).

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.

socketio

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:

See the Pen Mad Libs Engine by dianevinson (@dianevinson) on CodePen.

OR:

See the Pen Mad Libs Engine by mariavanv (@mariavanv) on CodePen.

OR:

See the Pen Mad Libs Engine by Andy Novocin (@AndyNovo) on CodePen.

OK:

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.

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!

Creative Coder Badge

Just add this badge to your site with an <img src="https://udel.codes/images/creativecoder.svg"/> tag.

Future Cyberscholar Badge

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.

See the Pen Contact Form Input Demo by Andy Novocin (@AndyNovo) on CodePen.

Now you can fork this dashboard part and paste your form ID into the yourID line.

See the Pen Contact Form Output Demo by Andy Novocin (@AndyNovo) on CodePen.

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.

Link to crazy air hockey

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.

See the Pen Networked "Game" Demo by Andy Novocin (@AndyNovo) on CodePen.