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

+ 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); +}