This is a collection of JS tasks, that I created just for fun or while trying new things.
Simple demo of carousel banner and loading content with ajax.
####2. cascade_banner
Simple demo of cascade banner create with HTML and Jquery.
Short task that shows how to create draggable elements with color picker.
View demo
Basic requirements:
- Create a
toolbar
with two buttons. After clicking the first button elementButton
is created and after clicking the second button elementText
is created. The two types of element representdiv
with text and some background. - Create unlimited elements of both types by clicking on the toolbar buttons.
Color picker
is visualized by double clicking on each created element and you can change background color of each created element. Thecolor picker
is the same for each created element. It gets the current color of the elements and after choosing new one set it to the element.- All elements are draggable:
toolbar
,created elements
andcolor picker
.
a) Page overals
- Liquid layout
- max content wrapper width: 1280px, min widht: 800
- right column width: 30% of content wrapper
- left column and right column padding 10px
b) Dynamics
- main navigation, drop down menu based on JS
- right column dynamic boxes:
- click to open, click to close
- two boxes must not be open in the same time
- JSON object to draw a table
c) Cross-browser
- IE8, 9
- FF
- Chrome
View demo
Examples of forms with validations and HTML5 FileReader API (more details)
Simple gulp configuration with basic task for developing web app.
Basics of JavaScript and Jquery (more details)
Demo portfolio page for a company or a project
Demo link here
Example for creating elements with different options and those elements can be reusable.
Unit Testing with Mocha and Chai.
View demo