La til pokemon

.gitignore

@@ -0,0 +1,23 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

src/App.css

@@ -1,38 +1,18 @@
-.App {
-  text-align: center;
+.knappelement {
+  color: black;
+  background-color: pink;
 }
 
-.App-logo {
-  height: 40vmin;
-  pointer-events: none;
+.knappdiv {
+  text-align: center;
+  border: 1px solid black;
+  width: 150px;
+  height: 150px;
+  padding: 10px;
 }
 
-@media (prefers-reduced-motion: no-preference) {
-  .App-logo {
-    animation: App-logo-spin infinite 20s linear;
-  }
-}
 
-.App-header {
-  background-color: #282c34;
-  min-height: 100vh;
+.App {
   display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  font-size: calc(10px + 2vmin);
-  color: white;
-}
-
-.App-link {
-  color: #61dafb;
-}
-
-@keyframes App-logo-spin {
-  from {
-    transform: rotate(0deg);
-  }
-  to {
-    transform: rotate(360deg);
-  }
-}
+  flex-wrap: wrap;
+}

src/App.js

@@ -1,25 +1,35 @@
 import logo from './logo.svg';
 import './App.css';
+import Knapp from './Knapp';
+import { useEffect } from 'react';
+import Kult from './Kult';
+import { useState } from 'react';
+
 
 function App() {
+
+  const [pokemon, setPokemon] = useState(null);
+
+  const fetchPokemon = async () => {
+    const p = await fetch("https://pokeapi.co/api/v2/pokemon?limit=100&offset=0").then(response => response.json());
+    setPokemon(p.results);
+  }
+
+  useEffect(() =>{ 
+    fetchPokemon();
+  }, []);
+
   return (
     <div className="App">
-      <header className="App-header">
-        <img src={logo} className="App-logo" alt="logo" />
-        <p>
-          Edit <code>src/App.js</code> and save to reload.
-        </p>
-        <a
-          className="App-link"
-          href="https://reactjs.org"
-          target="_blank"
-          rel="noopener noreferrer"
-        >
-          Learn React
-        </a>
-      </header>
+      {
+        pokemon && pokemon.map(p => <Knapp tittel={p.name} url={p.url} paragraf={"eofekoffekokofe"}/>)
+      }
+
     </div>
+
   );
+
+
 }
 
 export default App;

src/Knapp.jsx

@@ -0,0 +1,33 @@
+
+import React, {useEffect, useState} from 'react';
+
+function Knapp(props) {
+    const [verdi, setVerdi] = useState(0);
+
+    const [pokemon, setPokemon] = useState(null);
+
+    function hentPokemon() {
+        fetch(props.url).then(response => response.json()).then(data => setPokemon(data));
+    }
+
+    useEffect(() => {
+        hentPokemon();
+    })
+
+    function økverdi() {
+        setVerdi(verdi + 1);
+    }
+
+    return (
+        <div className='knappdiv'>
+         <button className='knappelement' onClick={() => økverdi()}>{props.tittel}</button>
+
+         {pokemon && <img src={pokemon.sprites.front_default}></img>
+         }
+
+
+        </div>
+    )
+}
+
+export default Knapp;

src/Kult.jsx

@@ -0,0 +1,18 @@
+import React, {useState} from 'react';
+
+function Kult(props) {
+    const [verdi, setVerdi] = useState(0);
+
+    function økverdi() {
+        setVerdi(verdi - 1);
+    }
+
+    return (
+        <div>
+         <button className='knappelement' onClick={() => økverdi()}>{"Hvor kul er Aksel"}</button>
+        <p>{verdi}</p>
+        </div>
+    )
+}
+
+export default Kult;

src/style.css

@@ -0,0 +1,3 @@
+button {
+    background-color: orange;
+}rg