From fdc917122c490e31c666abddd2b00676247877f5 Mon Sep 17 00:00:00 2001 From: MrDwina Date: Sun, 18 Jun 2017 19:55:07 +0000 Subject: [PATCH 1/6] created functions for all buttons and for validation --- js/homework.js | 68 ++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 68 insertions(+) diff --git a/js/homework.js b/js/homework.js index e69de29..ca92103 100644 --- a/js/homework.js +++ b/js/homework.js @@ -0,0 +1,68 @@ +/*======================= Bule Button =========================*/ +const blueBtn = document.querySelector('#blueBtn'); +const jumbBackground = document.querySelector('#jumbBackground'); +const donateBackground = document.querySelector('#donateBackground'); +const volunteerBack = document.querySelector('#volunteerBack'); +blueBtn.addEventListener('click', function () { + jumbBackground.style.backgroundColor = '#588fbd'; + donateBackground.style.backgroundColor = '#ffa500'; + volunteerBack.style.backgroundColor = 'black'; + volunteerBack.style.color = 'white'; +}); +/*======================== Orange Button =======================*/ +const orangeBtn = document.querySelector('#orangeBtn'); +const orangeJumb = document.querySelector('.orangeJumb'); +const orangeDonate = document.querySelector('.orangeDonate'); +const orangeVolun = document.querySelector('.orangeVolun'); +orangeBtn.addEventListener('click', function () { + orangeJumb.style.backgroundColor = '#f0ad4e'; + orangeDonate.style.backgroundColor = '#5751fd'; + orangeVolun.style.backgroundColor = '31b0d5'; + orangeVolun.style.color = 'white'; +}); +/*========================== Green Button =======================*/ +const greenBtn = document.querySelector('#greenBtn'); +const greenJumb = document.querySelector('.greenJumb'); +const greenDonate = document.querySelector('.greenDonate'); +const greenVolun = document.querySelector('.greenVolun'); +greenBtn.addEventListener('click', function () { + greenJumb.style.backgroundColor = '#87ca8a'; + greenDonate.style.backgroundColor = 'black'; + greenVolun.style.backgroundColor = '8c9c08'; +}); +/*======================== Form Validation ========================*/ +const emailValid = document.querySelector('#exampleInputEmail1'); +const nameValid = document.querySelector('#example-text-input'); +const emailTest = document.querySelector('#example-text-input'); +const textAreaValid = document.querySelector('#exampleTextarea'); +const subButton = document.querySelector('#subButton'); +subButton.addEventListener('click', function(pram) { + pram.preventDefault() + if(nameValid.value !== '' && textAreaValid.value !== '' && emailValid.value.includes('@')){ + alert('Thank you for filling out the form'); + }else if (nameValid.value === '' || textAreaValid.value === '' || !emailValid.value.includes('@')){ + if (nameValid.value === '' && textAreaValid.value === '' && !emailValid.value.includes('@')) { + emailValid.style.backgroundColor = 'red'; + nameValid.style.backgroundColor = 'red'; + textAreaValid.style.backgroundColor = 'red'; + }else if (nameValid.value !== '' && textAreaValid.value === '' && !emailValid.value.includes('@')) { + emailValid.style.backgroundColor = 'red'; + textAreaValid.style.backgroundColor = 'red'; + }else if (nameValid.value === '' && textAreaValid.value !== '' && !emailValid.value.includes('@')) { + emailValid.style.backgroundColor = 'red'; + nameValid.style.backgroundColor = 'red'; + }else if (nameValid.value === '' && textAreaValid.value === '' && emailValid.value.includes('@')) { + textAreaValid.style.backgroundColor = 'red'; + nameValid.style.backgroundColor = 'red'; + }else if (nameValid.value !== '' && textAreaValid.value !== '' && !emailValid.value.includes('@')) { + emailValid.style.backgroundColor = 'red'; + }else if (nameValid.value !== '' && textAreaValid.value === '' && emailValid.value.includes('@')) { + textAreaValid.style.backgroundColor = 'red'; + }else if (nameValid.value === '' && textAreaValid.value !== '' && emailValid.value.includes('@')) { + nameValid.style.backgroundColor = 'red'; + } + } + +}); + + From ae2e628e1b56facc479ea15f1f30b276f12c9a7e Mon Sep 17 00:00:00 2001 From: MrDwina Date: Sun, 18 Jun 2017 19:57:34 +0000 Subject: [PATCH 2/6] added new classes --- homework.html | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/homework.html b/homework.html index 926360a..9b1c07f 100644 --- a/homework.html +++ b/homework.html @@ -52,13 +52,13 @@

Bikes for Refugees Scotland - Providing donated bikes and ac
-
+

Bikes for Refugees

Providing donated bikes and accessories to refugees and asylum seekers in Scotland.

- Donate a bike today - Volunteer + Donate a bike today + Volunteer
@@ -66,7 +66,7 @@

Bikes for Refugees

Register with us today: -
+
@@ -80,7 +80,7 @@

Bikes for Refugees

- +

Learn more

From 75acd64295c66c34df0fe33ab178f5a1ebc5bcf3 Mon Sep 17 00:00:00 2001 From: MrDwina Date: Sun, 2 Jul 2017 14:22:43 +0100 Subject: [PATCH 3/6] I summraiesed the validtion function to simple and short function also created elementColor function instade of add to every element styyling --- js/homework.js | 65 ++++++++++++++++++++---------------- js/main.js | 91 ++++++++++++++++++++++++++++++++++++++++++++++++++ 2 files changed, 128 insertions(+), 28 deletions(-) diff --git a/js/homework.js b/js/homework.js index ca92103..cc6bc65 100644 --- a/js/homework.js +++ b/js/homework.js @@ -31,38 +31,47 @@ greenBtn.addEventListener('click', function () { greenVolun.style.backgroundColor = '8c9c08'; }); /*======================== Form Validation ========================*/ -const emailValid = document.querySelector('#exampleInputEmail1'); -const nameValid = document.querySelector('#example-text-input'); -const emailTest = document.querySelector('#example-text-input'); -const textAreaValid = document.querySelector('#exampleTextarea'); +const name = document.querySelector('#example-text-input'); +const email = document.querySelector('#exampleInputEmail1'); +const textArea = document.querySelector('#textArea'); const subButton = document.querySelector('#subButton'); subButton.addEventListener('click', function(pram) { pram.preventDefault() - if(nameValid.value !== '' && textAreaValid.value !== '' && emailValid.value.includes('@')){ + function nameValid(name) { + return name.value !== ''; + } + function emailValid(email) { + return email.value.indexOf("@") !== 0 && email.value.indexOf("@") !== -1 && email.value.indexOf(".") !== -1 && email.value.lastIndexOf("@") < email.value.lastIndexOf(".") && email.value.lastIndexOf(".") < (email.value.length - 2) + } + function textAreaValid(textArea) { + return textArea.value !== ''; + } + function elementColor(elementName) { + return elementName.style.backgroundColor = 'red'; + } + + if(nameValid(name) && emailValid(email) && textAreaValid(textArea)){ alert('Thank you for filling out the form'); - }else if (nameValid.value === '' || textAreaValid.value === '' || !emailValid.value.includes('@')){ - if (nameValid.value === '' && textAreaValid.value === '' && !emailValid.value.includes('@')) { - emailValid.style.backgroundColor = 'red'; - nameValid.style.backgroundColor = 'red'; - textAreaValid.style.backgroundColor = 'red'; - }else if (nameValid.value !== '' && textAreaValid.value === '' && !emailValid.value.includes('@')) { - emailValid.style.backgroundColor = 'red'; - textAreaValid.style.backgroundColor = 'red'; - }else if (nameValid.value === '' && textAreaValid.value !== '' && !emailValid.value.includes('@')) { - emailValid.style.backgroundColor = 'red'; - nameValid.style.backgroundColor = 'red'; - }else if (nameValid.value === '' && textAreaValid.value === '' && emailValid.value.includes('@')) { - textAreaValid.style.backgroundColor = 'red'; - nameValid.style.backgroundColor = 'red'; - }else if (nameValid.value !== '' && textAreaValid.value !== '' && !emailValid.value.includes('@')) { - emailValid.style.backgroundColor = 'red'; - }else if (nameValid.value !== '' && textAreaValid.value === '' && emailValid.value.includes('@')) { - textAreaValid.style.backgroundColor = 'red'; - }else if (nameValid.value === '' && textAreaValid.value !== '' && emailValid.value.includes('@')) { - nameValid.style.backgroundColor = 'red'; - } - } - + }else if (!nameValid(name) && !emailValid(email) && !textAreaValid(textArea)){ + elementColor(name); + elementColor(email); + elementColor(textArea); + }else if (nameValid(name) && !emailValid(email) && !textAreaValid(textArea)) { + elementColor(email); + elementColor(textArea); + }else if (!nameValid(name) && !emailValid(email) && textAreaValid(textArea)) { + elementColor(email); + elementColor(name); + }else if (!nameValid(name) && emailValid(email) && !textAreaValid(textArea)) { + elementColor(name); + elementColor(textArea); + }else if (nameValid(name) && !emailValid(email) && textAreaValid(textArea)) { + elementColor(email); + }else if (nameValid(name) && emailValid(email) && !textAreaValid(textArea)) { + elementColor(textArea); + }else if (!nameValid(name) && emailValid(email) && textAreaValid(textArea)) { + elementColor(name); + } }); diff --git a/js/main.js b/js/main.js index e69de29..d5f3aa1 100644 --- a/js/main.js +++ b/js/main.js @@ -0,0 +1,91 @@ +/* +let myButton = document.querySelector('#donateBike'); +myButton.addEventListener('click', function () { + alert('Hello DOM'); +}); + +let myButton = document.querySelector("#donateBike"); +let myBox = document.querySelector("#myBox"); +myButton.addEventListener("click", function() { + myBox.className = "niceColor"; +}); +*/ +/* +myBox.addEventListener('mouseup', function () { + myBox.style.backgroundColor = 'black'; +}); + +const addPragraph = document.querySelector("#addToLearnMore"); +const addToArticle = document.querySelector("#mainArticles"); +addPragraph.addEventListener("click", function() { + const pragraph = document.createElement("p"); + pragraph.innerText = "Show more javascript!!!!!!"; + addToArticle.appendChild(pragraph); +}); + + +const allImages = document.querySelectorAll("img"); +const myButton = document.querySelector("#allImages"); +myButton.addEventListener("click", function() { + for (const i = 0; i < allImages.length; i++) { + allImages[i].style.borderRadius = "50px"; + } +}); +*/ + +const myButton = document.querySelector("#myButton"); +const myInput = document.querySelector("#myInput"); +myButton.addEventListener("click", function(event) { + event.preventDefault(); + const request = new XMLHttpRequest(); //creating a request object + + request.onreadystatechange = function() { + if (request.readyState === 4) { + // check if a response was sent back + if (request.status === 200) { + // check if request was successful + textBox.innerHTML = request.responseText; + } else { + textBox.innerHTML = + "An error occurred during your request: " + + request.status + + " " + + request.statusText; + } + } + }; + const url = "http://ajax-cyf.eu-west-1.elasticbeanstalk.com/chatroom/?id=b"; //server location + const params = myInput.value; // content we want to send + request.open("POST", url, true); // adding them to the request + + request.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //header info + request.send(params); +}); +//###########################/ +const mySecondButton = document.querySelector("#mySecondButton"); +const myMassage = document.querySelector("#myMassage"); +mySecondButton.addEventListener("click", function(event) { + event.preventDefault(); + const request = new XMLHttpRequest(); //creating a request object + request.onreadystatechange = function() { + if (request.readyState === 4) { + // check if a response was sent back + if (request.status === 200) { + // check if request was successful + const data = JSON.parse(request.responseText); + myMassage.innerHTML = data.message; + } else { + myMassage.innerHTML = + "An error occurred during your request: " + + request.status + + " " + + request.statusText; + } + } + }; + const url = "http://ajax-cyf.eu-west-1.elasticbeanstalk.com/chatroom/?id=b"; //server location + request.open("GET", url); // adding it to the request + + request.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //header info + request.send(); +}); From a3cfcdfb93ac61d7ee736fe5a35a310732681292 Mon Sep 17 00:00:00 2001 From: MrDwina Date: Sun, 2 Jul 2017 14:23:36 +0100 Subject: [PATCH 4/6] changed id name of textArea --- homework.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/homework.html b/homework.html index 9b1c07f..f228243 100644 --- a/homework.html +++ b/homework.html @@ -78,7 +78,7 @@

Bikes for Refugees

- +
From fe621af39a8cda64584df2c1785ecd7790503624 Mon Sep 17 00:00:00 2001 From: MrDwina Date: Sun, 2 Jul 2017 14:34:00 +0100 Subject: [PATCH 5/6] rename element background function to be understandble --- js/homework.js | 26 +++++++++++++------------- 1 file changed, 13 insertions(+), 13 deletions(-) diff --git a/js/homework.js b/js/homework.js index cc6bc65..af9a922 100644 --- a/js/homework.js +++ b/js/homework.js @@ -46,31 +46,31 @@ subButton.addEventListener('click', function(pram) { function textAreaValid(textArea) { return textArea.value !== ''; } - function elementColor(elementName) { + function elemBackColor(elementName) { return elementName.style.backgroundColor = 'red'; } if(nameValid(name) && emailValid(email) && textAreaValid(textArea)){ alert('Thank you for filling out the form'); }else if (!nameValid(name) && !emailValid(email) && !textAreaValid(textArea)){ - elementColor(name); - elementColor(email); - elementColor(textArea); + elemBackColor(name); + elemBackColor(email); + elemBackColor(textArea); }else if (nameValid(name) && !emailValid(email) && !textAreaValid(textArea)) { - elementColor(email); - elementColor(textArea); + elemBackColor(email); + elemBackColor(textArea); }else if (!nameValid(name) && !emailValid(email) && textAreaValid(textArea)) { - elementColor(email); - elementColor(name); + elemBackColor(email); + elemBackColor(name); }else if (!nameValid(name) && emailValid(email) && !textAreaValid(textArea)) { - elementColor(name); - elementColor(textArea); + elemBackColor(name); + elemBackColor(textArea); }else if (nameValid(name) && !emailValid(email) && textAreaValid(textArea)) { - elementColor(email); + elemBackColor(email); }else if (nameValid(name) && emailValid(email) && !textAreaValid(textArea)) { - elementColor(textArea); + elemBackColor(textArea); }else if (!nameValid(name) && emailValid(email) && textAreaValid(textArea)) { - elementColor(name); + elemBackColor(name); } }); From f002f2bb9279ff4604c6177005f96fc8fe81d876 Mon Sep 17 00:00:00 2001 From: MrDwina Date: Sun, 2 Jul 2017 14:51:20 +0100 Subject: [PATCH 6/6] I used arro function instade of normal fun --- js/homework.js | 16 ++++------------ 1 file changed, 4 insertions(+), 12 deletions(-) diff --git a/js/homework.js b/js/homework.js index af9a922..5e06777 100644 --- a/js/homework.js +++ b/js/homework.js @@ -37,18 +37,10 @@ const textArea = document.querySelector('#textArea'); const subButton = document.querySelector('#subButton'); subButton.addEventListener('click', function(pram) { pram.preventDefault() - function nameValid(name) { - return name.value !== ''; - } - function emailValid(email) { - return email.value.indexOf("@") !== 0 && email.value.indexOf("@") !== -1 && email.value.indexOf(".") !== -1 && email.value.lastIndexOf("@") < email.value.lastIndexOf(".") && email.value.lastIndexOf(".") < (email.value.length - 2) - } - function textAreaValid(textArea) { - return textArea.value !== ''; - } - function elemBackColor(elementName) { - return elementName.style.backgroundColor = 'red'; - } + const nameValid = (name => name.value !== ''); + const emailValid = (email => email.value.indexOf("@") !== 0 && email.value.indexOf("@") !== -1 && email.value.indexOf(".") !== -1 && email.value.lastIndexOf("@") < email.value.lastIndexOf(".") && email.value.lastIndexOf(".") < (email.value.length - 2)); + const textAreaValid = (textArea => textArea.value !== ''); + const elemBackColor = (elementName => elementName.style.backgroundColor = 'red'); if(nameValid(name) && emailValid(email) && textAreaValid(textArea)){ alert('Thank you for filling out the form');