From 8e2edbadd8f339a36ff6475ee80d19a67c57472e Mon Sep 17 00:00:00 2001 From: YJohn Date: Mon, 19 Jun 2017 13:00:07 +0100 Subject: [PATCH 1/6] create a new class for validating the form --- homework.html | 2 +- index.html | 7 ++++- js/ajax.js | 51 +++++++++++++++++++++++++++++++++ js/homework.js | 45 +++++++++++++++++++++++++++++ js/main.js | 73 ++++++++++++++++++++++++++++++++++++++++++++++++ styles/style.css | 3 ++ 6 files changed, 179 insertions(+), 2 deletions(-) create mode 100644 js/ajax.js diff --git a/homework.html b/homework.html index 926360a..73e0705 100644 --- a/homework.html +++ b/homework.html @@ -80,7 +80,7 @@

Bikes for Refugees

- +

Learn more

diff --git a/index.html b/index.html index 6ce4ab3..7343b80 100644 --- a/index.html +++ b/index.html @@ -60,12 +60,16 @@

Bikes for Refugees

Donate a bike today Add to "Learn more" All images + Change Buttons
-
+ +
+ +

Learn more

@@ -145,5 +149,6 @@

Upcoming events

+ \ No newline at end of file diff --git a/js/ajax.js b/js/ajax.js new file mode 100644 index 0000000..2253638 --- /dev/null +++ b/js/ajax.js @@ -0,0 +1,51 @@ +// post code in ajax + +function postMessage() { + var mainArticles = document.querySelector('#mainArticles'); + var textBox = document.querySelector('.addArticle'); + + var 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 + mainArticles.innerHTML = request.responseText; + } else { + mainArticles.innerHTML = 'An error occurred during your request: ' + request.status + ' ' + request.statusText; + } + } + } + + var url = "http://ajax-cyf.eu-west-1.elasticbeanstalk.com/chatroom/?id=cyf"; //server location + var params = textBox.value; // content we want to send + textBox.value = ''; + request.open("POST", url, true); // adding them to the request + + request.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //header info + request.send(params); + +} +var postLetter = document.querySelector('#postMessageBtn'); +postLetter.addEventListener('click', postMessage); + + + +// get code from the server + +/*var 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; + } + } + } + var url = "http://ajax-cyf.eu-west-1.elasticbeanstalk.com/chatroom/?id=cyf"; //server location + request.open("GET", url); // adding it to the request + +request.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //header info +request.send(); // sending the request +*/ \ No newline at end of file diff --git a/js/homework.js b/js/homework.js index e69de29..500c1b5 100644 --- a/js/homework.js +++ b/js/homework.js @@ -0,0 +1,45 @@ +var bluChange = document.querySelector('#blueBtn'); +// select the button and assign to the bluChange variable +bluChange.addEventListener('click', changeBlueColor); +// create an Event and call the function +function changeBlueColor(){ + var myJumbo = document.querySelector('.jumbotron'); + var myDonate = document.querySelector('.btn-primary') + var volnter = document.querySelector('.btn-secondary') + myJumbo.style.backgroundColor = '#588fbd'; + myDonate.style.backgroundColor = '#ffa500'; + volnter.style.backgroundColor = 'black'; + volnter.style.color = 'white'; +} + +var oraChange = document.querySelector('#orangeBtn'); +// select the button and assign to the oraChange variable +oraChange.addEventListener('click', changeOrangeColor); +// create an Event and call the function +function changeOrangeColor(){ + //change the color of selected query + var myJumbo = document.querySelector('.jumbotron'); + var myDonate = document.querySelector('.btn-primary') + var volnter = document.querySelector('.btn-secondary') + myJumbo.style.backgroundColor = '#f0ad4e'; + myDonate.style.backgroundColor = '#5751fd'; + volnter.style.backgroundColor = '#31b0d5'; + volnter.style.color = 'white'; +} + +var greenChange = document.querySelector('#greenBtn'); +// select the button and assign to the greenChange variable +greenChange.addEventListener('click', changeGreenColor); +// create an Event and call the function +function changeGreenColor(){ + var myJumbo = document.querySelector('.jumbotron'); + var myDonate = document.querySelector('.btn-primary') + var volnter = document.querySelector('.btn-secondary') + myJumbo.style.backgroundColor = '#87ca8a'; + myDonate.style.backgroundColor = 'black'; + volnter.style.backgroundColor = '#8c9c08'; +} + + +var register = document.querySelector('.summitValid'); +register. \ No newline at end of file diff --git a/js/main.js b/js/main.js index e69de29..535139c 100644 --- a/js/main.js +++ b/js/main.js @@ -0,0 +1,73 @@ +// var donate = document.querySelector('#donateBike'); +// donate.addEventListener('click', showTheAlert); + +// function showTheAlert() { +// alert('Donate button clicked'); +// } +/*var change = document.querySelector('#changeButtons'); +change.addEventListener('click', changeAll); + +function appendParagraph() { + var paragraph = document.createElement('p'); + paragraph.innerText = "How are you?"; + var main = document.querySelector('#mainArticles'); + main.appendChild(paragraph); +} +function changeAll() { + changeTheColor(); + appendParagraph(); + changeParagraphColor(); +} + +function changeParagraphColor(){ + var paragraphs = document.querySelectorAll('p'); + for(var i=0; i img { max-height: 80px; } +} +.highlites{ + background: red; } \ No newline at end of file From 36b8ae60ce20d194f009a01ad951e6a50547bb93 Mon Sep 17 00:00:00 2001 From: YJohn Date: Tue, 20 Jun 2017 18:22:28 +0100 Subject: [PATCH 2/6] create a restriction for the forms --- homework.html | 2 +- js/homework.js | 43 ++++++++++++++++++++++++++++++++++++++----- 2 files changed, 39 insertions(+), 6 deletions(-) diff --git a/homework.html b/homework.html index 73e0705..07438cd 100644 --- a/homework.html +++ b/homework.html @@ -80,7 +80,7 @@

Bikes for Refugees

- +

Learn more

diff --git a/js/homework.js b/js/homework.js index 500c1b5..d8eef23 100644 --- a/js/homework.js +++ b/js/homework.js @@ -2,7 +2,7 @@ var bluChange = document.querySelector('#blueBtn'); // select the button and assign to the bluChange variable bluChange.addEventListener('click', changeBlueColor); // create an Event and call the function -function changeBlueColor(){ +function changeBlueColor() { var myJumbo = document.querySelector('.jumbotron'); var myDonate = document.querySelector('.btn-primary') var volnter = document.querySelector('.btn-secondary') @@ -16,7 +16,7 @@ var oraChange = document.querySelector('#orangeBtn'); // select the button and assign to the oraChange variable oraChange.addEventListener('click', changeOrangeColor); // create an Event and call the function -function changeOrangeColor(){ +function changeOrangeColor() { //change the color of selected query var myJumbo = document.querySelector('.jumbotron'); var myDonate = document.querySelector('.btn-primary') @@ -31,7 +31,7 @@ var greenChange = document.querySelector('#greenBtn'); // select the button and assign to the greenChange variable greenChange.addEventListener('click', changeGreenColor); // create an Event and call the function -function changeGreenColor(){ +function changeGreenColor() { var myJumbo = document.querySelector('.jumbotron'); var myDonate = document.querySelector('.btn-primary') var volnter = document.querySelector('.btn-secondary') @@ -41,5 +41,38 @@ function changeGreenColor(){ } -var register = document.querySelector('.summitValid'); -register. \ No newline at end of file +var register = document.querySelector('#summitValid'); +register.addEventListener('click', validatFormFild); + + +function validatFormFild() { + event.preventDefault(); + var userName = document.querySelector('#example-text-input'); + var emailAddress = document.querySelector('#exampleInputEmail1'); + var textArea = document.querySelector('#exampleTextarea'); + if (!userName.value) { + alert('please Enter your user name?'); + userName.style.backgroundColor = 'red'; + } else if (!emailAddress.value) { + alert('please Enter a valid Email Address?'); + emailAddress.style.backgroundColor = 'red'; + } + else if (!textArea.value) { + alert('please discribe about yourself?'); + textArea.style.backgroundColor = 'red'; + } else if (textArea.value && emailAddress && textArea) { + // 1. clear input + alert('thank you for filling out the form'); + userName.value = ' '; + emailAddress = ' '; + textArea = ' '; + } else { + userName.value = ' '; + emailAddress = ' '; + textArea = ' '; + userName.style.backgroundColor = ' '; + emailAddress.style.backgroundColor = ' '; + textArea.style.backgroundColor = ' '; + } + +} \ No newline at end of file From 892f80d16576339890e19f08b398dbb64a2fc24d Mon Sep 17 00:00:00 2001 From: YJohn Date: Wed, 21 Jun 2017 16:01:43 +0100 Subject: [PATCH 3/6] adjusted the validation for the forms --- js/homework.js | 38 ++++++++++++++++++++++---------------- 1 file changed, 22 insertions(+), 16 deletions(-) diff --git a/js/homework.js b/js/homework.js index d8eef23..8d13114 100644 --- a/js/homework.js +++ b/js/homework.js @@ -50,29 +50,35 @@ function validatFormFild() { var userName = document.querySelector('#example-text-input'); var emailAddress = document.querySelector('#exampleInputEmail1'); var textArea = document.querySelector('#exampleTextarea'); - if (!userName.value) { + var isEmail = false; + for (i = 0; i < emailAddress.value.length; i++) { + if (emailAddress.value[i] === '@') { + isEmail = true; + + } + } + + if (!isEmail) { + alert('please Enter a valid Email Address'); + emailAddress.style.backgroundColor = 'red'; + + } + else if (!userName.value) { alert('please Enter your user name?'); userName.style.backgroundColor = 'red'; - } else if (!emailAddress.value) { - alert('please Enter a valid Email Address?'); - emailAddress.style.backgroundColor = 'red'; } else if (!textArea.value) { alert('please discribe about yourself?'); textArea.style.backgroundColor = 'red'; - } else if (textArea.value && emailAddress && textArea) { - // 1. clear input - alert('thank you for filling out the form'); - userName.value = ' '; - emailAddress = ' '; - textArea = ' '; } else { - userName.value = ' '; - emailAddress = ' '; - textArea = ' '; - userName.style.backgroundColor = ' '; - emailAddress.style.backgroundColor = ' '; - textArea.style.backgroundColor = ' '; + //clear all the input + alert('thank you for filling out the form'); + userName.value = ''; + emailAddress.value = ''; + textArea.value = ''; + userName.style.backgroundColor = ''; + emailAddress.style.backgroundColor = ''; + textArea.style.backgroundColor = ''; } } \ No newline at end of file From 30abe6aac78bf4ef4a90448e7d324e9468f1db37 Mon Sep 17 00:00:00 2001 From: YJohn Date: Thu, 22 Jun 2017 09:31:22 +0100 Subject: [PATCH 4/6] reduce complexity of the code --- js/homework.js | 44 ++++++++++++++++---------------------------- 1 file changed, 16 insertions(+), 28 deletions(-) diff --git a/js/homework.js b/js/homework.js index 8d13114..172154d 100644 --- a/js/homework.js +++ b/js/homework.js @@ -1,40 +1,31 @@ -var bluChange = document.querySelector('#blueBtn'); -// select the button and assign to the bluChange variable -bluChange.addEventListener('click', changeBlueColor); -// create an Event and call the function +var bluChange = document.querySelector('#blueBtn');// select the button and assign to the bluChange variable +bluChange.addEventListener('click', changeBlueColor);// create an Event and call the function + +var oraChange = document.querySelector('#orangeBtn'); +oraChange.addEventListener('click', changeOrangeColor); + +var greenChange = document.querySelector('#greenBtn'); +greenChange.addEventListener('click', changeGreenColor); + +var myJumbo = document.querySelector('.jumbotron'); +var myDonate = document.querySelector('.btn-primary') +var volnter = document.querySelector('.btn-secondary') + function changeBlueColor() { - var myJumbo = document.querySelector('.jumbotron'); - var myDonate = document.querySelector('.btn-primary') - var volnter = document.querySelector('.btn-secondary') myJumbo.style.backgroundColor = '#588fbd'; myDonate.style.backgroundColor = '#ffa500'; volnter.style.backgroundColor = 'black'; volnter.style.color = 'white'; } -var oraChange = document.querySelector('#orangeBtn'); -// select the button and assign to the oraChange variable -oraChange.addEventListener('click', changeOrangeColor); -// create an Event and call the function function changeOrangeColor() { - //change the color of selected query - var myJumbo = document.querySelector('.jumbotron'); - var myDonate = document.querySelector('.btn-primary') - var volnter = document.querySelector('.btn-secondary') myJumbo.style.backgroundColor = '#f0ad4e'; myDonate.style.backgroundColor = '#5751fd'; volnter.style.backgroundColor = '#31b0d5'; volnter.style.color = 'white'; } -var greenChange = document.querySelector('#greenBtn'); -// select the button and assign to the greenChange variable -greenChange.addEventListener('click', changeGreenColor); -// create an Event and call the function function changeGreenColor() { - var myJumbo = document.querySelector('.jumbotron'); - var myDonate = document.querySelector('.btn-primary') - var volnter = document.querySelector('.btn-secondary') myJumbo.style.backgroundColor = '#87ca8a'; myDonate.style.backgroundColor = 'black'; volnter.style.backgroundColor = '#8c9c08'; @@ -51,14 +42,11 @@ function validatFormFild() { var emailAddress = document.querySelector('#exampleInputEmail1'); var textArea = document.querySelector('#exampleTextarea'); var isEmail = false; - for (i = 0; i < emailAddress.value.length; i++) { - if (emailAddress.value[i] === '@') { - isEmail = true; + if (emailAddress && emailAddress.value.indexOf('@') !== -1) { + isEmail = true; - } } - - if (!isEmail) { + else if (!isEmail) { alert('please Enter a valid Email Address'); emailAddress.style.backgroundColor = 'red'; From c26820228e84549caa2e4d07afe9434d78432f55 Mon Sep 17 00:00:00 2001 From: YJohn Date: Sat, 24 Jun 2017 21:09:28 +0100 Subject: [PATCH 5/6] change the email validation code --- js/homework.js | 9 +++++---- 1 file changed, 5 insertions(+), 4 deletions(-) diff --git a/js/homework.js b/js/homework.js index 172154d..517e7dc 100644 --- a/js/homework.js +++ b/js/homework.js @@ -42,11 +42,12 @@ function validatFormFild() { var emailAddress = document.querySelector('#exampleInputEmail1'); var textArea = document.querySelector('#exampleTextarea'); var isEmail = false; - if (emailAddress && emailAddress.value.indexOf('@') !== -1) { - isEmail = true; - + for (i = 0; i < emailAddress.value.length; i++) { + if (emailAddress.value[i] === '@') { + isEmail = true; + } } - else if (!isEmail) { + if (!isEmail) { alert('please Enter a valid Email Address'); emailAddress.style.backgroundColor = 'red'; From b7b6dbe0b3bbb363311481ca80a0aec270106545 Mon Sep 17 00:00:00 2001 From: YJohn Date: Sat, 24 Jun 2017 21:27:29 +0100 Subject: [PATCH 6/6] made all box red when the fields empty --- js/homework.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/js/homework.js b/js/homework.js index 517e7dc..5382eda 100644 --- a/js/homework.js +++ b/js/homework.js @@ -42,6 +42,12 @@ function validatFormFild() { var emailAddress = document.querySelector('#exampleInputEmail1'); var textArea = document.querySelector('#exampleTextarea'); var isEmail = false; + if ((emailAddress.value==="") && (userName.value==="") && (textArea.value==="")) { + alert('please Enter all the boxes'); + emailAddress.style.backgroundColor = 'red'; + userName.style.backgroundColor = 'red'; + textArea.style.backgroundColor = 'red'; + } for (i = 0; i < emailAddress.value.length; i++) { if (emailAddress.value[i] === '@') { isEmail = true;