added avatar generator game

mohit11102001 · Oct 7, 2022 · 8da3c70 · 8da3c70
1 parent 126b893
commit 8da3c70
Show file tree

Hide file tree

Showing 5 changed files with 243 additions and 0 deletions.
diff --git a/.hintrc b/.hintrc
@@ -0,0 +1,19 @@
+{
+  "extends": [
+    "development"
+  ],
+  "hints": {
+    "axe/language": [
+      "default",
+      {
+        "html-has-lang": "off"
+      }
+    ],
+    "axe/forms": [
+      "default",
+      {
+        "label": "off"
+      }
+    ]
+  }
+}
diff --git a/Program's_Contributed_By_Contributors/AvatarGeneratorGame/avatar.css b/Program's_Contributed_By_Contributors/AvatarGeneratorGame/avatar.css
@@ -0,0 +1,144 @@
+*{
+  padding: 0; 
+  margin: 0; 
+  box-sizing: border-box;
+  font-family: 'Luckiest Guy', cursive;
+
+}
+
+section{
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    flex-direction: column;
+    align-items: center;
+    background: linear-gradient(to bottom, #33ccff 0%, #f10bf1 100%);
+    }
+      section h1{
+         word-spacing: 10px;
+         margin-bottom: 14px;
+         font-size: 1.9rem;
+         text-transform: uppercase;
+         letter-spacing: 2px;
+         padding-left: 30px;
+         }
+
+.centerDiv{ 
+    width: 60%; 
+    height: 450px;
+    box-shadow:2px 2px 2px 5px white;
+    display: flex;  
+    flex-direction: column;  
+    align-items: center; 
+    justify-content: center; 
+    background: linear-gradient(to left top, #ec0d97 0%,#1c2bf3  90%);
+    color: white;
+  }
+
+
+.details{ 
+    text-align: center; 
+    text-transform: uppercase; 
+}
+
+.details label{
+    font-size: 1.4rem;
+
+}
+.details input {
+    padding: 10px;
+    background-color: #fafaf5;
+    color: black;
+    text-align: center;
+}
+section h1,.details label{
+  text-shadow: 0 0 2px rgb(0, 0, 0), 0 0 3px white;
+    color: rgb(255, 5, 109);}
+
+section h1:hover,.details label:hover{
+    text-shadow: 2px 5px 5px #2f3542;
+    color: white;}
+
+.details input[type=text]:focus {
+    background-color: #c6eaf3;
+    border: 3px solid #555;
+}
+
+.imgdiv {
+    margin: 30px 0;
+  }
+
+.clickme{
+  background: #3498db;
+  width: 180px;
+  padding: 4px 0;
+  border-radius: 3px;
+  color:white;
+  font-size: 1.2rem;
+  letter-spacing: 2px;
+  background-color: darken(#f1c40f, 20%);
+   }
+
+
+  .clickme:hover {
+    cursor: pointer;
+    background: rgb(35, 21, 231);
+    color: rgb(243, 7, 97);
+    text-shadow: 0 0 3px #f7eded, 0 0 10px #faf7f9;
+  }
+/* .gender{
+  width: 20%;
+  height: 5%;
+  font-size: 0.9rem;
+  background-color: #fafaf5;
+  color: black;
+  text-align: center;
+  border: 2px solid black;
+  border-radius: 10%;
+  text-size-adjust: auto;
+
+} */
+
+.dark{
+  display:block;
+  visibility: visible;
+  background: #f70475;
+  width: 100px;
+  padding: 4px 0;
+  border-radius: 3px;
+  color:rgb(3, 3, 3);
+  font-size: 0.8rem;
+  letter-spacing: 2px;
+  background-color: darken(#f1c40f, 20%);
+}
+
+.light{
+  display: block;
+  visibility:hidden;
+  background: #ff016b;
+  width: 100px;
+  padding: 4px 0;
+  border-radius: 3px;
+  color:white;
+  font-size: 0.8rem;
+  letter-spacing: 2px;
+  background-color: darken(#f1c40f, 20%);
+}
+
+.light:hover,.dark:hover{
+  cursor: pointer;
+  background: rgb(0, 0, 0);
+  color: rgb(243, 7, 97);
+  text-shadow: 0 0 2px #fffefe, 0 0 5px #faf7f9;
+}
+
+footer{
+  display: flex;
+  height: 20vh;
+  background: linear-gradient(to top, #1c2bf3 0%,#f10bf1  95%);
+  justify-content: flex-end;
+  vertical-align:bottom;
+  padding-top: 100px;
+  color: rgb(15, 226, 226);
+}
diff --git a/Program's_Contributed_By_Contributors/AvatarGeneratorGame/avatar.html b/Program's_Contributed_By_Contributors/AvatarGeneratorGame/avatar.html
@@ -0,0 +1,49 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>avatar</title>
+    <link rel="stylesheet" type="text/css" href="avatar.css" />
+    <link
+      href="https://fonts.googleapis.com/css?family=Luckiest+Guy"
+      rel="stylesheet"
+    />
+  </head>
+
+  <body>
+    <section>
+      <h1>
+        ENTER YOUR NAME AND PRESS "CLICK Me" BUTTON TO GENERATE A AVATAR THAT
+        DESCRIBE YOUR PERSONALITY.
+      </h1>
+
+      <div class="centerDiv">
+        <div class="details">
+          <label>ENTER YOUR NAME</label><br />
+          <input type="text" name="" id="nameid" />
+        </div>
+
+        <div class="imgdiv">
+          <img
+            src="https://fiverr-res.cloudinary.com/images/q_auto,f_auto/gigs/21760012/original/d4c0c142f91f012c9a8a9c9aeef3bac28036f15b/create-your-cartoon-style-flat-avatar-or-icon.jpg"
+            width="200"
+            height="200"
+            alt="img"
+            class="imgchange"
+          />
+        </div>
+
+        <button class="clickme">Click Me</button>
+        <br />
+
+        <button class="light">light mode</button>
+        <button class="dark">dark mode</button>
+      </div>
+    </section>
+
+    <footer>made by shivam sisodia</footer>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
+    <script src="avatar.js"></script>
+  </body>
+</html>
diff --git a/Program's_Contributed_By_Contributors/AvatarGeneratorGame/avatar.js b/Program's_Contributed_By_Contributors/AvatarGeneratorGame/avatar.js
@@ -0,0 +1,26 @@
+
+$(document).ready(function(){
+    $('.clickme').click(function(){
+     const name = $('#nameid').val();
+     alert(name);
+     $('.imgchange').attr('src'
+     ,`https://joeschmoe.io/api/v1/${name}`);
+     const b = $('.imgchange');
+     console.log(b);
+
+    });
+   });
+
+   $(".light").on("click", function () {
+     $("section").css("background","linear-gradient(to bottom, #33ccff 0%, #ff66ff 100%)");
+     $(".centerDiv").css("background","linear-gradient(to left top, #ec0d97 0%,#1c2bf3  90%)")
+     $(".dark").css("visibility","visible");
+     $(".light").css("visibility","hidden");
+   });
+
+   $(".dark").on("click", function () {
+      $("section").css("background","rgb(6 10 12 / 98%)");
+      $(".centerDiv").css("background","rgb(62 6 6 / 45%)")
+      $(".dark").css("visibility","hidden");
+      $(".light").css("visibility","visible");
+    });
diff --git a/contributors/contributorsList.js b/contributors/contributorsList.js
@@ -1977,4 +1977,9 @@ contributors = [
     fullname: "Benjamin Norman",
     username: "https://github.com/BenjaminN117",
   },
+  {
+    id: 393,
+    fullname: "Shivam Sisodia",
+    username: "https://github.com/shivamsisodia07",
+  },
 ];