CodemySite_Web development

This is a typing speed test which will start timer when keypress the word and test whether the word you typing is same to the sample paragraph with border color changes. The demo includes three files:html css and js. html Link the css and js in the head. The main test part is test-area section which has origin-text,text-wrapper and meta for timer. css Test-wrapper display flex and the child textarea is 1 which means it will occupy the whole line. The meta contains a timer and a reset button, which should be in same line and be space-between. js1 The first step is selecting all the id from document and set default variables. js2 js3 When keypress happends,the function start begins. start(): if the textenterlength==0 which means you have press a word down and timerRunning is false, the runTimer begain every millisecond. runTime():timer[3] is millinsecond and plus every 1/100 second. timer[0  is minutes,timer[1] is second. timer[2] is hundre...

The anolog clock is combination of css3 and javascript with svg. html svg contains four parts: the face,hour,minute and second. Draw the clock with svg and stylish the stroke attributes. css The transform-origin fixed the center point which can be rotated around. The transition is a way to animate the arm smoothly. js Analysis: 1.Select three arms with querySelector. Or you can use document.getElementById("id name"). 2.Fetch the computer time with Date() and pick up hour,minute and second seperately. 3.Math the degree when each arm move in each time. secPosition: one circle is 360 deg and 60 seconds for a circle.So each second is 6 deg. minPosition: the same as sec and when second is moving, the min arm should be moving 1/60 of a min. hrPosition:one circle is 360 deg and contains 12 hours. And when minute is moving, the hour arm should be moving the 1/12 of a hour. 4.After calculating the degree of each arm, the selectors should be rotated own degr...