diff --git a/app.js b/app.js index e69de29..150ab39 100644 --- a/app.js +++ b/app.js @@ -0,0 +1,29 @@ +var days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]; +var setTime = setInterval(showtime, 1000); + + +function showtime() +{ + var today = new Date(); + var hours = today.getHours(); + var minutes = today.getMinutes(); + var day = today.getDay(); + + + if(hours<10) + { + hours= `0${hours}`; + } + + if(minutes<10) + { + minutes=`0${minutes}`; + + } + + topt.innerHTML=hours+":"+ minutes; + middle.innerHTML= hours+":"+minutes; + daydis.innerHTML= days[day]; +} + + setInterval(time,1000); \ No newline at end of file diff --git a/images/chat.PNG b/images/chat.PNG new file mode 100644 index 0000000..ee483e0 Binary files /dev/null and b/images/chat.PNG differ diff --git a/images/music.PNG b/images/music.PNG new file mode 100644 index 0000000..42ec89d Binary files /dev/null and b/images/music.PNG differ diff --git a/images/time.PNG b/images/time.PNG new file mode 100644 index 0000000..a89951e Binary files /dev/null and b/images/time.PNG differ diff --git a/index.html b/index.html new file mode 100644 index 0000000..43fab77 --- /dev/null +++ b/index.html @@ -0,0 +1,34 @@ + + + + + + + SmartWatch + + + +
+
+
+

SmartWatch

+
+
+
+
+

+
+

+

+
+
+ + + +
+
+
+
+ + + \ No newline at end of file diff --git a/style.css b/style.css index e69de29..615a663 100644 --- a/style.css +++ b/style.css @@ -0,0 +1,88 @@ +*{ + margin: 0; + padding: 0; + box-sizing: border-box; +} +html,body{ + background: black; + height: 100%; + width: 100%; +} +.container{ + display: flex; + margin-top: 20px; + height: 100%; +} +.left{ + width: 50%; + background-color:rgb(43, 46, 56); + margin-bottom: 10px; + } + .right{ + width: 50%; + background-color: white; + margin-bottom: 10px; + } + .text{ + position: relative; + font-size:400%; + font-weight: normal; + color: white; + top: 285px; + left: 150px; + font-family: 'Times New Roman', Times, serif; + } + + .clock{ + height: 350px; + width: 250px; + top: 140px; + left: 230px; + background: black; + border-radius: 13%; + border-top: 25px solid grey; + border-bottom: 25px solid grey; + color: white; + position: relative; + display: flex; + flex-direction: column; + + } + .clock h3{ + text-align: center; + margin-top: 15px; + } + .center{ + text-align: center; + position: relative; + top: 10%; + font-family: 'Times New Roman', Times, serif; + } + .center h1{ + font-size:550%; + } + #daydis{ + font-size: 100%; + } + img{ + position: relative; + display: flex; + height: 30px; + } + + #img1{ + margin-left: 60%; +} +#img2{ + margin-left: 200%; +} +#img3{ + margin-left: 350%; +} +button{ + background-color: transparent; + justify-content: space-around; + margin-top: 35%; + border: none; + } +