Merge branch 'main' into feature

Ayushparikh-code · Sep 17, 2024 · 5b2d797 · 5b2d797
2 parents 7bdaba9 + d1752f7
commit 5b2d797
Show file tree

Hide file tree

Showing 254 changed files with 59,445 additions and 819 deletions.
diff --git a/.DS_Store b/.DS_Store
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -1,3 +1,3 @@
 {
-    "liveServer.settings.port": 5501
+    "liveServer.settings.port": 5502
 }
diff --git a/2048 Game/README.md b/2048 Game/README.md
@@ -21,3 +21,6 @@ I coded this game by following the tutorial from [Code with Ania Kubów](https:/
 # Screenshot
 
 ![screenshot](https://github.com/Gyynnn/Web-dev-mini-projects/blob/2048game/2048%20Game/screenshot.PNG)
+
+# For Further 
+This game is there in the playstore fdo checkout (https://github.com/Ayushparikh-code/Web-dev-mini-projects)
diff --git a/AI Quote Generator/index.html b/AI Quote Generator/index.html
@@ -0,0 +1,21 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Quotes Generator</title>
+    <link rel="stylesheet" href="styles.css">
+</head>
+<body>
+    <header>
+        <h1>AI Quotes Generator</h1>
+    </header>
+    <div class="container">
+        <div id="quoteContainer">
+            <p id="quoteText"></p>
+        </div>
+        <button id="getQuoteBtn" style="background-color: 3498db;">Get Quote</button>
+    </div>
+    <script src="script.js"></script>
+</body>
+</html>
diff --git a/AI Quote Generator/script.js b/AI Quote Generator/script.js
@@ -0,0 +1,28 @@
+const getQuoteBtn = document.getElementById("getQuoteBtn");
+const quoteText = document.getElementById("quoteText");
+
+getQuoteBtn.addEventListener("click", () => {
+    getQuoteBtn.classList.add("loading");
+    getQuoteBtn.textContent = "Loading...";
+    getQuote();
+});
+
+// Initially, remove loading state
+getQuoteBtn.classList.remove("loading");
+getQuoteBtn.textContent = "Get Quote";
+
+function getQuote() {
+    fetch("https://api.quotable.io/random")
+        .then((response) => response.json())
+        .then((data) => {
+            quoteText.innerHTML = `"${data.content}" - ${data.author}`;
+            getQuoteBtn.classList.remove("loading");
+            getQuoteBtn.textContent = "Get Quote";
+        })
+        .catch((error) => {
+            console.error("Error fetching quote:", error);
+            quoteText.innerHTML = "Failed to fetch a quote. Please try again later.";
+            getQuoteBtn.classList.remove("loading");
+            getQuoteBtn.textContent = "Get Quote";
+        });
+}
diff --git a/AI Quote Generator/styles.css b/AI Quote Generator/styles.css
@@ -0,0 +1,56 @@
+body {
+    font-family: Arial, sans-serif;
+    background-color: #3498db;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: flex-start; /* Adjusted to align header at the top */
+    height: 100vh;
+}
+
+header {
+    background-color: #2c3e50;
+    color: #ecf0f1;
+    text-align: center;
+    padding: 10px;
+    width: 100%;
+}
+
+.container {
+    text-align: center;
+    background-color: #fff;
+    padding: 20px;
+    margin-left: 2%;
+    margin-right: 2%;
+    border-radius: 5px;
+    box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
+}
+
+button {
+    padding: 10px 20px;
+    font-size: 18px;
+    cursor: pointer; /* Set default cursor to pointer */
+    background-color: #3498db; /* Default background color */
+    color: #fff;
+    border: none;
+    border-radius: 5px;
+    transition: background-color 0.3s, transform 0.3s, filter 0.3s;
+}
+
+button.loading {
+    background-color: #ddd;
+    cursor: not-allowed;
+}
+
+button:hover {
+    background-color: #2980b9;
+    transform: scale(1.05); /* Zoom in effect on hover */
+    filter: brightness(0.9); /* Darken the button on hover */
+}
+
+#quoteContainer {
+    margin-top: 20px;
+    font-size: 20px;
+}
diff --git a/Age Calculator/index.html b/Age Calculator/index.html
@@ -10,7 +10,7 @@
 <body>
     <div class="container">
         <p id="currDate"> </p>
-        <p>Enter the DOB in format : (MM/DD/YYYY)</p>
+        <p>Enter the DOB badri in format : (MM/DD/YYYY)</p>
         <input type="text" placeholder="Enter your D.O.B" id="DOB">
         <button id="CalcAge">Age</button>
     </div>
@@ -20,4 +20,4 @@
     <script src="script.js">
     </script>
 </body>
-</html>
+</html>
diff --git a/Amazon-Prime-Login-Page-Clone/index.html b/Amazon-Prime-Login-Page-Clone/index.html
@@ -5,7 +5,7 @@
     <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>Welcome to Prime Video</title>
+    <title>Welcome to Prime Videos</title>
     <link rel="stylesheet" href="index.css">
     <script src="https://code.iconify.design/1/1.0.7/iconify.min.js"></script>
 </head>

diff --git a/Animated Car/1 b/Animated Car/1
@@ -0,0 +1 @@
+kmgkrsgmkfdsmkgmnrd
diff --git a/Animated-rainbow/README.md b/Animated-rainbow/README.md
@@ -0,0 +1,28 @@
+### Animated-Rainbow
+
+It's a simple animated Rainbow without using Javascript..
+
+
+### Used Technologies
+  * HTML5
+  * CSS3
+
+
+
+#### Steps to Use:
+
+---
+
+- Download or clone the repository
+
+```
+git clone https://github.com/VaibhavSuryavanshi93/Web-dev-mini-projects.git
+```
+
+- Go to the directory
+- Run the Rainbow.html file
+
+
+## Screenshots 
+![Rainbow](rainbow.png)
+![Default View](rainbow.png)
diff --git a/Animated-rainbow/index.html b/Animated-rainbow/index.html
@@ -0,0 +1,23 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>Document</title>
+  <link rel="stylesheet" href="rainbow.css">
+</head>
+<body>
+  <div class="center">
+    <ul>
+      <li class="one"></li>
+      <li class="two"></li>
+      <li class="three"></li>
+      <li class="four"></li>
+      <li class="five"></li>
+      <li class="six"></li>
+      <li class="seven"></li>
+    </ul>
+  </div>
+</body>
+</html>
diff --git a/Animated-rainbow/rainbow.css b/Animated-rainbow/rainbow.css
@@ -0,0 +1,109 @@
+body{
+    margin: 0;
+    padding: 0;
+    background-color: black;
+  }
+
+  .center{
+    position: absolute;
+    top: 40%;
+    left: 50%;
+    transform: translate(-50%,-50%);
+  }
+
+  ul{
+    margin: 0;
+    padding: 0;
+    position: relative;
+    width: 400px;
+    height: 240px;
+    overflow: hidden;
+    border-bottom: 1px solid rgba(0,0,0,.2);
+  }
+
+  ul li{
+    list-style: none;
+    border-radius: 50%;
+    border: 15px solid #000;
+    position: absolute;
+    top: 100%;
+    left: 50%;
+    border-bottom-color: transparent !important;
+    border-left-color: transparent !important;
+    box-shadow: 0 0 10px rgba(0,0,0,.5);
+    animation: animate 5s infinite alternate;
+    transform: translate(-50%,-50%);
+  }
+
+  .one{
+    width: 60px;
+    height: 60px;
+    border-color:#FF0000;
+    animation-delay: .2s;
+    animation-duration: 5s;
+    animation-name: animate;
+  }
+
+  .two{
+    width: 90px;
+    height: 90px;
+    border-color:#FF7F00;
+    animation-delay: .4s;
+    animation-duration: 5s;
+    animation-name: animate;
+  }
+
+  .three{
+    width: 120px;
+    height: 120px;
+    border-color:#FFFF00;
+    animation-delay: .6s;
+    animation-duration: 5s;
+    animation-name: animate;
+  }
+
+  .four{
+    width: 150px;
+    height: 150px;
+    border-color:#00FF00;
+    animation-delay: .8s;
+    animation-duration: 5s;
+    animation-name: animate;
+  }
+
+  .five{
+    width: 180px;
+    height: 180px;
+    border-color:#0000FF;
+    animation-delay: 1s;
+    animation-duration: 5s;
+    animation-name: animate;
+  }
+
+  .six{
+    width: 210px;
+    height: 210px;
+    border-color:#4B0082;
+    animation-delay: 1.2s;
+    animation-duration: 5s;
+    animation-name: animate;
+  }
+
+  .seven{
+    width: 240px;
+    height: 240px;
+    border-color:#9400D3;
+    animation-delay: 1.4s;
+    animation-duration: 5s;
+    animation-name: animate;
+  }
+
+  @keyframes animate{
+    0%{
+      transform: translate(-50%,-50%) rotate(-45deg);
+    }
+
+    100%{
+      transform: translate(-50%,-50%) rotate(315deg);
+    }
+  }
diff --git a/Animated-rainbow/rainbow.png b/Animated-rainbow/rainbow.png
diff --git a/Art-Gallery/readme.md b/Art-Gallery/readme.md
@@ -38,4 +38,4 @@ git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git
 
 <br>
 
-## Happy Coding!
+## Happy Coding!
diff --git a/AuthPage/README.md b/AuthPage/README.md
@@ -0,0 +1,45 @@
+# An attractive Login Page UI.
+
+A Basic Login Page ui with a beautifull navbar written in **HTML**, **CSS**, and **JavaScript**.
+
+### Use of the Project:
+
+This basic contact form can be added to any website to make it more interactive and attractive.
+
+### Used Technologies:
+
+- HTML5
+- CSS3
+- JavaScript
+
+### Steps to Use:
+
+- Download or clone the repository:
+
+  ```bash
+  git clone https://github.com/Ayushparikh-code/Web-dev-mini-projects.git
+  ```
+
+- Go to the directory
+- Run the index.html file
+- Result is here!!!
+
+## Screenshot
+
+<img src="https://github.com/xshshahab/LoginPage/blob/main/images/Auth.png" alt="Screenshot" style="max-width:100%;">
+
+## Live Preview
+
+<a target="_blank" href="https://xshshahab.github.io/LoginPage/">Click Here!!</a>
+
+## Connect with Me
+
+[![GitHub](https://img.shields.io/badge/GitHub-%2312100E.svg?style=for-the-badge&logo=github&logoColor=white)](https://github.com/xshshahab)
+[![LinkedIn](https://img.shields.io/badge/LinkedIn-%230077B5.svg?style=for-the-badge&logo=linkedin&logoColor=white)](https://www.linkedin.com/in/mdshahbuddin82/)
+[![Twitter](https://img.shields.io/badge/Twitter-%231DA1F2.svg?style=for-the-badge&logo=twitter&logoColor=white)](https://twitter.com/xsh_shahab)
+
+Feel free to reach out and connect with me!
+
+## Thank You!
+
+Thank you for visiting my profile! I truly appreciate your time and interest in my work. Let's stay connected and keep building great things together! 🚀
diff --git a/AuthPage/images/Auth.png b/AuthPage/images/Auth.png