Home |  Electronics |  Toolbox |  Gini and Karl's world |  E-cards |  Photos |  Online-Shop


story time | science club | math blog | computer corner  |  penguin page | home

My shopping list

Too often when I was writing my shopping list I forgot to put something on it that I would have needed and that I would buy almost every week - and then either had to run to the shop again or make do without. To change this I created a list with lots of items that I often buy. Now I just need to go through my list and click on the things I need. Clicking on them again unmarks the item so I can always change my mind. And when I am ready I click the "make ready for printing" button and only the items I had selected before are shown and I can print them out.

When I click on an item in my shopping list it is selected (hightlighted). I use a little jQuery to do this. So I need a click function when I click on an item and with $(this) the one item that I clicked on is selected while all the other items that have the same class (item) stay as they were before. If I select an item I want it to be highlighted and later show up in my shopping list for printing. For that I add the class highlighted to that item. I also remove the class noshow as all items that still have that class will later be hidden and not appear in my shopping list.

As it is possible that the item is already highlighted in which case I want to unselect it I need to check if the item already has the class highlighted. If yes, I remove that class and add the class noshow again as I no longer want that item to show up in my shopping list. Otherwise as already described above the class highlighted is added and the class noshow removed.

When I am ready and want to print my selection I click on the printing button which has the class forprinting. If this button is clicked all items that have the class noshow are hidden and the highlighted class is removed from all objects in my list as I don't want them to be highlighted in my final shopping list for printing.

Inside the body tags you can see that I put each item into a div that gets the classes item and noshow. For better readability I also included some
s from time to time that also need to have the class noshow.

Finally I used a little css to make the list look a bit nicer.

The .highlighted provides the highlighting: I use a background gradient that goes from yellow to the sand color that we usually use as background color for many of the tuxgraphics pages. It'still necessary to include the prefixes for the different browsers. The highlighted box gets an outside space (margin) of 2px and and inside space (padding)of 2px, with border-radius the corners are rounded and a shadow is added.

The css for the printing button is almost the same, only the padding and margin are a bit bigger and the color is only around the text and not along the whole line, that's waht display:inline is good for. (If I used display: inline for the highlighting however two items that are next to each other would suddenly jump into the same line so the whole line is highlighted.)

Here's the program:
<!DOCTYPE html>
<html>
<head>

<style>
.highlighted {
	background-image: -webkit-linear-gradient(top, yellow, #FDF5E6);
	background-image: -moz-linear-gradient(top, yellow, #FDF5E6);
	background-image: -ms-linear-gradient(top, yellow, #FDF5E6);
	background-image: -o-linear-gradient(top, yellow, #FDF5E6);
	padding: 2px;
	margin: 2px;
	border-radius: 50px;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	-webkit-box-shadow: 0px 0px 3px #666;
	-moz-box-shadow: 0px 0px 3px #666;
	box-shadow: 0px 0px 3px #666;
}

.forprinting {
	background-image: -webkit-linear-gradient(top, #aac5ff, #FDF5E6);
	background-image: -moz-linear-gradient(top, #aac5ff, #FDF5E6);
	background-image: -ms-linear-gradient(top, #aac5ff, #FDF5E6);
	background-image: -o-linear-gradient(top, #aac5ff, #FDF5E6);
	padding: 10px;
	margin: 5px;
	border-radius: 50px;
	-moz-border-radius: 50px;
	-webkit-border-radius: 50px;
	-webkit-box-shadow: 0px 0px 3px #666;
	-moz-box-shadow: 0px 0px 3px #666;
	box-shadow: 0px 0px 3px #666;
	display: inline;
}

</style>

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

<script type="text/javascript">

$(document).ready(function() {

  $(".item").click(function() {

	if ($(this).hasClass("highlighted")) {
		$(this).removeClass("highlighted");
		$(this).addClass("noshow");
	} else {
		$(this).addClass("highlighted");
		$(this).removeClass("noshow");
	}
  });

  $(".forprinting").click(function() {
	$(".noshow").hide();
	$(".item").removeClass("highlighted");
  });

});
</script>
</head>

<body>
<br>
<div class="forprinting noshow">make ready for printing</div>
<br class="noshow"><br class="noshow">
<div class="item noshow">bread</div>
<div class="item noshow">baguette</div>

<br class="noshow">

<div class="item noshow">apples</div>
<div class="item noshow">bananas</div>
<div class="item noshow">tomatoes</div>
<div class="item noshow">potatoes</div>

<br class="noshow">

<div class="item noshow">milk</div>
<div class="item noshow">butter</div>
<div class="item noshow">eggs</div>

<br class="noshow">

<div class="item noshow">orange juice</div>
<div class="item noshow">apple juice</div>
<div class="item noshow">cranberry juice</div>

<br class="noshow">

<div class="item noshow">sausages</div>
<div class="item noshow">fish</div>

<br class="noshow">

<div class="item noshow">pasta</div>
<div class="item noshow">cereals</div>
<div class="item noshow">pizzas</div>

<br class="noshow">

<div class="item noshow">chocolate ice cream</div>
<div class="item noshow">cookies</div>

</body>
</html>

That's it. Have fun with your own shopping list.

Or play around with mine: my shopping list


Copyright © 2004-2017 Katja Socher, tuxgraphics.org