This commit is contained in:
Henrik Bygren 2024-03-06 13:11:57 +01:00
parent 37aa6d3b53
commit 560c9a69bd
7 changed files with 59 additions and 45 deletions

1
api/getNames.js Normal file
View File

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

View File

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

View File

@ -1,9 +1 @@
{ {"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"}
"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"
}

View File

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

BIN
img/favicon.png Normal file

Binary file not shown.

After

Width:  |  Height:  |  Size: 5.2 KiB

View File

@ -6,12 +6,13 @@
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>JavaScript Prov WU-2</title> <title>JavaScript Prov WU-2</title>
<link rel="stylesheet" href="css/style.css"> <link rel="stylesheet" href="css/style.css">
<link rel="shortcut icon" type="image/png" href="img/favicon.png">
<script src="js/script.js"></script> <script src="js/script.js"></script>
</head> </head>
<body> <body>
<header> <header>
<img src="img/js-logo.svg" alt="js logo"> <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> <nav>
<a href="#" id="menuBtn">Mennny</a> <a href="#" id="menuBtn">Mennny</a>
<ul> <ul>
@ -47,7 +48,7 @@
<p>Gå till <a href="http://dn.se">DN</a> och titta.</p> <p>Gå till <a href="http://dn.se">DN</a> och titta.</p>
</section> </section>
<section> <section id="klass">
<h2>Klassen</h2> <h2>Klassen</h2>
</section> </section>
@ -62,4 +63,32 @@
<section>Uppgift att lösa!</section> <section>Uppgift att lösa!</section>
</footer> </footer>
</body> </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> </html>

View File

@ -1,7 +1,6 @@
const names = ['Otto', 'Johan','Axel', 'Theodor', 'Alvin', 'saleh', 'isak', 'Henrik', 'Jonathan', 'Omar', 'Joel'];
function init() { 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); window.addEventListener('load', init);