Midterm Report

Mad Libs Generator 


Mad Libs is a word game where one player prompts others for a list of words to substitute for blanks in a story, before reading the often comical or nonsensical story aloud. However, to ease the process of this game, I would like to make it an web application, so that people can submit their entries online.

The game is unique and can be for anyone in any age range. It can be a fun birthday party game or even something that can quickly turn inappropriate in a bachelorette party. The game is to make the process of playing the traditional version of Mad Libs easier for a larger crowd of people. By creating an online version, where users can submit their words, it allows for a larger collection of data to create even more outlandish storylines.

It would be displayed as it’s own website, where users can go on to it to generate their Mad Libs in any scenario. This makes it easy and convenient for anyone to play the game.

Code Plan 

All the users would log on to a published google form and add in their words to separate categories that would say, “noun”, “verb”, “adjective” and “adverb”. They would then go on to the Mad Libs Generator and view a paragraph with blanks in it, which corresponds as the story. Underneath the paragraph, there would be a button that says “generate”. The user would click that button and the blanks would be replaced with the corresponding words from the google form that was submitted by the other users.



CIM540 Week 1: Practice

During class I think I said that my comfort level with coding was 1 but after practicing, I can safely say that it is a 0. However, after reading a lot of articles and practicing a lot (failing most of the time), I think I am beginning to understand the basics of CSS and its animations.

Week1 Practice 

Example 1

Learning how to set up the document was the hardest in the beginning but templates helped me. I wanted to learn how to change the color of an object and that is what I did for example 1. The square changes from blue to red.

Example 2

In example 2, I wanted to learn about how to incorporate percentages in the variables. I learned how to change the color of the square into a rainbow and not just one static color. I started with red at 0%, orange at 25%, yellow at 50%, green at 75% and blue at 100%.

Example 3

In example 3, I wanted to add onto example 2 by making the square move. The position of the <div> element when the animation is 25% complete, 50% complete, and again when the animation is 100% complete will change.