Merge branch 'main' into main

DhanushNehru · Oct 25, 2023 · b825b2c · b825b2c
2 parents 8a59922 + 91215d7
commit b825b2c
Show file tree

Hide file tree

Showing 66 changed files with 3,358 additions and 2 deletions.
diff --git a/AreoplaneGame/Plane-removebg-preview.png b/AreoplaneGame/Plane-removebg-preview.png
diff --git a/AreoplaneGame/cloud1.png b/AreoplaneGame/cloud1.png
diff --git a/AreoplaneGame/index.html b/AreoplaneGame/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Areoplane Game</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+<body>
+    <section>
+        <!--Adding clouds-->
+        <div class="clouds">
+            <img src="./cloud1.png" style="--i:1;">
+            <img src="./cloud1.png" style="--i:2;">
+            <img src="./cloud1.png" style="--i:3;">
+        </div>
+        <div class="clouds clouds2">
+            <img src="./cloud1.png" style="--i:1;">
+            <img src="./cloud1.png" style="--i:2;">
+            <img src="./cloud1.png" style="--i:3;">
+        </div>
+        <div class="runway"></div>
+        <img src="./Plane-removebg-preview.png" class="plane">  
+    </section>
+</body>
+</html>
diff --git a/AreoplaneGame/style.css b/AreoplaneGame/style.css
@@ -0,0 +1,137 @@
+*
+{
+    margin: 0;
+    padding: 0;
+    box-sizing: border-box;
+}
+body
+{
+    overflow: hidden;
+}
+section
+{
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    background: #034071;
+}
+section .runway
+{
+    position: relative;
+    width: 400px;
+    height: 100vh;
+    background: #1378bc;
+    border-left: 20px solid rgba(0, 0, 0, 0.25);
+    border-right: 20px solid rgba(0, 0, 0, 0.25);
+    transition: transform 1s;
+    transition-delay: 1s;
+    transform-origin: top;
+}
+/*Left click and hold fly*/
+/*plane landing on releasing left click*/
+section:active .runway
+{
+    transform: scaleX(0.7) scaleY(0);
+    transition-delay: 0s;
+    transform-origin: bottom;
+}
+section .runway::before
+{
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 15px;
+    height: 100%;
+    background: repeating-linear-gradient(transparent 0%, transparent 50%, #fff 50%, #fff 100%);
+    background-size: 20px 320px;
+    animation: animateRunway 0.5s linear infinite;
+}
+section:activate .runway::before
+{
+    animation: animateRunway 0.25s linear infinite;
+}
+@keyframes animateRunway
+{
+    0%
+    {
+        background-position-y: 0px;
+    }
+    100%
+    {
+        background-position-y: 640px;
+    }
+}
+.plane
+{
+    position: absolute;
+    bottom: 100px;
+    max-width: 250px;
+    pointer-events: none;
+    filter: drop-shadow(10px 10px 0 rgba(0, 0, 0, 0.5));
+    transition: 5s;
+}
+section:active .plane
+{
+    max-width: 500px;
+    filter: drop-shadow(200px 200px 0 rgba(0, 0, 0, 0));
+}
+.clouds
+{
+    position: absolute;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 10000;
+    pointer-events: none;
+    opacity: 0;
+    transition: opacity 2s;
+    transition-delay: 0s;
+}
+section:active .clouds
+{
+    opacity: 1;
+    transition-delay: 1s;   
+}
+.clouds img
+{
+    position: absolute;
+    left: 0;
+    width: 800px;
+    animation: animateClouds 4s linear infinite;
+    animation-delay: calc(-1.5s * var(--i));
+}
+.clouds2
+{
+    right: 0;
+    transform: rotate(180deg);
+}
+.clouds2 img
+{
+    animation: animateClouds2 4s linear infinite;
+    animation-delay: calc(-1.5s * var(--i));
+}
+@keyframes animateClouds
+{
+    0%
+    {
+        transform: translateY(-100%);
+    }
+    100%
+    {
+        transform: translateY(100%);
+    }
+}
+@keyframes animateClouds2
+{
+    0%
+    {
+        transform: translateY(100%);
+    }
+    100%
+    {
+        transform: translateY(-100%);
+    }
+}
diff --git a/Book-cricket-game/README.md b/Book-cricket-game/README.md
@@ -0,0 +1,23 @@
+# Cricket Game
+
+This is a simple cricket game implemented using HTML, CSS, and JavaScript. In this game, you can simulate a cricket match by generating runs based on random number hits.
+
+## How to Play
+
+1. Click the "Hit!" button to generate a random number between 0 and 9.
+2. If the generated number is 0, the batter is out.
+3. If the generated number is 1, 2, 3, 4, or 6, those runs will be added to the batting team's score.
+4. Keep hitting to accumulate runs and try to avoid getting out.
+5. Enjoy the game and see how high you can score!
+
+## Technologies Used
+
+- HTML
+- CSS
+- JavaScript
+
+## How to Run
+
+Simply open the `index.html` file in your web browser to play the game. Click the "Hit!" button to make moves in the game.
+
+
diff --git a/Book-cricket-game/index.html b/Book-cricket-game/index.html
@@ -0,0 +1,18 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+  <meta charset="UTF-8">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <link rel="stylesheet" href="styles.css">
+  <title>Cricket Game</title>
+</head>
+<body>
+  <div class="container">
+    <h1>Cricket Game</h1>
+    <button onclick="hit()">Hit!</button>
+    <h2>Runs: <span id="score">0</span></h2>
+    <h2>Outs: <span id="outs">0</span></h2>
+  </div>
+  <script src="script.js"></script>
+</body>
+</html>
diff --git a/Book-cricket-game/script.js b/Book-cricket-game/script.js
@@ -0,0 +1,17 @@
+let runs = 0;
+let outs = 0;
+
+function hit() {
+  const randomNumber = Math.floor(Math.random() * 10); // Generates random number between 0 and 9
+  if (randomNumber === 0) {
+    outs++;
+  } else if (randomNumber === 1 || randomNumber === 2 || randomNumber === 3 || randomNumber === 4 || randomNumber === 6) {
+    runs += randomNumber;
+  }
+  updateScore();
+}
+
+function updateScore() {
+  document.getElementById("score").textContent = runs;
+  document.getElementById("outs").textContent = outs;
+}
diff --git a/Book-cricket-game/styles.css b/Book-cricket-game/styles.css
@@ -0,0 +1,20 @@
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+    background-color: #f0f0f0;
+  }
+
+  .container {
+    text-align: center;
+  }
+
+  button {
+    margin-top: 20px;
+    padding: 10px 20px;
+    font-size: 18px;
+    cursor: pointer;
+  }
+
diff --git a/MEME GENERATOR/index.html b/MEME GENERATOR/index.html
@@ -0,0 +1,25 @@
+<!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" />
+    <script src="./sctick.js"></script>
+    <link rel="stylesheet" href="style.css" />
+    <title>Document</title>
+  </head>
+  <body class="main_body">
+
+    <div class="center">
+      <div>
+        <img id="myImg" />
+      </div>
+      <div class="div_btn">
+        <button class="btn" onclick="myfunc()">Next Meme</button>
+      </div>
+      <button class="btn" a href="javascript:void(0)" onclick="share()">Compartilhar</a>
+      </button> 
+    </div>
+
+  </body>
+</html>
diff --git a/MEME GENERATOR/strike.js b/MEME GENERATOR/strike.js
@@ -0,0 +1,29 @@
+const kt = () => {
+    fetch("https://meme-api.herokuapp.com/gimme")
+      .then((data) => data.json())
+      .then((data_val) => {
+        const u_data = data_val.url;
+        document.getElementById("myImg").src = u_data;
+        console.log(u_data);
+      });
+  };
+  kt();
+
+  //function to refresh the page every 5 seconds
+  const myfunc = () =>{
+    kt();
+  }
+
+
+  //function to share the generated meme on social networks
+  function share(){
+      if (navigator.share !== undefined) {
+          navigator.share({
+              title: 'Meme Genrator',
+              text: 'meme generator',
+              url: 'u_data',
+          })
+          .then(() => console.log('Successful share'))
+          .catch((error) => console.log('Error sharing', error));
+      }
+  }
diff --git a/MEME GENERATOR/style.css b/MEME GENERATOR/style.css
@@ -0,0 +1,36 @@
+* {
+    margin: 0;
+    padding: 0;
+  }
+  .main_body{
+   background-color: rgb(90, 92, 207);
+  }
+  #myImg {
+    height: 400px;
+    width: 500px;
+  }
+  .center {
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+    border: 5px solid #FFFF00;
+    padding: 10px;
+  }
+  .div_btn{
+    width: 100%;
+    display: flex;
+    justify-content: center;
+  }
+  .btn{
+    background-color: #4CAF50;
+    border: none;
+    color: white;
+    padding: 15px 32px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 25px;
+    margin: 4px 2px;
+    cursor: pointer;
+  }
diff --git a/Online Restaurant Website/README.md b/Online Restaurant Website/README.md
@@ -0,0 +1,13 @@
+# Savory Sojourns - A Responsive Online Restaurant Website
+Savory Sojourns is a responsive online restaurant website developed using HTML, CSS, Bootstrap, and JavaScript.
+
+This is a simple website designed to provide a seamless user experience for customers looking to view the menu, location, and place orders online. The website is optimized for desktop as well as mobile, ensuring that it is easily accessible to all users.
+
+With The Savoury Table, you can:
+
+- Browse the menu
+- View the food gallery 
+- View hours of operation and contact information
+
+## Desktop View
+![Alt text](Screenshot.png)
diff --git a/Online Restaurant Website/Screenshot.png b/Online Restaurant Website/Screenshot.png
diff --git a/Online Restaurant Website/css/animate.min.css b/Online Restaurant Website/css/animate.min.css
diff --git a/Online Restaurant Website/css/bootstrap.min.css b/Online Restaurant Website/css/bootstrap.min.css
diff --git a/Online Restaurant Website/css/font-awesome.min.css b/Online Restaurant Website/css/font-awesome.min.css