[#2PlaysAMonth] Digits Delight (reactplay#1016)

* Added a new play, tube 2 tunes * Added a cover image * Added a Readme file for it. * Fixed typo, added recording video link and event tag. * Added new play digits-delight * Added components for digits delight * Added modal component * Added images for category component * Cover.png added * Added Readme file for digits delight * Changed the numbers API. * Refactored code and resolved all commented issues. --------- Co-authored-by: Sachin Chaurasiya <[email protected]> Co-authored-by: Koustov <[email protected]>
villAsh · Mar 5, 2023 · 4aff3df · 4aff3df
1 parent cdc9126
commit 4aff3df
Show file tree

Hide file tree

Showing 18 changed files with 1,029 additions and 0 deletions.
diff --git a/src/plays/digital-delight/DigitsDelight.js b/src/plays/digital-delight/DigitsDelight.js
@@ -0,0 +1,60 @@
+import PlayHeader from 'common/playlists/PlayHeader';
+import Modal from './components/Modal';
+import Random from './components/Random';
+import CategoryFact from './components/CategoryFact';
+import TextFact from './components/TextFact';
+import RealTitle from './components/Title';
+import './styles.css';
+import { useState } from 'react';
+
+// WARNING: Do not change the entry componenet name
+function DigitsDelight(props) {
+ // Your Code Start below.
+
+ const [showModal, setShowModal] = useState(false);
+
+ const toggle = () => setShowModal((prev) => !prev);
+
+ return (
+ <>
+ <div className="play-details">
+ <PlayHeader play={props} />
+ <div className="play-details-body">
+ {/* Your Code Starts Here */}
+ <div>
+ <div className="digits-delight-container">
+ <div className="digits-title-container">
+ <RealTitle />
+ <div className="digits-delight-modal-button-container">
+ <button className="digits-delight-show-modal" onClick={toggle}>
+ Give me a Tour
+ </button>
+ </div>
+ </div>
+
+ <div className="digits-facts-container">
+ <div className="digits-random-facts">
+ <Random />
+ </div>
+
+ <div className="digits-text-facts">
+ <TextFact />
+ </div>
+ </div>
+
+ <div className="digits-delight-category-container">
+ <div className="digits-dellight-category-facts">
+ <CategoryFact />
+ </div>
+ </div>
+ </div>
+ </div>
+ <Modal showModal={showModal} toggle={toggle} />
+ {/* Your Code Ends Here */}
+ </div>
+ </div>
+ </>
+ );
+}
+
+export default DigitsDelight;
diff --git a/src/plays/digital-delight/Readme.md b/src/plays/digital-delight/Readme.md
@@ -0,0 +1,29 @@
+# Number Facts
+
+Get interesting facts about numbers.
+
+## Play Demographic
+
+- Language: JavaScript
+- Level: Intermidiate
+
+## Creator Information
+
+- User: Shivam-Katare
+- Gihub Link: https://github.com/Shivam-Katare
+- Blog: 
+- Video: 
+
+## Implementation Details
+
+Number Facts is a React app that uses an API to get random facts about numbers. The user can type any number from 0 to 999 and get a fact about it.
+
+## Consideration
+
+This app is designed for educational purposes. 
+
+## Resources
+
+- [React](https://reactjs.org/docs/getting-started.html).
+- [Numbers API](https://numbersapi.com/#42)
+- [Axios](https://axios-http.com/docs/intro)
diff --git a/src/plays/digital-delight/components/CategoryFact.js b/src/plays/digital-delight/components/CategoryFact.js
@@ -0,0 +1,106 @@
+import React, { useState } from 'react';
+import axios from 'axios';
+import MathImage from '../components/images/math.png';
+import YearImage from '../components/images/year.png';
+import DateImage from '../components/images/date.png';
+import { CategoryFacts } from './DigitsDelightsConstant';
+import './Categoryfact.css';
+
+function CategoryFact() {
+ const [fact, setFact] = useState(CategoryFacts);
+ const [error, setError] = useState('');
+ const [selectedVoice, setSelectedVoice] = useState('Zira');
+ const [showSelecter, setShowSelecter] = useState(false);
+ const speechHandler = (msg) => {
+ let voices = [];
+ window.speechSynthesis.onvoiceschanged = () => {
+ voices = window.speechSynthesis.getVoices();
+ };
+ // This for loop helps to give the selected voice
+ for (let i = 0; i < voices.length; i++) {
+ if (voices[i].name === selectedVoice) {
+ msg.voice = voices[i];
+ }
+ }
+ window.speechSynthesis.cancel();
+ window.speechSynthesis.speak(msg);
+ };
+
+ const getFact = async (type) => {
+ const options = {
+ method: 'GET',
+ url: `https://numbersapi.p.rapidapi.com/random/${type}`,
+ params: { fragment: 'true', json: 'true' },
+ headers: {
+ 'X-RapidAPI-Key': process.env.REACT_APP_DIGITSDELIGHT_APIKEY,
+ 'X-RapidAPI-Host': 'numbersapi.p.rapidapi.com'
+ }
+ };
+ try {
+ const { data } = await axios.request(options);
+ setFact(data.number + ' is ' + data.text);
+ speechHandler(new SpeechSynthesisUtterance(data.number + ' is ' + data.text));
+ setShowSelecter(true);
+ } catch (error) {
+ setError('Error fetching fact. Please try again later.');
+ }
+ };
+
+ const handleVoiceChange = ({ target }) => setSelectedVoice(target.value);
+
+ return (
+ <div>
+ <div className="digits-delight-voice-selection-container" style={{ marginTop: '2px' }}>
+ <select
+ className={`digits-voice-select ${showSelecter ? 'opacity-1' : 'opacity-0'}`}
+ placeholder="Select the voices"
+ value={selectedVoice}
+ onChange={handleVoiceChange}
+ >
+ {window.speechSynthesis.getVoices().map((voice) => (
+ <option key={voice.name} value={voice.name}>
+ {voice.name}
+ </option>
+ ))}
+ </select>
+ </div>
+
+ <div className="digits-category-facts">
+ {fact && <p className="get-digits-facts">{fact}</p>}
+ </div>
+ <div>
+ <ul className="thumb">
+ <li>
+ <button
+ className="randomButton tooltip math"
+ tooltip-text="Random Math Facts"
+ onClick={() => getFact('math')}
+ >
+ <img src={MathImage} />
+ </button>
+ </li>
+ <li>
+ <button
+ className="randomButton tooltip date"
+ tooltip-text="Facts By Date"
+ onClick={() => getFact('date')}
+ >
+ <img src={DateImage} />
+ </button>
+ </li>
+ <li>
+ <button
+ className="randomButton tooltip year"
+ tooltip-text="Facts By Year"
+ onClick={() => getFact('year')}
+ >
+ <img src={YearImage} />
+ </button>
+ </li>
+ </ul>
+ </div>
+ </div>
+ );
+}
+
+export default CategoryFact;
diff --git a/src/plays/digital-delight/components/Categoryfact.css b/src/plays/digital-delight/components/Categoryfact.css
@@ -0,0 +1,142 @@
+@import url('https://fonts.googleapis.com/css2?family=Golos+Text&display=swap');
+
+.thumb {
+ display: flex;
+ align-items: flex-start;
+ justify-content: center;
+ flex-wrap: nowrap;
+ flex-direction: row;
+}
+
+.thumb li {
+ list-style: none;
+ display: inline-block;
+ margin: 0 20px;
+ cursor: pointer;
+ transition: 0.6s;
+}
+
+.thumb li:hover {
+ transform: translateY(-15px);
+}
+
+.thumb li img {
+ max-width: 60px;
+}
+
+.randomButton {
+ background: transparent;
+ border: none;
+}
+
+.randomFacts-div {
+ position: relative;
+ left: -25rem;
+ top: 10rem;
+}
+
+.digits-category-facts {
+ margin-top: 5rem;
+ text-align: center;
+ display: flex;
+ flex-direction: row;
+ flex-wrap: nowrap;
+ justify-content: center;
+ align-items: center;
+}
+
+.digits-delight-voice-selection-container {
+ transition: 0.5s;
+ display: flex;
+ justify-content: flex-start;
+ align-items: center;
+ font-size: 10px;
+ font-weight: 700;
+ white-space: nowrap;
+ -webkit-user-select: none;
+ user-select: none;
+ color: rgba(0, 0, 0, 0.1);
+}
+
+.digits-voice-select {
+ border: 2px solid black;
+ border-radius: 3px;
+ margin-left: 1rem;
+ margin-top: 1rem;
+ position: relative;
+ padding: 10px;
+ border: none;
+ border-right: 10px solid #fff;
+ outline: none;
+ width: 200px;
+ border-radius: 4px;
+ box-shadow: 0 15px 25px rgba(0, 0, 0, 0.1);
+}
+
+.get-digits-facts {
+ padding: 1px 23px;
+ text-align: center;
+ width: 45rem;
+ font-family: 'Golos Text', sans-serif;
+}
+
+.tooltip {
+ position: relative;
+ font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
+ color: rgb(106, 101, 94);
+ font-size: 18px;
+ padding: 5px;
+ color: rgb(0, 0, 0);
+}
+
+.tooltip:hover::before {
+ opacity: 1;
+ visibility: visible;
+ transition: all 0.3s ease;
+}
+
+.tooltip::before {
+ position: absolute;
+ opacity: 0;
+ visibility: hidden;
+ min-width: max-content;
+ background: rgb(27, 25, 25);
+ color: #FFF;
+ padding: 2px 6px;
+ border-radius: 4px;
+ font-size: 15px;
+ content: attr(tooltip-text);
+ transition: all 0.3s ease;
+}
+
+.tooltip.math::before {
+ right: 100%;
+ top: 50%;
+ transform: translateY(-50%);
+}
+
+.tooltip.date::before {
+ bottom: 100%;
+ left: 50%;
+ transform: translateX(-50%);
+}
+
+.tooltip.year::before {
+ left: 100%;
+ top: 50%;
+ transform: translateY(-50%);
+}
+
+@media(max-width: 487px) {
+ .tooltip.year::before {
+ left: 30%;
+ transform: translateX(-59%);
+ transform: translate3d(-40px, -61px, 10px);
+ }
+
+ .tooltip.math::before {
+ right: -40%;
+ top: 3%;
+ transform: translateY(-50%);
+ }
+}
diff --git a/src/plays/digital-delight/components/DigitsDelightsConstant.js b/src/plays/digital-delight/components/DigitsDelightsConstant.js
@@ -0,0 +1,31 @@
+export const structuringData = [
+ {
+ info: 'Digits Delight is an app, that tells facts about numbers. You can read and listen facts about numbers.'
+ },
+ {
+ info: 'This app is divided into 3 categories.'
+ },
+ {
+ info: 'The 1st one is the random fact section, where, on clicking on the random button, you will get 3 random facts about numbers.'
+ },
+ {
+ info: 'The 2nd one is Number Fact Section, where you will enter the number, and on clicking on the `get facts` button, you will get the fact about that number.'
+ },
+ {
+ info: 'In the 3rd and the last category, you will get on scrolling a bit. Here, you can listen to facts by different categories and you can listen to them by choosing different voices.'
+ },
+ {
+ info: 'There are infinite numbers present in the world, so there can be a possibility to not have a fact about it so for that, this app will roundd off that number and tells you the fact about that number.'
+ },
+ {
+ info: 'Now, Enjoy our app!.'
+ }
+];
+
+export const Randomfacts = [
+ 'Discover fascinating number facts with just one click!',
+ 'Enter any number and uncover fun and educational facts about it.',
+ 'Keep scrolling to find even more intriguing number trivia to amaze your friends with!'
+];
+
+export const CategoryFacts = ['Click on buttons below to get facts by category'];