add API

api/getNames.js

@@ -0,0 +1 @@
+[{"name": "Otto"}, {"name":"Johan"},{"name": "Axel"}, {"name": "Theodor"}, {"name": "Alvin"}, {"name": "saleh"}, {"name": "isak"}]

css/style.css

@@ -1,8 +1,7 @@
 * {
   margin: 0;
   padding: 0;
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
+  box-sizing: border-box;
 }
 
 htmll {
@@ -10,7 +9,7 @@ htmll {
 }
 
 body {
-  font-family: Helvetica,Arial, sans-serif;
+  font-family: Helvetica, Arial, sans-serif;
 }
 
 header {
@@ -18,24 +17,20 @@ header {
   color: #bababa;
   padding: 1rem;
 }
-
 header img {
   float: left;
   height: 3rem;
   width: auto;
   margin-right: 2rem;
 }
-
 header h1 {
   font-family: Arial, Helvetica, sans-serif;
   font-size: 2.5rem;
 }
-
 header nav ul {
   list-style-type: none;
   margin-left: 0;
 }
-
 header nav ul li {
   display: inline-block;
   background-color: #d3d00c;
@@ -45,7 +40,6 @@ header nav ul li {
   font-size: 1rem;
   padding: 2px 4px 2px 4px;
 }
-
 header nav a {
   text-decoration: none;
   color: black;
@@ -54,58 +48,49 @@ header nav a {
 main {
   position: relative;
   padding: 1rem;
-  display: -ms-grid;
   display: grid;
-  -ms-grid-columns: 1fr 1fr;
-      grid-template-columns: 1fr 1fr;
+  grid-template-columns: 1fr 1fr;
   gap: 0.4rem;
 }
-
 main section {
   border: 1px solid black;
   padding: 0.4rem;
   height: 18rem;
 }
-
 main section h2 {
   font-size: 1.8rem;
   margin-bottom: 0.5rem;
 }
-
 main section h2 {
   font-size: 1.4rem;
   margin-bottom: 0.3rem;
 }
-
 main section p {
   margin-bottom: 0.4rem;
 }
-
+main section ul {
+  margin-left: 1rem;
+}
+main section legend {
+  margin: 0.5rem;
+  padding: 0 0.2rem;
+}
 main #calc {
   border: 1px solid green;
   padding-left: 5px;
   padding-top: 5px;
   padding-bottom: 5px;
 }
-
-main #calc input[type='number'] {
+main #calc input[type=number] {
   margin: 0.3rem;
 }
-
 main #calc button {
-  margin-top: 0.2rem;
-  margin-left: 0.4rem;
-  margin-bottom: 0.2rem;
-  padding: 0.7rem;
-}
-
-main #calc output{
-  margin: 0.7rem;
+  margin: 0.2rem 0.4rem;
+  padding: 0.2rem 0.4rem;
 }
 
 footer {
   background-color: #222222;
   color: #bababa;
   padding: 1rem;
-}
-/*# sourceMappingURL=style.css.map */
+}/*# sourceMappingURL=style.css.map */

css/style.css.map

@@ -1,9 +1 @@
-{
-    "version": 3,
-    "mappings": "AAAA,AAAA,CAAC,CAAA;EACG,MAAM,EAAE,CAAC;EACT,OAAO,EAAC,CAAC;EACT,UAAU,EAAE,UAAU;CACzB;;AAED,AAAA,KAAK,CAAA;EACD,SAAS,EAAE,KAAK;CACnB;;AACD,AAAA,IAAI,CAAA;EACA,WAAW,EAAE,2BAA2B;CAC3C;;AACD,AAAA,MAAM,CAAA;EACF,gBAAgB,EAAE,OAAO;EACzB,KAAK,EAAE,OAAO;EACd,OAAO,EAAE,IAAI;CAmChB;;AAtCD,AAKI,MALE,CAKF,GAAG,CAAA;EACC,KAAK,EAAE,IAAI;EACX,MAAM,EAAE,IAAI;EACZ,KAAK,EAAE,IAAI;EACX,YAAY,EAAE,IAAI;CACrB;;AAVL,AAYI,MAZE,CAYF,EAAE,CAAA;EACE,WAAW,EAAE,4BAA4B;EACzC,SAAS,EAAE,MAAM;CACpB;;AAfL,AAkBQ,MAlBF,CAiBF,GAAG,CACC,EAAE,CAAA;EACE,eAAe,EAAE,IAAI;EACrB,WAAW,EAAE,CAAC;CAWjB;;AA/BT,AAsBY,MAtBN,CAiBF,GAAG,CACC,EAAE,CAIE,EAAE,CAAA;EACE,OAAO,EAAE,YAAY;EACrB,gBAAgB,EAAE,OAAO;EACzB,KAAK,EAAC,OAAO;EACb,MAAM,EAAE,eAAe;EACvB,WAAW,EAAE,CAAC;EACd,SAAS,EAAE,IAAI;EACf,OAAO,EAAE,eAAe;CAC3B;;AA9Bb,AAiCQ,MAjCF,CAiBF,GAAG,CAgBC,CAAC,CAAA;EACG,eAAe,EAAE,IAAI;EACrB,KAAK,EAAE,KAAK;CACf;;AAIT,AAAA,IAAI,CAAA;EACA,QAAQ,EAAE,QAAQ;EAClB,OAAO,EAAE,IAAI;EACb,OAAO,EAAE,IAAI;EACb,qBAAqB,EAAE,OAAO;EAC9B,GAAG,EAAE,MAAM;CAoCd;;AAzCD,AAOI,IAPA,CAOA,OAAO,CAAA;EACH,MAAM,EAAE,eAAe;EACvB,OAAO,EAAE,MAAM;EACf,MAAM,EAAE,KAAK;CAchB;;AAxBL,AAWQ,IAXJ,CAOA,OAAO,CAIH,EAAE,CAAA;EACE,SAAS,EAAE,MAAM;EACjB,aAAa,EAAE,MAAM;CACxB;;AAdT,AAgBQ,IAhBJ,CAOA,OAAO,CASH,EAAE,CAAA;EACE,SAAS,EAAE,MAAM;EACjB,aAAa,EAAE,MAAM;CACxB;;AAnBT,AAqBQ,IArBJ,CAOA,OAAO,CAcH,CAAC,CAAA;EACG,aAAa,EAAE,MAAM;CACxB;;AAvBT,AA0BI,IA1BA,CA0BA,KAAK,CAAA;EACD,MAAM,EAAE,eAAe;EACvB,YAAY,EAAE,GAAG;EACjB,WAAW,EAAE,GAAG;EAChB,cAAc,EAAE,GAAG;CAUtB;;AAxCL,AAgCQ,IAhCJ,CA0BA,KAAK,CAMD,KAAK,CAAA,AAAA,IAAC,CAAK,QAAQ,AAAb,EAAc;EAChB,MAAM,EAAE,MAAM;CACjB;;AAlCT,AAmCQ,IAnCJ,CA0BA,KAAK,CASD,MAAM,CAAA;EACF,UAAU,EAAE,MAAM;EAClB,WAAW,EAAE,MAAM;EACnB,aAAa,EAAE,MAAM;CACxB;;AAIT,AAAA,MAAM,CAAA;EACF,gBAAgB,EAAE,OAAO;EACzB,KAAK,EAAE,OAAO;EACd,OAAO,EAAE,IAAI;CAChB",
-    "sources": [
-        "style.scss"
-    ],
-    "names": [],
-    "file": "style.css"
-}
+{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAAA;EACI,SAAA;EACA,UAAA;EACA,sBAAA;ACCJ;;ADEA;EACI,gBAAA;ACCJ;;ADCA;EACI,yCAAA;ACEJ;;ADAA;EACI,yBAAA;EACA,cAAA;EACA,aAAA;ACGJ;ADDI;EACI,WAAA;EACA,YAAA;EACA,WAAA;EACA,kBAAA;ACGR;ADAI;EACI,yCAAA;EACA,iBAAA;ACER;ADEQ;EACI,qBAAA;EACA,cAAA;ACAZ;ADEY;EACI,qBAAA;EACA,yBAAA;EACA,cAAA;EACA,uBAAA;EACA,cAAA;EACA,eAAA;EACA,wBAAA;ACAhB;ADIQ;EACI,qBAAA;EACA,YAAA;ACFZ;;ADOA;EACI,kBAAA;EACA,aAAA;EACA,aAAA;EACA,8BAAA;EACA,WAAA;ACJJ;ADMI;EACI,uBAAA;EACA,eAAA;EACA,aAAA;ACJR;ADKQ;EACI,iBAAA;EACA,qBAAA;ACHZ;ADMQ;EACI,iBAAA;EACA,qBAAA;ACJZ;ADOQ;EACI,qBAAA;ACLZ;ADQQ;EACI,iBAAA;ACNZ;ADSQ;EACI,cAAA;EACA,iBAAA;ACPZ;ADWI;EACI,uBAAA;EACA,iBAAA;EACA,gBAAA;EACA,mBAAA;ACTR;ADWQ;EACI,cAAA;ACTZ;ADWQ;EACI,qBAAA;EACA,sBAAA;ACTZ;;ADcA;EACI,yBAAA;EACA,cAAA;EACA,aAAA;ACXJ","file":"style.css"}

css/style.scss

@@ -74,6 +74,15 @@ main{
         p{
             margin-bottom: 0.4rem;
         }
+
+        ul{
+            margin-left: 1rem;
+        }
+
+        legend {
+            margin: 0.5rem;
+            padding: 0 0.2rem
+        }
     }
 
     #calc{
@@ -86,9 +95,8 @@ main{
             margin: 0.3rem;
         }
         button{
-            margin-top: 0.2rem;
-            margin-left: 0.4rem;
-            margin-bottom: 0.2rem;
+            margin: 0.2rem 0.4rem;
+            padding: 0.2rem 0.4rem;
         }
     }
 }

index.html

@@ -6,12 +6,13 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>JavaScript Prov WU-2</title>
     <link rel="stylesheet" href="css/style.css">
+    <link rel="shortcut icon" type="image/png" href="img/favicon.png">
     <script src="js/script.js"></script>
 </head>
 <body>
     <header>
         <img src="img/js-logo.svg" alt="js logo">
-        <h1 id="h1-1">Prov i JavasScript</h1>
+        <h1 id="h1-1">Prov i JavaScript</h1>
         <nav>
             <a href="#" id="menuBtn">Mennny</a>
             <ul>
@@ -47,7 +48,7 @@
     
             <p>Gå till <a href="http://dn.se">DN</a> och titta.</p>
         </section>
-        <section>
+        <section id="klass">
             <h2>Klassen</h2>
 
         </section>
@@ -62,4 +63,32 @@
         <section>Uppgift att lösa!</section>
     </footer>
 </body>
+<script>
+    function renderNames(names){
+        let section = document.getElementById('klass');
+        const ul = document.createElement('ul');
+        const fragment = document.createDocumentFragment();
+
+        names.forEach(student => {
+            const li = document.createElement('li');
+            li.innerText = student.name;
+            fragment.appendChild(li);
+        });
+
+        ul.appendChild(fragment);
+        section.appendChild(ul)
+    } 
+
+    async function getNames(){
+        const response = await fetch('./api/getNames.js');
+        const names = await response.json();
+
+        renderNames(names);
+        
+        for(let i = 0; i <names.length; i++){
+            console.log("namn:" + names[i].name)
+        }
+    }
+    getNames();
+</script>
 </html>

js/script.js

@@ -1,7 +1,6 @@
-const names = ['Otto', 'Johan','Axel', 'Theodor', 'Alvin', 'saleh', 'isak', 'Henrik', 'Jonathan', 'Omar', 'Joel'];
 
 function init() {
-    alert("Funktionen init() körs nu. Kommentera bort raden i js-filen när det fungerar.");
+    alert("Funktionen init() körs nu. Kommentera bort denna rad i js-filen när det fungerar.");
 }
 
 window.addEventListener('load', init);