From fe73633e785ceff17e22bad9b940b34ec39637ef Mon Sep 17 00:00:00 2001
From: Hamzathul Favas E <83232962+hamzathul@users.noreply.github.com>
Date: Fri, 11 Oct 2024 19:11:07 +0530
Subject: [PATCH] play: Added a play named Random Avatar (#1541)
* new play created
* Added play files
* play: random avatar
* random-avatar: change class names
---
src/plays/random-avatar/RandomAvatar.js | 65 ++++++++++++
src/plays/random-avatar/Readme.md | 26 +++++
src/plays/random-avatar/styles.css | 126 ++++++++++++++++++++++++
3 files changed, 217 insertions(+)
create mode 100644 src/plays/random-avatar/RandomAvatar.js
create mode 100644 src/plays/random-avatar/Readme.md
create mode 100644 src/plays/random-avatar/styles.css
diff --git a/src/plays/random-avatar/RandomAvatar.js b/src/plays/random-avatar/RandomAvatar.js
new file mode 100644
index 0000000000..72bb91190b
--- /dev/null
+++ b/src/plays/random-avatar/RandomAvatar.js
@@ -0,0 +1,65 @@
+import PlayHeader from 'common/playlists/PlayHeader';
+import { useState } from 'react';
+import './styles.css';
+
+// WARNING: Do not change the entry component name
+function RandomAvatar(props) {
+ // Your Code Start below.
+ const getRandomCharacter = () => {
+ const characters = 'abcdefghijklmnopqrstuvwxyz0123456789';
+ let result = '';
+ for (let i = 0; i < 4; i++) {
+ result += characters.charAt(Math.floor(Math.random() * characters.length));
+ }
+
+ return result;
+ };
+
+ const getRandomGender = () => {
+ return Math.random() < 0.5 ? 'boy' : 'girl';
+ };
+
+ function generateAvatar() {
+ const gender = getRandomGender();
+ const username = getRandomCharacter();
+
+ return `https://avatar.iran.liara.run/public/${gender}?username=${username}`;
+ }
+
+ const [avatarUrl, setAvatarUrl] = useState(generateAvatar());
+
+ const handleClick = () => {
+ setAvatarUrl(generateAvatar());
+ };
+
+ return (
+ <>
+
+
+
+ {/* Your Code Starts Here */}
+
+
+
+ Random Avatar
+
+
+
+
+
+
+
+ {/* Your Code Ends Here */}
+
+
+ >
+ );
+}
+
+export default RandomAvatar;
diff --git a/src/plays/random-avatar/Readme.md b/src/plays/random-avatar/Readme.md
new file mode 100644
index 0000000000..c2207f8a4a
--- /dev/null
+++ b/src/plays/random-avatar/Readme.md
@@ -0,0 +1,26 @@
+# Random Avatar
+
+A play to generate random avatars while clicking the Regenerate button.
+
+## Play Demographic
+
+- Language: JavaScript (React)
+- Level: Beginner
+
+## Creator Information
+
+- User: hamzathul
+- GitHub Link: https://github.com/hamzathul
+
+
+## Implementation Details
+
+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.
+
+## Consideration
+
+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.
+
+## Resources
+
+- [Avatar Placeholder API](https://avatar-placeholder.iran.liara.run/)
diff --git a/src/plays/random-avatar/styles.css b/src/plays/random-avatar/styles.css
new file mode 100644
index 0000000000..2844e8938f
--- /dev/null
+++ b/src/plays/random-avatar/styles.css
@@ -0,0 +1,126 @@
+/* enter stlyes here */
+/* Dark Mode Styles */
+.avatar-body {
+ background: #121212;
+ color: #e0e0e0;
+ font-family: 'PT Serif', sans-serif;
+ margin: 0;
+ padding: 0;
+ min-height: 100vh;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+}
+
+.avatar-container {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+}
+
+.avatar {
+ background: rgba(33, 33, 33, 0.9);
+ color: #e0e0e0;
+ padding: 20px;
+ text-align: center;
+ border-radius: 10px;
+ max-width: 90%;
+ box-sizing: border-box;
+}
+
+.fancy-heading {
+ color: #ffffff;
+ text-transform: uppercase;
+ font-size: 4vw; /* Responsive size based on viewport width */
+ font-weight: 700;
+ letter-spacing: 1px;
+ margin: 0 auto;
+ position: relative;
+ display: inline-block;
+ padding: 0 20px;
+}
+
+.fancy-heading::before {
+ content: '';
+ background: #444;
+ height: 1px;
+ position: absolute;
+ width: 100%;
+ top: 50%;
+ left: 0;
+}
+
+.fancy-heading::after {
+ content: '';
+ background: #222;
+ position: absolute;
+ width: 60%;
+ height: 100%;
+ left: 20%;
+ top: 0;
+ z-index: -1;
+}
+
+.avatar-image {
+ display: inline-block;
+ margin: 10px;
+ border: 4px solid rgba(200, 200, 200, 0.4);
+ border-radius: 50%;
+ transition: border 0.25s linear;
+ width: 40vw;
+ height: 40vw; /* Responsive size based on viewport width */
+ max-width: 228px;
+ max-height: 228px;
+}
+
+.avatar-image img {
+ border-radius: 50%;
+ width: 100%;
+ height: 100%;
+}
+
+.avatar-image:hover {
+ border: 4px solid rgba(255, 255, 255, 0.5);
+}
+
+.button-89 {
+ --b: 3px;
+ --s: 0.45em;
+ --color: #e0e0e0;
+ --hover-color: #bb86fc;
+
+ padding: calc(0.5em + var(--s)) calc(0.9em + var(--s));
+ color: var(--color);
+ background: conic-gradient(from 90deg at var(--b) var(--b), #0000 90deg, var(--color) 0) var(--_p)
+ var(--_p) / calc(100% - var(--b) - 2 * var(--_p)) calc(100% - var(--b) - 2 * var(--_p));
+ transition:
+ background-color 0.3s linear,
+ color 0.3s;
+ outline: var(--b) solid transparent;
+ outline-offset: 0.6em;
+ font-size: 16px;
+ background-color: #333;
+ border: 0;
+ user-select: none;
+ cursor: pointer;
+ margin-top: 20px;
+}
+
+.button-89:hover,
+.button-89:focus-visible {
+ background-color: var(--hover-color);
+ color: #ffffff;
+}
+
+.button-89:active {
+ background-color: #6200ee;
+}
+
+/* Selection color */
+.avatar-selection ::-moz-selection {
+ background: rgba(255, 255, 255, 0.1);
+}
+
+.avatar-selection ::selection {
+ background: rgba(255, 255, 255, 0.1);
+}