Have you ever played to Simon? That game where you have to memorize an incremental sequence of colors. Today I’m bring to you this famous game in ES6 using CSS transformations and animations. Open it in a new browser window or tab and stretch or shrink the area to see how the game is always visible, there are not scroll bar at all, pure responsiveness, enjoy the play 🙂
Code once, run everywhere: Simon Game in Google Play
Use it every time to can but I would recommend you to avoid ‘this’ as much as possible in your code because depending on the context it will represent different things.
Create a tab bar with swipe/pan interactions like the one of Google search options that you can see when you are using your smart phone. You just need pan events and a little of CSS. I have used MDL for the basic mockup and Hammer for pan gesture. Try to drag the tabs 😉
In the next example we are going to create a database (to save people parameters for example), insert and replace element, delete a table, and show data from database itself.
You can add new people data using the inputs and pressing “Save in database”, if the inputs have a red border it means you need to fill in before saving.
In the first example we are going to define the area of a circle depending on where we click within a box area. We can handle this using JavaScript events, a little bit of basic maths and CSS.
In the second example we are going to define the area using Hammer.js which helps us to add support for touch and muti-touch gestures. In this case you can pinch in and pinch out with your fingers to define the area (you can use an horizontal pan as well) and you can do a vertical pan movement with your finger to change the saturation of the circle.
If you are in a multi-touch device you can pinch and pan with your fingers, if not use horizontal and vertical pan with your mouse. The events will be catched inside and outside of the black box.