Merge branch 'main' into tailwind

apps/react/src/challenges/feedback-modal/App.jsx

@@ -0,0 +1,26 @@
+import { useState } from 'react';
+import styles from './styles.module.css';
+import FeedbackModal from './components/FeedbackModal';
+
+function App() {
+ const [isModalOpen, setIsModalOpen] = useState(false);
+
+ const openModal = () => {
+ setIsModalOpen(true);
+ };
+
+ const closeModal = () => {
+ setIsModalOpen(false);
+ };
+
+ return (
+ <div className={styles.feedbackContainer}>
+ <button className={styles.feedbackBtn} onClick={openModal}>
+ Feedback
+ </button>
+ {isModalOpen && <FeedbackModal onClose={closeModal} />}
+ </div>
+ );
+}
+
+export default App;

apps/react/src/challenges/feedback-modal/components/FeedbackModal.jsx

@@ -0,0 +1,59 @@
+import { useState } from 'react';
+import RatingContent from './RatingContent';
+import styles from '../styles.module.css';
+
+const FeedbackModal = ({ onClose }) => {
+ const [feedbackContent, setFeedbackContent] = useState('');
+ const [activeRating, setActiveRating] = useState({});
+ const [isSubmitTrue, setIsSubmitTrue] = useState(false);
+
+ const handleSubmit = () => {
+ setIsSubmitTrue(true);
+ };
+
+ const handleClick = (item) => {
+ setActiveRating(item);
+ };
+
+ const handleFeedbackContent = (e) => {
+ setFeedbackContent(e.target.value);
+ };
+
+ return (
+ <div className={styles.modalContainer} onClick={onClose}>
+ <div className={styles.modalContent} onClick={(e) => e.stopPropagation()}>
+ <button className={styles.modalClose} onClick={onClose}>
+ x
+ </button>
+ <h1>User Feedback</h1>
+ {!isSubmitTrue ? (
+ <form className={styles.feedbackContent} onSubmit={handleSubmit}>
+ <RatingContent handleClick={handleClick} activeRating={activeRating.rating} />
+ <textarea
+ placeholder="Please share additional feedback (optional)"
+ rows="5"
+ cols="30"
+ style={{ width: '80%', margin: '10px', fontSize: '12px', padding: '2px' }}
+ value={feedbackContent}
+ onChange={handleFeedbackContent}
+ ></textarea>
+ <button
+ type="submit"
+ className={styles.feedbackBtn}
+ disabled={!Object.keys(activeRating).length}
+ >
+ Submit
+ </button>
+ </form>
+ ) : (
+ <div className={styles.feedbackResponse}>
+ <p>Feedback: {activeRating.mood}</p>
+ <p>Thank you for your feedback</p>
+ </div>
+ )}
+ </div>
+ </div>
+ );
+};
+
+export default FeedbackModal;

apps/react/src/challenges/feedback-modal/components/RatingContent.jsx

@@ -0,0 +1,22 @@
+import content from '../data/emojicontent';
+import { appendActiveClass } from '../utilities/ClassUtility';
+import styles from '../styles.module.css';
+
+const RatingContent = ({ handleClick, activeRating }) => {
+ return (
+ <div className={styles.iconContainer}>
+ {content.map((item) => (
+ <div
+ key={item.rating}
+ className={appendActiveClass(item.rating, activeRating, styles.iconItem)}
+ onClick={() => handleClick(item)}
+ >
+ <img src={item.url} className={styles.iconImage} alt={item.mood} />
+ <p>{item.mood}</p>
+ </div>
+ ))}
+ </div>
+ );
+};
+
+export default RatingContent;

apps/react/src/challenges/feedback-modal/data/emojicontent.js

@@ -0,0 +1,29 @@
+const content = [
+ {
+ rating: 1,
+ url: 'https://cdn-icons-png.flaticon.com/512/14230/14230791.png',
+ mood: 'Terrible',
+ },
+ {
+ rating: 2,
+ url: 'https://cdn-icons-png.flaticon.com/512/166/166527.png',
+ mood: 'Unhappy',
+ },
+ {
+ rating: 3,
+ url: 'https://cdn-icons-png.flaticon.com/512/1791/1791385.png',
+ mood: 'Neutral',
+ },
+ {
+ rating: 4,
+ url: 'https://cdn-icons-png.flaticon.com/512/166/166538.png',
+ mood: 'Happy',
+ },
+ {
+ rating: 5,
+ url: 'https://cdn-icons-png.flaticon.com/512/10851/10851309.png',
+ mood: 'Excited',
+ },
+];
+
+export default content;

apps/react/src/challenges/feedback-modal/styles.module.css

@@ -0,0 +1,183 @@
+.feedbackContainer {
+ margin: 0;
+ padding: 0;
+ display: flex;
+ background-color: white;
+ min-height: 100vh;
+ justify-content: center;
+ align-items: center;
+ font-family: sans-serif;
+}
+
+.feedbackBtn {
+ height: 30px;
+ width: 100px;
+ background-color: rgb(171, 95, 196);
+ border: 0;
+ border-radius: 5px;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.modalContainer {
+ position: absolute;
+ top: 0;
+ left: 0;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(0, 0, 0, 0.5);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ z-index: 99;
+}
+
+.modalContent {
+ background-color: white;
+ padding: 20px;
+ border-radius: 5px;
+ box-shadow: 0 5px 10px rgba(0, 0, 0, 0.4);
+ position: relative;
+ width: 500px;
+ min-height: 300px;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: space-between;
+ gap: 5px;
+}
+
+.iconContainer {
+ display: flex;
+ gap: 10px;
+ justify-content: center;
+ padding: 15px 5px;
+}
+
+.iconItem {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ cursor: pointer;
+ width: 70px;
+ height: 70px;
+ margin: 10px 1px;
+}
+
+.iconItem:hover {
+ background-color: darkgray;
+ border-radius: 5px;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+ transition: all 200ms ease;
+}
+
+.active {
+ background-color: rgb(188, 162, 213);
+ border-radius: 5px;
+ box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
+}
+
+.iconImage {
+ width: 40px;
+ height: 40px;
+}
+
+.iconItem p {
+ font-size: small;
+ margin: 5px;
+ color: rgba(0, 0, 0, 0.7);
+}
+
+.modalClose {
+ position: absolute;
+ top: 10px;
+ right: 10px;
+ font-size: 20px;
+ background: none;
+ border: none;
+}
+
+.modalContent h1 {
+ color: rgba(0, 0, 0, 0.8);
+ font-weight: 400;
+ font-size: 25px;
+ top: 35px;
+}
+
+.feedbackContent {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+}
+
+.feedbackResponse {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+ gap: 25px;
+ border: 1px solid grey;
+ margin-bottom: 30px;
+ height: 120px;
+ width: 250px;
+ background-color: rgb(188, 162, 213, 0.3);
+ border: none;
+ border-radius: 5px;
+ box-shadow: 0 5px 5px rgba(0, 0, 0, 0.3);
+}
+
+@media (max-width: 510px) {
+ .feedbackContainer {
+ padding: 10px;
+ flex-direction: column;
+ }
+
+ .feedbackResponse {
+ height: 150px;
+ width: auto;
+ }
+
+ .feedbackResponse p {
+ text-align: center;
+ text-wrap: wrap;
+ }
+
+ .modalContent {
+ width: 90%;
+ padding: 10px;
+ max-width: 200px;
+ }
+
+ textarea {
+ width: 100%;
+ font-size: 10px;
+ }
+
+ .feedbackBtn {
+ width: 80px;
+ height: 25px;
+ }
+
+ .iconItem {
+ width: 60px;
+ height: 60px;
+ }
+
+ .iconImage {
+ width: 30px;
+ height: 30px;
+ }
+
+ .iconContainer {
+ flex-wrap: wrap;
+ }
+
+ .modalClose {
+ font-size: 16px;
+ top: 5px;
+ right: 5px;
+ }
+}

apps/react/src/challenges/feedback-modal/utilities/ClassUtility.js

@@ -0,0 +1,7 @@
+import styles from '../styles.module.css';
+
+export const appendActiveClass = (itemRating, activeRating, usedClasses) => {
+ let className = usedClasses;
+ className = activeRating === itemRating ? `${className} ${styles.active}` : `${className}`;
+ return className;
+};

apps/react/src/challenges/memory-game/components/atoms/Cell.jsx

@@ -0,0 +1,12 @@
+import styles from './atoms.module.css';
+
+export default function Cell({ rowIndex, colIndex, backgroundColor }) {
+ return (
+ <div
+ className={`${styles.cellDiv} cell`}
+ data-row-index={rowIndex}
+ data-col-index={colIndex}
+ style={{ backgroundColor: backgroundColor ?? '#FFF' }}
+ />
+ );
+}

apps/react/src/challenges/memory-game/components/atoms/atoms.module.css

@@ -0,0 +1,4 @@
+.cellDiv {
+ cursor: pointer;
+ border-radius: 8px;
+}