Skip to content

Instantly share code, notes, and snippets.

/index.html

Created December 15, 2015 19:26
Show Gist options
  • Star 1 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save anonymous/3048b4a06800cd7bc213 to your computer and use it in GitHub Desktop.
Save anonymous/3048b4a06800cd7bc213 to your computer and use it in GitHub Desktop.
Download ZIP
JS Bin Final JS project // source http://jsbin.com/lexohu
Raw
index.html
<!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>
Raw
jsbin.lexohu.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;
}
Raw
jsbin.lexohu.js
/*
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