CodemySite_Web development

  Features: current status of active tool brush color and size,background color  erase and reset set , get and delete localStorage save the canvas image Code Github Demo HTML active tool is the status of current tool the brush color is based on jscolor  ,which can be custom the brush size is the slider from 1 to 50 bucket color is the background color of canvas eraser is the background color brush  clear canvas is to empty canvas manipulate the localStorage download the canvas to local if screen size is too small, the message show up link jscolor.js and script.js CSS custom the brush size slider color box styles. responsive screen message JAVASCRIPT select all the DOM Build canvas and init the variables click the brush icon to run switchToBrush function the icon turn black which means active and the values from html initially. And run displayBrushSize function Make the brush size two digital number .Add zero if single number when change brush color,current brush value is changed when c

  Features: resources with css from Figma change background with Javascript Code Github Demo HTML logo exported from figma toggles at the right top of page with onclick event text container includes title and paragraph,two buttons with links. all the images exported from figma CSS google fonts imported  all the css data from figma css toggles buttons display at the right top aligned three background styles with patterns and gradients. JAVASCRIPT changeBackground() pass the style number.  If the style button is been clicked,the current background class changes.Then if click the button with same class name, the boolean should be false,which means back to original white background. Otherwise, the current background class should change accordingn to number.

  Features: calculator basic function and quick tips outcomes custom scrollbar grid css Code Github Demo HTML calculator contains two sections: display at the top and all the buttons at the bottom. And all the buttons will be grid display. CSS gradient background from uiGradient . all items in the center calculator display top align to right side overflow-x set to auto when the display content longer than the width of calculator.  custom scrollbar from W3C All the buttons display grid and repeat column 4. And pseudo class for different status set color and background for different function buttons. And special equal sign grid setting responsive screen css for big screen phone JAVASCRIPT select all the DOM and init the variables addEventListener for different class buttons. When click numbers,function sendNumberValue When click operators,function useOperator When click decimal,function addDecimal if type the first value,add the textContent to display  if not,means now is the second valu