From 5705845bf968c55b6b17705b15cde994885a2134 Mon Sep 17 00:00:00 2001 From: Ceylin Yasar Date: Sun, 8 Jan 2023 12:45:17 +0300 Subject: [PATCH] CeylinYasar-S6-Challenge --- .gitignore | 1 + package-lock.json | 20 ++++++++++++++----- src/App.js | 50 +++++++++++++++++++++++++++++++++++++++++++---- src/Arama.js | 23 ++++++++++++++++++++++ src/Section.js | 38 +++++++++++++++++++++++++++++++++++ src/index.css | 2 +- 6 files changed, 124 insertions(+), 10 deletions(-) create mode 100644 .gitignore create mode 100644 src/Arama.js create mode 100644 src/Section.js diff --git a/.gitignore b/.gitignore new file mode 100644 index 000000000..3c3629e64 --- /dev/null +++ b/.gitignore @@ -0,0 +1 @@ +node_modules diff --git a/package-lock.json b/package-lock.json index 44cde1123..b0128443d 100644 --- a/package-lock.json +++ b/package-lock.json @@ -1,10 +1,11 @@ { - "name": "web-sprint-challenge-intro-to-react", + "name": "fsweb-s6-challenge-intro-to-react", "version": "0.1.1", "lockfileVersion": 2, "requires": true, "packages": { "": { + "name": "fsweb-s6-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 04dc89af4..1d04bd3fa 100644 --- a/src/App.js +++ b/src/App.js @@ -1,18 +1,60 @@ -import React from 'react'; +import React from "react"; +import { useEffect, useState } from "react"; +import Section from "./Section"; +import axios from "axios"; +import Arama from "./Arama"; const App = () => { // Try to think through what state you'll need for this app before starting. Then build out // the state properties here. - // Fetch characters from the API in an effect hook. Remember, anytime you have a + // Fetch characters from the API in an effect hook. Remember, anytime you have a // side effect in a component, you want to think about which state and/or props it should // sync up with, if any. + const [data, setData] = useState([]); + const [arama, setArama] = useState(""); + const [icerik, setIcerik] = useState(""); + + useEffect(() => { + axios + .get("https://swapi.dev/api/people/") + .then((response) => setData(response.data)); + }, []); + + function handleClick(name) { + setIcerik(name === icerik ? null : name); + } return (
-

Karakterler

+

Star Wars Major Characters List

+ {} + {data + .filter((person) => { + if (arama === "") { + return person; + } else if ( + person.name.toLowerCase().includes(arama.toLocaleLowerCase()) + ) { + return person; + } + }) + .map((person) => { + return ( +
+ ); + })} + {/* {films.map((person) => { + return
; + })} */}
); -} +}; export default App; diff --git a/src/Arama.js b/src/Arama.js new file mode 100644 index 000000000..5219fe8a8 --- /dev/null +++ b/src/Arama.js @@ -0,0 +1,23 @@ +import React from "react"; +import styled from "styled-components"; + +function Arama(props) { + const { arama, setArama } = props; + const SCInput = styled.input` + padding: 8px; + width: 30%; + background-color: #ddd; + color: black; + border-style: solid; + `; + return ( + setArama(event.target.value)} + value={arama} + autoFocus + > + ); +} +export default Arama; diff --git a/src/Section.js b/src/Section.js new file mode 100644 index 000000000..376a6756a --- /dev/null +++ b/src/Section.js @@ -0,0 +1,38 @@ +import React from "react"; +import styled from "styled-components"; +function Section(props) { + const { data, handleClick, icerik } = props; + + const SCAciklama = styled.div` + ${(props) => + props.icerik !== props.dataName ? `display:none` : `display:block`} + `; + const SCSection = styled.div` + width: 31%; + margin: 10px auto; + background-color: rgba(20, 0, 0, 0.3); + color: white; + padding: 1px 0 14px 0px; + `; + return ( + <> + +

{data.name}

+ + +

Gender: {data.gender}

+

Height: {data.height}

+

Mass: {data.mass}

+

BirthYear: {data.birth_year}

+

Eye Color: {data.eye_color}

+

Hair Color: {data.hair_color}

+

Skin Color: {data.skin_color}

+ {

Appears in {data.films.length} films

} + + + + ); +} +export default Section; diff --git a/src/index.css b/src/index.css index 5ea3014fb..d825dbc81 100644 --- a/src/index.css +++ b/src/index.css @@ -2,6 +2,6 @@ body { margin: 0; padding: 0; font-family: sans-serif; - background-image: url('./images/sw-bg.jpg'); + background-image: url("./images/sw-bg.jpg"); background-size: cover; }