Permalink
Browse files

Merge pull request #10 from luisynayan/master

submitting Homework 4
  • Loading branch information...
vodnik committed Dec 21, 2018
2 parents 87a3580 + 4252fa2 commit 77fff3b30c8954070b6cc11ad7104899b1fa381a

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
*/


/******************************************
/* SETUP
/*******************************************/

/* 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 */
}

/******************************************
/* BASE STYLES
/*******************************************/

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


/******************************************
/* LAYOUT
/*******************************************/

/* 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');
}
/******************************************
/* ADDITIONAL STYLES
/*******************************************/
@@ -0,0 +1,39 @@
<!DOCTYPE html>
<html>

<head>
<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">
</head>

<body>

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

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

<h2 id="favorites">

</h2>


<script src='http://code.jquery.com/jquery-latest.min.js'></script>
<script src="js/app.js"></script>

</body>

</html>
@@ -0,0 +1,25 @@
# ![](https://ga-dash.s3.amazonaws.com/production/assets/logo-9f88ae6c9c3871690e33280fcf557f33.png) 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](http://www.javascriptkit.com/javatutors/dom2.shtml), 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,23 @@
var startupX = ['Uber', 'Google', 'Amazon', 'Apple', 'Facebook', 'Twitter'];
var startupY = ['Slack', 'Trello', 'Tesla', 'Hyperloop', 'Harvest'];
var random1 = 0;
var random2 = 0;
let favorites = [];

// console.log('A startup that is ' + startupX[random1] + ', but for ' + startupY[random2]);

$('#create').on('click', function(){
random1 = Math.floor((Math.random() * startupX.length));
random2 = Math.floor((Math.random() * startupY.length));
$('#xForY').text('A startup that is ' + startupX[random1] + ', but for ' + startupY[random2]);
})

$('#save').on('click', function(){
favorites.push($('#xForY').text());
})

$('#print').on('click', function(){
for (let i = 0; i < favorites.length; i++){
$('#favorites').html($('#favorites').html()+ favorites[i] + '<br />');
};
})

Large diffs are not rendered by default.

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

<head>
<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">
</head>

<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>
<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>
<li class="form-group padout">
<label>Favorite meme?</label>
<input type="text" class="form-control">
</li>
</ol>
</form>
<script src="js/jquery-3.2.1.min.js"></script>
<script src="js/app.js"></script>
</body>

</html>
@@ -0,0 +1,43 @@
/*
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.
*/


// $("#surveyList li").each(function() {
// var $removeButton = $('<button>').html("Remove question");
// $(this).append($removeButton);
// });

$("#surveyList li").append($('<button>').html("Remove question"));


$('#addQuestion').on('click', function(event){
event.preventDefault();
let $listItem = $('<li>').addClass('form-group padout');
let $itemLabel = $('<label>' + $('#question').val() + '</label>');
let $textBox = $('<input type = "text">').addClass('form-control');
$listItem.addClass('form-group padout').append($itemLabel).append($textBox).append($('<button>').html("Remove question"));
// $listItem.append($textBox);
// $listItem.addClass('form-group padout');
// $listItem.append($('<button>').html("Remove question"));
$('ol').append($listItem);
})

$('#finalSurvey').on('click', 'button', function(event){
event.preventDefault();
$(this).parents('li').remove();
})

Large diffs are not rendered by default.

Oops, something went wrong.

0 comments on commit 77fff3b

Please sign in to comment.