diff --git a/package-lock.json b/package-lock.json index 44cde1123..d5c2a294d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -5,6 +5,7 @@ "requires": true, "packages": { "": { + "name": "web-sprint-challenge-intro-to-react", "version": "0.1.1", "dependencies": { "@testing-library/jest-dom": "^5.16.2", @@ -18807,7 +18808,9 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz", "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==", - "requires": {} + "requires": { + "ajv": "^8.0.0" + } }, "ajv-keywords": { "version": "5.1.0", @@ -22104,7 +22107,9 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz", "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==", - "requires": {} + "requires": { + "ajv": "^8.0.0" + } }, "ajv-keywords": { "version": "5.1.0", @@ -24679,6 +24684,7 @@ "is-glob": "^4.0.3", "normalize-path": "^3.0.0", "object-hash": "^2.2.0", + "postcss": "^8.4.6", "postcss-js": "^4.0.0", "postcss-load-config": "^3.1.0", "postcss-nested": "5.0.6", @@ -25207,7 +25213,9 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz", "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==", - "requires": {} + "requires": { + "ajv": "^8.0.0" + } }, "ajv-keywords": { "version": "5.1.0", @@ -25287,7 +25295,9 @@ "version": "2.1.1", "resolved": "https://registry.npmjs.org/ajv-formats/-/ajv-formats-2.1.1.tgz", "integrity": "sha512-Wx0Kx52hxE7C18hkMEggYlEifqWZtYaRgouJor+WMdPnQyEK13vgEWyVNup7SoeeoLMsr4kf5h6dOW11I15MUA==", - "requires": {} + "requires": { + "ajv": "^8.0.0" + } }, "ajv-keywords": { "version": "5.1.0", diff --git a/public/index.html b/public/index.html index cbd4a8a83..281c8b2f5 100644 --- a/public/index.html +++ b/public/index.html @@ -10,34 +10,15 @@ content="Web site created using create-react-app" /> - + + - Characters React App
- diff --git a/src/App.css b/src/App.css index fab70641c..445f49975 100644 --- a/src/App.css +++ b/src/App.css @@ -5,4 +5,8 @@ color: #443e3e; text-shadow: 1px 1px 5px #fff; } + +.containter{ + position:relative; +} /* write your parent styles in here for your App.js */ diff --git a/src/App.js b/src/App.js index 52e90c02c..eb86abe4d 100644 --- a/src/App.js +++ b/src/App.js @@ -1,6 +1,17 @@ -import React from 'react'; +import React, { useState, useEffect } from 'react'; +import axios from 'axios' +import Dropdown from "./components/Dropdown" + const App = () => { + const [characters, setCharacters] = useState() + useEffect(() => { + axios.get('https://swapi.dev/api/people/') + .then(res => setCharacters(res.data)) + .catch(err => console.err(err)) + },[]) + + // console.log(characters) // Try to think through what state you'll need for this app before starting. Then build out // the state properties here. @@ -11,6 +22,7 @@ const App = () => { return (

Characters

+
); } diff --git a/src/components/Character.js b/src/components/Character.js index 4083249c0..83cfeca97 100644 --- a/src/components/Character.js +++ b/src/components/Character.js @@ -1 +1,68 @@ // Write your Character component here +import React from "react"; +import styled from "styled-components"; + +const StyledCharacterDiv = styled.div` + display: flex; + flex-direction: row; + flex-wrap: no-wrap; + align-items: center; + justify-content: space-evenly; + margin: 0 auto; + margin-top: 2%; + padding-top: 1%; + padding-bottom: 5%; + width: 50%; + background-color: rgba(143,67,33,0.6); + border: double; + font-family: 'Space Grotesk', sans-serif; + color: rgb(36, 27, 3); + + .data h3, .constants h3{ + width: 100%; + margin: 1 auto; + padding: 2%; + + } + + +`; + +const Character = (props) => { + function film (title) { + return ( +
  • {title}
    • + ) + } + + + const { currentCharacter }= props; + return( + +
    +

    Name:

    +

    Birth year:

    +

    Gender:

    +

    Eye Color:

    +

    Height:

    +

    Mass:

    +

    Hair Color:

    +
    +
    +

    {currentCharacter.name}

    +

    {currentCharacter.birth_year}

    +

    {currentCharacter.gender}

    +

    {currentCharacter.eye_color}

    +

    {currentCharacter.height} cm

    +

    {currentCharacter.mass}

    +

    {currentCharacter.hair_color}

    +
    +     + + ) +} + + +export default Character + + diff --git a/src/components/Dropdown.js b/src/components/Dropdown.js new file mode 100644 index 000000000..0eb1c95c6 --- /dev/null +++ b/src/components/Dropdown.js @@ -0,0 +1,46 @@ +import React, { useState, useEffect} from "react"; +import DropdownCreator from "./DropdownCreator"; +import Character from "./Character"; +import styled from "styled-components"; + +const StyledButton = styled.button` + color: rgb(36, 27, 3); + background-color: rgba(143,67,33,0.5); + border: double; + :hover { + transform: scale(1.1); + } + :active { + transform: scale(1); + } +`; + + + + + +const Dropdown = (props) => { + + + const { characters }= props + const [currentCharacter, setCurrentCharacter] = useState() + const [display, setDisplay] = useState(true) + + useEffect(() => { + console.log(currentCharacter) + }, [currentCharacter]) + + return( +
    + setDisplay(!display)}>Character List + {currentCharacter && } +
    + {display && } +
    +
    + ) + + +} + +export default Dropdown \ No newline at end of file diff --git a/src/components/DropdownCreator.js b/src/components/DropdownCreator.js new file mode 100644 index 000000000..ca9d48fb1 --- /dev/null +++ b/src/components/DropdownCreator.js @@ -0,0 +1,64 @@ +import React, {useState} from "react"; +import styled from "styled-components"; + +const Styledlist = styled.div` + display: flex; + position: absolute; + top: 0; + left: 0; + margin-top: 4%; + padding-top: 1%; + padding-bottom: 8%; + flex-direction: column; + width: 15%; + background-color: rgba(143,67,33,0.5); + overflow: hidden; + border: double; + border-left: none; + + h3{ + margin-left: 10%; + margin-top: 14%; + text-align: left; + border: double; + width: 50%; + font-family: 'Space Grotesk', sans-serif; + :hover { + transform: scale(1.1); + } + :active { + transform: scale(1); + } + } + +`; + +const DropdownCreator = (props) => { + const { characters, setCurrentCharacter } = props; + function openCharacter (name) { + {characters.map(ch => { + if(ch.name === name){ + setCurrentCharacter(ch) + } + })} + } + + function generator (name,idx) { + return ( +

    openCharacter(name)} key={idx}>{name}

    + ) + + } + + return( + +
    + { characters && characters.map((ch,idx) => { return generator(ch.name,idx)})} +
    + +     + + ) +} + +export default DropdownCreator \ No newline at end of file