init
This commit is contained in:
commit
46da166910
1
api/getCountries.js
Normal file
1
api/getCountries.js
Normal file
@ -0,0 +1 @@
|
||||
[{"Name": "Sweden"}, {"Name":"Finland"},{"Name": "Denmark"}, {"Name": "Norway"}, {"Name": "Island"}]
|
||||
126
css/style.css
Normal file
126
css/style.css
Normal file
@ -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 */
|
||||
1
css/style.css.map
Normal file
1
css/style.css.map
Normal file
@ -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"}
|
||||
139
css/style.scss
Normal file
139
css/style.scss
Normal file
@ -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;
|
||||
}
|
||||
BIN
img/favicon.png
Normal file
BIN
img/favicon.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 5.2 KiB |
BIN
img/henrik.png
Executable file
BIN
img/henrik.png
Executable file
Binary file not shown.
|
After Width: | Height: | Size: 354 KiB |
54
img/js-logo.svg
Normal file
54
img/js-logo.svg
Normal file
@ -0,0 +1,54 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<svg
|
||||
xmlns:dc="http://purl.org/dc/elements/1.1/"
|
||||
xmlns:cc="http://creativecommons.org/ns#"
|
||||
xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
|
||||
xmlns:svg="http://www.w3.org/2000/svg"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
version="1.1"
|
||||
width="297.45001"
|
||||
height="337.341"
|
||||
viewBox="0 0 297.45001 337.341"
|
||||
id="svg2">
|
||||
<title
|
||||
id="title4">Slice 1</title>
|
||||
<metadata
|
||||
id="metadata30">
|
||||
<rdf:RDF>
|
||||
<cc:Work
|
||||
rdf:about="">
|
||||
<dc:format>image/svg+xml</dc:format>
|
||||
<dc:type
|
||||
rdf:resource="http://purl.org/dc/dcmitype/StillImage" />
|
||||
<dc:title>Slice 1</dc:title>
|
||||
</cc:Work>
|
||||
</rdf:RDF>
|
||||
</metadata>
|
||||
<defs
|
||||
id="defs8" />
|
||||
<g
|
||||
transform="translate(-0.071,-82.67)"
|
||||
id="Layer_1"
|
||||
style="fill:none;stroke:none">
|
||||
<path
|
||||
d="M 27.142,386.29 0.071,82.67 l 297.45,0 -27.096,303.571 -121.811,33.77 L 27.142,386.29 z m 0,0"
|
||||
id="path13"
|
||||
style="fill:#d4b830;fill-opacity:1" />
|
||||
<path
|
||||
d="m 148.798,394.199 98.427,-27.288 23.157,-259.415 -121.584,0 0,286.703 z m 0,0"
|
||||
id="path15"
|
||||
style="fill:#fdd83c;fill-opacity:1" />
|
||||
<g
|
||||
transform="translate(55,142)"
|
||||
id="Group">
|
||||
<path
|
||||
d="m 195.55107,75.496002 -52.47907,0 0,-38.132 55.79667,0 3.30333,-37.23899948 -98.0332,0 0,112.60699748 50.7682,0 -4.484,48.294 -46.284,8.426 0,38.819 81.091,-18.451 z"
|
||||
id="path18"
|
||||
style="fill:#4d4d4d;fill-opacity:1" />
|
||||
<path
|
||||
d="m 83.795999,0.12500252 -83.15099941,0 3.45300001,37.25399948 42.3189994,3.4e-4 0,126.706188 -20.741,-3.03453 -2.652,-29.698 c 0,0 -24.9193323,0 -37.378999,0 l 5.2159997,58.467 c 92.9349993,18.45053 0.3522911,-0.0135 92.9349993,18.45053 z"
|
||||
id="path24"
|
||||
style="fill:#000000;fill-opacity:1" />
|
||||
</g>
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
73
index.html
Normal file
73
index.html
Normal file
@ -0,0 +1,73 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>JavaScript Prov WU-2</title>
|
||||
<link rel="stylesheet" href="css/style.css?v=2.1">
|
||||
<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 JavaScript</h1>
|
||||
<h2 id="h2-1">Version 2</h2>
|
||||
<nav>
|
||||
<a href="#" id="menuBtn">☰ MENY</a>
|
||||
<ul>
|
||||
<li><a href="#">Hem</a></li>
|
||||
<li>Sida 1</li>
|
||||
<li>Sida 2</li>
|
||||
<li>Sida 3</li>
|
||||
<li>Sida 4</li>
|
||||
<li>Sida 5</li>
|
||||
<li>Sida 6</li>
|
||||
<li>Om</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</header>
|
||||
<main>
|
||||
<section>
|
||||
<h2>Detta om detta</h2>
|
||||
<h3>Ta bort</h3>
|
||||
<table>
|
||||
<tr>
|
||||
<td>Jan</td>
|
||||
<td>Jansson</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Lisa</td>
|
||||
<td>Olsson</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>Eva</td>
|
||||
<td><Mattson</td>
|
||||
</tr>
|
||||
</table>
|
||||
</section>
|
||||
<section>
|
||||
<h2>Mer om detta</h2>
|
||||
<img src="img/henrik.png" width="150" alt="Bild på Henrik Bygren">
|
||||
|
||||
<p>Gå till <a href="http://dn.se">DN</a> och titta.</p>
|
||||
</section>
|
||||
<section id="country">
|
||||
<h2>Länder</h2>
|
||||
|
||||
|
||||
</section>
|
||||
<section id="calc">
|
||||
<fieldset>
|
||||
<legend>Addera 5</legend>
|
||||
<button id="add">ADD 5</button>
|
||||
<output>15</output>
|
||||
</fieldset>
|
||||
</section>
|
||||
</main>
|
||||
<footer>
|
||||
<section>Uppgift att lösa!</section>
|
||||
</footer>
|
||||
</body>
|
||||
</html>
|
||||
5
js/script.js
Normal file
5
js/script.js
Normal file
@ -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);
|
||||
Loading…
Reference in New Issue
Block a user