opsingh861 · opsingh861 · commit e668ca4f6679 · 2023-07-11T12:02:30.000+05:30
diff --git a/index.html b/index.html
@@ -7,13 +7,66 @@
     <!-- add js file -->
     <!-- <script src="./ArrayMethods.js"></script> -->
     <!-- <script src="./WebApi.js"></script> -->
-    <script src="promises.js"></script>
-    <script src="./index.js"></script>
+    <!-- <script src="promises.js"></script> -->
+    <!-- <script src="./index.js"></script> -->
+    <!-- <script defer src="./Dom.js"></script> -->
+    <script defer src="./AsyncAndAwait.js"></script>
     <title>Document</title>
+    <style>
+        div.clock {
+            width: 150px;
+            height: 150px;
+            border: 2px solid crimson;
+            border-radius: 50%;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            position: relative;
+            transform: rotate(-90deg);
+        }
+
+        div.second {
+            transition: 0.2s ease-out;
+        }
+
+        div.second::after{
+            content: "";
+            width: 75px;
+            height: 4px;
+            background-color: yellow;
+            position: absolute;
+            border-end-end-radius: 10px;
+        }
+        div.minute{
+            transition: 0.2s ease-out;
+        }
+        div.minute::after{
+            content: "";
+            width: 75px;
+            height: 4px;
+            background-color: black;
+            position: absolute;
+            border-end-end-radius: 10px;
+        }
+        div.cover{
+            width: 15px;
+            height: 15px;
+            background-color: black;
+            border-radius: 50%;
+            position: absolute;
+            z-index: 1000;
+        }
+    </style>
 </head>
 
 <body>
-
+    <h1 id="timer">0</h1>
+    <div class="clock">
+        <div class="cover"></div>
+        <div class="second"></div>
+        <div class="minute"></div>
+    </div>
+    <ul></ul>
 </body>
 
 </html>
diff --git a/promises.js b/promises.js
@@ -84,10 +84,10 @@
 
 const response = fetch('http://jsonplaceholder.typicode.com/users') //fetch returns promise
 
-response.then((dataStream)=>{  // showing the promise
+response.then((dataStream) => {  // showing the promise
     console.log(dataStream)
     const jsonData = dataStream.json() // again it is returning promise with data as array
-    jsonData.then((data)=>{
+    jsonData.then((data) => {
         console.log(data)
     })
 
@@ -97,4 +97,11 @@ response.then((dataStream)=>{  // showing the promise
 //     console.log(error) 
 // })
 
+// we can also reduce it further to
+
+response
+    .then(dataStream => dataStream.json) // first fetch is returning us a promise then we (.json) function will conver it into json and return it as promise
+    .then(jsonData => console.log(jsonData)) // previous promise is stored in jsondata and we consoling it
+    .catch(error => console.log(error))
+
 
