Skip to content

Commit 8c247e2

Browse files
asaribaturasaribatur
committed
The homework has finished
0 parents  commit 8c247e2

File tree

5 files changed

+138
-0
lines changed

5 files changed

+138
-0
lines changed

‎LICENSE

+21
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,21 @@
1+
MIT License
2+
3+
Copyright (c) 2022 Abdullah SARIBATUR
4+
5+
Permission is hereby granted, free of charge, to any person obtaining a copy
6+
of this software and associated documentation files (the "Software"), to deal
7+
in the Software without restriction, including without limitation the rights
8+
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9+
copies of the Software, and to permit persons to whom the Software is
10+
furnished to do so, subject to the following conditions:
11+
12+
The above copyright notice and this permission notice shall be included in all
13+
copies or substantial portions of the Software.
14+
15+
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16+
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17+
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18+
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19+
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20+
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21+
SOFTWARE.

‎README.md

+2
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,2 @@
1+
# JavaScript Live Clock
2+
A Simple digital clock made using JS.

‎css/style.css

+37
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,37 @@
1+
body {
2+
background: black;
3+
}
4+
5+
.clock {
6+
position: relative;
7+
text-align: center;
8+
color: #e98208;
9+
font-size: 60px;
10+
font-family: "Orbitron", sans-serif;
11+
letter-spacing: 7px;
12+
}
13+
14+
.text1 {
15+
position: relative;
16+
text-align: center;
17+
color: #e98208;
18+
font-size: 50px;
19+
font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
20+
letter-spacing: 7px;
21+
}
22+
23+
.text2 {
24+
position: relative;
25+
text-align: center;
26+
color: #e98208;
27+
font-size: 40px;
28+
font-family: Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
29+
letter-spacing: 7px;
30+
margin-right: 100px;
31+
margin-left: 100px;
32+
}
33+
34+
img {
35+
margin-top: 120px;
36+
width: 17%;
37+
}

‎index.html

+43
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,43 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<link rel="stylesheet" href="css/style.css" />
8+
<link
9+
rel="stylesheet"
10+
href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
11+
integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
12+
crossorigin="anonymous"
13+
/>
14+
<!--Google font (Orbitron) for digital clock-->
15+
<link rel="preconnect" href="https://fonts.googleapis.com" />
16+
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
17+
<link
18+
href="https://fonts.googleapis.com/css2?family=Orbitron&display=swap"
19+
rel="stylesheet"
20+
/>
21+
22+
<title>Kodluyoruz Javascript Saat Ödevi</title>
23+
</head>
24+
<body class="bg-dark">
25+
<div class="text-center">
26+
<img
27+
src="https://cdn.sanity.io/images/9kdepi1d/production/65c832d202a503b15d99e628f4313782f3ef50db-300x62.png"
28+
alt=""
29+
class="rounded"
30+
/>
31+
<div class="text1 text-center">
32+
Merhaba, <strong><span id="myName"></span></strong>! Hoş geldin!
33+
</div>
34+
<div id="myClock" class="clock" onload="showTime()"></div>
35+
<div class="text2 text-center">
36+
tarihinde
37+
<strong>Kodluyoruz Frontend Web Development Patikası</strong>'nın
38+
Javascript bölümü 1. Ödevindesiniz.
39+
</div>
40+
</div>
41+
<script src="js/clock.js"></script>
42+
</body>
43+
</html>

‎js/clock.js

+35
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,35 @@
1+
let uName = prompt("Adınızı lutfeder misiniz?");
2+
document.querySelector("#myName").innerHTML = `${uName}`;
3+
4+
let timeDiv = document.getElementById("myClock");
5+
function showTime() {
6+
const weekday = [
7+
"Pazar",
8+
"Pazartesi",
9+
"Salı",
10+
"Çarşamba",
11+
"Perşembe",
12+
"Cuma",
13+
"Cumartesi",
14+
];
15+
// We create a new Date object and assign it to a variable called "time".
16+
var time = new Date(),
17+
// Access the "getHours" method on the Date object with the dot accessor.
18+
hours = time.getHours(),
19+
// Access the "getMinutes" method with the dot accessor.
20+
minutes = time.getMinutes(),
21+
seconds = time.getSeconds(),
22+
day = weekday[time.getDay()];
23+
24+
timeDiv.innerHTML = `
25+
${harold(hours)}:${harold(minutes)}:${harold(seconds)} ${day}
26+
`;
27+
28+
function harold(standIn) {
29+
if (standIn < 10) {
30+
standIn = "0" + standIn;
31+
}
32+
return standIn;
33+
}
34+
}
35+
setInterval(showTime, 1000);

0 commit comments

Comments
 (0)