- 
+
);
};
@@ -16,7 +20,7 @@ const Card = ({ description, removeFav, id }) => {
export default Card;
Card.propTypes = {
- description: PropTypes.string.isRequired,
+ name: PropTypes.string.isRequired,
removeFav: PropTypes.func.isRequired,
- id: PropTypes.number.isRequired
+ id: PropTypes.string.isRequired
}
\ No newline at end of file
diff --git a/src/components/Error/Error.css b/src/components/Error/Error.css
index 462b7bd..b594bab 100644
--- a/src/components/Error/Error.css
+++ b/src/components/Error/Error.css
@@ -8,6 +8,11 @@
width: 65em;
}
+.error-message {
+ color: white;
+ text-align: center;
+}
+
@media (max-width: 847px) {
.error-img {
width: 100%;
diff --git a/src/components/ExpandedCard/ExpandedCard.css b/src/components/ExpandedCard/ExpandedCard.css
new file mode 100644
index 0000000..7c7da88
--- /dev/null
+++ b/src/components/ExpandedCard/ExpandedCard.css
@@ -0,0 +1,183 @@
+.expanded-background {
+ position: absolute;
+ background-color: rgba(255, 255, 255, 0.457);
+ width: 100%;
+ height: 100%;
+}
+
+.expanded-card {
+ position: absolute;
+ width: 70%;
+ height: 64%;
+ left: 15%;
+ bottom: 28%;
+ background-color: white;
+ border-radius: 10px;
+ display: flex;
+ align-items: center;
+ z-index: 1;
+}
+
+.stats-area {
+ padding: 10px;
+}
+
+.remove-card {
+ cursor: pointer;
+ width: 35px;
+ position: absolute;
+ top: 5px;
+ right: 5px;
+ background-color: #cfcfcf8c;
+ border-radius: 9px;
+}
+
+.expanded-image-container {
+ min-width: 50%;
+ height: 100%;
+ display: flex;
+ justify-content: center;
+ align-items: center;
+}
+
+.expanded-image {
+ height: 90%;
+ max-width: 90%;
+ object-fit: cover;
+ border-radius: 10px;
+}
+
+.exp-links-container {
+ display: flex;
+ justify-content: space-between;
+}
+
+.exp-stats-title,
+.exp-links-title {
+ font-weight: 600;
+ font-size: large;
+}
+
+.exp-name {
+ font-weight: 900;
+ font-size: xx-large;
+ margin-left: 10px;
+}
+
+.stats-dropdown,
+.stats-dropup {
+ display: none;
+}
+
+.wiki-link {
+ margin-right: 20px;
+}
+
+@media (max-width: 1110px) {
+ .stats-column-con {
+ display: flex;
+ flex-direction: column;
+ }
+
+ .stats-column-con-active {
+ display: flex;
+ flex-direction: column;
+ position: absolute;
+ top: 35%;
+ }
+
+ .stats-dropdown {
+ display: block;
+ width: 25px;
+ height: 25px;
+ margin: 10px 10px 30px;
+ transform: rotate(90deg);
+ }
+
+ .stats-dropup {
+ display: block;
+ transform: rotate(-90deg);
+ width: 25px;
+ height: 25px;
+ margin: 10px 10px 30px;
+ }
+
+ .hide-stats {
+ display: none;
+ }
+
+ .exp-name {
+ margin: 10px 0 30px 10px;
+ }
+
+ .expanded-image-container,
+ .expanded-image {
+ width: 100%;
+ }
+
+ .expanded-image {
+ min-width: 100%;
+ min-height: 100%;
+ }
+
+ .stats-area {
+ position: absolute;
+ height: 100%;
+ width: 100%;
+ display: flex;
+ flex-direction: column-reverse;
+ padding: unset;
+ }
+
+ .stats-column-1 {
+ width: 100%;
+ border-bottom-left-radius: 10px;
+ border-bottom-right-radius: 10px;
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ background-image: linear-gradient(rgb(255, 255, 255, 0), rgb(255, 255, 255, 1));
+ }
+
+ .active-drop {
+ border-bottom-left-radius: unset;
+ border-bottom-right-radius: unset;
+ }
+
+ .stats-column-2 {
+ border-bottom-left-radius: 10px;
+ border-bottom-right-radius: 10px;
+ width: 100%;
+ background-color: white;
+ }
+
+ .stats-column-1 {
+ background-color: rgba(255, 255, 255, 0.5);
+ }
+
+ .exp-description {
+ margin-right: 20px;
+ }
+
+ .exp-links-container {
+ margin-bottom: 20px;
+ }
+
+ .drop {
+ margin-left: 10px;
+ }
+
+ .exp-links-container {
+ justify-content: space-around;
+ }
+
+ .wiki-link {
+ margin-right: unset;
+ }
+}
+@media (max-width: 900px) {
+ .expanded-card {
+ width: 90%;
+ left: 5%;
+ }
+}
diff --git a/src/components/ExpandedCard/ExpandedCard.js b/src/components/ExpandedCard/ExpandedCard.js
new file mode 100644
index 0000000..8415374
--- /dev/null
+++ b/src/components/ExpandedCard/ExpandedCard.js
@@ -0,0 +1,51 @@
+import './ExpandedCard.css';
+import { useState } from 'react';
+import cancelIcon from '../../utilities/x.svg';
+import expandArrow from '../../utilities/expand-arrow.png';
+
+const ExpandedCard = ({ stats, removeCard }) => {
+
+ const [dropdown, setDropdown] = useState(false)
+
+ const triggerDropdown = () => {
+ setDropdown(!dropdown)
+ }
+
+ return (
+ {description}
- +
+ 
removeFav(id)} />
+ 
cardSelect(stats)} />
+
+ {name}
{
+ if (event.target.className === "expanded-background") {
+ removeCard()
+ }
+ }}>
+
+
+ )
+}
+
+export default ExpandedCard;
\ No newline at end of file
diff --git a/src/components/Fact/Fact.css b/src/components/Fact/Fact.css
index 06d06f7..f94191b 100644
--- a/src/components/Fact/Fact.css
+++ b/src/components/Fact/Fact.css
@@ -1,92 +1,91 @@
.fact-page {
display: flex;
- flex-direction: column;
align-items: center;
background-color: black;
+ justify-content: center;
+ height: 79vh;
}
.fact-display {
- display: flex;
- width: 80%;
- color: white;
- align-items: center;
+ background-color: white;
+ border-radius: 15%;
}
-.fact,
-.fact-img {
- width: 50%;
- height: 34em;
- margin: 0;
+.inactive-arrow-left {
+ opacity: 0.2;
}
-.fact {
- padding: 0 1em 1em;
- font-size: large;
- font-weight: 600;
- display: flex;
- align-items: center;
- text-align: center;
- overflow: scroll;
+.arrow-right {
+ -webkit-transform: scaleX(-1);
+ transform: scaleX(-1);
+ right: 50%;
+ margin-right: 20px;
}
-.fact-img {
- object-fit: cover;
+.inactive-arrow-left,
+.arrow-left,
+.arrow-right {
+ width: 66px;
+ height: 66px;
+ position: absolute;
+ bottom: 3%;
}
-.button-container {
- display: flex;
- background-color: pink;
- justify-content: space-evenly;
- width: 100%;
- height: 10em;
+.arrow-left,
+.arrow-right {
+ cursor: pointer;
}
-.fav-card-btn,
-.new-fact-btn {
- cursor: pointer;
- border-radius: 10px;
- width: 15%;
- height: 40%;
- background-color: #64c79f;
- border: 0;
- color: black;
- margin-top: 4em;
+.inactive-container {
+ width: 86px;
+ height: 86px;
+ border-radius: 50px;
+ margin: 20px;
}
-.new-fact-btn:hover,
-.fav-card-btn:hover {
- background-color: #3ba178;
- border-bottom: solid black 4px;
+.arrow-container:hover {
+ cursor: pointer;
}
-.new-fact-btn:active,
-.fav-card-btn:active {
- background-color: #ffffff;
- border-bottom: 0px;
+.inactive-container:hover {
+ cursor: default;
}
-.new-fact-btn:after,
-.fav-card-btn:after {
- transition: 0.5s;
+.signals {
+ color: white;
}
+.custom-err {
+ color: white;
+}
@media (max-width: 1250px) {
- .fact,
- .fact-img {
- height: 27em;
- }
-
- .fact-img {
- width: 100%;
- }
-
.fact-display{
flex-direction: column;
}
.fav-card-btn,
.new-fact-btn {
- width: 35%;
+ width: 25%;
+ }
+
+ .inactive-arrow-left,
+ .arrow-left,
+ .arrow-right {
+ bottom: 0%;
+ z-index: 1;
+ background-color: rgba(255, 255, 255, 0.5);
+ border-bottom-left-radius: 15px;
+ border-top-right-radius: 15px;
+ }
+
+ .inactive-arrow-left,
+ .arrow-left {
+ left: 0%;
+ }
+
+ .arrow-right {
+ right: 0%;
+ margin: unset;
}
}
\ No newline at end of file
diff --git a/src/components/Fact/Fact.js b/src/components/Fact/Fact.js
index 6353a40..af6701f 100644
--- a/src/components/Fact/Fact.js
+++ b/src/components/Fact/Fact.js
@@ -1,57 +1,69 @@
-import React, { useState } from 'react';
+import React, { useEffect } from 'react';
import './Fact.css';
-import getCatFacts from '../../utilities/api-call';
+import { getCatPhotos } from '../../utilities/api-call';
import PropTypes from 'prop-types';
-import { useLoaderData } from 'react-router-dom';
+import dataCleaner from '../../utilities/dataCleaner';
+import FactCard from '../FactCard/FactCard';
+import arrow from '../../utilities/arrow-icon.png';
-const Fact = ({ favFact }) => {
- const randFact = useLoaderData()
- const savedFact = JSON.parse(sessionStorage.getItem('currentFact'))
-
- const [currentFact, setCurrentFact] = useState(savedFact || randFact);
-
- const setFact = (fact) => {
- setCurrentFact({fact: fact});
- sessionStorage.setItem('currentFact', JSON.stringify({fact: fact}))
- }
+const Fact = ({ favFact, removeFav, setCats, cats, catCount, saveCatCount }) => {
+
const fetchFact = () => {
- getCatFacts('https://catfact.ninja/fact')
- .then(data => {
- setFact(data.fact);
+ getCatPhotos()
+ .then(res => {
+ const cleanedDetails = dataCleaner(res);
+ setCats([...cats, ...cleanedDetails]);
+ })
+ .catch(err => {
+ console.log(err)
})
}
+ const leftArrow =
- 
-
- {currentFact.fact}
-
-
-
-
-
-
+
+
+ {catSpecs[catCount]}
+
+
+ 
+ {leftArrow}
+ {rightArrow}
+
+ )
+}
+
+export default FactCard;
\ No newline at end of file
diff --git a/src/components/Favorites/Favorites.css b/src/components/Favorites/Favorites.css
index 5640870..d9adb1a 100644
--- a/src/components/Favorites/Favorites.css
+++ b/src/components/Favorites/Favorites.css
@@ -1,8 +1,12 @@
.fav-card-display {
- height: 50em;
- background-color: salmon;
+ background-color: rgb(0, 0, 0);
display: flex;
flex-wrap: wrap;
justify-content: center;
align-content: flex-start;
+ /* position: relative; */
+}
+
+.no-ideas {
+ color: white;
}
\ No newline at end of file
diff --git a/src/components/Favorites/Favorites.js b/src/components/Favorites/Favorites.js
index 8a61926..195b011 100644
--- a/src/components/Favorites/Favorites.js
+++ b/src/components/Favorites/Favorites.js
@@ -1,23 +1,44 @@
-import React from 'react';
+import React, { useState, useEffect } from 'react';
import './Favorites.css';
import Card from '../Card/Card';
import PropTypes from 'prop-types';
+import ExpandedCard from '../ExpandedCard/ExpandedCard';
const Favorites = ({ favs, removeFav }) => {
+
+ const [selected, setSelected] = useState(undefined);
+
+ const selectCard = (card) => {
+ setSelected(card)
+ }
+
+ const deselectCard = () => {
+ setSelected(undefined)
+ }
+
const savedCards = favs.map(fact => {
return
+
+
+
+
+
+
+
+ {details.name}
+
+
+
+ 
{
+ details.favorited ? removeFav(details.id) : favFact(details);
+ }}/>
+
+ {`Dog Friendly: ${details.dogFriendly}`}
+{`Energy Level: ${details.energyLevel}`}
+{`Affection Level: ${details.affectionLevel}`}
+{`Origin: ${details.origin}`}
+{`Temperaments: ${details.temperament}`}
+{`Description: ${details.description}`}
+No saved ideas yet
: savedCards} + {selected ?
- 
-
-
+ 
+
-
-
+
+
+
+