oNora / JS-projects

This is a collection of JS tasks, that I created just for fun while trying new things.

JS projects

This is a collection of JS tasks, that I created just for fun or while trying new things.

1. carousel-slider-ajax

Simple demo of carousel banner and loading content with ajax.

####2. cascade_banner Simple demo of cascade banner create with HTML and Jquery.

3. draggable_elements_with_color_picker

Short task that shows how to create draggable elements with color picker.
View demo

Basic requirements:

1. Create a toolbar with two buttons. After clicking the first button element Button is created and after clicking the second button element Text is created. The two types of element represent div with text and some background.
2. Create unlimited elements of both types by clicking on the toolbar buttons.
3. Color picker is visualized by double clicking on each created element and you can change background color of each created element. The color 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.
4. All elements are draggable: toolbar, created elements and color picker.

4. dynamic-page-vanilla-js

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

5. form_with_validation

Examples of forms with validations and HTML5 FileReader API (more details)

6. gulp-config

Simple gulp configuration with basic task for developing web app.

7. js-snippets

Basics of JavaScript and Jquery (more details)

8. portfolio-page

Demo portfolio page for a company or a project
Demo link here

9. reusableMenu

Example for creating elements with different options and those elements can be reusable.
Unit Testing with Mocha and Chai.
View demo