FSWeb-S6-Challenge/Cevaplar

App.css

@@ -0,0 +1,10 @@
+.App {
+  text-align: center;
+  width: 50%;
+  margin: auto;
+}
+.Header {
+  color: #443e3e;
+  text-shadow: 1px 1px 5px #fff;
+}
+/* write your parent styles in here for your App.js */

App.js

@@ -0,0 +1,40 @@
+import React from 'react';
+import Karakter from './components/Karakter';
+import { useEffect } from 'react';
+import axios from 'axios';
+import { useState } from 'react';
+import Karakterler from './components/karakterler';
+
+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 
+  // 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 [isloading, setIsLoading] = useState(true);
+useEffect(() => {
+  setIsLoading(true);
+  axios
+  .get("https://swapi.dev/api/people/")
+  .then((res) => {
+    console.log(res.data.results);
+    setData(res.data.results);
+  setIsLoading(false);
+  })
+  .catch(err => {
+    console.warn(err.message);
+  });
+},[]);  
+  return (
+    <div className="App">
+      <h1 className="Header">Karakterler</h1>
+    {isloading ? <p>LOADING...</p>:<Karakterler data = {data}/> }
+    </div>
+
+  );
+}
+
+export default App;

Karakter.js

@@ -0,0 +1,24 @@
+// Karakter bileşeniniz buraya gelecek
+import {
+    AccordionBody,
+    AccordionHeader,
+    AccordionItem,
+  } from 'reactstrap';
+  const Karakter = (props) => {
+    const {item} = props;
+    return <AccordionItem>
+    <AccordionHeader targetId={item.name}>{item.name}</AccordionHeader>
+    <AccordionBody accordionId={item.name}>
+      <p><strong>Height:</strong>{item.height}</p>
+      <p><strong>Mass:</strong>{item.Mass}</p>
+      <p><strong>Hair Color:</strong>{item.hair_Color}</p>
+      <p><strong>Skin Color:</strong>{item.skin_color}</p>
+      <p><strong>Eye Color:</strong>{item.eye_color}</p>
+      <p><strong>Birth Year:</strong>{item.birth_year}</p>
+      <p><strong>Gender:</strong>{item.gender}</p>
+    </AccordionBody>
+  </AccordionItem>
+}
+export default Karakter;
+
+

index.css

@@ -0,0 +1,7 @@
+body {
+  margin: 0;
+  padding: 0;
+  font-family: sans-serif;
+  background-image: url('./images/sw-bg.jpg');
+  background-size: cover;
+}

index.js

@@ -0,0 +1,15 @@
+// This is for the fake API. Do not delete!
+import React from "react";
+import { createRoot } from "react-dom/client";
+import { worker } from "./mocks/browser";
+import 'bootstrap/dist/css/bootstrap.min.css';
+
+import App from "./App";
+import "./index.css";
+import "./App.css";
+
+worker.start();
+
+const container = document.getElementById("root");
+const root = createRoot(container)
+root.render(<App />);

karakterler.js

@@ -0,0 +1,28 @@
+import React, { useState } from 'react';
+import {
+    Accordion,
+
+
+} from 'reactstrap';
+  import Karakter from "./Karakter";
+
+  const Karakterler = (props) => {
+    const {data} = props;
+    const [open, setOpen] = useState('1');
+  const toggle = (id) => {
+    if (open === id) {
+      setOpen();
+    } else {
+      setOpen(id);
+    }
+};
+    return  <div>
+    <Accordion flush open={open} toggle={toggle}>
+        Karakterler 
+    {data.map((item) => (
+        <Karakter item = {item}/>
+    ))}
+    </Accordion>
+    </div>
+}
+export default Karakterler;

sahte-veri.js

@@ -0,0 +1,263 @@
+const sahteVeri = {
+    "count": 82, 
+    "next": "https://swapi.dev/api/people/?page=2", 
+    "previous": null, 
+    "results": [
+        {
+            "name": "Luke Skywalker", 
+            "height": "172", 
+            "mass": "77", 
+            "hair_color": "blond", 
+            "skin_color": "fair", 
+            "eye_color": "blue", 
+            "birth_year": "19BBY", 
+            "gender": "male", 
+            "homeworld": "https://swapi.dev/api/planets/1/", 
+            "films": [
+                "https://swapi.dev/api/films/1/", 
+                "https://swapi.dev/api/films/2/", 
+                "https://swapi.dev/api/films/3/", 
+                "https://swapi.dev/api/films/6/"
+            ], 
+            "species": [], 
+            "vehicles": [
+                "https://swapi.dev/api/vehicles/14/", 
+                "https://swapi.dev/api/vehicles/30/"
+            ], 
+            "starships": [
+                "https://swapi.dev/api/starships/12/", 
+                "https://swapi.dev/api/starships/22/"
+            ], 
+            "created": "2014-12-09T13:50:51.644000Z", 
+            "edited": "2014-12-20T21:17:56.891000Z", 
+            "url": "https://swapi.dev/api/people/1/"
+        }, 
+        {
+            "name": "C-3PO", 
+            "height": "167", 
+            "mass": "75", 
+            "hair_color": "n/a", 
+            "skin_color": "gold", 
+            "eye_color": "yellow", 
+            "birth_year": "112BBY", 
+            "gender": "n/a", 
+            "homeworld": "https://swapi.dev/api/planets/1/", 
+            "films": [
+                "https://swapi.dev/api/films/1/", 
+                "https://swapi.dev/api/films/2/", 
+                "https://swapi.dev/api/films/3/", 
+                "https://swapi.dev/api/films/4/", 
+                "https://swapi.dev/api/films/5/", 
+                "https://swapi.dev/api/films/6/"
+            ], 
+            "species": [
+                "https://swapi.dev/api/species/2/"
+            ], 
+            "vehicles": [], 
+            "starships": [], 
+            "created": "2014-12-10T15:10:51.357000Z", 
+            "edited": "2014-12-20T21:17:50.309000Z", 
+            "url": "https://swapi.dev/api/people/2/"
+        }, 
+        {
+            "name": "R2-D2", 
+            "height": "96", 
+            "mass": "32", 
+            "hair_color": "n/a", 
+            "skin_color": "white, blue", 
+            "eye_color": "red", 
+            "birth_year": "33BBY", 
+            "gender": "n/a", 
+            "homeworld": "https://swapi.dev/api/planets/8/", 
+            "films": [
+                "https://swapi.dev/api/films/1/", 
+                "https://swapi.dev/api/films/2/", 
+                "https://swapi.dev/api/films/3/", 
+                "https://swapi.dev/api/films/4/", 
+                "https://swapi.dev/api/films/5/", 
+                "https://swapi.dev/api/films/6/"
+            ], 
+            "species": [
+                "https://swapi.dev/api/species/2/"
+            ], 
+            "vehicles": [], 
+            "starships": [], 
+            "created": "2014-12-10T15:11:50.376000Z", 
+            "edited": "2014-12-20T21:17:50.311000Z", 
+            "url": "https://swapi.dev/api/people/3/"
+        }, 
+        {
+            "name": "Darth Vader", 
+            "height": "202", 
+            "mass": "136", 
+            "hair_color": "none", 
+            "skin_color": "white", 
+            "eye_color": "yellow", 
+            "birth_year": "41.9BBY", 
+            "gender": "male", 
+            "homeworld": "https://swapi.dev/api/planets/1/", 
+            "films": [
+                "https://swapi.dev/api/films/1/", 
+                "https://swapi.dev/api/films/2/", 
+                "https://swapi.dev/api/films/3/", 
+                "https://swapi.dev/api/films/6/"
+            ], 
+            "species": [], 
+            "vehicles": [], 
+            "starships": [
+                "https://swapi.dev/api/starships/13/"
+            ], 
+            "created": "2014-12-10T15:18:20.704000Z", 
+            "edited": "2014-12-20T21:17:50.313000Z", 
+            "url": "https://swapi.dev/api/people/4/"
+        }, 
+        {
+            "name": "Leia Organa", 
+            "height": "150", 
+            "mass": "49", 
+            "hair_color": "brown", 
+            "skin_color": "light", 
+            "eye_color": "brown", 
+            "birth_year": "19BBY", 
+            "gender": "female", 
+            "homeworld": "https://swapi.dev/api/planets/2/", 
+            "films": [
+                "https://swapi.dev/api/films/1/", 
+                "https://swapi.dev/api/films/2/", 
+                "https://swapi.dev/api/films/3/", 
+                "https://swapi.dev/api/films/6/"
+            ], 
+            "species": [], 
+            "vehicles": [
+                "https://swapi.dev/api/vehicles/30/"
+            ], 
+            "starships": [], 
+            "created": "2014-12-10T15:20:09.791000Z", 
+            "edited": "2014-12-20T21:17:50.315000Z", 
+            "url": "https://swapi.dev/api/people/5/"
+        }, 
+        {
+            "name": "Owen Lars", 
+            "height": "178", 
+            "mass": "120", 
+            "hair_color": "brown, grey", 
+            "skin_color": "light", 
+            "eye_color": "blue", 
+            "birth_year": "52BBY", 
+            "gender": "male", 
+            "homeworld": "https://swapi.dev/api/planets/1/", 
+            "films": [
+                "https://swapi.dev/api/films/1/", 
+                "https://swapi.dev/api/films/5/", 
+                "https://swapi.dev/api/films/6/"
+            ], 
+            "species": [], 
+            "vehicles": [], 
+            "starships": [], 
+            "created": "2014-12-10T15:52:14.024000Z", 
+            "edited": "2014-12-20T21:17:50.317000Z", 
+            "url": "https://swapi.dev/api/people/6/"
+        }, 
+        {
+            "name": "Beru Whitesun lars", 
+            "height": "165", 
+            "mass": "75", 
+            "hair_color": "brown", 
+            "skin_color": "light", 
+            "eye_color": "blue", 
+            "birth_year": "47BBY", 
+            "gender": "female", 
+            "homeworld": "https://swapi.dev/api/planets/1/", 
+            "films": [
+                "https://swapi.dev/api/films/1/", 
+                "https://swapi.dev/api/films/5/", 
+                "https://swapi.dev/api/films/6/"
+            ], 
+            "species": [], 
+            "vehicles": [], 
+            "starships": [], 
+            "created": "2014-12-10T15:53:41.121000Z", 
+            "edited": "2014-12-20T21:17:50.319000Z", 
+            "url": "https://swapi.dev/api/people/7/"
+        }, 
+        {
+            "name": "R5-D4", 
+            "height": "97", 
+            "mass": "32", 
+            "hair_color": "n/a", 
+            "skin_color": "white, red", 
+            "eye_color": "red", 
+            "birth_year": "unknown", 
+            "gender": "n/a", 
+            "homeworld": "https://swapi.dev/api/planets/1/", 
+            "films": [
+                "https://swapi.dev/api/films/1/"
+            ], 
+            "species": [
+                "https://swapi.dev/api/species/2/"
+            ], 
+            "vehicles": [], 
+            "starships": [], 
+            "created": "2014-12-10T15:57:50.959000Z", 
+            "edited": "2014-12-20T21:17:50.321000Z", 
+            "url": "https://swapi.dev/api/people/8/"
+        }, 
+        {
+            "name": "Biggs Darklighter", 
+            "height": "183", 
+            "mass": "84", 
+            "hair_color": "black", 
+            "skin_color": "light", 
+            "eye_color": "brown", 
+            "birth_year": "24BBY", 
+            "gender": "male", 
+            "homeworld": "https://swapi.dev/api/planets/1/", 
+            "films": [
+                "https://swapi.dev/api/films/1/"
+            ], 
+            "species": [], 
+            "vehicles": [], 
+            "starships": [
+                "https://swapi.dev/api/starships/12/"
+            ], 
+            "created": "2014-12-10T15:59:50.509000Z", 
+            "edited": "2014-12-20T21:17:50.323000Z", 
+            "url": "https://swapi.dev/api/people/9/"
+        }, 
+        {
+            "name": "Obi-Wan Kenobi", 
+            "height": "182", 
+            "mass": "77", 
+            "hair_color": "auburn, white", 
+            "skin_color": "fair", 
+            "eye_color": "blue-gray", 
+            "birth_year": "57BBY", 
+            "gender": "male", 
+            "homeworld": "https://swapi.dev/api/planets/20/", 
+            "films": [
+                "https://swapi.dev/api/films/1/", 
+                "https://swapi.dev/api/films/2/", 
+                "https://swapi.dev/api/films/3/", 
+                "https://swapi.dev/api/films/4/", 
+                "https://swapi.dev/api/films/5/", 
+                "https://swapi.dev/api/films/6/"
+            ], 
+            "species": [], 
+            "vehicles": [
+                "https://swapi.dev/api/vehicles/38/"
+            ], 
+            "starships": [
+                "https://swapi.dev/api/starships/48/", 
+                "https://swapi.dev/api/starships/59/", 
+                "https://swapi.dev/api/starships/64/", 
+                "https://swapi.dev/api/starships/65/", 
+                "https://swapi.dev/api/starships/74/"
+            ], 
+            "created": "2014-12-10T16:16:29.192000Z", 
+            "edited": "2014-12-20T21:17:50.325000Z", 
+            "url": "https://swapi.dev/api/people/10/"
+        }
+    ]
+}
+
+export default sahteVeri;