Skip to content

Commit 8da3c70

Browse files
shivamsisodia07shivamsisodia07
committed
added avatar generator game
1 parent 126b893 commit 8da3c70

File tree

5 files changed

+243
-0
lines changed

5 files changed

+243
-0
lines changed

‎.hintrc

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
{
2+
"extends": [
3+
"development"
4+
],
5+
"hints": {
6+
"axe/language": [
7+
"default",
8+
{
9+
"html-has-lang": "off"
10+
}
11+
],
12+
"axe/forms": [
13+
"default",
14+
{
15+
"label": "off"
16+
}
17+
]
18+
}
19+
}

‎Program's_Contributed_By_Contributors/AvatarGeneratorGame/avatar.css

+144
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
*{
2+
padding: 0;
3+
margin: 0;
4+
box-sizing: border-box;
5+
font-family: 'Luckiest Guy', cursive;
6+
7+
}
8+
9+
section{
10+
width: 100%;
11+
height: 100vh;
12+
display: flex;
13+
justify-content: center;
14+
flex-direction: column;
15+
align-items: center;
16+
background: linear-gradient(to bottom, #33ccff 0%, #f10bf1 100%);
17+
}
18+
section h1{
19+
word-spacing: 10px;
20+
margin-bottom: 14px;
21+
font-size: 1.9rem;
22+
text-transform: uppercase;
23+
letter-spacing: 2px;
24+
padding-left: 30px;
25+
}
26+
27+
.centerDiv{
28+
width: 60%;
29+
height: 450px;
30+
box-shadow:2px 2px 2px 5px white;
31+
display: flex;
32+
flex-direction: column;
33+
align-items: center;
34+
justify-content: center;
35+
background: linear-gradient(to left top, #ec0d97 0%,#1c2bf3 90%);
36+
color: white;
37+
}
38+
39+
40+
.details{
41+
text-align: center;
42+
text-transform: uppercase;
43+
}
44+
45+
.details label{
46+
font-size: 1.4rem;
47+
48+
}
49+
.details input {
50+
padding: 10px;
51+
background-color: #fafaf5;
52+
color: black;
53+
text-align: center;
54+
}
55+
section h1,.details label{
56+
text-shadow: 0 0 2px rgb(0, 0, 0), 0 0 3px white;
57+
color: rgb(255, 5, 109);}
58+
59+
section h1:hover,.details label:hover{
60+
text-shadow: 2px 5px 5px #2f3542;
61+
color: white;}
62+
63+
.details input[type=text]:focus {
64+
background-color: #c6eaf3;
65+
border: 3px solid #555;
66+
}
67+
68+
.imgdiv {
69+
margin: 30px 0;
70+
}
71+
72+
.clickme{
73+
background: #3498db;
74+
width: 180px;
75+
padding: 4px 0;
76+
border-radius: 3px;
77+
color:white;
78+
font-size: 1.2rem;
79+
letter-spacing: 2px;
80+
background-color: darken(#f1c40f, 20%);
81+
}
82+
83+
84+
.clickme:hover {
85+
cursor: pointer;
86+
background: rgb(35, 21, 231);
87+
color: rgb(243, 7, 97);
88+
text-shadow: 0 0 3px #f7eded, 0 0 10px #faf7f9;
89+
}
90+
/* .gender{
91+
width: 20%;
92+
height: 5%;
93+
font-size: 0.9rem;
94+
background-color: #fafaf5;
95+
color: black;
96+
text-align: center;
97+
border: 2px solid black;
98+
border-radius: 10%;
99+
text-size-adjust: auto;
100+
101+
} */
102+
103+
.dark{
104+
display:block;
105+
visibility: visible;
106+
background: #f70475;
107+
width: 100px;
108+
padding: 4px 0;
109+
border-radius: 3px;
110+
color:rgb(3, 3, 3);
111+
font-size: 0.8rem;
112+
letter-spacing: 2px;
113+
background-color: darken(#f1c40f, 20%);
114+
}
115+
116+
.light{
117+
display: block;
118+
visibility:hidden;
119+
background: #ff016b;
120+
width: 100px;
121+
padding: 4px 0;
122+
border-radius: 3px;
123+
color:white;
124+
font-size: 0.8rem;
125+
letter-spacing: 2px;
126+
background-color: darken(#f1c40f, 20%);
127+
}
128+
129+
.light:hover,.dark:hover{
130+
cursor: pointer;
131+
background: rgb(0, 0, 0);
132+
color: rgb(243, 7, 97);
133+
text-shadow: 0 0 2px #fffefe, 0 0 5px #faf7f9;
134+
}
135+
136+
footer{
137+
display: flex;
138+
height: 20vh;
139+
background: linear-gradient(to top, #1c2bf3 0%,#f10bf1 95%);
140+
justify-content: flex-end;
141+
vertical-align:bottom;
142+
padding-top: 100px;
143+
color: rgb(15, 226, 226);
144+
}

‎Program's_Contributed_By_Contributors/AvatarGeneratorGame/avatar.html

+49
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
6+
<title>avatar</title>
7+
<link rel="stylesheet" type="text/css" href="avatar.css" />
8+
<link
9+
href="https://fonts.googleapis.com/css?family=Luckiest+Guy"
10+
rel="stylesheet"
11+
/>
12+
</head>
13+
14+
<body>
15+
<section>
16+
<h1>
17+
ENTER YOUR NAME AND PRESS "CLICK Me" BUTTON TO GENERATE A AVATAR THAT
18+
DESCRIBE YOUR PERSONALITY.
19+
</h1>
20+
21+
<div class="centerDiv">
22+
<div class="details">
23+
<label>ENTER YOUR NAME</label><br />
24+
<input type="text" name="" id="nameid" />
25+
</div>
26+
27+
<div class="imgdiv">
28+
<img
29+
src="https://fiverr-res.cloudinary.com/images/q_auto,f_auto/gigs/21760012/original/d4c0c142f91f012c9a8a9c9aeef3bac28036f15b/create-your-cartoon-style-flat-avatar-or-icon.jpg"
30+
width="200"
31+
height="200"
32+
alt="img"
33+
class="imgchange"
34+
/>
35+
</div>
36+
37+
<button class="clickme">Click Me</button>
38+
<br />
39+
40+
<button class="light">light mode</button>
41+
<button class="dark">dark mode</button>
42+
</div>
43+
</section>
44+
45+
<footer>made by shivam sisodia</footer>
46+
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
47+
<script src="avatar.js"></script>
48+
</body>
49+
</html>

‎Program's_Contributed_By_Contributors/AvatarGeneratorGame/avatar.js

+26
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
2+
$(document).ready(function(){
3+
$('.clickme').click(function(){
4+
const name = $('#nameid').val();
5+
alert(name);
6+
$('.imgchange').attr('src'
7+
,`https://joeschmoe.io/api/v1/${name}`);
8+
const b = $('.imgchange');
9+
console.log(b);
10+
11+
});
12+
});
13+
14+
$(".light").on("click", function () {
15+
$("section").css("background","linear-gradient(to bottom, #33ccff 0%, #ff66ff 100%)");
16+
$(".centerDiv").css("background","linear-gradient(to left top, #ec0d97 0%,#1c2bf3 90%)")
17+
$(".dark").css("visibility","visible");
18+
$(".light").css("visibility","hidden");
19+
});
20+
21+
$(".dark").on("click", function () {
22+
$("section").css("background","rgb(6 10 12 / 98%)");
23+
$(".centerDiv").css("background","rgb(62 6 6 / 45%)")
24+
$(".dark").css("visibility","hidden");
25+
$(".light").css("visibility","visible");
26+
});

‎contributors/contributorsList.js

+5
Original file line numberDiff line numberDiff line change
@@ -1977,4 +1977,9 @@ contributors = [
19771977
fullname: "Benjamin Norman",
19781978
username: "https://github.com/BenjaminN117",
19791979
},
1980+
{
1981+
id: 393,
1982+
fullname: "Shivam Sisodia",
1983+
username: "https://github.com/shivamsisodia07",
1984+
},
19801985
];

0 commit comments

Comments
 (0)