diff --git a/src/plays/motivate-me/MotivateMe.js b/src/plays/motivate-me/MotivateMe.js new file mode 100644 index 000000000..7dfc90812 --- /dev/null +++ b/src/plays/motivate-me/MotivateMe.js @@ -0,0 +1,20 @@ +import { useState } from 'react'; +import { quotes as Quotes } from './data'; +import Header from './components/header'; +import './motivate_me_style.css'; +import Container from './container'; +import PlayHeader from 'common/playlists/PlayHeader'; +function GetMotivated(props) { + const [author, setAuthor] = useState(''); + return ( +
+ +
+
+ setAuthor(value)} Quotes={Quotes} /> +
+
+ ); +} + +export default GetMotivated; diff --git a/src/plays/motivate-me/README.md b/src/plays/motivate-me/README.md new file mode 100644 index 000000000..0ade9efea --- /dev/null +++ b/src/plays/motivate-me/README.md @@ -0,0 +1,23 @@ +30 Seconds of Interviews logo + +## Foreword + +When you hit your low point motivation is what you need. This play is designed to do that. + +## Play Demographic + +- Language: JavaScript +- Level: Intermediate + +## Creator Information + +- User: Hamza Ali +- Github Link: https://github.com/hat52 +- Blog: null + +## What will you learn? + +- Functional Component. +- Hooks +- JavaScript array methods +- JavaScript basic diff --git a/src/plays/motivate-me/assets/background1.jpg b/src/plays/motivate-me/assets/background1.jpg new file mode 100644 index 000000000..9cbf79026 Binary files /dev/null and b/src/plays/motivate-me/assets/background1.jpg differ diff --git a/src/plays/motivate-me/components/cards/index.css b/src/plays/motivate-me/components/cards/index.css new file mode 100644 index 000000000..c044b6c1f --- /dev/null +++ b/src/plays/motivate-me/components/cards/index.css @@ -0,0 +1,41 @@ +.card-container-main{ + position: relative; + width: 100%; + min-height: 100px; + border-radius: 15px; + box-shadow: 0 0.4rem 0.8rem -0.1rem rgb(0 32 128 / 10%), 0 0 0 1px #f0f2f7; + padding: 0 48px; + overflow: hidden; + padding-bottom: 0; + padding-top: 15px; +} +.motivate-me-question__tag { + position: absolute; + top: 0; + right: -65px; + transform: rotate(45deg); + color: #fff; + width: 125px; + height: 40px; +} +.motivate-me-even_div{ + background: linear-gradient(130deg,#FDC5B8,#FDC5B8); +} +.motivate-me-odd_div{ + background: linear-gradient(130deg,#45CCDF,#45CCDF); +} +.motivate-me-quote{ + font-weight: 400; + font-size: 18px; + line-height: 1.25; + text-align: center; +} +.motivate-me-author-name { + position: absolute; + left: 50%; + bottom:5%; + color:#45CCDF; + transform: translateX(-50%); + font-weight: bold; + font-style: italic; +} \ No newline at end of file diff --git a/src/plays/motivate-me/components/cards/index.js b/src/plays/motivate-me/components/cards/index.js new file mode 100644 index 000000000..cb37910ba --- /dev/null +++ b/src/plays/motivate-me/components/cards/index.js @@ -0,0 +1,16 @@ +import React from 'react'; +import './index.css' +export default function Card ({index,author,quote}) { + return( +
+
+

+ {quote} +

+
+ {author} +
+ +
+ ) +} \ No newline at end of file diff --git a/src/plays/motivate-me/components/header/index.css b/src/plays/motivate-me/components/header/index.css new file mode 100644 index 000000000..74bde7608 --- /dev/null +++ b/src/plays/motivate-me/components/header/index.css @@ -0,0 +1,7 @@ +.motivate-me-header { + position: relative; + height: 650px; + width: 100%; + background: url('../../assets/background1.jpg'); + background-size: 100% 100%; +} diff --git a/src/plays/motivate-me/components/header/index.js b/src/plays/motivate-me/components/header/index.js new file mode 100644 index 000000000..c91b8cebe --- /dev/null +++ b/src/plays/motivate-me/components/header/index.js @@ -0,0 +1,4 @@ +import "./index.css" +export default function Header () { + return
+} \ No newline at end of file diff --git a/src/plays/motivate-me/components/search-bar/index.css b/src/plays/motivate-me/components/search-bar/index.css new file mode 100644 index 000000000..e99593baf --- /dev/null +++ b/src/plays/motivate-me/components/search-bar/index.css @@ -0,0 +1,104 @@ +/* search bar */ +.motivate-me-search_bar{ + /* background-color:yellow; */ + /* height: 20px; */ + position:relative; + width: 100%; + } + .motivate-me-Dropdown_items{ + font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif; + color: #51526f; + line-height: 1.6; + box-sizing: inherit; + -webkit-tap-highlight-color: rgba(0,0,0,0); + position: absolute; + background: #fff; + top: 100%; + visibility: hidden; + box-shadow: 0 16px 24px -4px rgba(0,32,128,.2); + list-style-type: none; + padding: 0; + margin: 0; + width: 200px; + border: 1px solid #c8cbf2; + overflow: hidden; + border-radius: 4px; + transition: transform .2s,opacity .2s,visibility .2s; + opacity: 0; + transform: rotateX(-20deg) scale(.97); + will-change: transform; + transform-origin: top left; + } + + .motivate-me-Dropdown_items{ + tab-size: 4; + font-family: -apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica,Arial,sans-serif; + color: #51526f; + line-height: 1.6; + visibility: hidden; + list-style-type: none; + box-sizing: inherit; + -webkit-tap-highlight-color: rgba(0,0,0,0); + } + .motivate-me-Dropdown_button{ + padding: 12px 15px; + border-radius: 0 0 4px 4px; + border-top: none; + font-size: 15px; + width: 100%; + transition: box-shadow .12s; + } + .motivate-me-btn{ + background: #fff; + border: none; + color: #8385aa; + border: 1px solid #c8cbf2; + font-weight: 700; + font-size: 17px; + padding: 8px 16px; + transition: background .12s,color .12s,border-color .12s; + outline: 0; + cursor: pointer; + display: flex; + justify-content: center; + align-items: center; + } + .motivate-me-Dropdown_label{ + display: block; + font-weight: 700; + background: linear-gradient(170deg,#92bbff,#4485f1); + color: #fff; + padding: 6px 20px; + border-radius: 4px 4px 0 0; + text-align: center; + font-size: 15px; + } + .motivate-me-Dropdown:hover .motivate-me-Dropdown_items { + visibility: visible; + opacity: 1; + transform: rotateX(0) scale(1); + } + .motivate-me-Dropdown{ + position: relative; + perspective: 600px; + z-index: 2; + min-height: 90px; + width: 20%; + } + .motivate-me-Dropdown_items li { + padding: 12px 0; + text-align: center; + font-size: 18px; + cursor: pointer; + color: inherit; + transition: background .1s,color .1s; + } + .motivate-me-Dropdown_items li:hover{ + background: linear-gradient(130deg,#FDC5B8,#FDC5B8);; + color: #fff; + } + + .motivate-me-selected_author{ + background: linear-gradient(130deg,#45CCDF,#45CCDF);; + color: #fff !important; + } \ No newline at end of file diff --git a/src/plays/motivate-me/components/search-bar/index.js b/src/plays/motivate-me/components/search-bar/index.js new file mode 100644 index 000000000..ef44f63a7 --- /dev/null +++ b/src/plays/motivate-me/components/search-bar/index.js @@ -0,0 +1,25 @@ +import './index.css' +export default function SearchBar ({Quotes,author,setAuthor}) { + return ( +
+
+
+ +
+ + +
+
+ ) +} \ No newline at end of file diff --git a/src/plays/motivate-me/container/index.js b/src/plays/motivate-me/container/index.js new file mode 100644 index 000000000..87983c37f --- /dev/null +++ b/src/plays/motivate-me/container/index.js @@ -0,0 +1,19 @@ +import Card from '../components/cards'; +import SearchBar from '../components/search-bar'; +import './motivational_quote_card_container_main.css'; +export default function Container({ Quotes, handleAuthorChange, author }) { + return ( +
+ + {author === '' + ? Object.keys(Quotes).map((name) => { + return Quotes[name].map((quote, index) => { + return ; + }); + }) + : Quotes[author].map((quote, index) => { + return ; + })} +
+ ); +} diff --git a/src/plays/motivate-me/container/motivational_quote_card_container_main.css b/src/plays/motivate-me/container/motivational_quote_card_container_main.css new file mode 100644 index 000000000..ac7709226 --- /dev/null +++ b/src/plays/motivate-me/container/motivational_quote_card_container_main.css @@ -0,0 +1,8 @@ +.card-main-container{ + display:flex; + flex-direction: column; + margin-bottom:5%; + padding-top:5%; + gap:25px; + width:60% +} \ No newline at end of file diff --git a/src/plays/motivate-me/cover.png b/src/plays/motivate-me/cover.png new file mode 100644 index 000000000..f862f225d Binary files /dev/null and b/src/plays/motivate-me/cover.png differ diff --git a/src/plays/motivate-me/data.js b/src/plays/motivate-me/data.js new file mode 100644 index 000000000..255153b3d --- /dev/null +++ b/src/plays/motivate-me/data.js @@ -0,0 +1,37 @@ +export const quotes = { + 'Muhammad Ali Jinnah': [ + 'With faith, discipline and selfless devotion to duty, there is nothing worthwhile that you cannot achieve', + 'Think 100 time before you take a decision, but once that decision is taken, stand by it as one man', + 'Failure is a word unknown to me', + 'Expect the best, prepare for the worst', + 'Its not the life that matters, but the courage, fortitude and determination you bring to it' + ], + 'Abraham Lincoln': [ + 'Always bear in mind that your resolution to succeed is more important than any other one thing', + 'My concern is not whether God is on our side; my concern is to be on the side of God, because God is always right', + 'Most folks are as happy as they make their lives to be', + "And at the end, its not the years in your life that count. It's the life in your years" + ], + 'Benjamin Franklin': [ + 'An investment in knowledge pays the best interest', + "Some people die at 25 and aren't buried till 75", + 'By failing to prepare, you are preparing to fail' + ], + 'Winston Churchill': [ + 'Success is not final, failure is not fatal, it is the courage to continue that counts', + 'We make a living by what we get, but we make a life by what we give', + 'Courage is what it takes to stand up and speak; courage is also what it takes to sit down and listen', + 'To improve is to change; to be perfect is to change often' + ], + 'Martin Luther King Jr': [ + 'Love is the only force capable of transforming an enemy to a friend', + "Faith is taking the first step, even if you don't see the whole staircase", + "Darkness can't drive out darkness; only light can do that. Hate cannot drive out hate; only love can do that", + 'Even if I knew that tomorrow the world would go to pieces, I would still plant my apple tree' + ], + 'Dalai Lama': [ + 'Opportunities are like sunrises, If you wait too long, you miss them', + 'Silence is sometimes the best answer', + 'Remember that the bes relationship is the one in which your love for each other exceeds the need for each other.' + ] +}; diff --git a/src/plays/motivate-me/motivate_me_style.css b/src/plays/motivate-me/motivate_me_style.css new file mode 100644 index 000000000..87f3a0c68 --- /dev/null +++ b/src/plays/motivate-me/motivate_me_style.css @@ -0,0 +1,6 @@ +.motivate-me-main { + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; +}