I was writing out my grocery list and it was getting to become monotonous, I seemed to always buy the same things each time and it feels like I am writing the same ingredients. On top of that, it wasn't very geeky. So I threw together a quick JavaScript that will list my items (in this example, I do beer brats) and will build my grocery list by checking what I want to eat for the week.This is just an example of one meal but it is lightweight enough to add an infinite amount of options so you can choose your meals for the week just by checking them off of a list and hit submit, and the script will create the shopping list for you. See it in action, here - http://www.geekyclown.com/recipe.html
Note: I wrote this quick and haven't really tested it cross-platform etc., so use at your own risk.
First thing I did was create a frameset:
<frameset cols="50%,*">
<frame name="left" src="left.html">
<frame name="right" src="right.html">
</frameset>
In left.html created a JavaScript at the top that will assign my variables (my food groups) and give them no value at this point (since no meals have been clicked):
var can = "";
var meat = "";
var bread = "";
var produce = "";
var spice = "";
var drinks = "";
var frozen = "";
Then I created a function to show the list items in the write frame when clicked.
function showList(){
parent.right.document.write("<b>Bread goods:</b><br>" + bread + "<br>");
parent.right.document.write("<b>Can goods:</b><br>" + can + "<br>");
parent.right.document.write("<b>Drinks:</b><br>" + drinks + "<br>");
parent.right.document.write("<b>Frozen:</b><br>" + frozen + "<br>");
parent.right.document.write("<b>Meat goods:</b><br>" + meat + "<br>");
parent.right.document.write("<b>Produce:</b><br>" + produce + "<br>");
parent.right.document.write("<b>Spices:</b><br>" + spice + "<br>");
}
What this is doing is calling the frame (parent.right), then writing to the frame (document.write) the name of the group + the item that will go under the group heading (which is in the body of the document).
Then I create a form on the page that will have some check boxes that, when checked, will write the ingredients in the right column. Like so:
<h4>Choose items for the week:</h4>
<form name="form1" action="javascript:showList()">
<b>Entrees:</b><br>
<input type="checkbox" name="ingredients" onClick="meat = meat + '1 Package Bratwurst (Beer brats)<br>'; bread = bread + '8 Hot Dog Buns (Beer brats)<br>';">Beer brats (add
<input type="checkbox" name="ingredients" onClick="drinks = drinks + 'Beer<br>';">Beer)<br>
What this is - a checkbox named ingredients. When it is clicked it adds to the meat category 1 package of beer brats, one 8 hot dog buns to the bread category and then also threw in a beer in the drink category because beer brats aren't beer brats without beer.
You can add or subtract as many items as you would like and as many categories as you would like. Finish off with a submit button.
<input type="submit" value="Submit">
</form>
And, I created a little function that will clear the list. Here is the completed code:
<script language="JavaScript">
var can = "";
var meat = "";
var bread = "";
var produce = "";
var spice = "";
var drinks = "";
var frozen = "";
function showList(){
parent.right.document.write("<b>Bread goods:</b><br>" + bread + "<br>");
parent.right.document.write("<b>Can goods:</b><br>" + can + "<br>");
parent.right.document.write("<b>Drinks:</b><br>" + drinks + "<br>");
parent.right.document.write("<b>Frozen:</b><br>" + frozen + "<br>");
parent.right.document.write("<b>Meat goods:</b><br>" + meat + "<br>");
parent.right.document.write("<b>Produce:</b><br>" + produce + "<br>");
parent.right.document.write("<b>Spices:</b><br>" + spice + "<br>");
}
function clearList(){
parent.left.document.location.href="left.html";
parent.right.document.location.href="right.html";
}
</script>
<body>
<h4>Choose items for the week:</h4>
<form name="form1" action="javascript:showList()">
<b>Entrees:</b><br>
<input type="checkbox" name="ingredients" onClick="meat = meat + '1 Package Bratwurst (Beer brats)<br>'; bread = bread + '8 Hot Dog Buns (Beer brats)<br>';">Beer brats (add <input type="checkbox" name="ingredients" onClick="drinks = drinks + 'Beer<br>';">Beer)<br>
<br><input type="submit" value="Submit">
</form>
<a href="#" onClick="javascript:clearList()">Start Over</a>
</body>
Now, don't forget to create a page named right.html that is blank and can be written to.
Enjoy and no more writing grocery lists.
No comments:
Post a Comment