bloominstituteoftechnology · TerriArcher · Nov 13, 2022 · Nov 13, 2022
diff --git a/package-lock.json b/package-lock.json
diff --git a/public/index.html b/public/index.html
@@ -10,34 +10,15 @@
       content="Web site created using create-react-app"
     />
     <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
-    <!--
-      manifest.json provides metadata used when your web app is installed on a
-      user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
-    -->
+    <link href="https://fonts.googleapis.com/css2?family=Anybody&family=Exo+2:wght@300&family=Inconsolata:wght@300;400&family=Space+Grotesk:wght@500&display=swap" rel="stylesheet">
+
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
-    <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
 
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
     <title>Characters React App</title>
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    <!--
-      This HTML file is a template.
-      If you open it directly in the browser, you will see an empty page.
-
-      You can add webfonts, meta tags, or analytics to this file.
-      The build step will place the bundled scripts into the <body> tag.
 
-      To begin the development, run `npm start` or `yarn start`.
-      To create a production bundle, use `npm run build` or `yarn build`.
-    -->
   </body>
 </html>
diff --git 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
@@ -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 (
     <div className="App">
       <h1 className="Header">Characters</h1>
+      <Dropdown characters={characters}/>
     </div>
   );
 }

diff --git 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 (
+            <li>{title}</li>
+        )
+    }
+
+
+    const { currentCharacter }= props;
+    return(
+        <StyledCharacterDiv>
+            <div className="constants">
+                <h1>Name:</h1> 
+                <h3>Birth year: </h3> 
+                <h3>Gender: </h3> 
+                <h3>Eye Color: </h3> 
+                <h3>Height: </h3> 
+                <h3>Mass: </h3> 
+                <h3>Hair Color: </h3> 
+            </div>
+            <div className="data">
+            <h1>{currentCharacter.name}</h1>
+            <h3>{currentCharacter.birth_year}</h3>
+            <h3>{currentCharacter.gender}</h3>
+            <h3>{currentCharacter.eye_color}</h3>
+            <h3>{currentCharacter.height} cm</h3>
+            <h3>{currentCharacter.mass}</h3>
+            <h3>{currentCharacter.hair_color}</h3>
+            </div>
+        </StyledCharacterDiv>
+
+    )
+}
+
+
+export default Character
+
+
diff --git a/src/components/Dropdown.js 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( 
+        <div className="container">
+            <StyledButton onClick={() => setDisplay(!display)}>Character List</StyledButton>
+            {currentCharacter && <Character currentCharacter={currentCharacter}/>}
+            <div className="dropdown-content">
+                {display && <DropdownCreator characters={characters} setCurrentCharacter={setCurrentCharacter}/>}
+            </div>
+        </div>
+    )
+
+
+}
+
+export default Dropdown
diff --git a/src/components/DropdownCreator.js 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 (
+            <h3 onClick={() => openCharacter(name)} key={idx}>{name}</h3>
+        )
+
+    }
+
+    return(
+        <Styledlist>
+            <div>
+                { characters && characters.map((ch,idx) => { return generator(ch.name,idx)})}
+            </div>
+
+        </Styledlist>
+
+    )
+}
+
+export default DropdownCreator