Created
February 21, 2016 20:10
-
-
Save p1nesap/3d55164b142e4fbf74d3 to your computer and use it in GitHub Desktop.
Fun with JavaScript LocalStorage, Form and Images
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
<head> | |
<style> | |
body { | |
background-color: #fffafa; | |
color: #162252; | |
font-family: arial; | |
font-size: 16px; | |
margin: 15px 15px 25px 25px; | |
} | |
</style> | |
<script> | |
//Begin myFunction | |
var fruits = ["a", "b", "c"]; //array | |
//document.getElementById("fruit").innerHTML = (fruits[1]); | |
function myFunction() { | |
fruit = document.getElementById("choice").value; //create variables from expressions! | |
//var para = document.getElementById("frm1"); | |
//para.innerHTML = "Your choice is "+choice.value+"."; | |
if (fruit == (fruits[0])) { | |
message = "Apple, the archetypal fruit and the inspiration for Newton's Law of Gravity. You enjoy learning and living simply." | |
imaje = ("<img src= 'https://lh6.googleusercontent.com/-xjb2RbOZOtU/VJBc0RnxTfI/AAAAAAAADpg/5KHuCqSMyhE/w255-h167-no/apple1.jpg'>"); | |
} | |
else if (fruit == (fruits[1])) { | |
message = "Banana...luxurious, mellow, smooth. You know how to have a good time." | |
imaje = ("<img src='https://lh5.googleusercontent.com/mwZGP7aV3kGNn1qukCWmku1YBkcTix7Z0GmVSyfi7EU=w155-h207-p-no'>"); | |
} | |
else if (fruit == (fruits[2])) { | |
message = "Cherry is the seductive choice: round, rich and juicy, with the perfect balance of sweet and tart...sound like you?" | |
imaje= ("<img src='https://lh6.googleusercontent.com/-UoxTNGyfqBA/VJBUwFhoCPI/AAAAAAAADoI/VlYvpAXUtEE/w250-h243-no/cherry1.png' align='center'>"); | |
} | |
else { | |
message = "Make a selection." | |
} | |
var parat = document.getElementById("fruit"); //set var for paragraph id | |
parat.innerHTML = message; //concat to text = var from function | |
var pics = document.getElementById("pic"); | |
pics.innerHTML = imaje; | |
} | |
// End MyFunction, begin LOCAL STORAGE: | |
function myStorage() { | |
if (localStorage.clickcount) { | |
localStorage.clickcount = Number(localStorage.clickcount) + 1; | |
} | |
else { | |
localStorage.clickcount = 1; | |
} | |
document.getElementById("storage").innerHTML = "<br />You have used the form " + localStorage.clickcount + " time(s) this session."; | |
} | |
</script> | |
</head> | |
<body> | |
<script src="https://apis.google.com/js/platform.js"></script> | |
<div class="g-ytsubscribe" data-channel="p1nesap" data-count="default" data-layout="full"> | |
</div> | |
<br /><br /> | |
Choose apple (a) banana (b) or cherry (c):<br /> | |
<br /> | |
<!--return false prevents page refresh onKeydown (Enter) in text field--> | |
<form method="GET" action="/" onSubmit="return false;"> | |
<input type = "text" name="input" id="choice" onKeydown="Javascript: if (event.keyCode == 13) myFunction();"/><br><br> | |
<input type = "button" value="Go" onclick="myFunction(); myStorage()"/> | |
</form> | |
<p id="frm1"></p> | |
<p id="fruit"></p> | |
<div id="pic"></div> | |
<div id="storage"></div> | |
</body> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment