CodemySite_Web development

  This plugin is based on Javascript, it can be easily manipulated with html5 attributes. Official site Step1: link 4 libraries <link href=” https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css ” rel=”stylesheet”> <link href=” https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-star-rating@4.0.7/css/star-rating.css ” rel=”stylesheet”> <script src=” https://code.jquery.com/jquery-3.5.1.min.js ”></script> <script src=” https://cdn.jsdelivr.net/gh/kartik-v/bootstrap-star-rating@4.0.7/js/star-rating.js ”></script> Step2: HTML rating section is an input tag, the default value is 4.3. rating-loading is a spinner when the starts do not show. Step3: js simply select the input DOM, and fire it up with  .rating() The basic options :(I think useful) min, max : the minimum and maximum of the stars rating number. step : changing step period stars : the star number shows showCaptions : if want to hide the captions, set them to false starCaptio...

This is the demo of CSS3 animation effects when hovering the inages with Bootstraps and FontAwesome. Github here Step1: link bootstrap and fontawesome stylesheet Step2: Html According to Bootstrap grid layout,such as col-md-x, it's easy to bulid a responsive site. I got four images and description content here within the box. <i> icons are from fontawesome library. Step3: css When hovering the box,there is a black shadow outside of box. More syntax about box-shadow: /* offset-x | offset-y | color */ box-shadow : 60 px - 16 px teal ; /* offset-x | offset-y | blur-radius | color */ box-shadow : 10 px 5 px 5 px black ; /* offset-x | offset-y | blur-radius | spread-radius | color */ box-shadow : 2 px 2 px 2 px 1 px rgba ( 0 , 0 , 0 , 0.2 ) ; /* inset | offset-x | offset-y | color */ box-shadow : inset 5 em 1 em gold ; /* Any number of shadows, separated by commas */ box-shadow : 3 px 3 px red, - 1 em 0 0.4 em olive ; /* Global keywo...

This is an example of web speech API application which mixed with Javascript. I learned this tutorial from Traversy Media Youtube. click here And my GitHub code here Step1: the layout of this site is based on Bootstrap4 bootstrap css bootstrap script Copy the link from bootstrap website. Step2: HTML html There are four form-groups inside of content.  layout Step3: JS initial DOM According to what is typing in the textarea and then select the option lang name, it trigger the web speech API. And also the pitch and rate are changable within the range.

Bootstable.js is a javascript library of editable table for adding and deleting information lines. github here  Step1: Link bootstrap css and js Link jquery and bootstable.js head body bottom Step2: HTML html Give table a id name which will be selected in script. A button can recall the new line. Step3: JS js It basically initializes the plugin which can only do with one table,and for multiple tables should be SetEdible() one by one. The Parameters: $( '#mytable' ).SetEditable({      columnsEd: null ,         //Index to editable columns. If null all td editables. Ex.: "1,2,3,4,5"      $addButton: null ,        //Jquery object of "Add" button      onEdit: function () {},   //Called after edition      onBeforeDelete: function () {}, //Called before deletion   ...

This plugin is a lightweight pop up with javascript. github here I test all the usual applications here and found out it's very easy to use and looks good if you combine with bootstrp. Demo😜 Step1: link spop.css and spop.js also link bootstrp for more easy and fancy button styles. also link jquery for click events which is handy. in head in body Step2: html html With buttons and id individual, it's easy to select in the script.And with bootstrap class name for buttons, they show fancy here. CSS a little stylish for test position. css Step3: js js Four types of basic call functions.  Default success warning error js group It's same for spop call of each. js callback When the pop opens, the button appends the word"lol" for one click. When the pop closes, another pop shows success messages and close automatically. js event Call the close event with data-spop="close". Options : Templete:...