diff --git a/src/.DS_Store b/src/.DS_Store new file mode 100644 index 00000000..5008ddfc Binary files /dev/null and b/src/.DS_Store differ diff --git a/src/App.js b/src/App.js new file mode 100644 index 00000000..7b441be7 --- /dev/null +++ b/src/App.js @@ -0,0 +1,25 @@ +import React from "react"; +import InputSpirit from "./Components/InputSpirit.js"; +import Detail from "./Components/Detail.js"; +import TheList from "./Components/TheList.js"; +import { BrowserRouter as Router, Switch, Route } from "react-router-dom"; +import { Provider } from "react-redux"; +import store from "./Components/redux/drinkStore"; + +const App = () => { + return ( + + +
+ + + + + +
+ + + ); +}; + +export default App; diff --git a/src/Components/CubeView.css b/src/Components/CubeView.css new file mode 100644 index 00000000..f74acb1a --- /dev/null +++ b/src/Components/CubeView.css @@ -0,0 +1,50 @@ +.wrapper { + position: fixed; + top: 300px; + right: 400px; + perspective: 1500px; + display: block; + width: 1px; + margin: 100px; +} +.area { + position: static; + transform-style: preserve-3d; + animation-name: rotate; + animation-duration: 35s; + animation-timing-function: linear; + animation-iteration-count: 2; +} +@keyframes rotate { + 0% { + transform: rotate3d(0, 0, 0, 0); + } + 100% { + transform: rotate3d(0, 1, 0, 360deg); + } +} +.front { + transform: translateX(-200px) translateY(-200px) translateZ(200px); +} +.back { + transform: translateX(-200px) translateY(-200px) translateZ(-200px); +} +.right { + transform: translateY(-200px) rotateY(90deg); +} +.left { + transform: translateY(-200px) translateX(-400px) rotateY(90deg); +} +.top { + transform: translateX(-200px) translateY(-400px) rotateX(90deg); +} +.bottom { + transform: translateX(-200px) rotateX(90deg); +} + +.drinkpic { + display: block; + margin-left: auto; + margin-right: auto; + width: 100%; +} diff --git a/src/Components/CubeView.js b/src/Components/CubeView.js new file mode 100644 index 00000000..e157b1d8 --- /dev/null +++ b/src/Components/CubeView.js @@ -0,0 +1,38 @@ +/* eslint-disable react/prop-types */ +import React from "react"; +import "./CubeView.css"; + +const CubeView = ({ strDrinkThumb }) => { + const mystyle = { + position: "absolute", + width: "400px", + height: "400px", + }; + + return ( +
+
+
+ front cube img +
+
+ back cube img +
+
+ right cube img +
+
+ left cube img +
+
+ top cube img +
+
+ bottom cube img +
+
+
+ ); +}; + +export default CubeView; diff --git a/src/Components/CubeView.module.css b/src/Components/CubeView.module.css new file mode 100644 index 00000000..f74acb1a --- /dev/null +++ b/src/Components/CubeView.module.css @@ -0,0 +1,50 @@ +.wrapper { + position: fixed; + top: 300px; + right: 400px; + perspective: 1500px; + display: block; + width: 1px; + margin: 100px; +} +.area { + position: static; + transform-style: preserve-3d; + animation-name: rotate; + animation-duration: 35s; + animation-timing-function: linear; + animation-iteration-count: 2; +} +@keyframes rotate { + 0% { + transform: rotate3d(0, 0, 0, 0); + } + 100% { + transform: rotate3d(0, 1, 0, 360deg); + } +} +.front { + transform: translateX(-200px) translateY(-200px) translateZ(200px); +} +.back { + transform: translateX(-200px) translateY(-200px) translateZ(-200px); +} +.right { + transform: translateY(-200px) rotateY(90deg); +} +.left { + transform: translateY(-200px) translateX(-400px) rotateY(90deg); +} +.top { + transform: translateX(-200px) translateY(-400px) rotateX(90deg); +} +.bottom { + transform: translateX(-200px) rotateX(90deg); +} + +.drinkpic { + display: block; + margin-left: auto; + margin-right: auto; + width: 100%; +} diff --git a/src/Components/Detail.js b/src/Components/Detail.js new file mode 100644 index 00000000..56ca69c1 --- /dev/null +++ b/src/Components/Detail.js @@ -0,0 +1,41 @@ +import React from "react"; +import useFetchId from "./services/useFetchId.js"; +import Pic from "./Pic.js"; +import LogoNav from "./LogoNav"; +// eslint-disable-next-line react/prop-types +const Detail = ({ match }) => { + const { details } = useFetchId(match.params.id); + const mix = []; + + for (let i = 1; i < 16; i++) { + if (details[`strMeasure${i}`] == null) { + break; + } + mix.push( + + ); + } + + let cTail = details.strDrink; + document.title = `${cTail} Detail Page`; + + return ( +
+ +
+

{details.strDrink}

+

{details.strGlass}

+
+
{mix}
+
+

{details.strInstructions}

+
+
+ ); +}; + +export default Detail; diff --git a/src/Components/InputSpirit.css b/src/Components/InputSpirit.css new file mode 100644 index 00000000..e778acb6 --- /dev/null +++ b/src/Components/InputSpirit.css @@ -0,0 +1,191 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +html, +body { + width: 100%; + height: 100%; +} + +body { + background: white; +} + +.cocktail1 { + position: absolute; + width: 0; + height: 0; + border-left: 135px solid transparent; + border-right: 135px solid transparent; + border-top: 270px solid red; + top: -200px; + right: 0; + bottom: 0; + left: 65px; + filter: drop-shadow(0 0 30px pink); +} + +.cocktail1:after { + content: ""; + background: red; + height: 250px; + position: absolute; + width: 18px; + top: -35px; + left: -9px; +} + +.cocktail1:before { + content: ""; + position: absolute; + border-bottom: 45px solid red; + border-left: 25px solid transparent; + border-right: 25px solid transparent; + height: 0; + width: 145px; + top: 210px; + left: -100px; +} + +.cocktail2 { + position: absolute; + width: 0; + height: 0; + border-top: 120px solid transparent; + border-left: 240px solid red; + border-bottom: 120px solid transparent; + top: -200px; + left: -25px; +} + +.cocktail2:after { + content: ""; + background: red; + height: 330px; + position: absolute; + width: 18px; + transform: rotate(34deg); + right: 263px; + bottom: -332px; +} + +.cocktail2:before { + content: ""; + position: absolute; + border-bottom: 45px solid red; + border-left: 25px solid transparent; + border-right: 25px solid transparent; + height: 0; + width: 145px; + left: -450px; + top: 280px; + transform: rotate(34deg); +} +.container { + position: absolute; + margin: auto; + top: 0; + left: 0; + right: 0; + bottom: 0; + width: 300px; + height: 100px; +} + +button { + position: absolute; + margin: auto; + top: 0; + right: 0; + bottom: 0; + left: 0; + width: 180px; + height: 0px; + border-radius: 25px; + cursor: pointer; + z-index: 10; + font-family: times; + font-weight: bolder; + font-size: 7mm; + color: rgb(193, 28, 235); + border-color: pink; +} + +@keyframes pulse { + 0% { + box-shadow: 2px 2px 5px pink; + border-style: inset; + } + 100% { + box-shadow: 10px 10px 15px pink; + border-style: outset; + } +} + +.menu { + background: wheat; + animation: pulse 1000ms infinite; +} + +.clickedMenu { + background: rgba(218, 217, 188, 0.849); +} + +.menuMake { + position: relative; + display: inline-block; + z-index: 2; + top: 0.5in; +} +.linkCon { + display: none; + position: absolute; + background-color: rgb(179, 237, 245); + z-index: 4; + min-width: 160px; + left: 11px; + overflow: scroll; + height: 2.7in; + top: 0.4in; +} + +.linkCon::-webkit-scrollbar { + width: 7px; +} + +.linkCon::-webkit-scrollbar-track { + background: fuchsia; +} + +.linkCon::-webkit-scrollbar-thumb { + background: white; +} + +ul { + list-style-type: none; +} + +a { + text-decoration: none; + color: red; +} + +.linkCon a { + display: block; + min-width: 160px; + padding: 12px 16px; +} + +.linkCon a:hover, +a:focus-within { + background-color: teal; + color: azure; +} + +.menuMake:focus-within .linkCon { + display: block; + border-radius: 40px; +} diff --git a/src/Components/InputSpirit.js b/src/Components/InputSpirit.js new file mode 100644 index 00000000..b3f1434c --- /dev/null +++ b/src/Components/InputSpirit.js @@ -0,0 +1,46 @@ +import React, { useState } from "react"; +import "./InputSpirit.css"; +import { FlapperSpinner } from "react-spinners-kit"; +import { connect } from "react-redux"; +import { Link } from "react-router-dom"; +import SpiritLogo from "./SpiritLogo"; + +// eslint-disable-next-line react/prop-types +const InputSpirit = ({ drink }) => { + const [search] = useState(drink.spirits); + document.title = "Spirit Tail Home Page"; + + const mainMenu = search.map((name) => ( + +
  • {name}
    • + + )); + + const spin = drink.loading; + + return ( +
    + +
    +
    + +
    + + + +
      {mainMenu}
    +     +
    +
    + ); +}; + +const mapStateToProps = (state) => { + return { + drink: state, + }; +}; + +export default connect(mapStateToProps)(InputSpirit); diff --git a/src/Components/ListView.css b/src/Components/ListView.css new file mode 100644 index 00000000..9270e0dc --- /dev/null +++ b/src/Components/ListView.css @@ -0,0 +1,6 @@ +img { + border: none; + border-radius: 20px; + padding: 5px; + width: 200px; +} diff --git a/src/Components/ListView.js b/src/Components/ListView.js new file mode 100644 index 00000000..5f9d377b --- /dev/null +++ b/src/Components/ListView.js @@ -0,0 +1,13 @@ +import React, { Fragment } from "react"; +import "./ListView.css"; +// eslint-disable-next-line react/prop-types +const ListView = ({ strDrinkThumb, strDrink }) => { + return ( + + cocktail img +

    {strDrink}

    +     + ); +}; + +export default ListView; diff --git a/src/Components/LogoNav.css b/src/Components/LogoNav.css new file mode 100644 index 00000000..3a992860 --- /dev/null +++ b/src/Components/LogoNav.css @@ -0,0 +1,17 @@ +.logohead { + position: fixed; + display: block; + font-family: Arial, Helvetica, sans-serif; + width: 100%; + font-size: 25px; + z-index: 2; + background-color: fuchsia; + border-bottom: black; + border-style: none; + box-shadow: 5px 0px 10px fuchsia; + height: 2em; +} +.h1logo { + color: white; + text-shadow: 2px 0px 22px rgb(245, 245, 244); +} diff --git a/src/Components/LogoNav.js b/src/Components/LogoNav.js new file mode 100644 index 00000000..35cf91c1 --- /dev/null +++ b/src/Components/LogoNav.js @@ -0,0 +1,15 @@ +import React from "react"; +import { Link } from "react-router-dom"; +import "./LogoNav.css"; + +const LogoNav = () => { + return ( + +
    +

    SpiritTail

    +
    + + ); +}; + +export default LogoNav; diff --git a/src/Components/Pic.js b/src/Components/Pic.js new file mode 100644 index 00000000..e5083b00 --- /dev/null +++ b/src/Components/Pic.js @@ -0,0 +1,21 @@ +import React, { Fragment } from "react"; + +const Pic = (ingredient) => { + const ingred = ingredient.ingredient; + const measure = ingredient.measure; + + return ( + + picture of ingredient +

    + {" "} + {measure} : {ingred}{" "} +

    +     + ); +}; + +export default Pic; diff --git a/src/Components/SpiritLogo.css b/src/Components/SpiritLogo.css new file mode 100644 index 00000000..b294f3e2 --- /dev/null +++ b/src/Components/SpiritLogo.css @@ -0,0 +1,61 @@ +header { + margin: 0; + padding: 0; + color: white; + font-size: 10em; + position: absolute; +} +header span { + display: table-cell; + margin: 0; + padding: 0; + animation: animate 2.5s linear infinite; +} +header span:nth-child(1) { + animation-delay: 0s; +} +header span:nth-child(2) { + animation-delay: 0.25s; +} +header span:nth-child(3) { + animation-delay: 0.5s; +} +header span:nth-child(4)four { + animation-delay: 0.75s; +} +header span:nth-child(5).five { + animation-delay: 1s; +} +.header span:nth-child(6)six { + animation-delay: 1.25s; +} +header span:nth-child(7).seven { + animation-delay: 1.5s; +} +header span:nth-child(8).eight { + animation-delay: 1.75s; +} +header span:nth-child(9).nine { + animation-delay: 2s; +} +header span:nth-child(10)ten { + animation-delay: 2.5s; +} + +@keyframes animate { + 0%, + 100% { + color: rgb(31, 17, 226); + filter: blur(2px); + text-shadow: 0 0 10px rgb(193, 28, 235), 0 0 20px rgb(193, 28, 235), + 0 0 40px rgb(193, 28, 235), 0 0 80px rgb(193, 28, 235), + 0 0 120px rgb(193, 28, 235), 0 0 200px rgb(193, 28, 235), + 0 0 300px rgb(193, 28, 235), 0 0 400px rgb(193, 28, 235); + } + 5%, + 95% { + color: white; + filter: blur(0px); + text-shadow: 0 0 10px none; + } +} diff --git a/src/Components/SpiritLogo.js b/src/Components/SpiritLogo.js new file mode 100644 index 00000000..8389f2bf --- /dev/null +++ b/src/Components/SpiritLogo.js @@ -0,0 +1,23 @@ +import React from "react"; +import { Link } from "react-router-dom"; +import "./SpiritLogo.css"; + +const SpiritLogo = () => { + return ( + +
    + S + p + i + r + i + t + T + a + i + l +
    + + ); +}; +export default SpiritLogo; diff --git a/src/Components/SpiritLogo.module.css b/src/Components/SpiritLogo.module.css new file mode 100644 index 00000000..5c386a44 --- /dev/null +++ b/src/Components/SpiritLogo.module.css @@ -0,0 +1,59 @@ +.headOne { + margin: 0; + padding: 0; + color: #8e509b; + font-size: 10em; +} +.headOne span { + display: table-cell; + margin: 0; + padding: 0; + animation: animate 5s linear infinite; +} +.one span { + animation-delay: 0s; +} +.two span { + animation-delay: 0.25s; +} +.three { + animation-delay: 0.5s; +} +.four { + animation-delay: 0.75s; +} +.five { + animation-delay: 1s; +} +.six { + animation-delay: 1.25s; +} +.seven { + animation-delay: 1.5s; +} +.eight { + animation-delay: 1.75s; +} +.nine { + animation-delay: 2s; +} +.ten { + animation-delay: 2.5s; +} + +@keyframes animate { + 0%, + 100% { + color: #fff; + filter: blur(2px); + text-shadow: 0 0 10px #00b3ff, 0 0 20px #00b3ff, 0 0 40px #00b3ff, + 0 0 80px #00b3ff, 0 0 120px #00b3ff, 0 0 180px #00b3ff, 0 0 220px #00b3ff, + 0 0 240px #00b3ff; + } + 5%, + 95% { + color: #8e509b; + filter: blur(0px); + text-shadow: none; + } +} diff --git a/src/Components/SwitchView.js b/src/Components/SwitchView.js new file mode 100644 index 00000000..4205b8f4 --- /dev/null +++ b/src/Components/SwitchView.js @@ -0,0 +1,43 @@ +import React, { useState } from "react"; +import CubeView from "./CubeView.js"; +import ListView from "./ListView.js"; + +// eslint-disable-next-line react/prop-types +const SwitchView = ({ strDrink, strDrinkThumb }) => { + const [show, setShow] = useState(false); + + const listStyle = { + backgroundColor: "silver", + borderStyle: "outset", + borderColor: "gold", + marginTop: "50px", + listStyleType: "none", + width: "3in", + }; + + const fixedStyle = { + position: "fixed", + right: "100px", + top: "700px", + }; + + return ( +
  • setShow(true)} + onMouseLeave={() => setShow(false)} + style={listStyle} + id={strDrink} + > + + {show ? ( + + ) : null} +
    • + ); +}; + +export default SwitchView; diff --git a/src/Components/TheList.js b/src/Components/TheList.js new file mode 100644 index 00000000..457ee1a3 --- /dev/null +++ b/src/Components/TheList.js @@ -0,0 +1,56 @@ +/* eslint-disable react/prop-types */ +import React, { useEffect } from "react"; +import { Link } from "react-router-dom"; +import SwitchView from "./SwitchView"; +import { fetchDrinks } from "./redux/drinkActions.js"; +import { connect } from "react-redux"; +import LogoNav from "./LogoNav"; + +const TheList = ({ match, drink, fetchDrinks }) => { + const jig = match.params.id; + + useEffect(() => { + document.title = `${jig} Cocktail List Page`; + fetchDrinks(jig); + }, [fetchDrinks, jig]); + + const liquor = drink.drinks; + + const liquorList = liquor.map((drin) => ( + + + + )); + + const placement = { + position: "absolute", + left: "100px", + top: "100px", + }; + + return ( +
    +
    + +
    +
    +
      {liquorList}
    +
    +
    + ); +}; + +const mapStateToProps = (state, ownProps) => { + return { + drink: state, + ownProps, + }; +}; + +const mapDispatchToProps = (dispatch) => { + return { + fetchDrinks: (word) => dispatch(fetchDrinks(word)), + }; +}; + +export default connect(mapStateToProps, mapDispatchToProps)(TheList); diff --git a/src/Components/redux/drinkActionTypes.js b/src/Components/redux/drinkActionTypes.js new file mode 100644 index 00000000..38232075 --- /dev/null +++ b/src/Components/redux/drinkActionTypes.js @@ -0,0 +1,5 @@ +export const FETCH_DRINKS_REQUEST = "FETCH_DRINKS_REQUEST"; + +export const FETCH_DRINKS_SUCCESS = "FETCH_DRINKS_SUCCESS"; + +export const FETCH_DRINKS_FAILURE = "FETCH_DRINKS_FAILURE"; diff --git a/src/Components/redux/drinkActions.js b/src/Components/redux/drinkActions.js new file mode 100644 index 00000000..d574bb0d --- /dev/null +++ b/src/Components/redux/drinkActions.js @@ -0,0 +1,44 @@ +import { + FETCH_DRINKS_REQUEST, + FETCH_DRINKS_SUCCESS, + FETCH_DRINKS_FAILURE, +} from "./drinkActionTypes.js"; + +export const fetchDrinksRequest = () => { + return { + type: FETCH_DRINKS_REQUEST, + }; +}; + +const fetchDrinksSuccess = (drinks) => { + return { + type: FETCH_DRINKS_SUCCESS, + payload: drinks, + }; +}; + +const fetchDrinksFailure = (error) => { + return { + type: FETCH_DRINKS_FAILURE, + payload: error, + }; +}; +export const fetchDrinks = (word) => { + return (dispatch) => { + dispatch(fetchDrinksRequest); + fetch( + `https://www.thecocktaildb.com/api/json/v2/9973533/filter.php?i=${word}` + ).then((resp) => { + resp + .json() + .then((data) => { + const drink = data.drinks; + dispatch(fetchDrinksSuccess(drink)); + }) + .catch((error) => { + const errorMsg = error.message; + dispatch(fetchDrinksFailure(errorMsg)); + }); + }); + }; +}; diff --git a/src/Components/redux/drinkStore.js b/src/Components/redux/drinkStore.js new file mode 100644 index 00000000..617b964a --- /dev/null +++ b/src/Components/redux/drinkStore.js @@ -0,0 +1,7 @@ +import { createStore, applyMiddleware } from "redux"; +import thunk from "redux-thunk"; +import reducer from "./drinksReducer"; + +const store = createStore(reducer, applyMiddleware(thunk)); + +export default store; diff --git a/src/Components/redux/drinksReducer.js b/src/Components/redux/drinksReducer.js new file mode 100644 index 00000000..b7ee27fc --- /dev/null +++ b/src/Components/redux/drinksReducer.js @@ -0,0 +1,57 @@ +import { + FETCH_DRINKS_REQUEST, + FETCH_DRINKS_SUCCESS, + FETCH_DRINKS_FAILURE, +} from "./drinkActionTypes.js"; + +const intialState = { + loading: false, + drinks: [], + error: "", + spirits: [ + "Absinthe", + "Ale", + "Beer", + "Brandy", + "Champagne", + "Cognac", + "Gin", + "Port", + "Rum", + "Scotch", + "Sherry", + "Tequila", + "Vermouth", + "Vodka", + "Whiskey", + "Wine", + ], +}; + +const reducer = (state = intialState, action) => { + switch (action.type) { + case FETCH_DRINKS_REQUEST: + return { + ...state, + loading: true, + }; + case FETCH_DRINKS_SUCCESS: + return { + ...state, + loading: false, + drinks: action.payload, + error: "", + }; + case FETCH_DRINKS_FAILURE: + return { + ...state, + loading: false, + drinks: [], + error: action.payload, + }; + default: + return state; + } +}; + +export default reducer; diff --git a/src/Components/services/useFetchId.js b/src/Components/services/useFetchId.js new file mode 100644 index 00000000..600d6689 --- /dev/null +++ b/src/Components/services/useFetchId.js @@ -0,0 +1,20 @@ +import { useState, useEffect } from "react"; + +export default function useFetchId(id) { + const [details, setDetails] = useState([]); + + useEffect(() => { + if (id !== "") + fetch( + `https://www.thecocktaildb.com/api/json/v2/9973533/lookup.php?i=${id}` + ).then((resp) => { + resp.json().then((data) => { + setDetails(data.drinks[0]); + }); + }); + }, [id]); + + console.log(details); + + return { details }; +} diff --git a/src/Components/services/useImageFetch.js b/src/Components/services/useImageFetch.js new file mode 100644 index 00000000..d73f230d --- /dev/null +++ b/src/Components/services/useImageFetch.js @@ -0,0 +1,18 @@ +import { useState, useEffect } from "react"; + +export default function useFetchId(id) { + const [details, setDetails] = useState([]); + + useEffect(() => { + if (id !== "") + fetch(`www.thecocktaildb.com/images/ingredients/${id}-Medium.png`).then( + (resp) => { + setDetails(resp); + } + ); + }, [id]); + + console.log(details); + + return { details }; +} diff --git a/src/index.css b/src/index.css new file mode 100644 index 00000000..4a1df4db --- /dev/null +++ b/src/index.css @@ -0,0 +1,13 @@ +body { + margin: 0; + font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto", "Oxygen", + "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans", "Helvetica Neue", + sans-serif; + -webkit-font-smoothing: antialiased; + -moz-osx-font-smoothing: grayscale; +} + +code { + font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New", + monospace; +} diff --git a/src/index.html b/src/index.html new file mode 100644 index 00000000..0a548125 --- /dev/null +++ b/src/index.html @@ -0,0 +1,10 @@ + + + + + + + +
    + + diff --git a/src/index.js b/src/index.js new file mode 100644 index 00000000..bcce3a54 --- /dev/null +++ b/src/index.js @@ -0,0 +1,11 @@ +import React from "react"; +import ReactDOM from "react-dom"; +import App from "./App"; +// eslint-disable-next-line import/no-unresolved +import "./index.css"; +ReactDOM.render( + + + , + document.getElementById("app") +);