Skip to content

Commit 0cf0345

Browse files
swati-gwcswati-gwc
committed
Two projects added
1 parent 67f9bf7 commit 0cf0345

6 files changed

Lines changed: 450 additions & 0 deletions

File tree

‎Analog Clock/index.html‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<html lang="en-US">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<title>A Digital Analog Clock</title>
8+
<link rel="stylesheet" href="style.css" type="text/css" media="all">
9+
<script src="script.js" defer></script>
10+
</head>
11+
12+
<body>
13+
<h1 class="heading">A Digital Analog Clock</h1>
14+
<main class="main">
15+
<div class="clockbox">
16+
<svg id="clock" xmlns="http://www.w3.org/2000/svg" width="600" height="600" viewBox="0 0 600 600">
17+
<g id="face">
18+
<circle class="circle" cx="300" cy="300" r="253.9"/>
19+
<path class="hour-marks" d="M300.5 94V61M506 300.5h32M300.5 506v33M94 300.5H60M411.3 107.8l7.9-13.8M493 190.2l13-7.4M492.1 411.4l16.5 9.5M411 492.3l8.9 15.3M189 492.3l-9.2 15.9M107.7 411L93 419.5M107.5 189.3l-17.1-9.9M188.1 108.2l-9-15.6"/>
20+
<circle class="mid-circle" cx="300" cy="300" r="16.2"/>
21+
</g>
22+
<g id="hour">
23+
<path class="hour-arm" d="M300.5 298V142"/>
24+
<circle class="sizing-box" cx="300" cy="300" r="253.9"/>
25+
</g>
26+
<g id="minute">
27+
<path class="minute-arm" d="M300.5 298V67"/>
28+
<circle class="sizing-box" cx="300" cy="300" r="253.9"/>
29+
</g>
30+
<g id="second">
31+
<path class="second-arm" d="M300.5 350V55"/>
32+
<circle class="sizing-box" cx="300" cy="300" r="253.9"/>
33+
</g>
34+
</svg>
35+
</div><!-- .clockbox -->
36+
</main>
37+
38+
</body>
39+
40+
</html>

‎Analog Clock/script.js‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
const HOURHAND = document.querySelector("#hour");
2+
const MINUTEHAND = document.querySelector("#minute");
3+
const SECONDHAND = document.querySelector("#second");
4+
5+
6+
function RunTheClock() {
7+
var date = new Date();
8+
9+
let hr = date.getHours();
10+
let min = date.getMinutes();
11+
let sec = date.getSeconds();
12+
13+
14+
let secPosition = sec*360/60;
15+
let minPosition = (min*360/60)+(sec*(360/60)/60);
16+
let hrPosition = (hr*360/12)+(min*(360/60)/12);
17+
18+
19+
HOURHAND.style.transform = "rotate(" +hrPosition+ "deg)";
20+
MINUTEHAND.style.transform = "rotate(" +minPosition+ "deg)";
21+
SECONDHAND.style.transform = "rotate(" +secPosition+ "deg)";
22+
}
23+
24+
var interval = setInterval(RunTheClock, 1000);

‎Analog Clock/style.css‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
/* Layout */
2+
*{
3+
background-color: cornsilk;
4+
}
5+
.heading{
6+
font-size : 60px;
7+
text-align: center;
8+
font-style: italic;
9+
}
10+
.main {
11+
display: flex;
12+
padding: 2em;
13+
height: 90vh;
14+
justify-content: center;
15+
align-items: middle;
16+
17+
}
18+
19+
.clockbox,
20+
#clock {
21+
width: 100%;
22+
}
23+
24+
25+
/* Clock styles */
26+
.circle {
27+
fill: rgb(189, 145, 160);
28+
stroke: #000;
29+
stroke-width: 9;
30+
stroke-miterlimit: 10;
31+
32+
}
33+
34+
.mid-circle {
35+
fill: #000;
36+
}
37+
.hour-marks {
38+
fill: none;
39+
stroke: #000;
40+
stroke-width: 9;
41+
stroke-miterlimit: 10;
42+
}
43+
44+
.hour-arm {
45+
fill: none;
46+
stroke: #000;
47+
stroke-width: 17;
48+
stroke-miterlimit: 10;
49+
}
50+
51+
.minute-arm {
52+
fill: none;
53+
stroke: #000;
54+
stroke-width: 11;
55+
stroke-miterlimit: 10;
56+
}
57+
58+
.second-arm {
59+
fill: none;
60+
stroke: #000;
61+
stroke-width: 4;
62+
stroke-miterlimit: 10;
63+
}
64+
65+
/* Transparent box ensuring arms center properly. */
66+
.sizing-box {
67+
fill: none;
68+
}
69+
70+
/* Make all arms rotate around the same center point. */
71+
/* Optional: Use transition for animation. */
72+
#hour,
73+
#minute,
74+
#second {
75+
transform-origin: 300px 300px;
76+
/* transition: transform .5s ease-in-out;*/
77+
}

‎Typing Test/index.html‎

Lines changed: 42 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,42 @@
1+
<!DOCTYPE html>
2+
<html lang="en-US">
3+
4+
<head>
5+
<meta charset="UTF-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
<title>JS Typing Speed Test</title>
8+
<script src="script.js" async></script>
9+
<link rel="stylesheet" href="//fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,700,700i,900,900i" type="text/css" media="all">
10+
<link rel="stylesheet" href="style.css">
11+
</head>
12+
13+
<body>
14+
<header class="masthead">
15+
<h1>Check Your Typing Speed</h1>
16+
</header>
17+
<main class="main">
18+
<article class="intro">
19+
<p>This is a typing test to check your speed and accuracy to type. Your goal is to duplicate the provided text, EXACTLY, in the field below. If you type anything wrong the borders will turn red and if you are going correct they will be blue. When you write the whole text correctly they will turn green. The timer starts when you start typing, and only stops when you match this text exactly. Good Luck!</p>
20+
</article><!-- .intro -->
21+
<section class="test-area">
22+
<div id="origin-text">
23+
<p>This is a test.</p>
24+
</div><!-- #origin-text -->
25+
26+
<div class="test-wrapper">
27+
<textarea id="test-area" name="textarea" rows="6" placeholder="The clock starts when you start typing."></textarea>
28+
</div><!-- .test-wrapper -->
29+
30+
<div class="meta">
31+
<section id="clock">
32+
<div class="timer">00:00:00</div>
33+
</section>
34+
35+
<button id="reset">Start over</button>
36+
</div><!-- .meta -->
37+
</section><!-- .test-area -->
38+
</main>
39+
40+
</body>
41+
42+
</html>

‎Typing Test/script.js‎

Lines changed: 79 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,79 @@
1+
const testWrapper = document.querySelector(".test-wrapper");
2+
const testArea = document.querySelector("#test-area");
3+
const originText = document.querySelector("#origin-text p").innerHTML;
4+
const resetButton = document.querySelector("#reset");
5+
const theTimer = document.querySelector(".timer");
6+
7+
var timer = [0,0,0,0];
8+
var interval;
9+
var timerRunning = false;
10+
11+
12+
// Add leading zero to numbers 9 or below (purely for aesthetics):
13+
function leadingZero(time){
14+
if(time <= 9){
15+
time = "0" +time;
16+
}
17+
return time;
18+
}
19+
20+
// Run a standard minute/second/hundredths timer:
21+
function runTimer(){
22+
let currentTime = leadingZero(timer[0]) +":" +leadingZero(timer[1])+":"+leadingZero(timer[2]);
23+
theTimer.innerHTML = currentTime;
24+
timer[3]++;
25+
26+
timer[0] = Math.floor((timer[3]/100)/60);
27+
timer[1] = Math.floor((timer[3]/100) - (timer[0]*60));
28+
timer[2] = Math.floor((timer[3]) - (timer[1]*100) - (timer[0]*6000));
29+
}
30+
31+
// Match the text entered with the provided text on the page:
32+
function spellCheck(){
33+
let textEntered = testArea.value;
34+
let originTextMatch = originText.substring(0, textEntered.length);
35+
36+
if(textEntered == originText){
37+
clearInterval(interval);
38+
testWrapper.style.borderColor = "#429890";
39+
40+
}else{
41+
if(textEntered == originTextMatch)
42+
{
43+
testWrapper.style.borderColor = "#65CCf3";
44+
}
45+
else{
46+
testWrapper.style.borderColor = "#E95D0F";
47+
}
48+
}
49+
50+
console.log(textEntered);
51+
}
52+
53+
// Start the timer:
54+
function start(){
55+
let textEnteredLength = testArea.value.length;
56+
if (textEnteredLength === 0 && !timerRunning){
57+
timerRunning = true;
58+
interval = setInterval(runTimer, 10);
59+
}
60+
console.log(textEnteredLength);
61+
}
62+
63+
// Reset everything:
64+
function reset(){
65+
clearInterval(interval);
66+
interval = null;
67+
timer = [0,0,0,0];
68+
timerRunning = false;
69+
70+
testArea.value ="";
71+
theTimer.innerHTML = "00:00:00";
72+
testWrapper.style.borderColor ="grey";
73+
}
74+
75+
76+
// Event listeners for keyboard input and the reset button:
77+
testArea.addEventListener("keypress",start,false);
78+
testArea.addEventListener("keyup",spellCheck,false);
79+
resetButton.addEventListener("click",reset,false);

0 commit comments

Comments
 (0)