Browse files

Merge pull request #11 from cubofantastico/master

  • Loading branch information...
vodnik committed Dec 21, 2018
2 parents 77fff3b + 3ab871a commit 56ac68bec258d489216ab15e68e8ab807076baef

Large diffs are not rendered by default.

Oops, something went wrong.
@@ -0,0 +1,95 @@
Project Name: Blank Template
Client: Your Client
Author: Your Name
Developer @GA in NYC


/* Box Model Hack */
* {
-moz-box-sizing: border-box; /* Firexfox */
-webkit-box-sizing: border-box; /* Safari/Chrome/iOS/Android */
box-sizing: border-box; /* IE */

/* Clear fix hack */
.clearfix:after {
content: ".";
display: block;
clear: both;
visibility: hidden;
line-height: 0;
height: 0;

.clear {
clear: both;

.alignright {
float: right;
padding: 0 0 10px 10px; /* note the padding around a right floated image */

.alignleft {
float: left;
padding: 0 10px 10px 0; /* note the padding around a left floated image */


body {
color: #000;
font-size: 12px;
line-height: 1.4;
font-family: Helvetica, Arial, sans-serif;


/* Center the container */
#container {
width: 960px;
margin: auto;

#content span {
width: 100px;
height: 100px;
display: inline-block;
margin: 20px;
background-repeat: no-repeat;
background-position: top left;

.dice-1 {
background-image: url('../img/1.png');
.dice-2 {
background-image: url('../img/2.png');
.dice-3 {
background-image: url('../img/3.png');
.dice-4 {
background-image: url('../img/4.png');
.dice-5 {
background-image: url('../img/5.png');
.dice-6 {
background-image: url('../img/6.png');
@@ -0,0 +1,39 @@
<!DOCTYPE html>

<title>Mad Lib</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="description" content="Your description goes here">
<meta name="keywords" content="one, two, three">

<!-- Place favicon.ico and apple-touch-icon.png in the root directory -->

<!-- external CSS link -->
<link rel="stylesheet" href="css/normalize.css">
<link rel="stylesheet" href="css/style.css">
<meta name="viewport" content="width=device-width">


<h1 id="xForY">Test</h1>

<div id="inputs">
<button id="create">Create New Startup</button>
<button id="save">Favorite Startup</button>
<button id="print">Print Favorites</button>

<h2 id="favorites">


<script src=''></script>
<script src="js/app.js"></script>


@@ -0,0 +1,25 @@
# ![]( JavaScript Development: Madlibs Exercise

Have you ever heard someone describe a startup as being "Like Uber for puppies" or "Like Amazon for kittens"? In this exercise, you'll be building a website that auto-generates madlib sayings like "A startup that is `X` but for `Y`". Here's what we've given you to get started:

* A JavaScript file ("madlib-console.js") that contains two arrays (`startupX` and `startupY`) that are pre-populated with startup names (feel free to add some of your own as well!). The JavaScript file also contains two variables (`random1` and `random2`) that will randomly select startup names from those arrays. Finally, at the bottom of the JavaScript file, there's a line of code that will log "A startup that is `X` but for `Y`" out to the console.

* An HTML file that contains a few elements you will want to use:
* An `h1` with an ID of `XforY`--this is where your finished madlib saying will go.
* Buttons that are labeled "Create new startup," "Favorite Startup" and "Print favorites".

* A CSS file, which contains some basic styling. You shouldn't need to do anything with this file (unless you want to tweak the styling).

## Minimum Requirements

Your job is to add code to the JavaScript file that makes the "Create new startup" button work. Basically, when the user clicks that buttons, your JavaScript should generate a new madlib saying, which should appear inside the `XforY` h1.

* In order to complete this task, you will need to know a little bit about DOM manipulation. If this isn't something you've covered yet in class, you may want to wait until you've covered DOM manipulation before you try to tackle this exercise. If, however, you'd like to get a head start, feel free to [check out this tutorial](, which should contain everything you need to get started.

## Stretch Goals

Were you able to meet the minimum requirements for the exercise? Want an additional challenge? Here are two more features you can implement in your JavaScript:

* Add functionality to make the "Favorite Startup" button work--when the "Favorite Startup" button is clicked, it should save that madlib saying to an array.

* Add functionality to make the "Print favorites" button work--when the "Print favorites" button is clicked, it should display all of the favorited startups in the array underneath the h2 with an ID of `favorites`.
@@ -0,0 +1,43 @@
let startupX = ['Uber', 'Google', 'Amazon', 'Apple', 'Facebook', 'Twitter'];
let startupY = ['Slack', 'Trello', 'Tesla', 'Hyperloop', 'Harvest'];

function pickRandomElement(array) {
let element = Math.floor((Math.random() * array.length));
return array[element];

function newStartup() {
return 'A startup that is ' + pickRandomElement(startupX) + ', but for ' + pickRandomElement(startupY);

let currentStartup = newStartup();

let favStartups = [];

let printFavs = '';


$('#create').on("click", function () {
currentStartup = newStartup();

$('#save').on("click", function () {
if (favStartups.indexOf(currentStartup) === -1) {
console.log(`Saved: '${currentStartup}'`);
} else {
console.log('Already favorited');

$('#print').on("click", function () {
for (let i = 0; i < favStartups.length; i++) {
printFavs += favStartups[i] + '</br>\n';
console.log('Printing:\n' + printFavs);
printFavs = '';

Large diffs are not rendered by default.

Oops, something went wrong.

Large diffs are not rendered by default.

Oops, something went wrong.
@@ -0,0 +1,35 @@
<!DOCTYPE html>

<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Build your own survey</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/bootstrap.min.css" rel="stylesheet">

<body class="container">
<h1>Build your own survey</h1>
<form id="surveyBuilder" class="form-inline voffset">
<input id="question" class="form-control" type="text" placeholder="Enter question" aria-label="Enter question">
<input id="addQuestion" type="submit" value="Add to survey">
<form id="finalSurvey" class="voffset bg-info">
<ol id="surveyList">
<li class="form-group padout">
<label>What is the last song you listened to?</label>
<input type="text" class="form-control">
<li class="form-group padout">
<label>Favorite meme?</label>
<input type="text" class="form-control">
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/app.js"></script>

@@ -0,0 +1,59 @@
Create a customizable survey form.
The index.html file includes a form, which contains 2 sample questions as illustrations.
√ A user should be able to type a survey question into the text box with the id "question", click the Submit button, and the question
should be added to the survey.
√ When the user adds the question to the survey, it should be automatically numbered and a text box should be added below it.
Each survey question should also include a "Remove question" button that a user can click to remove the question from the survey.
In addition to creating the functionality described above, your final code should also do the following:
- Convert the existing code to use implicit iteration
- Implement at least one example of event delegation
- Chain at least 2 methods
Note: This project uses Bootstrap, which is a CSS framework that provides prebuilt styles using class names.
Make sure the new questions you add to the survey use the same class names as in the sample form questions to take advantage of Bootstrap styles.

//Add new question with label, input and remove button, reset value at end
$('#addQuestion').on('click', function () {
const $question = $('#question').val();
if ($question === '') {
alert('You must enter a question')
} else {
const $label = $('<label></label>').text($question);
const $input = $('<input>').attr('type', 'text').addClass('form-control');
const $removeButton = $('<button></button>').html("Remove question").addClass('remove');
const $newQuestion = $('<li></li>').addClass('form-group padout').append($label).append($input).append($removeButton);
console.log('Added question');

//Add buttons to example questions
$("#surveyList li").each(function () {
var $removeButton = $('<button></button>').html("Remove question").addClass('remove');

// Event delegate to add functionality to remove button
// event.preventDefault(); needed to prevent page refresh behavior
$('#surveyList').on('click', 'button[class="remove"]', function () {
console.log('Remove clicked')

//Added second button to test remove button delegation

// $('#surveyList').on('click', 'button[class="submit"]', function () {
// event.preventDefault();
// console.log($input);
// });

Large diffs are not rendered by default.

Oops, something went wrong.

0 comments on commit 56ac68b

Please sign in to comment.