From 507118239bb98c118d422ff1ce4ca7b0df54422c Mon Sep 17 00:00:00 2001 From: Terri Archer Date: Sun, 13 Nov 2022 10:58:19 -0500 Subject: [PATCH 1/2] began stylings --- package-lock.json | 18 ++++++++++--- src/App.js | 13 ++++++++- src/components/Dropdown.js | 23 ++++++++++++++++ src/components/DropdownCreator.js | 45 +++++++++++++++++++++++++++++++ 4 files changed, 94 insertions(+), 5 deletions(-) create mode 100644 src/components/Dropdown.js create mode 100644 src/components/DropdownCreator.js 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/src/App.js b/src/App.js index 52e90c02c..57b37ef2f 100644 --- a/src/App.js +++ b/src/App.js @@ -1,6 +1,16 @@ -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 +21,7 @@ const App = () => { return (

Characters

+
); } diff --git a/src/components/Dropdown.js b/src/components/Dropdown.js new file mode 100644 index 000000000..6a4ffe85d --- /dev/null +++ b/src/components/Dropdown.js @@ -0,0 +1,23 @@ +import React, { useState, useEffect} from "react"; +import DropdownCreator from "./DropdownCreator"; + + + +const Dropdown = (props) => { + const { characters }= props + const [currentCharacter, setCurrentCharacter] = useState() + const [display, setDisplay] = useState(true) + + return( +
+ +
+ {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..6955f78c3 --- /dev/null +++ b/src/components/DropdownCreator.js @@ -0,0 +1,45 @@ +import React, {useState} from "react"; +import styled from "styled-components"; + +const Styledlist = styled.div` + display: flex; + padding-top: 1%; + padding-bottom: 8%; + flex-direction: column; + width: 15%; + background-color: rgb(153, 0, 0,0.3); + overflow: hidden; + + h3{ + margin-left: 10%; + margin-top: 14%; + text-align: left; + border: solid; + width: 40%; + } + +`; + +function generator (name,idx) { + return ( +

console.log('hello')} key={idx}>{name}

+ ) + +} + +const DropdownCreator = (props) => { + const { characters } = props; + // console.log(characters) + + return( + +
+ { characters.map((ch,idx) => { return generator(ch.name,idx)})} +
+ + + + ) +} + +export default DropdownCreator \ No newline at end of file From 78213382cf7f0bb32d3f1a541fc85b3b07ef89dd Mon Sep 17 00:00:00 2001 From: Terri Archer Date: Sun, 13 Nov 2022 14:29:12 -0500 Subject: [PATCH 2/2] completed coursework --- public/index.html | 23 +---------- src/App.css | 4 ++ src/App.js | 1 + src/components/Character.js | 67 +++++++++++++++++++++++++++++++ src/components/Dropdown.js | 29 +++++++++++-- src/components/DropdownCreator.js | 45 +++++++++++++++------ 6 files changed, 132 insertions(+), 37 deletions(-) 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 57b37ef2f..eb86abe4d 100644 --- a/src/App.js +++ b/src/App.js @@ -2,6 +2,7 @@ import React, { useState, useEffect } from 'react'; import axios from 'axios' import Dropdown from "./components/Dropdown" + const App = () => { const [characters, setCharacters] = useState() useEffect(() => { 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 index 6a4ffe85d..0eb1c95c6 100644 --- a/src/components/Dropdown.js +++ b/src/components/Dropdown.js @@ -1,18 +1,41 @@ 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 && } + {display && }
    ) diff --git a/src/components/DropdownCreator.js b/src/components/DropdownCreator.js index 6955f78c3..ca9d48fb1 100644 --- a/src/components/DropdownCreator.js +++ b/src/components/DropdownCreator.js @@ -3,38 +3,57 @@ 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: rgb(153, 0, 0,0.3); + 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: solid; - width: 40%; + border: double; + width: 50%; + font-family: 'Space Grotesk', sans-serif; + :hover { + transform: scale(1.1); + } + :active { + transform: scale(1); + } } `; -function generator (name,idx) { - return ( -

    console.log('hello')} key={idx}>{name}

    - ) - -} - const DropdownCreator = (props) => { - const { characters } = props; - // console.log(characters) + 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.map((ch,idx) => { return generator(ch.name,idx)})} + { characters && characters.map((ch,idx) => { return generator(ch.name,idx)})}