added click and drag

Shreekant-04 · Shreekant-04 · commit 2b12810aa53f · 2024-06-16T21:46:10.000+05:30
diff --git a/ClickAndDrag/app.js b/ClickAndDrag/app.js
@@ -11,31 +11,27 @@ for (let i = 1; i <= 31; i++) {
     `;
   slider.appendChild(div);
 }
-document.querySelector("body").addEventListener("mousedown", (e) => {
-  e.preventDefault();
-});
 
 slider.addEventListener("mousedown", (e) => {
-  e.preventDefault();
-
   isDown = true;
+  slider.style.cursor = "grabbing";
   startX = e.pageX - slider.offsetLeft;
   scrollLeft = slider.scrollLeft;
-  slider.style.cursor = "grabbing";
-  slider.addEventListener("mousemove", (e) => {
-    if (!isDown) return; // stop the fn from running
-    e.preventDefault();
-    const x = e.pageX - slider.offsetLeft;
-    const walk = x - startX;
-    slider.scrollLeft = scrollLeft - walk / 2;
-  });
 });
-slider.addEventListener("mouseup", (e) => {
-  e.preventDefault();
-  slider.style.cursor = "pointer";
+
+slider.addEventListener("mouseleave", () => {
+  isDown = false;
+});
+
+slider.addEventListener("mouseup", () => {
   isDown = false;
+  slider.style.cursor = "pointer";
 });
 
-document.querySelector(".slide").addEventListener("click", (e) => {
+slider.addEventListener("mousemove", (e) => {
+  if (!isDown) return; // stop the fn from running
   e.preventDefault();
+  const x = e.pageX - slider.offsetLeft;
+  const walk = x - startX;
+  slider.scrollLeft = scrollLeft - walk;
 });
diff --git a/ClickAndDrag/index.html b/ClickAndDrag/index.html
@@ -4,13 +4,12 @@
     <meta charset="UTF-8" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Click And Drag</title>
+    <link rel="shortcut icon" href="/time-management.ico" type="image/x-icon" />
+
     <link rel="stylesheet" href="style.css" />
   </head>
   <body>
-    <div class="container">
-       
-    </div>
+    <div class="container"></div>
     <script src="app.js"></script>
   </body>
 </html>
-
diff --git a/ClickAndDrag/style.css b/ClickAndDrag/style.css
@@ -2,15 +2,18 @@
   margin: 0;
   padding: 0;
   box-sizing: border-box;
+  user-select: none;
+  scrollbar-width: none;
 }
 body {
   height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
+  background-color: #000;
 }
 .container {
-  width: 98%;
+  width: 100%;
   height: 80%;
   display: flex;
   flex-wrap: wrap;
@@ -19,13 +22,12 @@ body {
   justify-content: center;
   align-items: center;
   gap: 3%;
-  border: 2px solid black;
   transition: 0.3s;
   cursor: pointer;
 }
-/* .container:nth-child(1) {
+.container:nth-child(1) {
   padding-left: 30%;
-} */
+}
 
 .slide {
   height: 50%;
@@ -38,4 +40,5 @@ body {
 }
 .slide:hover {
   transform: scale(1.2);
+  box-shadow: 0 0 5px white;
 }
diff --git a/README.md b/README.md
@@ -138,9 +138,15 @@
           <td><a href="Currency calculator">Currency calculator</a></td>
           <td><a href="https://glistening-cajeta-a6b4ef.netlify.app/Currency calculator/">Link</a></td>
         </tr>
+        <tr>
          <td>26</td>
           <td><a href="slideinscroll">slidein on scroll</a></td>
           <td><a href="https://glistening-cajeta-a6b4ef.netlify.app/slideinscroll/">Link</a></td>
         </tr>
+        <tr>
+         <td>27</td>
+          <td><a href="ClickAndDrag">Click And Drag</a></td>
+          <td><a href="https://glistening-cajeta-a6b4ef.netlify.app/ClickAndDrag/">Link</a></td>
+        </tr>
       </tbody>
     </table>
diff --git a/index.html b/index.html
@@ -202,6 +202,13 @@
             <a href="./slideinscroll/index.html" target="_blank">Link</a>
           </td>
         </tr>
+        <tr>
+          <td>27</td>
+          <td>Click And Drag</td>
+          <td>
+            <a href="./ClickAndDrag/index.html" target="_blank">Link</a>
+          </td>
+        </tr>
       </tbody>
     </table>
   </body>
