From 4ac901bd87094d35af1b098829572a31fea48af5 Mon Sep 17 00:00:00 2001
From: Aksel Fosaas <akselsf@stud.ntnu.no>
Date: Sun, 8 Sep 2024 14:38:39 +0200
Subject: [PATCH] La til pokemon

---
 .gitignore    | 23 +++++++++++++++++++++++
 src/App.css   | 44 ++++++++++++--------------------------------
 src/App.js    | 38 ++++++++++++++++++++++++--------------
 src/Knapp.jsx | 33 +++++++++++++++++++++++++++++++++
 src/Kult.jsx  | 18 ++++++++++++++++++
 src/style.css |  3 +++
 6 files changed, 113 insertions(+), 46 deletions(-)
 create mode 100644 .gitignore
 create mode 100644 src/Knapp.jsx
 create mode 100644 src/Kult.jsx
 create mode 100644 src/style.css

diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..4d29575
--- /dev/null
+++ b/.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*
diff --git a/src/App.css b/src/App.css
index 74b5e05..d98dbd7 100644
--- a/src/App.css
+++ b/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;
+}
\ No newline at end of file
diff --git a/src/App.js b/src/App.js
index 3784575..f005457 100644
--- a/src/App.js
+++ b/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;
diff --git a/src/Knapp.jsx b/src/Knapp.jsx
new file mode 100644
index 0000000..125bb19
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/src/Kult.jsx b/src/Kult.jsx
new file mode 100644
index 0000000..582756a
--- /dev/null
+++ b/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;
\ No newline at end of file
diff --git a/src/style.css b/src/style.css
new file mode 100644
index 0000000..7f21e5e
--- /dev/null
+++ b/src/style.css
@@ -0,0 +1,3 @@
+button {
+    background-color: orange;
+}rg
\ No newline at end of file