commit 46da1669107b8a8ff85b1b7491e1db1abb769bb8 Author: byhe Date: Tue Apr 2 12:33:30 2024 +0200 init diff --git a/api/getCountries.js b/api/getCountries.js new file mode 100644 index 0000000..de27726 --- /dev/null +++ b/api/getCountries.js @@ -0,0 +1 @@ +[{"Name": "Sweden"}, {"Name":"Finland"},{"Name": "Denmark"}, {"Name": "Norway"}, {"Name": "Island"}] \ No newline at end of file diff --git a/css/style.css b/css/style.css new file mode 100644 index 0000000..fa1773e --- /dev/null +++ b/css/style.css @@ -0,0 +1,126 @@ +* { + margin: 0; + padding: 0; + box-sizing: border-box; +} + +htmll { + font-size: 62.5%; +} + +body { + font-family: Helvetica, Arial, sans-serif; +} + +header { + position: relative; + background-color: #222222; + 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 { + position: absolute; + top: 5px; + right: 5px; + text-align: right; + width: 50%; + z-index: 1000; +} +header nav #menuBtn { + display: inline-block; + padding: 3px 10px; + text-align: center; + color: white; + border: 1px solid white; + border-radius: 7px; +} +header nav ul { + list-style-type: none; + margin-left: 0; + border: 1 px solid black; + padding-top: 4px; +} +header nav ul li { + display: block; + background-color: rgba(68, 131, 68, 0.7); + color: black; + margin-left: 0; + font-size: 1.2rem; + padding: 2px 4px 2px 4px; + text-align: center; +} +header nav a { + text-decoration: none; + color: black; +} + +main { + position: relative; + padding: 1rem; + display: grid; + 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] { + margin: 0.3rem; +} +main #calc button { + margin: 0.2rem 0.4rem; + padding: 0.2rem 0.4rem; +} +main #calc output { + padding: 4px; + border: 1px solid black; +} +main table { + border-collapse: collapse; +} +main table tr td { + border: 1px solid black; + padding: 4px; +} + +footer { + background-color: #222222; + color: #bababa; + padding: 1rem; +}/*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/css/style.css.map b/css/style.css.map new file mode 100644 index 0000000..f46123c --- /dev/null +++ b/css/style.css.map @@ -0,0 +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,kBAAA;EACA,yBAAA;EACA,cAAA;EACA,aAAA;ACGJ;ADDI;EACI,WAAA;EACA,YAAA;EACA,WAAA;EACA,kBAAA;ACGR;ADAI;EACI,yCAAA;EACA,iBAAA;ACER;ADCI;EACI,kBAAA;EACA,QAAA;EACA,UAAA;EACA,iBAAA;EACA,UAAA;EACA,aAAA;ACCR;ADAQ;EACI,qBAAA;EACA,iBAAA;EACA,kBAAA;EACA,YAAA;EACA,uBAAA;EACA,kBAAA;ACEZ;ADAQ;EACI,qBAAA;EACA,cAAA;EACA,wBAAA;EACA,gBAAA;ACEZ;ADDY;EACI,cAAA;EACA,wCAAA;EACA,YAAA;EACA,cAAA;EACA,iBAAA;EACA,wBAAA;EACA,kBAAA;ACGhB;ADCQ;EACI,qBAAA;EACA,YAAA;ACCZ;;ADIA;EACI,kBAAA;EACA,aAAA;EACA,aAAA;EACA,8BAAA;EACA,WAAA;ACDJ;ADGI;EACI,uBAAA;EACA,eAAA;EACA,aAAA;ACDR;ADEQ;EACI,iBAAA;EACA,qBAAA;ACAZ;ADGQ;EACI,iBAAA;EACA,qBAAA;ACDZ;ADIQ;EACI,qBAAA;ACFZ;ADKQ;EACI,iBAAA;ACHZ;ADMQ;EACI,cAAA;EACA,iBAAA;ACJZ;ADQI;EACI,uBAAA;EACA,iBAAA;EACA,gBAAA;EACA,mBAAA;ACNR;ADQQ;EACI,cAAA;ACNZ;ADQQ;EACI,qBAAA;EACA,sBAAA;ACNZ;ADSQ;EACI,YAAA;EACA,uBAAA;ACPZ;ADWI;EACI,yBAAA;ACTR;ADWY;EACI,uBAAA;EACA,YAAA;ACThB;;ADeA;EACI,yBAAA;EACA,cAAA;EACA,aAAA;ACZJ","file":"style.css"} \ No newline at end of file diff --git a/css/style.scss b/css/style.scss new file mode 100644 index 0000000..51606f0 --- /dev/null +++ b/css/style.scss @@ -0,0 +1,139 @@ +*{ + margin: 0; + padding:0; + box-sizing: border-box; +} + +htmll{ + font-size: 62.5%; +} +body{ + font-family: Helvetica,Arial, sans-serif; +} +header{ + position: relative; + background-color: #222222; + color: #bababa; + padding: 1rem; + + img{ + float: left; + height: 3rem; + width: auto; + margin-right: 2rem; + } + + h1{ + font-family: Arial, Helvetica, sans-serif; + font-size: 2.5rem; + } + + nav{ + position: absolute; + top:5px; + right: 5px; + text-align: right; + width: 50%; + z-index: 1000; + #menuBtn { + display: inline-block; + padding: 3px 10px; + text-align: center; + color: white; + border: 1px solid white; + border-radius: 7px; + } + ul{ + list-style-type: none; + margin-left: 0; + border: 1 px solid black; + padding-top: 4px ; + li{ + display: block; + background-color: rgba(#448344, 0.7); + color: black; + margin-left: 0; + font-size: 1.2rem; + padding: 2px 4px 2px 4px; + text-align: center; + } + } + + a{ + text-decoration: none; + color: black; + } + } +} + +main{ + position: relative; + padding: 1rem; + display: grid; + grid-template-columns: 1fr 1fr; + gap: 0.4rem; + + section{ + border: 1px solid black; + padding: 0.4rem; + height: 18rem; + h2{ + font-size: 1.8rem; + margin-bottom: 0.5rem; + } + + h2{ + font-size: 1.4rem; + margin-bottom: 0.3rem; + } + + p{ + margin-bottom: 0.4rem; + } + + ul{ + margin-left: 1rem; + } + + legend { + margin: 0.5rem; + padding: 0 0.2rem + } + } + + #calc{ + border: 1px solid green; + padding-left: 5px; + padding-top: 5px; + padding-bottom: 5px; + + input[type='number']{ + margin: 0.3rem; + } + button{ + margin: 0.2rem 0.4rem; + padding: 0.2rem 0.4rem; + } + + output { + padding: 4px; + border: 1px solid black; + } + } + + table { + border-collapse: collapse; + tr { + td{ + border: 1px solid black; + padding: 4px; + } + } + } +} + +footer{ + background-color: #222222; + color: #bababa; + padding: 1rem; +} \ No newline at end of file diff --git a/img/favicon.png b/img/favicon.png new file mode 100644 index 0000000..6cc5e90 Binary files /dev/null and b/img/favicon.png differ diff --git a/img/henrik.png b/img/henrik.png new file mode 100755 index 0000000..56dfcdb Binary files /dev/null and b/img/henrik.png differ diff --git a/img/js-logo.svg b/img/js-logo.svg new file mode 100644 index 0000000..b1428d6 --- /dev/null +++ b/img/js-logo.svg @@ -0,0 +1,54 @@ + + + Slice 1 + + + + image/svg+xml + + Slice 1 + + + + + + + + + + + + + diff --git a/index.html b/index.html new file mode 100644 index 0000000..55efc0c --- /dev/null +++ b/index.html @@ -0,0 +1,73 @@ + + + + + + + JavaScript Prov WU-2 + + + + + +
+ js logo +

Prov i JavaScript

+

Version 2

+ +
+
+
+

Detta om detta

+

Ta bort

+ + + + + + + + + + + + +
JanJansson
LisaOlsson
Eva +
+
+
+

Mer om detta

+ Bild på Henrik Bygren + +

Gå till DN och titta.

+
+
+

Länder

+ + +
+
+
+ Addera 5 + + 15 +
+
+
+ + + \ No newline at end of file diff --git a/js/script.js b/js/script.js new file mode 100644 index 0000000..62ee1f1 --- /dev/null +++ b/js/script.js @@ -0,0 +1,5 @@ +function init() { + alert("Funktionen init() körs nu. Kommentera bort denna rad i js-filen när det fungerar."); +} + +window.addEventListener('load', init); \ No newline at end of file