02/12/2023

2023-12-02 19:45:57 +01:00
commit b516324a8d
73 changed files with 3873 additions and 0 deletions
--- a/rock-paper-scissor/LICENSE
+++ b/rock-paper-scissor/LICENSE
@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2023 AtharvaKulkarniIT
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.
--- a/rock-paper-scissor/README.md
+++ b/rock-paper-scissor/README.md
@@ -0,0 +1,48 @@
+# Rock, Paper, Scissors Game
+
+This is a Rock, Paper, Scissors game built with HTML, CSS, and JavaScript. You can play this classic hand game against the computer. The game is fully responsive and can be played on both desktop and mobile devices.
+
+## Features
+
+- Play Rock, Paper, Scissors against the computer.
+- Simple and intuitive user interface.
+- Responsive design for both desktop and mobile devices.
+- Tracks your wins, losses, and ties.
+
+## How to Play
+
+1. Choose your move: Rock, Paper, or Scissors by clicking on the respective button.
+2. The computer will randomly select its move.
+3. The winner of the round will be displayed on the screen.
+4. Keep playing and try to beat the computer!
+
+## Installation
+
+To run the game locally, follow these steps:
+
+1. Clone this repository to your local machine using Git:
+
+   ```bash
+   git clone https://github.com/AtharvaKulkarniIT/Rock-Paper-Scissor.git
+   
+That's it! You don't need to install any additional dependencies.
+
+## Usage
+
+Simply open the `index.html` file in your web browser. You can start playing the game immediately. 
+
+## Contributing
+
+Contributions are welcome! If you want to contribute to this project, follow these steps:
+
+1. Fork the repository.
+2. Create a new branch for your feature or bug fix: `git checkout -b feature/your-feature`.
+3. Make your changes and commit them: `git commit -m 'Add a new feature'`.
+4. Push to the branch: `git push origin feature/your-feature`.
+5. Create a pull request.
+
+Please ensure your pull request is in line with the project's coding style and standards. 
+
+## License
+
+This project is licensed under the MIT License - see the [LICENSE](LICENSE) file for details.
--- a/rock-paper-scissor/index.html
+++ b/rock-paper-scissor/index.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html lang="en" dir="ltr">
+  <head>
+    <meta charset="utf-8">
+    <title>Jan, Jan, Jan</title>
+    <link rel="stylesheet" href="style.css">
+    <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.2.0/css/all.css" integrity="sha384-hWVjflwFxL6sNzntih27bfxkr27PmbbK/iSvJ+a4+0owXq79v+lsFkW54bOGbiDQ" crossorigin="anonymous">
+  </head>
+  <body>
+    <div class="container">
+
+      <header>
+        <h1>Jan, Jan, Jan</h1>
+      </header>
+      <div id="inside">
+
+
+        <p id="instruction">Select your ammo:</p>
+
+        <div class="choice">
+
+          <div class="select-choice" id="rock">
+            <img class="img-weapon" src="rock1.png" alt="rock">
+          </div>
+
+          <div class="select-choice" id="paper">
+            <img class="img-weapon" src="paper1.png" alt="paper">
+          </div>
+
+          <div class="select-choice" id="scissors">
+            <img class="img-weapon" src="scissor1.png" alt="scissors">
+          </div>
+
+        </div>
+
+
+        <div class="result">
+          
+            <p id="message">Who will win the first game?</p>
+
+        <div class="scores">
+          <p class="total-score">Your score: <span id="user-score">0</span></p>
+          <p class="total-score">Computer's score: <span id="computer-score">0</span></p>
+          <p class="total-score">Draws: <span id="draws">0</span></p>
+
+          <button id="reset-button">Reset</button>
+        </div>
+
+        </div>
+
+    </div>
+
+      <footer>
+        <p>By Atharva Kulkarni</p>
+        <p>
+          <a 
+          href="https://github.com/AtharvaKulkarniIT" target="_blank"><i class="fab fa-github-alt fa-2x" alt="Github icon"></i></a>
+            </p>
+      </footer>
+
+    </div>
+    <script type="text/javascript" src="script.js"></script>
+  </body>
+</html>
--- a/rock-paper-scissor/paper1.png
+++ b/rock-paper-scissor/paper1.png
--- a/rock-paper-scissor/rock-paper-scissor(AtharvaKulkarniIT.png
+++ b/rock-paper-scissor/rock-paper-scissor(AtharvaKulkarniIT.png
--- a/rock-paper-scissor/rock1.png
+++ b/rock-paper-scissor/rock1.png
--- a/rock-paper-scissor/scissor1.png
+++ b/rock-paper-scissor/scissor1.png
--- a/rock-paper-scissor/script.js
+++ b/rock-paper-scissor/script.js
@@ -0,0 +1,126 @@
+let userScore = 0;
+let computerScore = 0;
+let draws = 0 ;
+
+const drawsSpan = document.getElementById("draws");
+const userScoreSpan = document.getElementById("user-score");
+const computerScoreSpan = document.getElementById("computer-score");
+const resultDiv = document.querySelector("#message");
+const resetButton = document.getElementById("reset-button")
+
+const rockDiv = document.getElementById("rock");
+const paperDiv = document.getElementById("paper");
+const scissorsDiv = document.getElementById("scissors");
+
+
+const getComputerChoice = () => {
+  const choiceList = ["rock", "paper", "scissors"];
+  const randomNumber = Math.floor(Math.random()*3);
+  return (choiceList[randomNumber]);
+};
+
+
+const convertToUp = (word) => {
+  switch(word) {
+    case "rock":
+      return "Jan";
+      break;
+    case "paper":
+      return "Jan";
+      break;
+    case "scissors":
+      return "Jan";
+      break;
+  }
+};
+
+const win = (userChoice, computerChoice) => {
+  userScore++;
+  userScoreSpan.innerHTML = userScore;
+  const randomWin = ["beats", "smashes", "destroys", "obliterates"];
+  const randomNumber = Math.floor(Math.random() * 4);
+  const winEmojis = ["🤠","🎉", "✨","🎊","🤩","👌"]
+  const randomNumberEmoji = Math.floor(Math.random() * 6);
+
+  resultDiv.innerHTML = `${convertToUp(userChoice)} ${randomWin[randomNumber]} ${convertToUp(computerChoice)}. You win! ${winEmojis[randomNumberEmoji]}`;
+
+  document.getElementById(userChoice).classList.add('win-border')
+  setTimeout(() => document.getElementById(userChoice).classList.remove('win-border'), 600);
+};
+
+const lose = (userChoice, computerChoice) => {
+  computerScore++;
+  computerScoreSpan.innerHTML = computerScore;
+  const randomWin = ["beats", "smashes", "destroys", "obliterates"];
+  const randomNumber = Math.floor(Math.random() * 4);
+  const loseEmojis = ["😩", "😥 ", "😭","😵‍💫","😔", "🤦🏽"]
+  const randomNumberEmoji = Math.floor(Math.random() * 6);
+  resultDiv.innerHTML = `${convertToUp(computerChoice)} ${randomWin[randomNumber]} ${convertToUp(userChoice)}. You lose! ${loseEmojis[randomNumberEmoji]}`;
+
+  document.getElementById(userChoice).classList.add('lose-border');
+  setTimeout(() => document.getElementById(userChoice).classList.remove('lose-border'), 600);
+
+};
+
+const tie = (userChoice, computerChoice) => {
+  draws++;
+  drawsSpan.innerHTML = draws ;  
+  const tieEmojis = ["🤔", " 😱", "🙈", "🧐", "🙀", "🙃"];
+  const randomNumberEmoji = Math.floor(Math.random() * 6);
+  resultDiv.innerHTML = `${convertToUp(computerChoice)} matches ${convertToUp(userChoice)}. It's a tie! ${tieEmojis[randomNumberEmoji]}`;
+
+  document.getElementById(userChoice).classList.add('tie-border');
+  setTimeout(() => document.getElementById(userChoice).classList.remove('tie-border'), 600);
+};
+
+
+
+
+const game = (userChoice) => {
+  const computerChoice = getComputerChoice();
+
+  switch (userChoice + computerChoice) {
+    case "paperrock":
+    case "rockscissors":
+    case "scissorspaper":
+      win(userChoice, computerChoice);
+      break;
+
+    case "rockpaper":
+    case "scissorsrock":
+    case "paperscissors":
+      lose(userChoice, computerChoice);
+      break;
+
+    case "rockrock":
+    case "paperpaper":
+    case "scissorsscissors":
+      tie(userChoice, computerChoice);
+      break;
+  }
+
+};
+
+
+const resetScores = () => {
+  computerScore = 0;
+  computerScoreSpan.innerHTML = computerScore
+  userScore = 0;
+  userScoreSpan.innerHTML = userScore;
+  draws = 0;
+  drawsSpan.innerHTML = draws ;
+  resultDiv.innerHTML = 'Who will win this match ?';
+};
+
+const main = () => {
+  rockDiv.addEventListener('click', () => game("rock"));
+
+  paperDiv.addEventListener('click', () => game("paper"));
+
+  scissorsDiv.addEventListener('click', () => game("scissors"));
+
+  resetButton.addEventListener('click', () => resetScores());
+};
+
+
+main();
--- a/rock-paper-scissor/style.css
+++ b/rock-paper-scissor/style.css
@@ -0,0 +1,144 @@
+@import url('https://fonts.googleapis.com/css?family=Lato:400,700,900');
+
+html{
+  height: 100%;
+}
+
+body {
+  margin: 0;
+  padding: 0;
+  font-family: 'Lato', sans-serif;
+  text-align: center;
+  font-size: 1.2rem;
+  background-image: linear-gradient(180deg , #70c6e3, #19c045);
+}
+
+.container {
+  padding: 2vh 0;
+}
+
+#inside {
+  margin: auto;
+  width: 45%;
+  height: 50%;
+  border-radius: 25px;
+  padding: 2vh 0;
+}
+
+h1 {
+  font-size: 3.2rem;
+  margin: 1vh 0;
+}
+
+p {
+  color: #000000;
+}
+
+hr {
+  width: 50%;
+}
+
+#instruction {
+  font-size: 1.5rem;
+  margin-bottom: 0;
+}
+
+.img-weapon {
+  max-width: 120px;
+  height: auto
+}
+
+.choice {
+  margin: auto;
+}
+
+.select-choice {
+  display: inline-block;
+  border: 5px solid #000000;
+  border-radius: 80px;
+  margin: 1rem;
+  transition: all 0.6s ease;
+}
+
+#rock:hover, #paper:hover, #scissors:hover {
+  background-color: #cf6807d0;
+  cursor: pointer;
+  box-shadow: 5px 7px 8px #888888;
+
+}
+
+#rock {
+  background-color: #FFEE88;
+}
+
+#paper {
+  background-color: #F40076;
+}
+
+#scissors {
+  background-color: #75C9C8;
+}
+
+.result {
+  font-size: 1.4rem;
+  font-weight: 600;
+}
+
+.win-border {
+  border: 5px solid #3bff00;
+  box-shadow: 2px 2px 12px #3e3e3e;
+}
+
+.lose-border {
+  border: 5px solid #ff0000;
+  box-shadow: 2px 2px 12px #3e3e3e;
+}
+
+.tie-border {
+  border: 5px solid #4545a3;
+  box-shadow: 2px 2px 12px #3e3e3e;
+}
+
+.scores {
+  background-color: #2eadfe;
+  border-radius: 25px;
+  opacity:0.5;
+  border: 1px groove black;
+}
+
+.scores>p {
+  color: #FFFFFF;
+  font-size: 1.7rem;
+  font-weight: 600;
+  padding: 0.5rem;
+  margin: 0;
+}
+
+#reset-button {
+  border-radius: 10px;
+  display: inline-block;
+  cursor: pointer;
+  color: #000000;
+  font-size: 0.8rem;
+  font-weight: 600;
+  padding: 0.5vh 0.5vw;
+  text-decoration: none;
+  margin: .2rem;
+  outline: none;
+}
+
+#reset-button:active {
+  position: relative;
+  top: 1px;
+}
+
+footer {
+  font-size: 0.7rem;
+  line-height: 0.3rem;
+  padding-top: 2vh;
+}
+
+.fab {
+  color: #000000;
+  margin: 0 .5%;
+}