AymanAb
/
frontend
Watch 1
Star 0
Fork 0
Code Issues 0 Pull Requests 0 Releases 0 Wiki Activity
Browse Source

init

master
Ayman Abdelsalam 4 years ago
commit
7de055cc1c
66 changed files with 2346 additions and 0 deletions
Split View Show Diff Stats
  1. 39
    0
      01-html-css-intro/index.html
  2. 41
    0
      01-html-css-intro/style.css
  3. 29
    0
      02-floats/floats.css
  4. 22
    0
      02-floats/floats.html
  5. 41
    0
      03-positioning/positioning.css
  6. 45
    0
      03-positioning/positioning.html
  7. 54
    0
      04-EX01/ex-01.css
  8. 26
    0
      04-EX01/ex-01.html
  9. 46
    0
      05-flex/flex.css
  10. 20
    0
      05-flex/flex.html
  11. BIN
      06-EX02/images/Exercise.png
  12. BIN
      06-EX02/images/bg-image.png
  13. BIN
      06-EX02/images/pic01.jpg
  14. BIN
      06-EX02/images/pic02.jpg
  15. BIN
      06-EX02/images/pic03.jpg
  16. 160
    0
      06-EX02/index.html
  17. 194
    0
      06-EX02/style.css
  18. 6
    0
      07-javascript-intro/.prettierrc
  19. 32
    0
      07-javascript-intro/index.html
  20. 39
    0
      07-javascript-intro/scripts/ex-03.result.js
  21. 9
    0
      07-javascript-intro/scripts/logger.js
  22. 88
    0
      07-javascript-intro/scripts/main.js
  23. 23
    0
      07-javascript-intro/styles/main.css
  24. 6
    0
      08-EX03/.prettierrc
  25. 18
    0
      08-EX03/index.html
  26. 9
    0
      08-EX03/scripts/logger.js
  27. 39
    0
      08-EX03/scripts/main.js
  28. 23
    0
      08-EX03/styles/main.css
  29. 6
    0
      09-form/.prettierrc
  30. 78
    0
      09-form/index.html
  31. 25
    0
      09-form/scripts/main.js
  32. 23
    0
      09-form/styles/main.css
  33. 6
    0
      10-EX04/.prettierrc
  34. 54
    0
      10-EX04/index.html
  35. 69
    0
      10-EX04/scripts/main.js
  36. 0
    0
      10-EX04/styles/main.css
  37. 6
    0
      11-EX05/.prettierrc
  38. 96
    0
      11-EX05/index.html
  39. 79
    0
      11-EX05/scripts/main.js
  40. 3
    0
      11-EX05/styles/main.css
  41. 6
    0
      12-array_methods/.prettierrc
  42. 19
    0
      12-array_methods/index.html
  43. 265
    0
      12-array_methods/scripts/main.js
  44. 0
    0
      12-array_methods/styles/main.css
  45. 6
    0
      13-xmlhttprequest/.prettierrc
  46. 18
    0
      13-xmlhttprequest/index.html
  47. 56
    0
      13-xmlhttprequest/scripts/main.js
  48. 28
    0
      13-xmlhttprequest/styles/main.css
  49. 6
    0
      14-grid/.prettierrc
  50. 32
    0
      14-grid/index.html
  51. 0
    0
      14-grid/scripts/main.js
  52. 26
    0
      14-grid/styles/main.css
  53. 6
    0
      15-promises/.prettierrc
  54. BIN
      15-promises/fetch.zip
  55. 6
    0
      15-promises/fetch/.prettierrc
  56. 20
    0
      15-promises/fetch/index.html
  57. 122
    0
      15-promises/fetch/scripts/main.js
  58. 46
    0
      15-promises/fetch/styles/main.css
  59. 13
    0
      15-promises/index.html
  60. 28
    0
      15-promises/scripts/main.js
  61. 0
    0
      15-promises/styles/main.css
  62. 6
    0
      16-media_queries/.prettierrc
  63. BIN
      16-media_queries/images/beautiful-logo.jpg
  64. 49
    0
      16-media_queries/index.html
  65. 0
    0
      16-media_queries/scripts/main.js
  66. 134
    0
      16-media_queries/styles/main.css

+ 39
- 0
01-html-css-intro/index.html View File

@@ -0,0 +1,39 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>HTML/CSS - 001: Html documents</title>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>

<body>
<h1>Title</h1>
<p>Paragraaf Paragraaf Paragraaf Paragraaf Paragraaf Paragraaf Paragraaf Paragraaf Paragraaf Paragraaf Paragraaf
Paragraaf Paragraaf Paragraaf Paragraaf Paragraaf Paragraaf Paragraaf </p>
<div class="first">
<ul>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ul>
</div>
<div class="second">
<ol>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
<li>item</li>
</ol>
</div>
<div class="third">
<img
src="https://encrypted-tbn0.gstatic.com/images?q=tbn%3AANd9GcQoW0JuJXTeLUEdMGw3-GStCzaj05CQCBrUpDs7fhQr829_jyuI"
alt="Een kat">
</div>
</body>

</html>

+ 41
- 0
01-html-css-intro/style.css View File

@@ -0,0 +1,41 @@
html {
font-family: verdana;
}

h1 {
font-size: 30px;
font-weight: bold;
text-align: center;
background-color: red;
color: white;
}

p {
font-size: 20px;
}

div {
margin: 8px;
}

.first {
width: 30%;
background-color: darkgoldenrod;
border: 5px solid lightcoral;
}

.second {
width: 50%;
background-color: olivedrab;
border: 5px dashed maroon;
}

.third {
width: 70%;
background-color: mediumspringgreen;
border: 5px solid gold;
}

.third img {
width: 100%;
}

+ 29
- 0
02-floats/floats.css View File

@@ -0,0 +1,29 @@
.div-1, .div-2, .div-3 {
width: 25%;
height: 50px;
box-sizing: border-box;
float: left;
}

.div-1 {
border: 3px solid orchid;
height: 55px;
}

.div-2 {
border: 3px solid aquamarine;
}

.div-3 {
border: 3px solid indianred;
}

.clear {
clear: both;
}

.container {
background-color: lightblue;
width: 60%;
margin: 0 auto;
}

+ 22
- 0
02-floats/floats.html View File

@@ -0,0 +1,22 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>Positioning: Float</title>
<link rel="stylesheet" href="floats.css" type="text/css" />
</head>

<body>
<div class="container">
<div class="div-1"></div>
<div class="div-2"> </div>
<div class="div-3"></div>
<div class="div-1"></div>
<div class="div-2"></div>
<div class="div-3"></div>
<div class="clear"></div>
</div>
</body>

</html>

+ 41
- 0
03-positioning/positioning.css View File

@@ -0,0 +1,41 @@
html {
font-size: 30px;
}

.container {
background-color: gold;
position: relative;
}

.relative {
height: 150px;
background-color: hotpink;
position: relative;
left: 10px;
top: -20px;
}

.absolute {
background-color: maroon;
position: absolute;
top: 10px;
bottom: 10px;
left: 10px;
right: 10px;
}

.fixed {
height: 175px;
width: 100%;
background-color: navy;
position: fixed;
top: 20px;
}

.sticky {
height: 50px;
width: 100%;
background-color: palevioletred;
top: 10px;
position: sticky;
}

+ 45
- 0
03-positioning/positioning.html View File

@@ -0,0 +1,45 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>Positioning: Positioning</title>
<link rel="stylesheet" href="positioning.css" type="text/css" />
</head>

<body>
<div class="container">
<div class="relative">
</div>
<div class="absolute">
</div>
<div class="fixed">
</div>
</div>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis, totam nobis. Nostrum quas non consectetur
eaque veniam illo distinctio iure? Animi sapiente perferendis sequi vel impedit minima atque est labore!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis, totam nobis. Nostrum quas non consectetur
eaque veniam illo distinctio iure? Animi sapiente perferendis sequi vel impedit minima atque est labore!</p>
<div class="sticky"></div>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis, totam nobis. Nostrum quas non consectetur
eaque veniam illo distinctio iure? Animi sapiente perferendis sequi vel impedit minima atque est labore!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis, totam nobis. Nostrum quas non consectetur
eaque veniam illo distinctio iure? Animi sapiente perferendis sequi vel impedit minima atque est labore!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis, totam nobis. Nostrum quas non consectetur
eaque veniam illo distinctio iure? Animi sapiente perferendis sequi vel impedit minima atque est labore!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis, totam nobis. Nostrum quas non consectetur
eaque veniam illo distinctio iure? Animi sapiente perferendis sequi vel impedit minima atque est labore!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis, totam nobis. Nostrum quas non consectetur
eaque veniam illo distinctio iure? Animi sapiente perferendis sequi vel impedit minima atque est labore!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis, totam nobis. Nostrum quas non consectetur
eaque veniam illo distinctio iure? Animi sapiente perferendis sequi vel impedit minima atque est labore!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis, totam nobis. Nostrum quas non consectetur
eaque veniam illo distinctio iure? Animi sapiente perferendis sequi vel impedit minima atque est labore!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis, totam nobis. Nostrum quas non consectetur
eaque veniam illo distinctio iure? Animi sapiente perferendis sequi vel impedit minima atque est labore!</p>
<p>Lorem ipsum dolor sit amet consectetur, adipisicing elit. Officiis, totam nobis. Nostrum quas non consectetur
eaque veniam illo distinctio iure? Animi sapiente perferendis sequi vel impedit minima atque est labore!</p>

</body>

</html>

+ 54
- 0
04-EX01/ex-01.css View File

@@ -0,0 +1,54 @@
header {
position: fixed;
height: 50px;
width: 100%;
top: 0;
left: 0;
background-color: darkorange;
}

.logo {
position: absolute;
right: 5px;
top: 5px;
bottom: 5px;
width: 10%;
background-color: lightgray;
}

nav {
position: absolute;
left: 5px;
top: 5px;
bottom: 5px;
width: 75%;
background-color: lightgray;
padding: 5px;
box-sizing: border-box;
}

.nav-item {
float: left;
width: 20%;
background-color: royalblue;
height: 100%;
border: 2px solid greenyellow;
box-sizing: border-box;
}

main {
width: 100%;
height: 500px;
background-color: saddlebrown;
margin: 60px 0;
position: relative;
}

.lower {
position: absolute;
top: 10px;
bottom: -10px;
left: 10px;
right: 10px;
background-color: aquamarine;
}

+ 26
- 0
04-EX01/ex-01.html View File

@@ -0,0 +1,26 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>Exercise 1: Float</title>
<link rel="stylesheet" href="ex-01.css" type="text/css" />
</head>

<body>
<header>
<div class="logo"></div>
<nav>
<div class="nav-item"></div>
<div class="nav-item"></div>
<div class="nav-item"></div>
<div class="nav-item"></div>
<div class="nav-item"></div>
</nav>
</header>
<main>
<div class="lower"></div>
</main>
</body>

</html>

+ 46
- 0
05-flex/flex.css View File

@@ -0,0 +1,46 @@
.container {
background-color: bisque;
padding: 10px;
display: flex;
height: 500px;
flex-flow: row nowrap;
justify-content: flex-start;
align-items: stretch;
}

.container div {
line-height: 40px;
font-size: 20px;
color: white;
text-align: center;
}

.div-1 {
background-color: darkseagreen;
flex: 2 0 200px;
order: 5;
}

.div-2 {
background-color: darkslateblue;
flex: 1 1 100px;
order: 2;
}

.div-3 {
background-color: darkviolet;
flex: 1 1 100px;
order: 1;
}

.div-4 {
background-color: dimgray;
flex: 1 1 100px;
order: 4;
}

.div-5 {
background-color: darkorange;
flex: 1 1 100px;
order: 3;
}

+ 20
- 0
05-flex/flex.html View File

@@ -0,0 +1,20 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>Positioning: Flex</title>
<link rel="stylesheet" href="flex.css" type="text/css" />
</head>

<body>
<div class="container">
<div class="div-1">1</div>
<div class="div-2">2</div>
<div class="div-3">3</div>
<div class="div-4">4</div>
<div class="div-5">5</div>
</div>
</body>

</html>

BIN
06-EX02/images/Exercise.png View File


BIN
06-EX02/images/bg-image.png View File


BIN
06-EX02/images/pic01.jpg View File


BIN
06-EX02/images/pic02.jpg View File


BIN
06-EX02/images/pic03.jpg View File


+ 160
- 0
06-EX02/index.html View File

@@ -0,0 +1,160 @@
<!DOCTYPE html>
<html>

<head>
<meta charset="utf-8" />
<title>Exercise 2: Flex</title>
<link href="https://fonts.googleapis.com/css?family=Raleway:200,300,400,500&display=swap" rel="stylesheet">
<script src="https://use.fontawesome.com/9953f27da4.js"></script>
<link rel="stylesheet" href="style.css" type="text/css" />
</head>

<body>
<header>
<div class="logo">Industrious</div>
<nav>
Menu
</nav>
</header>
<section class="banner">
<h1>INDUSTRIOUS</h1>
<p>HIer staat een beetje tekst een beetje tekst een beetje tekst</p>
<p>HIer staat een beetje tekst maar dan nog wat langer een beetje tekst</p>
</section>
<section class="icons">
<div class="intro">
<h2>SEM TURPIS AMET SEMPER</h2>
<p>Lorem ipsum dolor sit. Lorem ipsum dolor sit amet consectetur adipisicing elit. Fugit? amet consectetur
adipisicing elit. Praesentium fuga non deleniti aspernatur autem
quidem odit, necessitatibus dolorum labore id.</p>
</div>
<div class="icons-grid grid">
<div class="icon-item grid-item">
<div class="red">
<i class="fa fa-address-card-o fa-5x" aria-hidden="true"></i>
</div>
<h3>KORTE TITEL</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem in eum assumenda culpa error quaerat
sequi, modi pariatur, tenetur eos ex porro iusto.</p>
</div>
<div class="icon-item grid-item">
<div class="red">
<i class="fa fa-files-o fa-5x" aria-hidden="true"></i>
</div>
<h3>KORTE TITEL</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem in eum assumenda culpa error quaerat
sequi, modi pariatur, tenetur eos ex porro iusto.</p>
</div>
<div class="icon-item grid-item">
<div class="red">
<i class="fa fa-floppy-o fa-5x" aria-hidden="true"></i>
</div>
<h3>KORTE TITEL</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem in eum assumenda culpa error quaerat
sequi, modi pariatur, tenetur eos ex porro iusto.</p>
</div>
<div class="icon-item grid-item">
<div class="red">
<i class="fa fa-line-chart fa-5x" aria-hidden="true"></i>
</div>
<h3>KORTE TITEL</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem in eum assumenda culpa error quaerat
sequi, modi pariatur, tenetur eos ex porro iusto.</p>
</div>
<div class="icon-item grid-item">
<div class="red">
<i class="fa fa-paper-plane-o fa-5x" aria-hidden="true"></i>
</div>
<h3>KORTE TITEL</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem in eum assumenda culpa error quaerat
sequi, modi pariatur, tenetur eos ex porro iusto.</p>
</div>
<div class="icon-item grid-item">
<div class="red">
<i class="fa fa-qrcode fa-5x" aria-hidden="true"></i>
</div>
<h3>KORTE TITEL</h3>
<p>Lorem, ipsum dolor sit amet consectetur adipisicing elit. Autem in eum assumenda culpa error quaerat
sequi, modi pariatur, tenetur eos ex porro iusto.</p>
</div>
</div>
</section>
<section class="red-section">
<div class="intro">
<h2>CURABITUR ULLAMCORPER ULTRICIES</h2>
<p>Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non
faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan
varius montes viverra nibh in adipiscing. Lorem ipsum dolor vestibulum ante ipsum primis in faucibus
vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing sed feugiat eu faucibus. Integer
ac sed amet praesent. Nunc lacinia ante nunc ac gravida.</p>
</div>
</section>
<section class="testimonials">
<div class="intro">
<h2>FAUCIBUS CONSEQUAT LOREM</h2>
<p>In arcu accumsan arcu adipiscing accumsan orci ac. Felis id enim aliquet. Accumsan ac integer lobortis
commodo ornare aliquet accumsan erat tempus amet porttitor.</p>
</div>
<div class="testimonials-grid grid">
<div class="testimonial grid-item">
<blockquote>Nunc lacinia ante nunc ac lobortis ipsum. Interdum adipiscing gravida odio porttitor sem non
mi integer non faucibus.</blockquote>
<div class="writer">
<div class="round-image"></div>
<p>- <span class="red">Jane Doe</span> CEO - ABC Inc.</p>
</div>
</div>
<div class="testimonial grid-item">
<blockquote>Nunc lacinia ante nunc ac lobortis ipsum. Interdum adipiscing gravida odio porttitor sem non
mi integer non faucibus.</blockquote>
<div class="writer">
<div class="round-image"></div>
<p>- <span class="red">Jane Doe</span> CEO - ABC Inc.</p>
</div>
</div>
<div class="testimonial grid-item">
<blockquote>Nunc lacinia ante nunc ac lobortis ipsum. Interdum adipiscing gravida odio porttitor sem non
mi integer non faucibus.</blockquote>
<div class="writer">
<div class="round-image"></div>
<p>- <span class="red">Jane Doe</span> CEO - ABC Inc.</p>
</div>
</div>
</div>
</section>
<footer>
<div class="content">
<section>
<h3>Accumsan montes viverra</h3>
<p>Nunc lacinia ante nunc ac lobortis. Interdum adipiscing gravida odio porttitor sem non mi integer non
faucibus ornare mi ut ante amet placerat aliquet. Volutpat eu sed ante lacinia sapien lorem accumsan
varius montes viverra nibh in adipiscing. Lorem ipsum dolor vestibulum ante ipsum primis in faucibus
vestibulum. Blandit adipiscing eu felis iaculis volutpat ac adipiscing sed feugiat eu faucibus.
Integer ac sed amet praesent. Nunc lacinia ante nunc ac gravida.</p>
</section>
<section>
<h4>Sem turpis amet semper</h4>
<ul class="alt">
<li><a href="#">Dolor pulvinar sed etiam.</a></li>
<li><a href="#">Etiam vel lorem sed amet.</a></li>
<li><a href="#">Felis enim feugiat viverra.</a></li>
<li><a href="#">Dolor pulvinar magna etiam.</a></li>
</ul>
</section>
<section>
<h4>Magna sed ipsum</h4>
<ul class="plain">
<li><a href="#">Twitter</a></li>
<li><a href="#">Facebook</a></li>
<li><a href="#">Instagram</a></li>
<li><a href="#">Github</a></li>
</ul>
</section>
</div>
<div class="copyright">
© Untitled. Photos <a href="https://unsplash.co">Unsplash</a>, Video <a href="https://coverr.co">Coverr</a>.
</div>
</footer>
</body>

</html>

+ 194
- 0
06-EX02/style.css View File

@@ -0,0 +1,194 @@
html {
font-size: 16px;
font-family: 'Raleway', sans-serif;
color: rgb(73, 73, 73);
}

* {
margin: 0;
box-sizing: border-box;
}

a {
text-decoration: none;
color: inherit;
}

ul {
list-style: none;
padding: 0;
}

body {
margin: 0;
}


h2 {
font-size: 2.2rem;
font-weight: 300;
line-height: 6rem;
text-transform: uppercase;
}

h3 {
font-size: 1.3rem;
line-height: 4.8rem;
font-weight: 300;
text-transform: uppercase;
}

h4 {
font-size: 1rem;
line-height: 3.2rem;
font-weight: 300;
text-transform: uppercase;
}



p {
font-size: 1rem;
line-height: 1.6rem;
}

header {
height: 3rem;
background-color: black;
color: white;
display: flex;
justify-content: space-between;
align-items: center;
padding: 0 1rem;
}

.logo {
font-weight: 600;
}

nav {
color: rgb(219, 219, 219);
}

.banner {
height: 35rem;
background-image: url(images/bg-image.png);
background-size: cover;
display: flex;
color: white;
flex-direction: column;
justify-content: center;
align-items: center;
}

.banner h1 {
font-size: 4rem;
font-weight: 300;
line-height: 7rem;
}

.banner p {
font-size: 1.5rem;
line-height: 2.5rem;
font-weight: 300;
color: rgba(255, 255, 255, 0.65);
}

.icons {
padding: 5rem;
}

.intro {
margin: 3rem auto;
width: 75%;
text-align: center;

}

.grid {
margin: 3rem auto;
width: 75%;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
}

.grid-item {
padding: 3rem 0;
flex: 0 1 27%;
}

.icon-item {
text-align: center;
}

.red {
color: rgb(204, 41, 41);
}

.red-section {
background-color: rgb(204, 41, 41);
color: white;
padding: 5rem;
}

.testimonials {
padding: 5rem;
}

.testimonial blockquote {
padding: .5rem 0 .5rem 2rem;
font-size: 1.2rem;
line-height: 1.8rem;
font-style: italic;
margin: 1.5rem 0;
border-left: .5rem solid darkgrey;
}

.writer {
display: flex;
align-items: center;
justify-content: space-between;
}

.writer p {
font-size: .8rem;
}

.writer p span {
font-weight: 600;
}

.round-image {
height: 3.5rem;
width: 3.5rem;
border-radius: 50%;
background-image: url(images/pic01.jpg);
background-size: cover;
}

footer {
padding: 5rem;
background-color: black;
color:white;
}

.content {
width: 75%;
margin: 0 auto;
display: flex;
}

.content section {
flex: 1 1 25%;
padding-right: 3rem;
}

.content section:first-child {
flex: 2 1 50%;
}

.copyright {
width: 75%;
margin: 0 auto;
}

+ 6
- 0
07-javascript-intro/.prettierrc View File

@@ -0,0 +1,6 @@
{
"trailingComma": "es5",
"tabWidth": 4,
"semi": true,
"singleQuote": true
}

+ 32
- 0
07-javascript-intro/index.html View File

@@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>07-javascript-intro</title>
<link rel="stylesheet" href="styles/main.css" />
</head>
<body>
<div id="logger"></div>

<div id="app">
<button id="btn">Klik op mij toe plies!!</button>
</div>

<div id="oefenen">
<button id="oef-btn">Moet zien ik kan iets!</button>
</div>

<div id="oefenen-2">
<button id="oef-btn-2">Ik kan nog veel meer!</button>
<button id="clear-btn-2">Weg ermee</button>
</div>

<div id="oefenen-3">
<p id="oef-3-timer">**</p>
<button id="oef-btn-3">Get 300!</button>
</div>
<script src="scripts/main.js"></script>
</body>
</html>

+ 39
- 0
07-javascript-intro/scripts/ex-03.result.js View File

@@ -0,0 +1,39 @@
let attempt = 0;
let time = 0;
let goal = 300;
let gameOver = false;
let oefThreeDiv = document.getElementById('oefenen-3');
let oefThreePar = document.getElementById('oef-3-timer');
let oefThreeBtn = document.getElementById('oef-btn-3');

function timer() {
time++;
}

let countInterval = setInterval(timer, 10);

function stopTimer(event) {
console.log('click');
if (gameOver) {
gameOver = false;
countInterval = setInterval(timer, 10);
oefThreeBtn.innerHTML = 'Get ' + goal + '!';
oefThreePar.innerText = '**';
time = 0;
} else {
clearInterval(countInterval);
oefThreePar.innerHTML = time;
gameOver = true;
attempt++;
let newPar = document.createElement('p');
if (time === goal) {
newPar.innerHTML = '<p>Poging ' + attempt + ': you won!!</p>';
} else {
newPar.innerHTML = '<p>Poging ' + attempt + ': you lost!!</p>';
}
oefThreeDiv.appendChild(newPar);
oefThreeBtn.innerText = 'Try again';
}
}

oefThreeBtn.addEventListener('click', stopTimer);

+ 9
- 0
07-javascript-intro/scripts/logger.js View File

@@ -0,0 +1,9 @@
const logger = printable => {
const parent = document.getElementById('logger');
parent.innerHTML += `<p><pre style="font-family:mono;">${JSON.stringify(
printable,
null,
2
)}</pre></p>`;
return printable;
};

+ 88
- 0
07-javascript-intro/scripts/main.js View File

@@ -0,0 +1,88 @@
let foo = {};
let propName = 'bar';

foo.bar = 5;
foo['boo'] = 4;
foo[propName] = 5;

let nenArray = [1, 2, 3, 4, 5];
nenArray[3] = 5;

let appDiv = document.getElementById('app');

console.log(appDiv);

appDiv.innerHTML += 'Mahow zeh te javascript';

for (let i = 0; i < 4; i++) {
let newPar = document.createElement('p');
newPar.innerHTML = i + 1;
console.log(newPar);
appDiv.appendChild(newPar);
}

let btn = document.getElementById('btn');

function clickedBtn(event) {
console.log('click');
}

btn.addEventListener('click', clickedBtn);

let oefDiv = document.getElementById('oefenen');
let oefBtn = document.getElementById('oef-btn');

function oefClick(event) {
let newPar = document.createElement('p');
newPar.innerHTML = 'text';
oefDiv.appendChild(newPar);
}

oefBtn.addEventListener('click', oefClick);

let count = 0;
let oefTwoDiv = document.getElementById('oefenen-2');
let oefTwoBtn = document.getElementById('oef-btn-2');
let clearBtn = document.getElementById('clear-btn-2');

function oefTwoClick(event) {
let newPar = document.createElement('p');
count++;
newPar.innerHTML = count;
oefTwoDiv.appendChild(newPar);
}

function clearCount(event) {
let oefTwoPars = document.querySelector('#oefenen-2 p');
console.log(oefTwoPars);
for (let i = 0; i < oefTwoPars.length; i++) {
oefTwoPars[i].remove();
}
count = 0;
}

// function intervalFunction() {
// console.log('nu');
// }

// let interval = setInterval(intervalFunction, 1000);

// clearInterval(interval);

oefTwoBtn.addEventListener('click', oefTwoClick);
clearBtn.addEventListener('click', clearCount);

let count2 = 0;
let oefThreeDiv = document.getElementById('oefenen-3');
let oefThreePar = document.querySelector('#oefenen-3 p');
let oefThreeBtn = document.getElementById('oef-btn-3');

function timer() {
count2++;
}

let interval = setInterval(timer, 10);

function stopTimer(event) {
oefThreePar.innerHTML = count;
}

+ 23
- 0
07-javascript-intro/styles/main.css View File

@@ -0,0 +1,23 @@
html {
font-size: 15px;
font-family: sans-serif;
}

div {
margin: 4rem auto;
width: 80%;
max-width: 50rem;
text-align: center;
padding: 3rem;
border: 0.4rem solid gold;
}

button {
width: 100%;
line-height: 2rem;
font-weight: 600;
background-color: teal;
color: lightblue;
border: none;
margin: 0.5rem 0;
}

+ 6
- 0
08-EX03/.prettierrc View File

@@ -0,0 +1,6 @@
{
"trailingComma": "es5",
"tabWidth": 4,
"semi": true,
"singleQuote": true
}

+ 18
- 0
08-EX03/index.html View File

@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>07-javascript-intro</title>
<link rel="stylesheet" href="styles/main.css" />
</head>
<body>
<div id="oefenen-3">
<p id="oef-3-timer">**</p>
<button id="oef-btn-3">Get 300!</button>
</div>

<script src="scripts/main.js"></script>
</body>
</html>

+ 9
- 0
08-EX03/scripts/logger.js View File

@@ -0,0 +1,9 @@
const logger = printable => {
const parent = document.getElementById('logger');
parent.innerHTML += `<p><pre style="font-family:mono;">${JSON.stringify(
printable,
null,
2
)}</pre></p>`;
return printable;
};

+ 39
- 0
08-EX03/scripts/main.js View File

@@ -0,0 +1,39 @@
let attempt = 0;
let time = 0;
let goal = 300;
let gameOver = false;
let oefThreeDiv = document.getElementById('oefenen-3');
let oefThreePar = document.getElementById('oef-3-timer');
let oefThreeBtn = document.getElementById('oef-btn-3');

function timer() {
time++;
}

let countInterval = setInterval(timer, 10);

function stopTimer(event) {
console.log('click');
if (gameOver) {
gameOver = false;
countInterval = setInterval(timer, 10);
oefThreeBtn.innerHTML = 'Get ' + goal + '!';
oefThreePar.innerText = '**';
time = 0;
} else {
clearInterval(countInterval);
oefThreePar.innerHTML = time;
gameOver = true;
attempt++;
let newPar = document.createElement('p');
if (time === goal) {
newPar.innerHTML = '<p>Poging ' + attempt + ': you won!!</p>';
} else {
newPar.innerHTML = '<p>Poging ' + attempt + ': you lost!!</p>';
}
oefThreeDiv.appendChild(newPar);
oefThreeBtn.innerText = 'Try again';
}
}

oefThreeBtn.addEventListener('click', stopTimer);

+ 23
- 0
08-EX03/styles/main.css View File

@@ -0,0 +1,23 @@
html {
font-size: 15px;
font-family: sans-serif;
}

div {
margin: 4rem auto;
width: 80%;
max-width: 50rem;
text-align: center;
padding: 3rem;
border: 0.4rem solid gold;
}

button {
width: 100%;
line-height: 2rem;
font-weight: 600;
background-color: teal;
color: lightblue;
border: none;
margin: 0.5rem 0;
}

+ 6
- 0
09-form/.prettierrc View File

@@ -0,0 +1,6 @@
{
"trailingComma": "es5",
"tabWidth": 4,
"semi": true,
"singleQuote": true
}

+ 78
- 0
09-form/index.html View File

@@ -0,0 +1,78 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="styles/main.css" />
<title>Forms</title>
</head>
<body>
<form action="#" method="POST" id="form">
<input type="hidden" name="hidden" value="jezietmeniet" />
<label>
Textfield
<input name="text" type="text" />
</label>
<label>
Datefield
<input type="date" name="date" />
</label>
<label>
Emailfield
<input type="email" name="email" />
</label>
<label>
Passwordfield
<input type="password" name="password" />
</label>
<label>
<input type="radio" name="radio" value="radio-1" checked />
Radio 1
</label>
<label>
<input type="radio" name="radio" value="radio-2" />
Radio 2
</label>
<label>
<input type="radio" name="radio" value="radio-3" />
Radio 3
</label>
<label>
<input type="radio" name="radio" value="radio-4" />
Radio 4
</label>
<label>
<input type="checkbox" name="checkbox" value="checkbox-1" />
Checkbox 1
</label>
<label>
<input type="checkbox" name="checkbox" value="checkbox-2" />
Checkbox 2
</label>
<label>
<input type="checkbox" name="checkbox" value="checkbox-3" />
Checkbox 3
</label>
<label>
<input type="checkbox" name="checkbox" value="checkbox-4" />
Checkbox 4
</label>
<label>
<input type="checkbox" name="checkbox" value="checkbox-5" />
Checkbox 5
</label>
<label>
Select
<select name="select" multiple>
<option value="select-1">Select 1</option>
<option value="select-2" selected>Select 2</option>
<option value="select-3">Select 3</option>
<option value="select-4">Select 4</option>
</select>
</label>
<button type="submit">Submit mij toe plies</button>
</form>
<script src="scripts/main.js"></script>
</body>
</html>

+ 25
- 0
09-form/scripts/main.js View File

@@ -0,0 +1,25 @@
const form = document.getElementById('form');

form.addEventListener('submit', function(e) {
e.preventDefault();

const text = form.querySelector('input[name="text"]');
console.log(text.value);

const select = form.querySelector('select[name="select"]');

const selectedOptions = form.querySelectorAll('option:checked');
for (let i = 0; i < selectedOptions.length; i++) {
console.log(selectedOptions[i].value);
}

const radioBtn = form.querySelector('input[name="radio"]:checked');
console.log(radioBtn.value);

const checkBoxes = form.querySelectorAll('input[name="checkbox"]:checked');
for (let i = 0; i < checkBoxes.length; i++) {
console.log(checkBoxes[i].value);
}

console.log(form.querySelector('input[name="date"]').value);
});

+ 23
- 0
09-form/styles/main.css View File

@@ -0,0 +1,23 @@
form {
width: 60%;
margin: 0 auto;
}
label {
display: block;
font-family: sans-serif;
margin-top: 1rem;
}
input {
margin-left: 1rem;
width: 50%;
font-family: serif;
font-size: 1.5rem;
}

input[type='radio'],
input[type='checkbox'] {
float: none;
width: inherit;
margin-left: 0;
margin-right: 1rem;
}

+ 6
- 0
10-EX04/.prettierrc View File

@@ -0,0 +1,6 @@
{
"trailingComma": "es5",
"tabWidth": 4,
"semi": true,
"singleQuote": true
}

+ 54
- 0
10-EX04/index.html View File

@@ -0,0 +1,54 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Word scrambler</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css"
/>
<script
defer
src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"
></script>
</head>
<body>
<section class="hero is-primary">
<div class="hero-body">
<div class="container">
<h1 class="title">
Word scrambler
</h1>
</div>
</div>
</section>

<section class="section">
<form id="scramble-form">
<div class="container">
<textarea id="user-input" class="textarea" rows="10"
>Er was eens een website</textarea>
</div>
<div
class="container"
style="margin-top: 1rem; margin-bottom: 1rem;"
>
<button type="submit" id="submit-btn" class="button is-info">Scramble</button>
</form>
<p class="is-pulled-right">
Letters: <span id="letter-count">0</span>
</p>
<p class="is-pulled-right" style="margin-right:1rem;">
Words: <span id="word-count">0</span>
</p>
</div>
<div class="container">
<div class="card">
<div id="result-container" class="card-content"></div>
</div>
</div>
</section>
<script src="scripts/main.js"></script>
</body>
</html>

+ 69
- 0
10-EX04/scripts/main.js View File

@@ -0,0 +1,69 @@
//select textarea
let userInput = document.getElementById('user-input');
//select btn
let form = document.getElementById('scramble-form');
//select result container
let resultContainer = document.getElementById('result-container');

let wordCountContainer = document.getElementById('word-count');

let letterCountContainer = document.getElementById('letter-count');

function getUserInput() {
//return value of userInput
return userInput.value;
}

function textToWordArray(text) {
//return array of words
return text.split(' ');
}

function arrayToText(array) {
return array.join(' ');
}

function getRandomNumber(max) {
//return random number between 0 and max (including 0 and excluding max)
return Math.floor(Math.random() * max);
}

function scrambleArray(oldArray) {
let newArray = [];

while (oldArray.length > 0) {
let randomIndex = getRandomNumber(oldArray.length);
let randomValue = oldArray.splice(randomIndex, 1);
newArray.push(randomValue[0]);
}

return newArray;
}

function getWordCount(array) {
wordCountContainer.innerHTML = array.length;
}

function getLetterCount(text) {
letterCountContainer.innerHTML = text.length;
}

function scrambleText(text) {
let array = textToWordArray(text);
getWordCount(array);
let scrambled = scrambleArray(array);
return arrayToText(scrambled);
}

function onClickScramble(event) {
event.preventDefault();

let text = getUserInput();
let scrambledText = scrambleText(text);
getLetterCount(text);
resultContainer.innerHTML = scrambledText;
}

//add click event listener to submitBtn
form.addEventListener('submit', onClickScramble);
userInput.addEventListener('input', onClickScramble);

+ 0
- 0
10-EX04/styles/main.css View File


+ 6
- 0
11-EX05/.prettierrc View File

@@ -0,0 +1,6 @@
{
"trailingComma": "es5",
"tabWidth": 4,
"semi": true,
"singleQuote": true
}

+ 96
- 0
11-EX05/index.html View File

@@ -0,0 +1,96 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Calculator</title>
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.2/css/bulma.min.css"
/>
<link rel="stylesheet" href="styles/main.css" />
<script
defer
src="https://use.fontawesome.com/releases/v5.3.1/js/all.js"
></script>
<style>
.number-input:not(:first-of-type) {
margin-top: 1rem;
}
</style>
</head>
<body>
<section class="hero is-primary">
<div class="hero-body">
<div class="container">
<h1 class="title">
Calculator
</h1>
</div>
</div>
</section>

<section class="section">
<div id="input-container" class="container hide-delete-btns">
<div class="field has-addons number-input-group">
<div class="control">
<input
class="input number-input"
type="number"
step="1"
value="0"
/>
</div>
<div class="control">
<a class="button is-danger delete-number-input">X</a>
</div>
</div>
<div class="field has-addons number-input-group">
<div class="control">
<input
class="input number-input"
type="number"
step="1"
value="0"
/>
</div>
<div class="control">
<a class="button is-danger delete-number-input">X</a>
</div>
</div>
</div>
<div
class="container"
style="margin-top: 1rem; margin-bottom: 1rem;"
>
<button id="sum-submit-btn" class="button is-info">
Calculate Sum
</button>
<button id="product-submit-btn" class="button is-info">
Calculate Product
</button>
<button id="add-input-btn" class="button is-info">
Add Input
</button>
<p class="is-pulled-right">
Numbers: <span id="number-count-container">2</span>
</p>
</div>
<div class="container">
<div class="card">
<div class="card-content">
<p>
The sum of all numbers is:
<span id="sum-result-container">0</span>
</p>
<p>
The product of all numbers is:
<span id="product-result-container">0</span>
</p>
</div>
</div>
</div>
</section>
<script src="scripts/main.js"></script>
</body>
</html>

+ 79
- 0
11-EX05/scripts/main.js View File

@@ -0,0 +1,79 @@
const inputContainer = document.getElementById('input-container');
const addInputBtn = document.getElementById('add-input-btn');
const inputCountContainer = document.getElementById('number-count-container');
const sumResultContainer = document.getElementById('sum-result-container');
const productResultContainer = document.getElementById(
'product-result-container'
);

function updateInputCount() {
inputCountContainer.innerHTML = inputContainer.children.length;
}

function calculateSum() {
let result = 0;
const inputs = inputContainer.querySelectorAll('input');
for (let i = 0; i < inputs.length; i++) {
result += parseInt(inputs[i].value);
}
return result;
}

function calculateProduct() {
let result = 1;
const inputs = inputContainer.querySelectorAll('input');
for (let i = 0; i < inputs.length; i++) {
result *= parseInt(inputs[i].value);
}
return result;
}

function updateResults() {
sumResultContainer.innerHTML = calculateSum();
productResultContainer.innerHTML = calculateProduct();
}

function hideOrShowDeleteBtns() {
if (inputContainer.children.length > 2) {
inputContainer.classList.remove('hide-delete-btns');
} else {
inputContainer.classList.add('hide-delete-btns');
}
}

function addInput(event) {
const newInput = document.createElement('div');
newInput.classList.add('field', 'has-addons', 'number-input-group');
newInput.innerHTML = `
<div class="control">
<input
class="input number-input"
type="number"
step="1"
value="0"
/>
</div>
<div class="control">
<a class="button is-danger delete-number-input">X</a>
</div>
`;
inputContainer.appendChild(newInput);
updateInputCount();
updateResults();
hideOrShowDeleteBtns();
}

function removeInput(event) {
if (
event.target.matches('.delete-number-input') &&
inputContainer.children.length > 2
) {
event.target.closest('.field').remove();
updateInputCount();
hideOrShowDeleteBtns();
updateResults();
}
}
inputContainer.addEventListener('click', removeInput);
inputContainer.addEventListener('input', updateResults);
addInputBtn.addEventListener('click', addInput);

+ 3
- 0
11-EX05/styles/main.css View File

@@ -0,0 +1,3 @@
.hide-delete-btns .delete-number-input {
display: none;
}

+ 6
- 0
12-array_methods/.prettierrc View File

@@ -0,0 +1,6 @@
{
"trailingComma": "es5",
"tabWidth": 4,
"semi": true,
"singleQuote": true
}

+ 19
- 0
12-array_methods/index.html View File

@@ -0,0 +1,19 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>12 array methods</title>
<link rel="stylesheet" href="styles/main.css" />
</head>
<body>
<div class="class-name"></div>
<div class="class-name"></div>
<div class="class-name"></div>
<div class="class-name"></div>
<div class="class-name"></div>

<script src="scripts/main.js"></script>
</body>
</html>

+ 265
- 0
12-array_methods/scripts/main.js View File

@@ -0,0 +1,265 @@
let array = [4, 8, 12, 16];

//foreach
array.forEach(function(item) {
// console.log(item);
});

Array.prototype.selfForEach = function(callback) {
for (let i = 0; i < this.length; i++) {
callback(this[i], i, this);
}
};

function forEachCallback(item, index, originalArray) {}

array.selfForEach(forEachCallback);

Array.prototype.selfMap = function(callback) {
let mappedArray = [];

for (let i = 0; i < this.length; i++) {
mappedArray.push(callback(this[i], i, this));
}

return mappedArray;
};

function mapCallback(item, index, originalArray) {
if (index !== 4) {
return item * 2;
}
return item;
}

let newArray = array.map(mapCallback);

Array.prototype.selfFilter = function(callback) {
let filteredArray = [];

for (let i = 0; i < this.length; i++) {
if (callback(this[i], i, this)) {
filteredArray.push(this[i]);
}
}

return filteredArray;
};

let otherArray = [1, 2, 3, 4, 5];

let filteredArray = otherArray.selfFilter(function(item, index, originalArray) {
return item > 2;
});

// oef 1
// [1,2,3,4,5,6] => [2,4,6]

let ex1 = [1, 2, 3, 4, 5, 6].filter(function(item) {
return item % 2 === 0;
});

// console.log(ex1);

// oef 2
// ['a', 'b', 'c'] => ['A', 'B', 'C']

let ex2 = ['a', 'b', 'c'].map(function(item) {
return item.toUpperCase();
});

// console.log(ex2);

// oef 3
// [1,2,3] => ['1','2','3']

let ex3 = [1, 2, 3].map(function(item) {
return item.toString();
});

// console.log(ex3);

// oef 4
// [
// { name: 'Tom', age: 5 },
// { name: 'Ben', age: 6 },
// { name: 'Charly', age: 2 },
// ];
// => ['Tom', 'Ben', 'Charly']

let ex4 = [
{ name: 'Tom', age: 5 },
{ name: 'Ben', age: 6 },
{ name: 'Charly', age: 2 },
].map(function(item) {
return item.name;
});

// console.log(ex4);

// oef 5
// enkel ouder dan 4
// [
// { name: 'Tom', age: 5 },
// { name: 'Ben', age: 6 },
// { name: 'Charly', age: 2 },
// ];
// =>
//[
// { name: 'Tom', age: 5 },
// { name: 'Ben', age: 6 },
// ];

let ex5 = [
{ name: 'Tom', age: 5 },
{ name: 'Ben', age: 6 },
{ name: 'Charly', age: 2 },
].filter(function(item) {
return item.age > 4;
});

// console.log(ex5);

// oef 6
// combinatie van vorige 2
// [
// { name: 'Tom', age: 5 },
// { name: 'Ben', age: 6 },
// { name: 'Charly', age: 2 },
// ];
// =>
//[ 'Tom', 'Ben' ];

let ex6 = [
{ name: 'Tom', age: 5 },
{ name: 'Ben', age: 6 },
{ name: 'Charly', age: 2 },
]
.filter(function(item) {
return item.age > 4;
})
.map(function(item) {
return item.name;
});

// console.log(ex6);

//oef 7
// voor plus 18 add naam + 'can go to The Matrix'
// min 18 add naam + 'is under age!!'
//[
// {
// name: "Angelina Jolie",
// age: 80
// },
// {
// name: "Eric Jones",
// age: 2
// },
// {
// name: "Paris Hilton",
// age: 5
// },
// {
// name: "Kayne West",
// age: 16
// },
// {
// name: "Bob Ziroll",
// age: 100
// }
// ];
// =>
// [
// "Angelina Jolie can go to The Matrix",
// "Eric Jones is under age!!",
// "Paris Hilton is under age!!",
// "Kayne West is under age!!",
// "Bob Ziroll can go to The Matrix"
// ]

let ex7 = [
{
name: 'Angelina Jolie',
age: 80,
},
{
name: 'Eric Jones',
age: 2,
},
{
name: 'Paris Hilton',
age: 5,
},
{
name: 'Kayne West',
age: 16,
},
{
name: 'Bob Ziroll',
age: 100,
},
].map(function(item) {
if (item.age >= 18) {
return item.name + ' can go to The Matrix';
}

return item.name + ' is under age!!';
});

// console.log(ex7);

Array.prototype.selfReduce = function(callback, initialValue) {
let result = initialValue;

for (let i = 0; i < this.length; i++) {
result = callback(result, this[i], index, this);
}

return result;
};

let reduceArray = [1, 2, 3, 4];

let sumOfArray = reduceArray.reduce(function(result, item) {
return result + item;
}, 0);

console.log(sumOfArray);

let ex8 = ['ik', 'ben', 'tof'].reduce(function(result, item) {
if (!result) {
return item;
}

return result + ' ' + item;
}, false);

console.log(ex8);

let ex9 = [
{
name: 'Angelina Jolie',
age: 80,
},
{
name: 'Eric Jones',
age: 2,
},
{
name: 'Paris Hilton',
age: 5,
},
{
name: 'Kayne West',
age: 16,
},
{
name: 'Bob Ziroll',
age: 100,
},
].reduce(function(result, item) {
return result + item.age;
}, 0);

console.log(ex9);

+ 0
- 0
12-array_methods/styles/main.css View File


+ 6
- 0
13-xmlhttprequest/.prettierrc View File

@@ -0,0 +1,6 @@
{
"trailingComma": "es5",
"tabWidth": 4,
"semi": true,
"singleQuote": true
}

+ 18
- 0
13-xmlhttprequest/index.html View File

@@ -0,0 +1,18 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>13-xmlhttprequest</title>
<link rel="stylesheet" href="styles/main.css" />
</head>
<body>
<div>
<button id="get-endpoints-btn">Get endpoints</button>
</div>
<div id="endpoint-container"></div>

<script src="scripts/main.js"></script>
</body>
</html>

+ 56
- 0
13-xmlhttprequest/scripts/main.js View File

@@ -0,0 +1,56 @@
const endpointContainer = document.getElementById('endpoint-container');
const getEndpointsBtn = document.getElementById('get-endpoints-btn');

function getEndpoints() {
let request = new XMLHttpRequest();

request.addEventListener('load', function(event) {
let response = JSON.parse(event.target.responseText);
addBtns(response);
});

request.open('GET', 'https://swapi.co/api/');
request.send();
}

function addBtns(response) {
const btnHtml = Object.keys(response).reduce(function(html, responseKey) {
return (
html +
'<button data-url="' +
response[responseKey] +
'">' +
responseKey +
'</button>'
);
}, '');

endpointContainer.innerHTML = btnHtml;
}

function makeRequest(event) {
if (event.target.matches('button')) {
let btn = event.target;
let btnText = btn.innerHTML;
btn.innerHTML = 'loading...';

let request = new XMLHttpRequest();

request.addEventListener('load', function(event) {
if (event.target.status === 200) {
let response = JSON.parse(event.target.responseText);
console.log(response);
btn.innerHTML = btnText;
} else {
console.log(event.target);
btn.innerHTML = 'Dikke fail...';
}
});

request.open('GET', event.target.dataset.url);
request.send();
}
}

getEndpointsBtn.addEventListener('click', getEndpoints);
endpointContainer.addEventListener('click', makeRequest);

+ 28
- 0
13-xmlhttprequest/styles/main.css View File

@@ -0,0 +1,28 @@
html {
font-size: 15px;
font-family: sans-serif;
}

div {
margin: 4rem auto;
width: 80%;
max-width: 50rem;
text-align: center;
padding: 3rem;
}

#endpoint-container {
display: flex;
flex-direction: column;
align-items: center;
}

button {
line-height: 2rem;
font-weight: 600;
background-color: teal;
color: white;
border: none;
margin: 0.5rem 0;
padding: 0.6rem 2rem;
}

+ 6
- 0
14-grid/.prettierrc View File

@@ -0,0 +1,6 @@
{
"trailingComma": "es5",
"tabWidth": 4,
"semi": true,
"singleQuote": true
}

+ 32
- 0
14-grid/index.html View File

@@ -0,0 +1,32 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>07-javascript-intro</title>
<link rel="stylesheet" href="styles/main.css" />
</head>
<body>
<div class="grid-container">
<div class="grid-item yellow"></div>
<div class="grid-item yellow"></div>
<div class="grid-item yellow"></div>
<div class="grid-item red"></div>

<div class="grid-item yellow"></div>
<div class="grid-item red"></div>
<div class="grid-item yellow"></div>
<div class="grid-item yellow"></div>

<div class="grid-item black"></div>
<div class="grid-item yellow"></div>
<div class="grid-item yellow"></div>
<div class="grid-item yellow"></div>

<div class="grid-item green"></div>
</div>

<script src="scripts/main.js"></script>
</body>
</html>

+ 0
- 0
14-grid/scripts/main.js View File


+ 26
- 0
14-grid/styles/main.css View File

@@ -0,0 +1,26 @@
.grid-container {
width: 500px;
height: 500px;
display: grid;
grid-template-columns: 50px 40% 1fr 1fr;
grid-template-rows: 1fr 1fr 1fr 1fr;
row-gap: 20px;
}

.grid-item.yellow {
background-color: yellow;
}

.grid-item.red {
background-color: red;
}

.grid-item.black {
background-color: black;
grid-row: 3 / span 2;
}

.grid-item.green {
background-color: green;
grid-column: 2 / span 3;
}

+ 6
- 0
15-promises/.prettierrc View File

@@ -0,0 +1,6 @@
{
"trailingComma": "es5",
"tabWidth": 4,
"semi": true,
"singleQuote": true
}

BIN
15-promises/fetch.zip View File


+ 6
- 0
15-promises/fetch/.prettierrc View File

@@ -0,0 +1,6 @@
{
"trailingComma": "es5",
"tabWidth": 4,
"semi": true,
"singleQuote": true
}

+ 20
- 0
15-promises/fetch/index.html View File

@@ -0,0 +1,20 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>13-xmlhttprequest</title>
<link rel="stylesheet" href="styles/main.css" />
</head>
<body>
<div>
<button id="get-endpoints-btn">Get endpoints</button>
</div>
<div id="endpoint-container"></div>
<div id="list-container"></div>
<div id="details-container"></div>

<script src="scripts/main.js"></script>
</body>
</html>

+ 122
- 0
15-promises/fetch/scripts/main.js View File

@@ -0,0 +1,122 @@
const endpointContainer = document.getElementById('endpoint-container');
const listContainer = document.getElementById('list-container');
const detailsContainer = document.getElementById('details-container');
const getEndpointsBtn = document.getElementById('get-endpoints-btn');

function getEndpoints() {
fetch('https://swapi.co/api/')
.then(function(response) {
if (response.ok) {
return response.json();
}

return Promise.reject(new Error('Promise not ok'));
})
.then(function(jsonResponse) {
addBtns(jsonResponse);
})
.catch(function(error) {
console.error(error);
});
}

function addBtns(response) {
const btnHtml = Object.keys(response).reduce(function(html, responseKey) {
return (
html +
'<button data-url="' +
response[responseKey] +
'">' +
responseKey +
'</button>'
);
}, '');

endpointContainer.innerHTML = btnHtml;
}

function listHtml(list) {
return list.reduce(function(html, listItem) {
return `
${html}
<article class="list-item">
<p>${listItem.name ? listItem.name : listItem.title}</p>
<button data-url="${listItem.url}">Show details</button>
</article>
`;
}, '');
}

function requestList(event) {
if (event.target.matches('button')) {
let btn = event.target;
btn.disabled = true;
let btnText = btn.innerHTML;
btn.innerHTML = 'loading...';

fetch(event.target.dataset.url)
.then(function(response) {
if (response.ok) {
return response.json();
}

return Promise.reject(new Error('Request failed'));
})
.then(function(jsonResponse) {
console.log(jsonResponse);
btn.innerHTML = btnText;
listContainer.innerHTML = listHtml(jsonResponse.results);
btn.disabled = false;
})
.catch(function(error) {
console.error(error);
btn.innerHTML = 'Dikke fail...';
btn.disabled = false;
});
}
}

function listDetails(details) {
return Object.keys(details).reduce(function(html, detailKey) {
return `
${html}
<p>
<strong>${detailKey}:</strong>
${details[detailKey]}
</p>
`;
}, '');
}

function requestDetails(event) {
if (event.target.matches('button')) {
let btn = event.target;
btn.disabled = true;
let btnText = btn.innerHTML;
btn.innerHTML = 'loading...';

fetch(event.target.dataset.url)
.then(function(response) {
if (response.ok) {
return response.json();
}

return Promise.reject(new Error('Request failed'));
})
.then(function(jsonResponse) {
console.log(jsonResponse);
btn.innerHTML = btnText;
detailsContainer.innerHTML = listDetails(jsonResponse);
btn.disabled = false;
})
.catch(function(error) {
console.error(error);
btn.innerHTML = 'Dikke fail...';
btn.disabled = false;
});
}
}

getEndpointsBtn.addEventListener('click', getEndpoints);
endpointContainer.addEventListener('click', requestList);
listContainer.addEventListener('click', requestDetails);

+ 46
- 0
15-promises/fetch/styles/main.css View File

@@ -0,0 +1,46 @@
* {
box-sizing: border-box;
}

html {
font-size: 15px;
font-family: sans-serif;
}

div {
margin: 4rem auto;
width: 80%;
max-width: 50rem;
text-align: center;
padding: 3rem;
}

#endpoint-container {
display: flex;
flex-direction: row;
align-items: center;
flex-wrap: wrap;
}

button {
line-height: 2rem;
font-weight: 600;
background-color: teal;
color: white;
border: none;
margin: 0.5rem 1rem;
padding: 0.6rem 2rem;
}

#endpoint-container button {
width: calc((100% / 3) - 2rem);
}

button:disabled {
background-color: gray;
}

.list-item {
display: flex;
justify-content: space-between;
}

+ 13
- 0
15-promises/index.html View File

@@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>15 Promises</title>
<link rel="stylesheet" href="styles/main.css" />
</head>
<body>
<script src="scripts/main.js"></script>
</body>
</html>

+ 28
- 0
15-promises/scripts/main.js View File

@@ -0,0 +1,28 @@
function doSomeThing() {
const promise = new Promise(function(resolve, reject) {
const newArray = [];
for (let i = 0; i < 99999; i++) {
newArray.push(i);
}

if (newArray.length === 0) {
reject('Oh ow');
} else {
resolve(newArray);
}
});

return promise;
}

const newPromise = doSomeThing();

newPromise
.then(function(result) {
console.log(result);
})
.catch(function(error) {
console.error(error);
});

console.log(newPromise);

+ 0
- 0
15-promises/styles/main.css View File


+ 6
- 0
16-media_queries/.prettierrc View File

@@ -0,0 +1,6 @@
{
"trailingComma": "es5",
"tabWidth": 4,
"semi": true,
"singleQuote": true
}

BIN
16-media_queries/images/beautiful-logo.jpg View File


+ 49
- 0
16-media_queries/index.html View File

@@ -0,0 +1,49 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<title>16-media-queries</title>
<link rel="stylesheet" href="styles/main.css" />
</head>
<body>
<header>
<a class="logo" href="#">
<img src="images/beautiful-logo.jpg" alt="beautiful-logo" />
</a>
<nav>
<a href="#">link 1</a>
<a href="#">link 2</a>
<a href="#">link 3</a>
<a href="#">link 4</a>
<a href="#">link 5</a>
</nav>
<nav class="hamburger">
<span></span>
<span></span>
<span></span>
</nav>
</header>
<ul id="list">
<li id="test1">test1</li>
<li id="test2">test2</li>
<li id="test3">test3</li>
<li id="test4">test4</li>
<li id="test5">test5</li>
<li id="test6">test6</li>
<li id="test7">test7</li>
</ul>

<ul id="list-grid">
<li id="test1">test1</li>
<li id="test2">test2</li>
<li id="test3">test3</li>
<li id="test4">test4</li>
<li id="test5">test5</li>
<li id="test6">test6</li>
<li id="test7">test7</li>
</ul>
<script src="scripts/main.js"></script>
</body>
</html>

+ 0
- 0
16-media_queries/scripts/main.js View File


+ 134
- 0
16-media_queries/styles/main.css View File

@@ -0,0 +1,134 @@
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}

header {
font-size: 1.2rem;
font-family: sans-serif;
display: flex;
justify-content: space-between;
padding: 0.5rem 2rem;
background-color: rosybrown;
}

.logo img {
height: 3rem;
mix-blend-mode: darken;
}

nav {
display: flex;
align-items: center;
}

nav > a {
padding: 0.5rem 1rem;
}

.hamburger {
display: none;
}

.hamburger span {
display: block;
width: 2rem;
height: 0.3rem;
background-color: #fff;
margin: 0.2rem 0;
}

@media screen and (max-width: 600px) {
nav {
display: none;
}

.hamburger {
display: flex;
flex-direction: column;
justify-content: center;
}
}

ul {
list-style: none;
font-family: sans-serif;
font-size: 2rem;
}

ul li {
padding: 1rem 2rem;
}

#list {
display: flex;
flex-direction: column;
}

#test1 {
background-color: aquamarine;
}
#test2 {
background-color: blanchedalmond;
}
#test3 {
background-color: cadetblue;
}
#test4 {
background-color: darkgoldenrod;
}
#test5 {
background-color: firebrick;
}
#test6 {
background-color: greenyellow;
}
#test7 {
background-color: hotpink;
}

@media screen and (min-width: 400px) {
#list {
flex-direction: row;
flex-wrap: wrap;
}

#list li {
width: 50%;
}

#list li:first-child {
width: 100%;
}
}

@media screen and (min-width: 800px) {
#list li {
width: calc(100% / 3);
}
}

#list-grid {
padding: 1rem;
margin-top: 2rem;
display: grid;
grid-template-columns: 1fr;
grid-gap: 1rem;
}

@media screen and (min-width: 400px) {
#list-grid {
grid-template-columns: 1fr 1fr;
}

#list-grid li:first-child {
grid-column: 1 / -1;
}
}

@media screen and (min-width: 800px) {
#list-grid {
grid-template-columns: 1fr 1fr 1fr;
}
}

Write Preview
Loading…
Cancel
Save