CodemySite_Web development

Recently I am reviewing the Javascript with the course called The complete Javascript Course 2019:build real project from udemy. Online demo Keep up following the basic knowledge and projects from it. The final solution is the Pig game with two dices and two players. The rules: HTML: Two players panel with scores and current score. Three buttons for resetting the game,rolling the dices and holding the current players' score/ At the bottom is the Final scores for winners' reach point.Normally the rules' final score is 100. CSS: The backgound color and the dot are changing when switching the player,because of the classname active added. Set up the position of two dices and the bottom final-score style. Javascript: Initial the original setting in function init() The scores and current score are both "0".And the dices don't display at first place. If there is a winner last round,basically clear all the old records.

Splitting is a JavaScript microlibrary with a collection of small  built-in plugins  designed to split (section off) an element in a variety of ways, such as  words ,  characters ,  child nodes , and  more ! In this demo,I tried with default characters and image cells plugins.  Splliting official Github   and more documents here Step1: link cdn in the head(that's the easiest way or you can install with npm) Step2: html  the target you want split add the attribute "data-splitting". Splitting will automatically add a  splitting  class to the targetted element after it's been run. Each  plugin  will add their own classes to splits/parent as needed (  char  for  chars ,  word  for  words , etc. ) "data-row" and "data-colums" are attributes of grid setting. Step3: css animation parts After splitting the text, each character named char animates with delay. Step4:   Js  Basically apply the splliting.js with Splittin

Official website   Github Install  With Git clone direct to the location your project is and clone in the file Then there will be a file named ikonate If you'd like to customize the icon border ,size,style and color. Check the content in the website and export the icon you need. Also a dark version icon's choice. After exporting the zip file, unzip for three files which are three ways to apply. Here I tried all of them: There are three ways to import this plugin.  1. With <img> Link the svg to the image.Customize the size with css 2.With inline svg Copy the svg from the file named inline . 3.With svg sprite external Link the spritesheet with <use> And don't forget to style svg with css for 2nd and 3rd method: The demo code resources Download