Skip to content

Commit f72aad9

Browse files
tirtharajsinhatirtharajsinha
authored
Add files via upload
1 parent 773ea68 commit f72aad9

File tree

3 files changed

+155
-0
lines changed

3 files changed

+155
-0
lines changed

‎clock/index.html‎

Lines changed: 74 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,74 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<!-- Required meta tags -->
5+
<meta charset="utf-8">
6+
<meta name="viewport" content="width=device-width, initial-scale=1">
7+
8+
<!-- Bootstrap CSS -->
9+
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
10+
<link rel="stylesheet" href="style.css">
11+
<title>Hello, world!</title>
12+
</head>
13+
<body>
14+
<nav class="navbar navbar-expand-lg navbar-dark bg-dark"">
15+
<div class="container-fluid">
16+
<a class="navbar-brand" href="#">Navbar</a>
17+
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
18+
<span class="navbar-toggler-icon"></span>
19+
</button>
20+
<div class="collapse navbar-collapse" id="navbarSupportedContent">
21+
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
22+
<li class="nav-item">
23+
<a class="nav-link active" aria-current="page" href="#">Home</a>
24+
</li>
25+
<li class="nav-item">
26+
<a class="nav-link" href="#">Link</a>
27+
</li>
28+
<li class="nav-item dropdown">
29+
<a class="nav-link dropdown-toggle" href="#" id="navbarDropdown" role="button" data-bs-toggle="dropdown" aria-expanded="false">
30+
Dropdown
31+
</a>
32+
<ul class="dropdown-menu" aria-labelledby="navbarDropdown">
33+
<li><a class="dropdown-item" href="#">Action</a></li>
34+
<li><a class="dropdown-item" href="#">Another action</a></li>
35+
<li><hr class="dropdown-divider"></li>
36+
<li><a class="dropdown-item" href="#">Something else here</a></li>
37+
</ul>
38+
</li>
39+
<li class="nav-item">
40+
<a class="nav-link disabled" href="#" tabindex="-1" aria-disabled="true">Disabled</a>
41+
</li>
42+
</ul>
43+
<form class="d-flex">
44+
<input class="form-control me-2" type="search" placeholder="Search" aria-label="Search">
45+
<button class="btn btn-outline-success" type="submit" >Search</button>
46+
<div class="mybutton" onclick="theme()">change theme</div>
47+
</form>
48+
</div>
49+
</div>
50+
</nav>
51+
52+
53+
54+
<div class="container-fluid base">
55+
<div class="clock" id="clock">
56+
57+
</div>
58+
<div class="name">
59+
<p>Clock</p>
60+
</div>
61+
</div>
62+
<!-- Optional JavaScript; choose one of the two! -->
63+
64+
<!-- Option 1: Bootstrap Bundle with Popper -->
65+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.bundle.min.js" integrity="sha384-ygbV9kiqUc6oa4msXn9868pTtWMgiQaeYH7/t7LECLbyPA2x65Kgf80OJFdroafW" crossorigin="anonymous"></script>
66+
<script src="index.js"></script>
67+
<!-- Option 2: Separate Popper and Bootstrap JS -->
68+
<!--
69+
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.5.4/dist/umd/popper.min.js" integrity="sha384-q2kxQ16AaE6UbzuKqyBE9/u/KzioAlnx2maXQHiDX9d4/zp8Ok3f+M7DPm+Ib6IU" crossorigin="anonymous"></script>
70+
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.0-beta1/dist/js/bootstrap.min.js" integrity="sha384-pQQkAEnwaBkjpqZ8RU1fF1AKtTcHJwFl3pblpTlHXybJjHpMYo79HY3hIi4NKxyj" crossorigin="anonymous"></script>
71+
-->
72+
73+
</body>
74+
</html>

‎clock/index.js‎

Lines changed: 30 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,30 @@
1+
setInterval(() => {
2+
a=new Date();
3+
let date=a.toLocaleDateString();
4+
let time = a.getHours()+":"+a.getMinutes() +":" +a.getSeconds() + "<hr>" +date;
5+
document.getElementById("clock").innerHTML=time;
6+
}, 500);
7+
var dark=true;
8+
function theme(){
9+
if(dark==true){
10+
document.getElementsByTagName("body")[0].style.background="white";
11+
document.getElementById("clock").style.background="white";
12+
document.getElementById("clock").style.color="black";
13+
document.getElementsByClassName("name")[0].style.background="white";
14+
document.getElementsByClassName("name")[0].style.color="black";
15+
dark=false;
16+
17+
}
18+
else{
19+
document.getElementsByTagName("body")[0].style.background="black";
20+
document.getElementById("clock").style.background="black";
21+
document.getElementById("clock").style.color="white";
22+
document.getElementsByClassName("name")[0].style.background="black";
23+
document.getElementsByClassName("name")[0].style.color="white";
24+
dark=true;
25+
26+
}
27+
28+
29+
30+
}

‎clock/style.css‎

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
body{
2+
padding: 0px;
3+
margin: 0px;
4+
background-color:#000000;
5+
color:#fff;
6+
}
7+
8+
.base{
9+
margin-top:200px;
10+
11+
12+
padding:0;
13+
14+
width: 100%;
15+
}
16+
.clock{
17+
background-color:black;
18+
color:wheat;
19+
width:50%;
20+
height: 300px;
21+
margin:auto;
22+
border: 10px solid grey;
23+
border-radius: 20px;
24+
text-align: center;
25+
margin-bottom: 50px;
26+
font-size: 70px;
27+
font-weight: 500;
28+
font-family: Consolas;
29+
}
30+
.name{
31+
font-size: 70px;
32+
font-weight: 500;
33+
text-align: center;
34+
background-color:black;
35+
color:wheat;
36+
width:50%;
37+
height: 100px;
38+
margin-left:auto;
39+
margin-right: auto;
40+
border: 10px solid grey;
41+
border-radius: 20px;
42+
margin-top: 50px;
43+
padding-bottom: 10px;
44+
}
45+
.mybutton{
46+
color:white;
47+
background-color: black;
48+
border:2px solid white;
49+
border-radius: 5px;
50+
cursor: pointer;
51+
}

0 commit comments

Comments
 (0)