diff --git a/src/common/playlists/playlist.css b/src/common/playlists/playlist.css index 28dc9fc45d..46f134114e 100644 --- a/src/common/playlists/playlist.css +++ b/src/common/playlists/playlist.css @@ -351,7 +351,7 @@ margin-top: 0.4rem; padding-top: 0.4rem; } - .header-rightcol{ + .header-rightcol { max-width: 95%; } diff --git a/src/plays/Selection-Sort-Visualizer/SelectionSortVisualizer.js b/src/plays/Selection-Sort-Visualizer/SelectionSortVisualizer.js index f84f22aeec..951f4380cb 100644 --- a/src/plays/Selection-Sort-Visualizer/SelectionSortVisualizer.js +++ b/src/plays/Selection-Sort-Visualizer/SelectionSortVisualizer.js @@ -78,16 +78,22 @@ function SelectionSortVisualizer() {
setInputValue(e.target.value)} /> - - - + + +
-
+
); } diff --git a/src/plays/Selection-Sort-Visualizer/select.css b/src/plays/Selection-Sort-Visualizer/select.css index a1ad33ff24..aca200d3b2 100644 --- a/src/plays/Selection-Sort-Visualizer/select.css +++ b/src/plays/Selection-Sort-Visualizer/select.css @@ -1,96 +1,96 @@ /* Scoped styles for the Selection Sort Visualizer */ .visualizer-body { - background-color: papayawhip; - } - - .visualizer-container * { - font-size: 16px; - font-weight: bold; - font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif; - } - - .visualizer-head { - margin-top: 20px; - margin-right: 20vw; - margin-left: 20vw; - text-align: center; - font-size: 30px; - background-color: greenyellow; - color: white; - border-radius: 19px; - font-weight: bolder; - } - - .visualizer-input-container { - display: flex; - flex-direction: row; - margin: 2rem 5rem; - } - - .input-field { - width: 180px; - height: 40px; - border: 1px solid black; - border-radius: 5px; - outline: none; - text-align: center; - } - - .button-blue, - .button-green { - width: 100px; - text-align: center; - margin-left: 10px; - border: 1px solid black; - border-radius: 5px; - height: 40px; - color: white; - } - - .button-green { - background-color: #4cd430; - } - - .button-blue { - background-color: #3478d5; - } - - #input-visualizer { - margin: 0 5rem; - margin-top: 2rem; - display: flex; - text-align: center; - } - - #input-visualizer div { - margin-right: 10px; - background-color: #e6852c; - border: 1px solid black; - border-radius: 5px; - padding: 10px; - width: 50px; - color: white; - } - - #output-visualizer { - display: flex; - flex-direction: column; - } - - #output-visualizer div { - margin: 0 5rem; - margin-top: 2rem; - display: flex; - text-align: center; - } - - #output-visualizer div span { - margin-right: 10px; - background-color: #3478d5; - border: 1px solid black; - border-radius: 5px; - padding: 10px; - width: 50px; - color: white; - } - + background-color: papayawhip; +} + +.visualizer-container * { + font-size: 16px; + font-weight: bold; + font-family: 'Lucida Sans', 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, + Verdana, sans-serif; +} + +.visualizer-head { + margin-top: 20px; + margin-right: 20vw; + margin-left: 20vw; + text-align: center; + font-size: 30px; + background-color: greenyellow; + color: white; + border-radius: 19px; + font-weight: bolder; +} + +.visualizer-input-container { + display: flex; + flex-direction: row; + margin: 2rem 5rem; +} + +.input-field { + width: 180px; + height: 40px; + border: 1px solid black; + border-radius: 5px; + outline: none; + text-align: center; +} + +.button-blue, +.button-green { + width: 100px; + text-align: center; + margin-left: 10px; + border: 1px solid black; + border-radius: 5px; + height: 40px; + color: white; +} + +.button-green { + background-color: #4cd430; +} + +.button-blue { + background-color: #3478d5; +} + +#input-visualizer { + margin: 0 5rem; + margin-top: 2rem; + display: flex; + text-align: center; +} + +#input-visualizer div { + margin-right: 10px; + background-color: #e6852c; + border: 1px solid black; + border-radius: 5px; + padding: 10px; + width: 50px; + color: white; +} + +#output-visualizer { + display: flex; + flex-direction: column; +} + +#output-visualizer div { + margin: 0 5rem; + margin-top: 2rem; + display: flex; + text-align: center; +} + +#output-visualizer div span { + margin-right: 10px; + background-color: #3478d5; + border: 1px solid black; + border-radius: 5px; + padding: 10px; + width: 50px; + color: white; +} diff --git a/src/plays/daily-journa/Readme.md b/src/plays/daily-journa/Readme.md index a1bfca02bc..4f59404709 100644 --- a/src/plays/daily-journa/Readme.md +++ b/src/plays/daily-journa/Readme.md @@ -11,8 +11,8 @@ This play is about writing daily entries, categorising them by mood or topic, an - User: GhadaRV - Gihub Link: https://github.com/GhadaRV -- Blog: -- Video: +- Blog: +- Video: ## Implementation Details diff --git a/src/plays/dictionary/Readme.md b/src/plays/dictionary/Readme.md index ad215b77fc..54c581fdff 100644 --- a/src/plays/dictionary/Readme.md +++ b/src/plays/dictionary/Readme.md @@ -14,7 +14,7 @@ Display the definition, pronunciation, antonyms and synonyms of the word ## Implementation Details -This implenmetation uses axios to call a remote API. The remote API returns the meaning as well as synonyms and antonyms of the word entered by the user, which is rendered. +This implenmetation uses axios to call a remote API. The remote API returns the meaning as well as synonyms and antonyms of the word entered by the user, which is rendered. ## Consideration diff --git a/src/plays/pizza-menu/App.tsx b/src/plays/pizza-menu/App.tsx new file mode 100644 index 0000000000..cb3c479bca --- /dev/null +++ b/src/plays/pizza-menu/App.tsx @@ -0,0 +1,17 @@ +import React from 'react'; + +import Header from './components/Header'; +import Menu from './components/Menu'; +import Footer from './components/Footer'; + +const App = () => { + return ( +
+
+ +
+ ); +}; + +export default App; diff --git a/src/plays/pizza-menu/PizzaMenu.tsx b/src/plays/pizza-menu/PizzaMenu.tsx new file mode 100644 index 0000000000..c3302e004e --- /dev/null +++ b/src/plays/pizza-menu/PizzaMenu.tsx @@ -0,0 +1,20 @@ +import React from 'react'; + +import PlayHeader from 'common/playlists/PlayHeader'; +import App from './App'; +import './styles.css'; + +function PizzaMenu(props: any) { + return ( + <> +
+ +
+ +
+
+ + ); +} + +export default PizzaMenu; diff --git a/src/plays/pizza-menu/Readme.md b/src/plays/pizza-menu/Readme.md new file mode 100644 index 0000000000..ea61f24147 --- /dev/null +++ b/src/plays/pizza-menu/Readme.md @@ -0,0 +1,27 @@ +# Pizza Menu + +A pizza menu that showcases a variety of pizzas, including detailed information such as ingredients, prices, and availability. Each pizza listing clearly indicates if it’s currently sold out, helping customers make quick and informed choices. + +## Play Demographic + +- Language: ts +- Level: Beginner + +## Creator Information + +- User: aaqib605 +- Gihub Link: https://github.com/aaqib605 +- Blog: https://hashnode.com/@aaqib605 +- Video: + +## Implementation Details + +Update your implementation idea and details here + +## Consideration + +Update all considerations(if any) + +## Resources + +Update external resources(if any) diff --git a/src/plays/pizza-menu/assets/focaccia.jpg b/src/plays/pizza-menu/assets/focaccia.jpg new file mode 100644 index 0000000000..32bb88363c Binary files /dev/null and b/src/plays/pizza-menu/assets/focaccia.jpg differ diff --git a/src/plays/pizza-menu/assets/funghi.jpg b/src/plays/pizza-menu/assets/funghi.jpg new file mode 100644 index 0000000000..c298a728d4 Binary files /dev/null and b/src/plays/pizza-menu/assets/funghi.jpg differ diff --git a/src/plays/pizza-menu/assets/margherita.jpg b/src/plays/pizza-menu/assets/margherita.jpg new file mode 100644 index 0000000000..12e2484d3d Binary files /dev/null and b/src/plays/pizza-menu/assets/margherita.jpg differ diff --git a/src/plays/pizza-menu/assets/prosciutto.jpg b/src/plays/pizza-menu/assets/prosciutto.jpg new file mode 100644 index 0000000000..09c6cabe8d Binary files /dev/null and b/src/plays/pizza-menu/assets/prosciutto.jpg differ diff --git a/src/plays/pizza-menu/assets/salamino.jpg b/src/plays/pizza-menu/assets/salamino.jpg new file mode 100644 index 0000000000..674a934aa2 Binary files /dev/null and b/src/plays/pizza-menu/assets/salamino.jpg differ diff --git a/src/plays/pizza-menu/assets/spinaci.jpg b/src/plays/pizza-menu/assets/spinaci.jpg new file mode 100644 index 0000000000..b7cf443f43 Binary files /dev/null and b/src/plays/pizza-menu/assets/spinaci.jpg differ diff --git a/src/plays/pizza-menu/components/Footer.tsx b/src/plays/pizza-menu/components/Footer.tsx new file mode 100644 index 0000000000..e7f7e2c6df --- /dev/null +++ b/src/plays/pizza-menu/components/Footer.tsx @@ -0,0 +1,24 @@ +import React from 'react'; + +import Order from './Order'; + +const Footer = () => { + const hour = new Date().getHours(); + const openHour = 12; + const closeHour = 22; + const isOpen = hour >= openHour && hour <= closeHour; + + return ( + + ); +}; + +export default Footer; diff --git a/src/plays/pizza-menu/components/Header.tsx b/src/plays/pizza-menu/components/Header.tsx new file mode 100644 index 0000000000..0a58c15b64 --- /dev/null +++ b/src/plays/pizza-menu/components/Header.tsx @@ -0,0 +1,11 @@ +import React from 'react'; + +const Header = () => { + return ( +
+

Fast React Pizza Co.

+
+ ); +}; + +export default Header; diff --git a/src/plays/pizza-menu/components/Menu.tsx b/src/plays/pizza-menu/components/Menu.tsx new file mode 100644 index 0000000000..7c9274aac2 --- /dev/null +++ b/src/plays/pizza-menu/components/Menu.tsx @@ -0,0 +1,81 @@ +import React from 'react'; + +import Pizza from './Pizza'; +import focaccia from '../assets/focaccia.jpg'; +import margherita from '../assets/margherita.jpg'; +import spinaci from '../assets/spinaci.jpg'; +import funghi from '../assets/funghi.jpg'; +import salamino from '../assets/salamino.jpg'; +import prosciutto from '../assets/prosciutto.jpg'; + +const Menu = () => { + const pizzaData = [ + { + name: 'Focaccia', + ingredients: 'Bread with italian olive oil and rosemary', + price: 6, + photoName: focaccia, + soldOut: false + }, + { + name: 'Pizza Margherita', + ingredients: 'Tomato and mozarella', + price: 10, + photoName: margherita, + soldOut: false + }, + { + name: 'Pizza Spinaci', + ingredients: 'Tomato, mozarella, spinach, and ricotta cheese', + price: 12, + photoName: spinaci, + soldOut: false + }, + { + name: 'Pizza Funghi', + ingredients: 'Tomato, mozarella, mushrooms, and onion', + price: 12, + photoName: funghi, + soldOut: false + }, + { + name: 'Pizza Salamino', + ingredients: 'Tomato, mozarella, and pepperoni', + price: 15, + photoName: salamino, + soldOut: true + }, + { + name: 'Pizza Prosciutto', + ingredients: 'Tomato, mozarella, ham, arugula, and burrata cheese', + price: 18, + photoName: prosciutto, + soldOut: false + } + ]; + + return ( +
+

Our menu

+ + {pizzaData.length > 0 ? ( + <> +

+ Authentic Italian cuisine. 6 creative dishes to choose from. All from our stone oven, + all organic, all delicious. +

+ + + + ) : ( +

We're still working on our menu. Please come back later :)

+ )} +
+ ); +}; + +export default Menu; diff --git a/src/plays/pizza-menu/components/Order.tsx b/src/plays/pizza-menu/components/Order.tsx new file mode 100644 index 0000000000..8e4ec50c74 --- /dev/null +++ b/src/plays/pizza-menu/components/Order.tsx @@ -0,0 +1,19 @@ +import React from 'react'; + +interface OrderProps { + closeHour: number; + openHour: number; +} + +const Order: React.FC = ({ closeHour, openHour }) => { + return ( +
+

+ We're open from {openHour}:00 to {closeHour}:00. Come visit us or order online. +

+ +
+ ); +}; + +export default Order; diff --git a/src/plays/pizza-menu/components/Pizza.tsx b/src/plays/pizza-menu/components/Pizza.tsx new file mode 100644 index 0000000000..c4a6fbbe0c --- /dev/null +++ b/src/plays/pizza-menu/components/Pizza.tsx @@ -0,0 +1,26 @@ +import React from 'react'; + +interface PizzaProps { + pizzaObj: { + name: string; + ingredients: string; + price: number; + photoName: string; + soldOut: boolean; + }; +} + +const Pizza: React.FC = ({ pizzaObj }) => { + return ( +
  • + {pizzaObj.name} +
    +

    {pizzaObj.name}

    +

    {pizzaObj.ingredients}

    + {pizzaObj.soldOut ? 'SOLD OUT' : `$${pizzaObj.price}`} +
    +
    • + ); +}; + +export default Pizza; diff --git a/src/plays/pizza-menu/cover.png b/src/plays/pizza-menu/cover.png new file mode 100644 index 0000000000..d6b15455b3 Binary files /dev/null and b/src/plays/pizza-menu/cover.png differ diff --git a/src/plays/pizza-menu/styles.css b/src/plays/pizza-menu/styles.css new file mode 100644 index 0000000000..a7ab844e3e --- /dev/null +++ b/src/plays/pizza-menu/styles.css @@ -0,0 +1,197 @@ +@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono:ital,wght@0,300;0,400;0,500;1,300&display=swap'); + +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html { + font-size: 62.5%; +} + +.pizza-menu_body { + font-family: 'Roboto Mono', sans-serif; + color: #252525; + font-weight: 400; + background-color: #f7f2e9; + border-bottom: 1.6rem solid #edc84b; + min-height: 100vh; + padding: 3.2rem; + padding-bottom: 6rem; +} + +.pizza-menu_container { + max-width: 80rem; + margin: 0 auto; + + display: flex; + flex-direction: column; + align-items: center; + gap: 4.8rem; +} + +/* *************** */ + +.pizza-menu_logo-title { + color: red; + font-size: 48px; + text-transform: uppercase; +} + +.pizza-menu_header { + align-self: stretch; +} + +.pizza-menu_header h1 { + color: #edc84b; + text-transform: uppercase; + text-align: center; + font-size: 5.2rem; + font-weight: 300; + letter-spacing: 3px; + position: relative; + width: 100%; + display: block; +} + +.pizza-menu_header h1::before, +.pizza-menu_header h1::after { + display: block; + content: ''; + height: 3px; + width: 4rem; + background-color: #edc84b; + position: absolute; + top: calc(50% - 1px); +} + +.pizza-menu_header h1::before { + left: 0; +} + +.pizza-menu_header h1::after { + right: 0; +} + +/* *************** */ + +.pizza-menu_menu { + display: flex; + flex-direction: column; + align-items: center; + gap: 4rem; +} + +.pizza-menu_menu h2 { + display: inline-block; + padding: 1rem 0; + border-top: 2px solid currentColor; + border-bottom: 2px solid currentColor; + font-size: 2.4rem; + text-transform: uppercase; + letter-spacing: 3px; + font-weight: 500; +} + +.pizza-menu_menu > p { + font-size: 1.5rem; + text-align: center; + line-height: 1.6; + width: 80%; +} + +.pizza-menu_pizzas { + list-style: none; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 4.8rem; +} + +.pizza-menu_pizza { + display: flex; + gap: 3.2rem; +} + +.pizza-menu_pizza img { + width: 12rem; + aspect-ratio: 1; + align-self: start; +} + +.pizza-menu_pizza div { + display: flex; + flex-direction: column; + gap: 0.8rem; + padding: 0.4rem 0; +} + +.pizza-menu_pizza h3 { + font-size: 2rem; + font-weight: 400; +} + +.pizza-menu_pizza p { + font-size: 1.4rem; + font-weight: 300; + font-style: italic; + margin-bottom: auto; +} + +.pizza-menu_pizza span { + display: block; + font-size: 1.6rem; +} + +.pizza-menu_pizza.pizza-menu_sold-out { + color: #888; +} + +.pizza-menu_pizza.pizza-menu_sold-out img { + filter: grayscale(); + opacity: 0.8; +} + +/* *************** */ + +.pizza-menu_footer { + font-size: 1.4rem; + text-align: center; +} + +.pizza-menu_order { + display: flex; + flex-direction: column; + align-items: center; + gap: 2.4rem; +} + +.pizza-menu_btn { + color: inherit; + font-family: inherit; + border: none; + font-size: 1.4rem; + font-weight: 500; + background-color: #edc84b; + padding: 1.4rem 3.2rem; + cursor: pointer; + transition: all 0.2s; +} + +.pizza-menu_btn:hover { + background-color: #e9bb24; +} + +/* *************** */ + +@media (max-width: 768px) { + .pizza-menu_pizzas { + grid-template-columns: 1fr; + } +} + +@media (max-width: 425px) { + .pizza-menu_menu > p { + width: 95%; + } +} diff --git a/src/plays/typing-speed-test/readme.md b/src/plays/typing-speed-test/readme.md index cb102d7e66..d7209ee9f9 100644 --- a/src/plays/typing-speed-test/readme.md +++ b/src/plays/typing-speed-test/readme.md @@ -39,6 +39,7 @@ The implementation of the Typing Speed Test project is quite simple. - The `generateText()` function in `utils/index.js` is responsible for generating the typing text. Whenever it gets called, it returns a paragraph of 60 random words, so when the `TypingTest` component is rendered on the UI, it calls the `generateText()` function. - There are two other components in `TypingTest`: + - **Timer**: As the name suggests, it is responsible for a 60-second countdown. It accepts a single prop to control the timer functionality. - **Stats**: The stats component is responsible for rendering WPM (Words Per Minute), CPM (Characters Per Minute), and accuracy statistics. @@ -52,7 +53,6 @@ The implementation of the Typing Speed Test project is quite simple. - Additionally, there is a `ResultModal` component that opens when the time is up or the user finishes typing all the words. This modal renders the statistics of the typing session, providing a summary of the user’s performance. - ## Contributing First of all thanks for wanting to contribute! To start contributing to this play, please go through the [Contribution guidelines of ReactPlay](https://github.com/reactplay/react-play/blob/main/CONTRIBUTING.md).