Skip to content

Commit fe73633

Browse files
hamzathulhamzathul
authored
play: Added a play named Random Avatar (#1541)
* new play created * Added play files * play: random avatar * random-avatar: change class names
1 parent c1533f8 commit fe73633

File tree

3 files changed

+217
-0
lines changed

3 files changed

+217
-0
lines changed

‎src/plays/random-avatar/RandomAvatar.js‎

Lines changed: 65 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,65 @@
1+
import PlayHeader from 'common/playlists/PlayHeader';
2+
import { useState } from 'react';
3+
import './styles.css';
4+
5+
// WARNING: Do not change the entry component name
6+
function RandomAvatar(props) {
7+
// Your Code Start below.
8+
const getRandomCharacter = () => {
9+
const characters = 'abcdefghijklmnopqrstuvwxyz0123456789';
10+
let result = '';
11+
for (let i = 0; i < 4; i++) {
12+
result += characters.charAt(Math.floor(Math.random() * characters.length));
13+
}
14+
15+
return result;
16+
};
17+
18+
const getRandomGender = () => {
19+
return Math.random() < 0.5 ? 'boy' : 'girl';
20+
};
21+
22+
function generateAvatar() {
23+
const gender = getRandomGender();
24+
const username = getRandomCharacter();
25+
26+
return `https://avatar.iran.liara.run/public/${gender}?username=${username}`;
27+
}
28+
29+
const [avatarUrl, setAvatarUrl] = useState(generateAvatar());
30+
31+
const handleClick = () => {
32+
setAvatarUrl(generateAvatar());
33+
};
34+
35+
return (
36+
<>
37+
<div className="play-details">
38+
<PlayHeader play={props} />
39+
<div className="play-details-body">
40+
{/* Your Code Starts Here */}
41+
<div className="avatar-body avatar-selection">
42+
<div className="avatar-container">
43+
<main className="avatar">
44+
<h1 className="fancy-heading">Random Avatar</h1>
45+
<img alt="Random Avatar" className="avatar-image" src={avatarUrl} />
46+
</main>
47+
<div>
48+
<button
49+
aria-label="Re-generate random avatar"
50+
className="button-89"
51+
onClick={handleClick}
52+
>
53+
Re-Generate
54+
</button>
55+
</div>
56+
</div>
57+
</div>
58+
{/* Your Code Ends Here */}
59+
</div>
60+
</div>
61+
</>
62+
);
63+
}
64+
65+
export default RandomAvatar;

‎src/plays/random-avatar/Readme.md‎

Lines changed: 26 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,26 @@
1+
# Random Avatar
2+
3+
A play to generate random avatars while clicking the Regenerate button.
4+
5+
## Play Demographic
6+
7+
- Language: JavaScript (React)
8+
- Level: Beginner
9+
10+
## Creator Information
11+
12+
- User: hamzathul
13+
- GitHub Link: https://github.com/hamzathul
14+
15+
16+
## Implementation Details
17+
18+
This play demonstrates the use of state management with React’s `useState` hook to generate random avatars. Users can regenerate avatars by clicking a button, which dynamically updates the displayed avatar. The avatars represent different genders and ages, adding variety to the output.
19+
20+
## Consideration
21+
22+
The play focuses on React fundamentals such as event handling, state updates, and functional components, making it a great project for beginners to understand core React concepts.
23+
24+
## Resources
25+
26+
- [Avatar Placeholder API](https://avatar-placeholder.iran.liara.run/)

‎src/plays/random-avatar/styles.css‎

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,126 @@
1+
/* enter stlyes here */
2+
/* Dark Mode Styles */
3+
.avatar-body {
4+
background: #121212;
5+
color: #e0e0e0;
6+
font-family: 'PT Serif', sans-serif;
7+
margin: 0;
8+
padding: 0;
9+
min-height: 100vh;
10+
display: flex;
11+
align-items: center;
12+
justify-content: center;
13+
}
14+
15+
.avatar-container {
16+
display: flex;
17+
flex-direction: column;
18+
align-items: center;
19+
}
20+
21+
.avatar {
22+
background: rgba(33, 33, 33, 0.9);
23+
color: #e0e0e0;
24+
padding: 20px;
25+
text-align: center;
26+
border-radius: 10px;
27+
max-width: 90%;
28+
box-sizing: border-box;
29+
}
30+
31+
.fancy-heading {
32+
color: #ffffff;
33+
text-transform: uppercase;
34+
font-size: 4vw; /* Responsive size based on viewport width */
35+
font-weight: 700;
36+
letter-spacing: 1px;
37+
margin: 0 auto;
38+
position: relative;
39+
display: inline-block;
40+
padding: 0 20px;
41+
}
42+
43+
.fancy-heading::before {
44+
content: '';
45+
background: #444;
46+
height: 1px;
47+
position: absolute;
48+
width: 100%;
49+
top: 50%;
50+
left: 0;
51+
}
52+
53+
.fancy-heading::after {
54+
content: '';
55+
background: #222;
56+
position: absolute;
57+
width: 60%;
58+
height: 100%;
59+
left: 20%;
60+
top: 0;
61+
z-index: -1;
62+
}
63+
64+
.avatar-image {
65+
display: inline-block;
66+
margin: 10px;
67+
border: 4px solid rgba(200, 200, 200, 0.4);
68+
border-radius: 50%;
69+
transition: border 0.25s linear;
70+
width: 40vw;
71+
height: 40vw; /* Responsive size based on viewport width */
72+
max-width: 228px;
73+
max-height: 228px;
74+
}
75+
76+
.avatar-image img {
77+
border-radius: 50%;
78+
width: 100%;
79+
height: 100%;
80+
}
81+
82+
.avatar-image:hover {
83+
border: 4px solid rgba(255, 255, 255, 0.5);
84+
}
85+
86+
.button-89 {
87+
--b: 3px;
88+
--s: 0.45em;
89+
--color: #e0e0e0;
90+
--hover-color: #bb86fc;
91+
92+
padding: calc(0.5em + var(--s)) calc(0.9em + var(--s));
93+
color: var(--color);
94+
background: conic-gradient(from 90deg at var(--b) var(--b), #0000 90deg, var(--color) 0) var(--_p)
95+
var(--_p) / calc(100% - var(--b) - 2 * var(--_p)) calc(100% - var(--b) - 2 * var(--_p));
96+
transition:
97+
background-color 0.3s linear,
98+
color 0.3s;
99+
outline: var(--b) solid transparent;
100+
outline-offset: 0.6em;
101+
font-size: 16px;
102+
background-color: #333;
103+
border: 0;
104+
user-select: none;
105+
cursor: pointer;
106+
margin-top: 20px;
107+
}
108+
109+
.button-89:hover,
110+
.button-89:focus-visible {
111+
background-color: var(--hover-color);
112+
color: #ffffff;
113+
}
114+
115+
.button-89:active {
116+
background-color: #6200ee;
117+
}
118+
119+
/* Selection color */
120+
.avatar-selection ::-moz-selection {
121+
background: rgba(255, 255, 255, 0.1);
122+
}
123+
124+
.avatar-selection ::selection {
125+
background: rgba(255, 255, 255, 0.1);
126+
}

0 commit comments

Comments
 (0)