-
-
Save alexpow/31b4b337b4a142639c04 to your computer and use it in GitHub Desktop.
JS Bin Final JS project // source http://jsbin.com/lexohu
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta name="description" content="Final JS project" /> | |
<meta charset="utf-8"> | |
<title>JS Bin</title> | |
<style id="jsbin-css"> | |
/*body style*/ | |
body { | |
font-size:14px; | |
font-weight:normal; | |
font-family:sans-serif; | |
} | |
/*anchor style*/ | |
a | |
{text-decoration:none; | |
} | |
a:link {color:#76D3E8;} | |
a:visited {color:#76D3E8;} | |
a:hover {color:#7AFF8C;} | |
a:active {color:#BEB0FF;} | |
/*container of everything*/ | |
#container { | |
min-width:300px; | |
max-width:600px; | |
box-shadow:5px 5px 15px white; | |
background-color:white; | |
margin:0 auto; | |
} | |
h1 { | |
font-size:36px; | |
color:#BEB0FF; | |
} | |
h2 { | |
font-size:28px; | |
color:#E894CA; | |
} | |
/*content style*/ | |
#content { | |
background-color:white; | |
padding:10px; | |
margin:10px 20px; | |
} | |
/*paragraph style*/ | |
#content p, ul, ol, dl { | |
font-size:16px; | |
color:black; | |
padding:20px 20px; | |
} | |
#content ul { | |
list-style-type:square; | |
} | |
#content ul li{ | |
list-style-type:square; | |
} | |
#content ol { | |
margin:5px; | |
list-style-type:lower-alpha; | |
} | |
#content dl { | |
margin:5px; | |
} | |
div.openpics { | |
clear:both; | |
} | |
figure.buffyabbie { | |
float:right; | |
width:25%; | |
margin-left:2%; | |
padding:1px 1px; | |
border:solid 2px #BEB0FF; | |
box-shadow: 5px 5px 10px #BEB0FF; | |
} | |
figure.buffyabbie img { | |
width:100%; | |
} | |
figure.buffyabbie figcaption { | |
text-align:center; | |
font-size:10px; | |
} | |
/*photo gallery style*/ | |
figure { | |
float:left; | |
padding:1px 1px; | |
margin:.5em; | |
height:220px; | |
} | |
figure img { | |
width:150px; | |
} | |
figure figcaption { | |
font-size:10px; | |
text-align:center; | |
} | |
/*contact form style*/ | |
form fieldset { | |
background-color:#FFE4D5; | |
border:solid 2px #BEB0FF; | |
border-radius:5px; | |
margin:10px; | |
width:220px; | |
} | |
form legend { | |
color:#BEB0FF; | |
background-color:white; | |
} | |
form label { | |
display:block; | |
padding:1px; | |
color:black; | |
} | |
form input { | |
border:solid 1px #BEB0FF; | |
border-radius:2px; | |
} | |
form textarea { | |
border:solid 1px #BEB0FF; | |
border-radius:2px; | |
width:225px; | |
height:100px; | |
} | |
button { | |
border:solid 2px #BEB0FF; | |
border-radius:5px; | |
padding:5px; | |
color:#BEB0FF; | |
background-color:white; | |
font-size:24px; | |
} | |
/*iframe style*/ | |
iframe.location { | |
width:40%; | |
height:50%; | |
} | |
iframe.abbievid { | |
width:75%; | |
height:400px; | |
} | |
/*footer style*/ | |
footer { | |
clear:both; | |
margin: 25px; | |
text-align:center; | |
} | |
</style> | |
</head> | |
<div id = "container"> | |
<div id = "content"> | |
<body> | |
<h1>Make a salad for your rabbit!</h1> | |
<button id="saladButton">Randomly generate a salad </button> | |
<h2>OR</h2> | |
<form> | |
<fieldset> | |
<legend>check if a plant is safe for rabbits</legend> | |
<label>All lower case, no numbers</label> | |
<label><input type="text" id="vegToCheck" pattern="[a-z]"></label> | |
<label><button id="vegcheck">Check it!</button></label> | |
</fieldset> | |
</form> | |
<!-- section, figure, and figcaption are HTML5 tags --> | |
<section id="output"><div id="textoutput"></div><figure id="bunnyphoto"><figcaption id="bunnycap"></figcaption></figure></section> | |
<script id="jsbin-javascript"> | |
/* | |
Requirements: | |
At least 1 more examples of properly using a for loop. | |
Write comments. | |
Must be posted to a publicly accessible URL with no broken links or broken images. | |
Must run without errors. | |
Should obviously demonstrate your JavaScript skills (this is a subjective measure). | |
Use HTML5 you get bonus | |
combination of different structures, more bonus points | |
*/ | |
veggies = ['arugula','carrot tops','cucumber leaves','endive','ecarole','frisee lettuce','kale','mache','red or green lettuce','romaine lettuce','spring greens','turnip greens','dandelion greens','mint','basil','watercress', | |
'wheatgrass','chicory','raspberry leaves','cilantro','radicchio','bok choy','fennel','borage leaves','dill leaves','yu choy']; | |
//first list, do two from this | |
veggiesTwo = ['parsley','spinach','mustard greens','beet greens','swiss chard','radish tops','sprouts' ]; | |
//one from this | |
treatsOne = ['carrots','broccoli','roses','nasturtiums', 'pansies', 'hibiscus','celery','bell peppers','brussel sprouts','cabbage','broccolini','summer squash','zucchini squash']; | |
//one from this | |
treatsTwo = ['apple','cherries','pear','peach','plum','kiwi', | |
'papaya','mango','berries','pineapple','banana','melons','star fruit','apricot','currants','nectarine']; | |
poisonousFood = ['agave','amaryllis','azalea','bird of paradise','bloodroot','buttercup','black locust','boxwood','buckeye', | |
'buckthorn','caladium','calla','castor bean','christmas rose','cone flower','crown of thorns','daffodil','daphne','delphinium','dumbcane','eggplant','elderberry','elephant ear','flowering tobacco','foxglove','holly','horsechestnut','hyacinth','iris','jack-in-the-pulpit','jerusalem cherry','jimson weed','jonquil','lantana','larkspur','lily-of-the-valley','lupine','mayapple','mistletoe','morning glory','mustard','narcissus','nicotiana','nightshade','oleander','philodendron','poison hemlock','poison ivy','potato','privet','ranunculus','rhododendron','rhubarb','rosary pea','snow-on-the-mountain','sweet pea','sweet potato','skunk cabbage','tansy','tomato','tulip','virginia creeper','water hemlock','wisteria','yew']; | |
//lists from http://rabbit.org/suggested-vegetables-and-fruits-for-a-rabbit-diet/ | |
results = []; | |
var textoutput = document.getElementById("textoutput"); | |
function setText(textoutput){ | |
textoutput.textContent = results.toString(); | |
} | |
function saladGenerator (){ | |
var vegOneRandom=Math.floor(Math.random()* veggies.length); | |
var vegTwoRandom=Math.floor(Math.random()* veggies.length); | |
var vegThreeRandom=Math.floor(Math.random()* veggiesTwo.length); | |
var treatOneRandom=Math.floor(Math.random()* treatsOne.length); | |
var treatTwoRandom=Math.floor(Math.random()* treatsTwo.length); | |
//two veggies from first array | |
var vegOne=veggies[vegOneRandom]; | |
var vegTwo=veggies[vegTwoRandom]; | |
//test image output: | |
//var vegTwo="kale"; | |
//if veg 2 and 1 are same, redo two using for loop | |
for (vegTwo;vegTwo==vegOne;) | |
{vegTwo=veggies[vegTwoRandom]; | |
if (vegTwo != vegOne) break;} | |
//one from second array | |
var vegThree=veggiesTwo[vegThreeRandom]; | |
//one from third array | |
var treatOne=treatsOne[treatOneRandom]; | |
//one from fourth array | |
var treatTwo=treatsTwo[treatTwoRandom]; | |
//if veggie is kale or parsley, display photo | |
var img = document.createElement("img"); | |
var src = document.getElementById("bunnyphoto"); | |
var caption = document.getElementById("bunnycap"); | |
if(vegOne==="kale"||vegTwo==="kale") | |
{img.src = "http://alexpow.com/images/buffy5.jpg"; src.appendChild(img); | |
caption.textContent="This is Buffy, and her favorite food is kale"; | |
} | |
if(vegOne==="parsley"||vegTwo==="parsley") | |
{img.src = ""; src.appendChild(img); | |
caption.textContent="This is Abbie, and her favorite food is parsley"; | |
} | |
//output in console | |
results=[vegOne, vegTwo, vegThree, treatOne, treatTwo]; | |
console.log(results,"end"); | |
setText(textoutput); | |
} | |
document.getElementById("saladButton").addEventListener("click", saladGenerator); | |
//begin second part of page | |
function veggieChecker(){ | |
var vegToCheck = document.getElementById("vegToCheck"); | |
//veggies.indexOf(vegToCheck) > -1; | |
switch(vegToCheck) { | |
case veggies.indexOf(vegToCheck) > -1: | |
results=["yes"]; | |
break; | |
case veggiesTwo.indexOf(vegToCheck) > -1: | |
results=["yes"]; | |
break; | |
case treatsOne.indexOf(vegToCheck) > -1: | |
results=["I don't know"]; | |
break; | |
case treatsTwo.indexOf(vegToCheck) > -1: | |
results=["I don't know"]; | |
break; | |
case poisonousFood.indexOf(vegToCheck) > -1: | |
results=["I don't know"]; | |
break; | |
default: | |
results=["I don't know"]; | |
} | |
setText(textoutput); | |
} | |
document.getElementById("vegcheck").addEventListener("click", veggieChecker); | |
</script> | |
<script id="jsbin-source-css" type="text/css"> | |
/*body style*/ | |
body { | |
font-size:14px; | |
font-weight:normal; | |
font-family:sans-serif; | |
} | |
/*anchor style*/ | |
a | |
{text-decoration:none; | |
} | |
a:link {color:#76D3E8;} | |
a:visited {color:#76D3E8;} | |
a:hover {color:#7AFF8C;} | |
a:active {color:#BEB0FF;} | |
/*container of everything*/ | |
#container { | |
min-width:300px; | |
max-width:600px; | |
box-shadow:5px 5px 15px white; | |
background-color:white; | |
margin:0 auto; | |
} | |
h1 { | |
font-size:36px; | |
color:#BEB0FF; | |
} | |
h2 { | |
font-size:28px; | |
color:#E894CA; | |
} | |
/*content style*/ | |
#content { | |
background-color:white; | |
padding:10px; | |
margin:10px 20px; | |
} | |
/*paragraph style*/ | |
#content p, ul, ol, dl { | |
font-size:16px; | |
color:black; | |
padding:20px 20px; | |
} | |
#content ul { | |
list-style-type:square; | |
} | |
#content ul li{ | |
list-style-type:square; | |
} | |
#content ol { | |
margin:5px; | |
list-style-type:lower-alpha; | |
} | |
#content dl { | |
margin:5px; | |
} | |
div.openpics { | |
clear:both; | |
} | |
figure.buffyabbie { | |
float:right; | |
width:25%; | |
margin-left:2%; | |
padding:1px 1px; | |
border:solid 2px #BEB0FF; | |
box-shadow: 5px 5px 10px #BEB0FF; | |
} | |
figure.buffyabbie img { | |
width:100%; | |
} | |
figure.buffyabbie figcaption { | |
text-align:center; | |
font-size:10px; | |
} | |
/*photo gallery style*/ | |
figure { | |
float:left; | |
padding:1px 1px; | |
margin:.5em; | |
height:220px; | |
} | |
figure img { | |
width:150px; | |
} | |
figure figcaption { | |
font-size:10px; | |
text-align:center; | |
} | |
/*contact form style*/ | |
form fieldset { | |
background-color:#FFE4D5; | |
border:solid 2px #BEB0FF; | |
border-radius:5px; | |
margin:10px; | |
width:220px; | |
} | |
form legend { | |
color:#BEB0FF; | |
background-color:white; | |
} | |
form label { | |
display:block; | |
padding:1px; | |
color:black; | |
} | |
form input { | |
border:solid 1px #BEB0FF; | |
border-radius:2px; | |
} | |
form textarea { | |
border:solid 1px #BEB0FF; | |
border-radius:2px; | |
width:225px; | |
height:100px; | |
} | |
button { | |
border:solid 2px #BEB0FF; | |
border-radius:5px; | |
padding:5px; | |
color:#BEB0FF; | |
background-color:white; | |
font-size:24px; | |
} | |
/*iframe style*/ | |
iframe.location { | |
width:40%; | |
height:50%; | |
} | |
iframe.abbievid { | |
width:75%; | |
height:400px; | |
} | |
/*footer style*/ | |
footer { | |
clear:both; | |
margin: 25px; | |
text-align:center; | |
} | |
</script> | |
<script id="jsbin-source-javascript" type="text/javascript">/* | |
Requirements: | |
At least 1 more examples of properly using a for loop. | |
Write comments. | |
Must be posted to a publicly accessible URL with no broken links or broken images. | |
Must run without errors. | |
Should obviously demonstrate your JavaScript skills (this is a subjective measure). | |
Use HTML5 you get bonus | |
combination of different structures, more bonus points | |
*/ | |
veggies = ['arugula','carrot tops','cucumber leaves','endive','ecarole','frisee lettuce','kale','mache','red or green lettuce','romaine lettuce','spring greens','turnip greens','dandelion greens','mint','basil','watercress', | |
'wheatgrass','chicory','raspberry leaves','cilantro','radicchio','bok choy','fennel','borage leaves','dill leaves','yu choy']; | |
//first list, do two from this | |
veggiesTwo = ['parsley','spinach','mustard greens','beet greens','swiss chard','radish tops','sprouts' ]; | |
//one from this | |
treatsOne = ['carrots','broccoli','roses','nasturtiums', 'pansies', 'hibiscus','celery','bell peppers','brussel sprouts','cabbage','broccolini','summer squash','zucchini squash']; | |
//one from this | |
treatsTwo = ['apple','cherries','pear','peach','plum','kiwi', | |
'papaya','mango','berries','pineapple','banana','melons','star fruit','apricot','currants','nectarine']; | |
poisonousFood = ['agave','amaryllis','azalea','bird of paradise','bloodroot','buttercup','black locust','boxwood','buckeye', | |
'buckthorn','caladium','calla','castor bean','christmas rose','cone flower','crown of thorns','daffodil','daphne','delphinium','dumbcane','eggplant','elderberry','elephant ear','flowering tobacco','foxglove','holly','horsechestnut','hyacinth','iris','jack-in-the-pulpit','jerusalem cherry','jimson weed','jonquil','lantana','larkspur','lily-of-the-valley','lupine','mayapple','mistletoe','morning glory','mustard','narcissus','nicotiana','nightshade','oleander','philodendron','poison hemlock','poison ivy','potato','privet','ranunculus','rhododendron','rhubarb','rosary pea','snow-on-the-mountain','sweet pea','sweet potato','skunk cabbage','tansy','tomato','tulip','virginia creeper','water hemlock','wisteria','yew']; | |
//lists from http://rabbit.org/suggested-vegetables-and-fruits-for-a-rabbit-diet/ | |
results = []; | |
var textoutput = document.getElementById("textoutput"); | |
function setText(textoutput){ | |
textoutput.textContent = results.toString(); | |
} | |
function saladGenerator (){ | |
var vegOneRandom=Math.floor(Math.random()* veggies.length); | |
var vegTwoRandom=Math.floor(Math.random()* veggies.length); | |
var vegThreeRandom=Math.floor(Math.random()* veggiesTwo.length); | |
var treatOneRandom=Math.floor(Math.random()* treatsOne.length); | |
var treatTwoRandom=Math.floor(Math.random()* treatsTwo.length); | |
//two veggies from first array | |
var vegOne=veggies[vegOneRandom]; | |
var vegTwo=veggies[vegTwoRandom]; | |
//test image output: | |
//var vegTwo="kale"; | |
//if veg 2 and 1 are same, redo two using for loop | |
for (vegTwo;vegTwo==vegOne;) | |
{vegTwo=veggies[vegTwoRandom]; | |
if (vegTwo != vegOne) break;} | |
//one from second array | |
var vegThree=veggiesTwo[vegThreeRandom]; | |
//one from third array | |
var treatOne=treatsOne[treatOneRandom]; | |
//one from fourth array | |
var treatTwo=treatsTwo[treatTwoRandom]; | |
//if veggie is kale or parsley, display photo | |
var img = document.createElement("img"); | |
var src = document.getElementById("bunnyphoto"); | |
var caption = document.getElementById("bunnycap"); | |
if(vegOne==="kale"||vegTwo==="kale") | |
{img.src = "http://alexpow.com/images/buffy5.jpg"; src.appendChild(img); | |
caption.textContent="This is Buffy, and her favorite food is kale"; | |
} | |
if(vegOne==="parsley"||vegTwo==="parsley") | |
{img.src = ""; src.appendChild(img); | |
caption.textContent="This is Abbie, and her favorite food is parsley"; | |
} | |
//output in console | |
results=[vegOne, vegTwo, vegThree, treatOne, treatTwo]; | |
console.log(results,"end"); | |
setText(textoutput); | |
} | |
document.getElementById("saladButton").addEventListener("click", saladGenerator); | |
//begin second part of page | |
function veggieChecker(){ | |
var vegToCheck = document.getElementById("vegToCheck"); | |
//veggies.indexOf(vegToCheck) > -1; | |
switch(vegToCheck) { | |
case veggies.indexOf(vegToCheck) > -1: | |
results=["yes"]; | |
break; | |
case veggiesTwo.indexOf(vegToCheck) > -1: | |
results=["yes"]; | |
break; | |
case treatsOne.indexOf(vegToCheck) > -1: | |
results=["I don't know"]; | |
break; | |
case treatsTwo.indexOf(vegToCheck) > -1: | |
results=["I don't know"]; | |
break; | |
case poisonousFood.indexOf(vegToCheck) > -1: | |
results=["I don't know"]; | |
break; | |
default: | |
results=["I don't know"]; | |
} | |
setText(textoutput); | |
} | |
document.getElementById("vegcheck").addEventListener("click", veggieChecker); | |
</script></body> | |
</div> | |
</div> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/*body style*/ | |
body { | |
font-size:14px; | |
font-weight:normal; | |
font-family:sans-serif; | |
} | |
/*anchor style*/ | |
a | |
{text-decoration:none; | |
} | |
a:link {color:#76D3E8;} | |
a:visited {color:#76D3E8;} | |
a:hover {color:#7AFF8C;} | |
a:active {color:#BEB0FF;} | |
/*container of everything*/ | |
#container { | |
min-width:300px; | |
max-width:600px; | |
box-shadow:5px 5px 15px white; | |
background-color:white; | |
margin:0 auto; | |
} | |
h1 { | |
font-size:36px; | |
color:#BEB0FF; | |
} | |
h2 { | |
font-size:28px; | |
color:#E894CA; | |
} | |
/*content style*/ | |
#content { | |
background-color:white; | |
padding:10px; | |
margin:10px 20px; | |
} | |
/*paragraph style*/ | |
#content p, ul, ol, dl { | |
font-size:16px; | |
color:black; | |
padding:20px 20px; | |
} | |
#content ul { | |
list-style-type:square; | |
} | |
#content ul li{ | |
list-style-type:square; | |
} | |
#content ol { | |
margin:5px; | |
list-style-type:lower-alpha; | |
} | |
#content dl { | |
margin:5px; | |
} | |
div.openpics { | |
clear:both; | |
} | |
figure.buffyabbie { | |
float:right; | |
width:25%; | |
margin-left:2%; | |
padding:1px 1px; | |
border:solid 2px #BEB0FF; | |
box-shadow: 5px 5px 10px #BEB0FF; | |
} | |
figure.buffyabbie img { | |
width:100%; | |
} | |
figure.buffyabbie figcaption { | |
text-align:center; | |
font-size:10px; | |
} | |
/*photo gallery style*/ | |
figure { | |
float:left; | |
padding:1px 1px; | |
margin:.5em; | |
height:220px; | |
} | |
figure img { | |
width:150px; | |
} | |
figure figcaption { | |
font-size:10px; | |
text-align:center; | |
} | |
/*contact form style*/ | |
form fieldset { | |
background-color:#FFE4D5; | |
border:solid 2px #BEB0FF; | |
border-radius:5px; | |
margin:10px; | |
width:220px; | |
} | |
form legend { | |
color:#BEB0FF; | |
background-color:white; | |
} | |
form label { | |
display:block; | |
padding:1px; | |
color:black; | |
} | |
form input { | |
border:solid 1px #BEB0FF; | |
border-radius:2px; | |
} | |
form textarea { | |
border:solid 1px #BEB0FF; | |
border-radius:2px; | |
width:225px; | |
height:100px; | |
} | |
button { | |
border:solid 2px #BEB0FF; | |
border-radius:5px; | |
padding:5px; | |
color:#BEB0FF; | |
background-color:white; | |
font-size:24px; | |
} | |
/*iframe style*/ | |
iframe.location { | |
width:40%; | |
height:50%; | |
} | |
iframe.abbievid { | |
width:75%; | |
height:400px; | |
} | |
/*footer style*/ | |
footer { | |
clear:both; | |
margin: 25px; | |
text-align:center; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
/* | |
Requirements: | |
At least 1 more examples of properly using a for loop. | |
Write comments. | |
Must be posted to a publicly accessible URL with no broken links or broken images. | |
Must run without errors. | |
Should obviously demonstrate your JavaScript skills (this is a subjective measure). | |
Use HTML5 you get bonus | |
combination of different structures, more bonus points | |
*/ | |
veggies = ['arugula','carrot tops','cucumber leaves','endive','ecarole','frisee lettuce','kale','mache','red or green lettuce','romaine lettuce','spring greens','turnip greens','dandelion greens','mint','basil','watercress', | |
'wheatgrass','chicory','raspberry leaves','cilantro','radicchio','bok choy','fennel','borage leaves','dill leaves','yu choy']; | |
//first list, do two from this | |
veggiesTwo = ['parsley','spinach','mustard greens','beet greens','swiss chard','radish tops','sprouts' ]; | |
//one from this | |
treatsOne = ['carrots','broccoli','roses','nasturtiums', 'pansies', 'hibiscus','celery','bell peppers','brussel sprouts','cabbage','broccolini','summer squash','zucchini squash']; | |
//one from this | |
treatsTwo = ['apple','cherries','pear','peach','plum','kiwi', | |
'papaya','mango','berries','pineapple','banana','melons','star fruit','apricot','currants','nectarine']; | |
poisonousFood = ['agave','amaryllis','azalea','bird of paradise','bloodroot','buttercup','black locust','boxwood','buckeye', | |
'buckthorn','caladium','calla','castor bean','christmas rose','cone flower','crown of thorns','daffodil','daphne','delphinium','dumbcane','eggplant','elderberry','elephant ear','flowering tobacco','foxglove','holly','horsechestnut','hyacinth','iris','jack-in-the-pulpit','jerusalem cherry','jimson weed','jonquil','lantana','larkspur','lily-of-the-valley','lupine','mayapple','mistletoe','morning glory','mustard','narcissus','nicotiana','nightshade','oleander','philodendron','poison hemlock','poison ivy','potato','privet','ranunculus','rhododendron','rhubarb','rosary pea','snow-on-the-mountain','sweet pea','sweet potato','skunk cabbage','tansy','tomato','tulip','virginia creeper','water hemlock','wisteria','yew']; | |
//lists from http://rabbit.org/suggested-vegetables-and-fruits-for-a-rabbit-diet/ | |
results = []; | |
var textoutput = document.getElementById("textoutput"); | |
function setText(textoutput){ | |
textoutput.textContent = results.toString(); | |
} | |
function saladGenerator (){ | |
var vegOneRandom=Math.floor(Math.random()* veggies.length); | |
var vegTwoRandom=Math.floor(Math.random()* veggies.length); | |
var vegThreeRandom=Math.floor(Math.random()* veggiesTwo.length); | |
var treatOneRandom=Math.floor(Math.random()* treatsOne.length); | |
var treatTwoRandom=Math.floor(Math.random()* treatsTwo.length); | |
//two veggies from first array | |
var vegOne=veggies[vegOneRandom]; | |
var vegTwo=veggies[vegTwoRandom]; | |
//test image output: | |
//var vegTwo="kale"; | |
//if veg 2 and 1 are same, redo two using for loop | |
for (vegTwo;vegTwo==vegOne;) | |
{vegTwo=veggies[vegTwoRandom]; | |
if (vegTwo != vegOne) break;} | |
//one from second array | |
var vegThree=veggiesTwo[vegThreeRandom]; | |
//one from third array | |
var treatOne=treatsOne[treatOneRandom]; | |
//one from fourth array | |
var treatTwo=treatsTwo[treatTwoRandom]; | |
//if veggie is kale or parsley, display photo | |
var img = document.createElement("img"); | |
var src = document.getElementById("bunnyphoto"); | |
var caption = document.getElementById("bunnycap"); | |
if(vegOne==="kale"||vegTwo==="kale") | |
{img.src = "http://alexpow.com/images/buffy5.jpg"; src.appendChild(img); | |
caption.textContent="This is Buffy, and her favorite food is kale"; | |
} | |
if(vegOne==="parsley"||vegTwo==="parsley") | |
{img.src = ""; src.appendChild(img); | |
caption.textContent="This is Abbie, and her favorite food is parsley"; | |
} | |
//output in console | |
results=[vegOne, vegTwo, vegThree, treatOne, treatTwo]; | |
console.log(results,"end"); | |
setText(textoutput); | |
} | |
document.getElementById("saladButton").addEventListener("click", saladGenerator); | |
//begin second part of page | |
function veggieChecker(){ | |
var vegToCheck = document.getElementById("vegToCheck"); | |
//veggies.indexOf(vegToCheck) > -1; | |
switch(vegToCheck) { | |
case veggies.indexOf(vegToCheck) > -1: | |
results=["yes"]; | |
break; | |
case veggiesTwo.indexOf(vegToCheck) > -1: | |
results=["yes"]; | |
break; | |
case treatsOne.indexOf(vegToCheck) > -1: | |
results=["I don't know"]; | |
break; | |
case treatsTwo.indexOf(vegToCheck) > -1: | |
results=["I don't know"]; | |
break; | |
case poisonousFood.indexOf(vegToCheck) > -1: | |
results=["I don't know"]; | |
break; | |
default: | |
results=["I don't know"]; | |
} | |
setText(textoutput); | |
} | |
document.getElementById("vegcheck").addEventListener("click", veggieChecker); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment