From 560c9a69bd0f0c0ff2f801c364e75b048d140fbf Mon Sep 17 00:00:00 2001 From: Henrik Bygren Date: Wed, 6 Mar 2024 13:11:57 +0100 Subject: [PATCH] add API --- api/getNames.js | 1 + css/style.css | 43 ++++++++++++++----------------------------- css/style.css.map | 10 +--------- css/style.scss | 14 +++++++++++--- img/favicon.png | Bin 0 -> 5322 bytes index.html | 33 +++++++++++++++++++++++++++++++-- js/script.js | 3 +-- 7 files changed, 59 insertions(+), 45 deletions(-) create mode 100644 api/getNames.js create mode 100644 img/favicon.png diff --git a/api/getNames.js b/api/getNames.js new file mode 100644 index 0000000..0e26907 --- /dev/null +++ b/api/getNames.js @@ -0,0 +1 @@ +[{"name": "Otto"}, {"name":"Johan"},{"name": "Axel"}, {"name": "Theodor"}, {"name": "Alvin"}, {"name": "saleh"}, {"name": "isak"}] \ No newline at end of file diff --git a/css/style.css b/css/style.css index 6085ece..a7ab80d 100644 --- a/css/style.css +++ b/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 */ \ No newline at end of file +}/*# sourceMappingURL=style.css.map */ \ No newline at end of file diff --git a/css/style.css.map b/css/style.css.map index d0f2579..89503d0 100644 --- a/css/style.css.map +++ b/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" -} \ No newline at end of file +{"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"} \ No newline at end of file diff --git a/css/style.scss b/css/style.scss index e844c14..acc3b6a 100644 --- a/css/style.scss +++ b/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; } } } diff --git a/img/favicon.png b/img/favicon.png new file mode 100644 index 0000000000000000000000000000000000000000..6cc5e9065ea5fa91b4b920908843c793560f2f4d GIT binary patch literal 5322 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 JavaScript Prov WU-2 +
js logo -

Prov i JavasScript

+

Prov i JavaScript