Add files via upload

2023-03-29 02:33:41 +03:00 · 2023-03-29 02:33:41 +03:00 · b5f76ecf18
commit b5f76ecf18
parent 3bc8f15e00
4 changed files with 79 additions and 0 deletions
--- a/100_projects/36-create-simple-clock/css.css
+++ b/100_projects/36-create-simple-clock/css.css
@ -0,0 +1,41 @@
+*{
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+body{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background-image: url(night.jpg);
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-position: center;
+}
+#clock{
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size:51px;
+    padding: 10px;
+    color: #fff;
+    width: 270px;
+    height: 150px;
+    background: rgba(255, 255, 255, .1);
+    border: 1px solid rgba(255, 255, 255, .1);
+    backdrop-filter: blur(5px);
+    box-shadow: 
+    5px 5px 2px rgba(255, 255, 255, .1),
+    -5px -5px 2px rgba(255, 255, 255, .1);
+    border-radius: 10px;
+    animation: up-down 7s linear infinite;
+}
+@keyframes up-down{
+    0%, 100%{
+        transform: translateY(0) scale(1);
+    }
+    50%{
+        transform: translateY(-50px) scale(1.3);
+    }
+}
--- a/100_projects/36-create-simple-clock/index.html
+++ b/100_projects/36-create-simple-clock/index.html
@ -0,0 +1,15 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="css.css">
+</head>
+<body>
+    <div id="clock"></div>
+    <script src="main.js"></script>
+</body>
+</html>
+
--- a/100_projects/36-create-simple-clock/main.js
+++ b/100_projects/36-create-simple-clock/main.js
@ -0,0 +1,23 @@
+function showTime() {
+    'use strict';
+
+    var now = new Date(),
+    hours = now.getHours(),
+    minutes = now.getMinutes(),
+    seconds = now.getSeconds();
+
+    if (hours < 10){
+        hours = '0' + hours;
+    }
+    if (minutes < 10){
+        minutes = '0' + minutes;
+    }
+    if (seconds < 10){
+        seconds = '0' + seconds;
+    }
+    document.getElementById('clock').textContent = hours + ':' + minutes + ':' + seconds;
+};
+window.onload = function(){
+    'use strict';
+    setInterval(showTime, 500);
+}; 
--- a/100_projects/36-create-simple-clock/night.jpg
+++ b/100_projects/36-create-simple-clock/night.jpg