[#2PlaysAMonth]: Dad Jokes (reactplay#942)

* Complete Project added

* CSS file comments added

* Dark Mode added

* Update Readme.md

* Readme update

* Project Video added

* API URL, API KEY & API HOST Variables added

* Optimized cover image added

* .env variables added

* unique class name added

.env.development

@@ -4,4 +4,7 @@ REACT_APP_NHOST_ENDPOINT=graphql
 REACT_APP_PLAY_WEB_SVC=https://api.reactplay.io/.netlify/functions/server
 DISABLE_ESLINT_PLUGIN=true
 REACT_APP_ACTIVITIES_ON=false
-REACT_APP_ACTIVITY_ID=2playsamonth
+REACT_APP_ACTIVITY_ID=2playsamonth
+REACT_APP_DADJOKES_URL=https://jokeapi-v2.p.rapidapi.com/joke/
+REACT_APP_DADJOKES_APIKEY='b71df95c75msha446fab91d0e935p1d0262jsn1d938cb85502'
+REACT_APP_DADJOKES_APIHOST='jokeapi-v2.p.rapidapi.com'

src/plays/dad-jokes/DadJokes.js

@@ -0,0 +1,32 @@
+import PlayHeader from 'common/playlists/PlayHeader';
+import { useState } from 'react';
+import JokeList from './components/jokeList/jokeList';
+import { MdDarkMode, MdLightMode } from 'react-icons/md';
+import './styles.css';
+
+// WARNING: Do not change the entry componenet name
+function DadJokes(props) {
+ const [darkTheme, setDarkTheme] = useState(false);
+
+ return (
+ <>
+ <div className="play-details">
+ <PlayHeader play={props} />
+ <div className="play-details-body dad-jokes-play">
+ {/* --------------------------------Dad Jokes Container-------------------------------- */}
+ <div className={darkTheme ? 'dad-jokes dark' : 'dad-jokes'}>
+ {/* --------------------------------Joke List Component-------------------------------- */}
+ <JokeList darkTheme={darkTheme} setDarkTheme={setDarkTheme} />
+ {/* --------------------------------Theme Buttons Container-------------------------------- */}
+ <div className="theme-buttons">
+ <MdDarkMode className="dark-theme-button" onClick={() => setDarkTheme(true)} />
+ <MdLightMode className="light-theme-button" onClick={() => setDarkTheme(false)} />
+ </div>
+ </div>
+ </div>
+ </div>
+ </>
+ );
+}
+
+export default DadJokes;

src/plays/dad-jokes/Readme.md

@@ -0,0 +1,52 @@
+# Dad Jokes 🔥
+
+### Dad Jokes is a fully functional react app which offers the various categories of jokes to enjoy.
+
+## Features
+
+- ### **This app is fully responsive across all the devices 📱**
+- ### **This app has Dark Mode & Light Mode 💯**
+- ### **User can enjoy different categories of jokes like Coding, Miscellaneous, Puns & Random 🥳**
+- ### **User can upvote and downvote any joke 🚀**
+- ### **Each joke has a Emoticon, changes on the basis of votes 🪄**
+- ### **Animations - Upvotes, Downvotes & Emojis have smooth animations ⚡**
+
+## Play Screenshot
+
+- ### **Light Mode** 
+
+<div align="center">
+ <img src="https://i.postimg.cc/0N2n74Bf/light-mode.png" alt="Dad Jokes Screenshot" width="100%" target="_blank" />
+ <br>
+</div>
+
+- ### **Dark Mode** 
+<div align="center">
+ <img src="https://i.postimg.cc/3JXFV7M1/dark-mode.png" alt="Dad Jokes Screenshot" width="100%" target="_blank" />
+ <br>
+</div>
+
+## Play Demographic
+
+- ### **Language: JavaScript**
+- ### **Level: Intermediate**
+
+## Creator Information
+
+- ### **Bobby Sadhwani** - **[Linkedin](https://www.linkedin.com/in/bobby-sadhwani)**, **[Twitter](https://twitter.com/BOBBY__SADHWANI)**, **[Github](https://github.com/Bobby-coder)**, **[Portfolio](https://bobby-sadhwani.netlify.app)** 
+
+## Video
+
+- ### **[stackstream](https://www.stack-stream.com/v/dad-jokes-app-12)**
+
+## Resources
+
+- ### **[JokeAPI v2](https://rapidapi.com/Sv443/api/jokeapi-v2/)**
+- ### **[React Icons](https://react-icons.github.io/react-icons/)**
+
+### **Happy Coding!** 🤩
+
+
+
+
+

src/plays/dad-jokes/components/categoryModal/CategoryModal.css

@@ -0,0 +1,43 @@
+/*----------------------------Category Modal Container----------------------------*/
+.dad-jokes-play .category-modal-container {
+ position: absolute;
+ top: 50%;
+ left: 50%;
+ transform: translate(-50%, -50%);
+ z-index: 9;
+ width: 100%;
+ height: 100%;
+ background-color: rgba(255, 255, 255, 0.4);
+ -webkit-backdrop-filter: blur(5px);
+ backdrop-filter: blur(5px);
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.dad-jokes-play .category-modal-container.hidden {
+ display: none;
+}
+
+/*----------------------------Category Modal----------------------------*/
+.dad-jokes-play .category-modal {
+ width: 19rem;
+ background-color: #0d0d0d;
+ display: flex;
+ flex-direction: column;
+ border-radius: 0.6rem;
+}
+
+/*----------------------------Single Category----------------------------*/
+.dad-jokes-play .single-category {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+ gap: 0.5rem;
+ border-bottom: 1px solid #eee;
+ padding: 1rem;
+ color: #fff;
+ text-align: center;
+ font-size: 1.5rem;
+ cursor: pointer;
+}

src/plays/dad-jokes/components/categoryModal/CategoryModal.jsx

@@ -0,0 +1,70 @@
+import './CategoryModal.css';
+import { GiLaptop, GiPerspectiveDiceSixFacesRandom } from 'react-icons/gi';
+import { MdOutlineMiscellaneousServices } from 'react-icons/md';
+import { SiFacepunch } from 'react-icons/si';
+
+const CategoryModal = ({ categoryModalToggle, fetchJokes, setCategoryModalToggle, setLoading }) => {
+ return (
+ <>
+ {/* -------------------------------------------Category Modal Container------------------------------------------------------*/}
+ <div
+ className={categoryModalToggle ? 'category-modal-container' : 'hidden'}
+ onClick={() => setCategoryModalToggle(false)}
+ >
+ {/* -------------------------------------------Category Modal------------------------------------------------------*/}
+ <div className="category-modal">
+ {/* -------------------------------------------Single Category (Coding)------------------------------------------------------*/}
+ <div
+ className="single-category"
+ onClick={() => {
+ setLoading(true);
+ fetchJokes('Programming');
+ setCategoryModalToggle(false);
+ }}
+ >
+ <p>Coding</p>
+ <GiLaptop />
+ </div>
+ {/* -------------------------------------------Single Category (Miscellaneous)------------------------------------------------------*/}
+ <div
+ className="single-category"
+ onClick={() => {
+ setLoading(true);
+ fetchJokes('Misc');
+ setCategoryModalToggle(false);
+ }}
+ >
+ <p>Miscellaneous</p>
+ <MdOutlineMiscellaneousServices />
+ </div>
+ {/* -------------------------------------------Single Category (Pun)------------------------------------------------------*/}
+ <div
+ className="single-category"
+ onClick={() => {
+ setLoading(true);
+ fetchJokes('Pun');
+ setCategoryModalToggle(false);
+ }}
+ >
+ <p>Pun</p>
+ <SiFacepunch />
+ </div>
+ {/* -------------------------------------------Single Category (Random)------------------------------------------------------*/}
+ <div
+ className="single-category"
+ onClick={() => {
+ setLoading(true);
+ fetchJokes('Any');
+ setCategoryModalToggle(false);
+ }}
+ >
+ <p>Random</p>
+ <GiPerspectiveDiceSixFacesRandom />
+ </div>
+ </div>
+ </div>
+ </>
+ );
+};
+
+export default CategoryModal;

src/plays/dad-jokes/components/jokeList/jokeList.css

@@ -0,0 +1,152 @@
+/*----------------------------Joke List Container----------------------------*/
+.dad-jokes-play .jokelist {
+ display: flex;
+ width: 80%;
+ height: 80%;
+}
+
+/*----------------------------Sidebar----------------------------*/
+.dad-jokes-play .jokelist-sidebar {
+ background-color: #0d0d0d;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ justify-content: center;
+ width: 30%;
+ text-align: center;
+ z-index: 2;
+}
+
+.dad-jokes-play .dark .jokelist-sidebar{
+ background-color: #eee;
+}
+
+/*----------------------------Sidebar Title----------------------------*/
+.dad-jokes-play .jokelist-sidebar-title h1 {
+ font-size: 3.5rem;
+ margin: 2rem;
+ color: white;
+ font-weight: 300;
+ letter-spacing: 0.6rem;
+}
+
+.dad-jokes-play .jokelist-sidebar-title h1 span {
+ font-weight: 700;
+ letter-spacing: 0;
+}
+
+.dad-jokes-play .dark .jokelist-sidebar-title h1{
+ color: #0d0d0d;
+}
+
+/*----------------------------Sidebar Emoji Image----------------------------*/
+.dad-jokes-play .jokelist-sidebar-emoji {
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.dad-jokes-play .jokelist-sidebar-emoji img {
+ width: 45%;
+ border-radius: 50%;
+ box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.1);
+}
+
+/*----------------------------New Jokes Button----------------------------*/
+.dad-jokes-play .jokelist-sidebar-getmore button {
+ font-size: 1.25rem;
+ border-radius: 2rem;
+ padding: 1rem 1.6rem;
+ color: #0d0d0d;
+ font-weight: 700;
+ margin: 2rem;
+ border: none;
+ word-spacing: 0.2rem;
+ cursor: pointer;
+ transition: 0.8s cubic-bezier(0.2, 1, 0.2, 1);
+ outline: none;
+ background-color: #eee;
+}
+
+.dad-jokes-play .jokelist-sidebar-getmore button:hover {
+ transform: translateY(-2px);
+ box-shadow: 0 15px 30px rgba(0, 0, 0, 0.25);
+}
+
+.dad-jokes-play .dark .jokelist-sidebar-getmore button{
+ color: #eee;
+ background-color: #0d0d0d;
+}
+
+/*----------------------------Joke List----------------------------*/
+.dad-jokes-play .jokelist-jokes {
+ height: 90%;
+ background: white;
+ align-self: center;
+ width: 70%;
+ overflow: scroll;
+ box-shadow: 0 19px 38px rgba(0, 0, 0, 0.3), 0 15px 12px rgba(0, 0, 0, 0.1);
+}
+
+.dad-jokes-play .dark .jokelist-jokes{
+ background-color: #0d0d0d;
+}
+
+/*----------------------------Responsive Styles upto 1024px----------------------------*/
+@media screen and (max-width: 1024px) {
+ .dad-jokes-play .jokelist {
+ width: auto;
+ flex-direction: column;
+ align-items: center;
+ }
+
+ .dad-jokes-play .jokelist-sidebar {
+ flex-direction: row;
+ width: 70%;
+ padding: 1rem 0.5rem;
+ justify-content: space-between;
+ box-shadow: none;
+ }
+
+ .dad-jokes-play .jokelist-sidebar-title h1 {
+ font-size: 0.8rem;
+ margin: 0;
+ letter-spacing: 0.6rem;
+ }
+
+ .dad-jokes-play .jokelist-sidebar-emoji {
+ display: none;
+ }
+
+ .dad-jokes-play .jokelist-sidebar-getmore button {
+ padding: 0.5rem;
+ margin: 0;
+ font-size: 0.8rem;
+ }
+
+ .dad-jokes-play .jokelist-jokes {
+ height: auto;
+ }
+}
+
+/*----------------------------Responsive Styles for 1024px to 1280px----------------------------*/
+@media screen and (min-width: 1024px) and (max-width: 1280px) {
+ .dad-jokes-play .jokelist-sidebar-title h1 {
+ font-size: 3rem;
+ }
+
+ .dad-jokes-play .jokelist-sidebar-getmore button {
+ font-size: 1.2rem;
+ }
+}
+
+/*----------------------------Responsive Styles for 640px to 1024px----------------------------*/
+@media screen and (min-width: 640px) and (max-width: 1024px) {
+ .dad-jokes-play .jokelist-sidebar-title h1 {
+ font-size: 1.6rem;
+ }
+
+ .dad-jokes-play .jokelist-sidebar-getmore button {
+ font-size: 1rem;
+ }
+}