diff --git a/week-8/mdn-events-1/index.html b/week-8/mdn-events-1/index.html index 0db8552..36df5e4 100644 --- a/week-8/mdn-events-1/index.html +++ b/week-8/mdn-events-1/index.html @@ -32,14 +32,14 @@ let btn = document.querySelector('.off'); //Event listener and event objects method (anonymous function) - btn.addEventListener("click", function(e){ - if (e.target.innerHTML === "Machine is off"){ - e.target.innerHTML = "Machine is on"; - e.target.style.backgroundColor = "pink"; + btn.addEventListener("click", function(event){ + if (event.target.innerHTML === "Machine is off"){ + event.target.innerHTML = "Machine is on"; + event.target.style.backgroundColor = "pink"; } else { - e.target.innerHTML = "Machine is off" - e.target.style.backgroundColor = ""; + event.target.innerHTML = "Machine is off" + event.target.style.backgroundColor = ""; } }); diff --git a/week-8/mdn-events-2/index.html b/week-8/mdn-events-2/index.html index b081f82..44faf92 100644 --- a/week-8/mdn-events-2/index.html +++ b/week-8/mdn-events-2/index.html @@ -52,14 +52,14 @@ // Add your code here - window.addEventListener("keydown", function(e) { - if (e.key === "a") { + document.addEventListener("keydown", function(event) { + if (event.key === "a") { x -=10; - } else if (e.key === "d") { + } else if (event.key === "d") { x +=10; - } else if (e.key === "w") { + } else if (event.key === "w") { y -=10; - } else if (e.key === "s") { + } else if (event.key === "s") { y +=10; } drawCircle(x, y, size); diff --git a/week-8/mdn-events-3/index.html b/week-8/mdn-events-3/index.html index 17cd1ba..120f733 100644 --- a/week-8/mdn-events-3/index.html +++ b/week-8/mdn-events-3/index.html @@ -44,12 +44,12 @@ // Add your code here //Event listener and event objects method - buttonBar.addEventListener("click", function(e) { - if (e.target.matches(".red")) { + buttonBar.addEventListener("click", function(event) { + if (event.target.matches(".red")) { buttonBar.style.backgroundColor = "red"; - } else if (e.target.matches(".yellow")) { + } else if (event.target.matches(".yellow")) { buttonBar.style.backgroundColor = "yellow"; - } else if (e.target.matches(".green")) { + } else if (event.target.matches(".green")) { buttonBar.style.backgroundColor = "green"; } else { buttonBar.style.backgroundColor = "purple"; @@ -57,8 +57,8 @@ }); /* Alternate method - buttonBar.addEventListener('click', function(e) { - buttonBar.style.backgroundColor = e.target.getAttribute('data-color'); + buttonBar.addEventListener('click', function(event) { + buttonBar.style.backgroundColor = event.target.getAttribute('data-color'); });*/ diff --git a/week-8/web-form/.DS_Store b/week-8/web-form/.DS_Store index ac62434..54c8eef 100644 Binary files a/week-8/web-form/.DS_Store and b/week-8/web-form/.DS_Store differ diff --git a/week-8/web-form/css/.DS_Store b/week-8/web-form/css/.DS_Store new file mode 100644 index 0000000..e4e3f2f Binary files /dev/null and b/week-8/web-form/css/.DS_Store differ diff --git a/week-8/web-form/css/payment-form.css b/week-8/web-form/css/form.css similarity index 87% rename from week-8/web-form/css/payment-form.css rename to week-8/web-form/css/form.css index 50a2754..8b276fd 100644 --- a/week-8/web-form/css/payment-form.css +++ b/week-8/web-form/css/form.css @@ -10,7 +10,7 @@ ul { form { margin: 0 auto; - width: 400px; + width: 350px; padding: 1em; border: 1px solid #CCC; border-radius: 1em; @@ -22,8 +22,8 @@ div+div { label span { display: inline-block; - width: 120px; - text-align: right; + width: 80px; + text-align: left; } input, textarea { @@ -67,4 +67,8 @@ label em { position: absolute; right: 5px; top: 20px; +} +#warning { + text-align: center; + color:rgb(190, 0, 0); } \ No newline at end of file diff --git a/week-8/web-form/index.html b/week-8/web-form/index.html index 7dc8e63..8c1cc3d 100644 --- a/week-8/web-form/index.html +++ b/week-8/web-form/index.html @@ -5,41 +5,83 @@ Web Form - +

Web form

- -
- +

*Fill in all fields

- +

- +

- +

- +

-

-
+ +

+ +
+ + \ No newline at end of file