ZIM BITS TUTORIAL
<!doctype html>
<html>
<head>
<meta charset="utf-8" />
<title>ZIM BITS - ZIM Cookies and CSS Selectors</title>
<!-- Welcome to ZIM at https://zimjs.com - Code Creativity! -->
<!-- ZIM runs on the HTML Canvas powered by JavaScript and CreateJS https://createjs.com -->
<!-- Founded by Inventor Dan Zen - http://danzen.com - Canadian New Media Award Winner -->
<!-- ZIM is free to use. You can donate to help improve ZIM at http://zimjs.com/donate -->
<script src="https://zimjs.org/cdn/1.3.4/createjs.js"></script>
<script src="https://zimjs.org/cdn/01/zim_min.js"></script>
<!-- use zimjs.com/distill for minified individual functions! -->
<script src="https://zimjs.com/bits/footer10.js"></script><!-- you will not need this -->
<style>
body {margin:0px; padding:0px; background-color:#eee;}
#myCanvas {position:relative; background-color:#333;}
main {width:400px; margin:0px auto; text-align: center}
nav, footer {width:100%; padding:20px 0px; text-align:center;}
a {outline:none;}
main {-moz-user-select: none; -webkit-user-select: none; -ms-user-select:none; user-select:none;-o-user-select:none;}
.letter {
display:inline-block;
width:30px; height:30px;
text-align: center;
vertical-align: middle;
line-height: 30px;
font-family:Courier New;
cursor:pointer;
border:thin solid #eee;
}
footer a {
font-family:Courier New; padding:5px 8px; background-color:#ddd;
border:dashed thin #666; text-decoration:none; color:#666;
}
footer a:hover {background-color:#fff;}
footer {margin-bottom:30px;}
</style>
<script>
// ZIM BITS - ZIM Cookies and CSS Selectors (2016 - updated 2022)
// COOKIES
// ZIM has a code module that has handy helpers for traditional HTML
// these are found in the second half of the code module
// an example is code for setting and getting Cookies
// in this ZIM Bit the user can click the letters to set the overall color
// we use a cookie to remember the index of the color in a list
// we check for an existing cookie when the user loads the page
// and then we set a cookie any time the user changes a color
// SELECTORS
// similar to jQuery's $(selector), ZIM provides zet(selector)
// this creates a set of tags based on a query selector
// such as .class, #tagid, tag, tag:pseudo, tag subtag, etc.
// you can then add an event to the tags using on(event, function)
// or you can set a css property with css(property, value)
// or set multiple css properties with css({property:value, property:value})
// STEPS
// 0. create the tags that we will use (see HTML beneath)
// 1. ensure the tags are loaded on the page
// 2. create an array of colors to cycle through
// 3. check for an existing cookie when the user loads the page
// 4. if the cookie is undefined store a 0 in memory
// 5. if the cookie is defined then store its value in memory
// 6. set the color from the colors array that matches the memory
// 7. apply the color to all the letters using zet().css()
// 8. or store a set in a variable for multiple usage
// 9. capture the click on the set of letters
// 10. advance the color index and store it in a cookie when letters are clicked
// 11. set the new color and reset all borders with css() on the set
// 12. set the border style of just the target of the event
// 1. ensure the tags are loaded on the page
window.addEventListener("DOMContentLoaded", function(e) { // make sure tags are loaded!
// 2. create an array of colors to cycle through
const colors = ["#f58e25","#acd241","#e472c4","#50c4b7","#d1a170","#ebcb35"];
// 3. check for an existing cookie when the user loads the page
// may not work locally - but needs to be on Website
const memory = getCookie("colorCounter"); // zim function
// 4. if the cookie is undefined store a 0 in memory (zot is not)
// 5. if the cookie is defined then store its value in memory
let colorCounter = (zot(memory)) ? 0 : memory;
// 6. set the color from the colors array that matches the memory
// note that we keep increasing the value of colorCounter each click
// so we use the modulus to keep that in range of the array (programmer trick!)
let color = colors[colorCounter%colors.length];
// 7. apply the color to all the letters using zet().css()
zet(".letter").css("background-color", color);
// 8. or store the set in a variable for multiple usage
// zet gives us an array of tags that match the selector
// so if we are going to use the set multiple times,
// we may as well put it in a variable
// we did not do this above as we were demonstrating the chained version of zet and css
// but from now on, we will access the set via the set variable
const set = zet(".letter");
// 9. capture the click on the set of letters
set.on("click", function(e) {
// 10. advance the color index and store it in a cookie when letters are clicked
setCookie("colorCounter", ++colorCounter);
// 11. set the new color and reset all borders with css() on the set
color = colors[colorCounter%colors.length];
set.css({backgroundColor:color, border:"thin solid #eee"});
// 12. set the border style of just the target of the event
e.target.style.border = "thin solid #333";
});
});
</script>
<meta name="viewport" content="width=device-width, user-scalable=no" />
</head>
<body>
<main>
<nav>
<a href="https://zimjs.com/bits.html#selector">
<img src="https://zimjs.com/images/zimbits.png"></a>
</nav>
<!-- 0. create the tags that we will use (see HTML beneath) -->
<div class="letter">C</div>
<div class="letter">O</div>
<div class="letter">O</div>
<div class="letter">K</div>
<div class="letter">I</div>
<div class="letter">E</div>
<div class="letter">S</div>
<div style="font-family:verdana; color:#555; size:30px; padding:10px;">PRESS LETTERS</div>
<div class="letter">S</div>
<div class="letter">E</div>
<div class="letter">L</div>
<div class="letter">E</div>
<div class="letter">C</div>
<div class="letter">T</div>
<div class="letter">O</div>
<div class="letter">R</div>
<div class="letter">S</div>
<br><br>
<footer>
<a href="https://zimjs.com/bits.html#selector">ZIM BITS</a>
<a href="https://zimjs.com/bits/selector.html">SEE CODE</a>
</footer>
</body>
</html>