From f5e5df7dbb5b03e047d66baed10b65fa2e32bc8e Mon Sep 17 00:00:00 2001 From: khaled Date: Sat, 24 Jun 2017 22:03:43 +0100 Subject: [PATCH 1/2] Solved the First homework, for changing the colors and also validating the forms --- homework.html | 2 +- index.html | 6 +++ js/homework.js | 105 ++++++++++++++++++++++++++++++++++++++ js/main.js | 128 +++++++++++++++++++++++++++++++++++++++++++++++ styles/style.css | 8 ++- 5 files changed, 247 insertions(+), 2 deletions(-) diff --git a/homework.html b/homework.html index 926360a..5f32483 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..612281b 100644 --- a/index.html +++ b/index.html @@ -64,6 +64,12 @@

Bikes for Refugees

+

Learn more

diff --git a/js/homework.js b/js/homework.js index e69de29..0244443 100644 --- a/js/homework.js +++ b/js/homework.js @@ -0,0 +1,105 @@ + +//////////////////////////////////////////////////// +////// Part One of the Homework ///////// +///////////////////////////////////////////////// + +var blueColor = document.querySelector('#blueBtn');// Selects the button. +blueColor.addEventListener('click', changeToBlueColor);// When the button is clicked the function is called. + +var orangeColor = document.querySelector('#orangeBtn'); +orangeColor.addEventListener('click', changeToOrangeColor); + +var greenColor = document.querySelector('#greenBtn'); +greenColor.addEventListener('click', changeToGreenColor); + +var jumbo = document.querySelector('.jumbotron'); +var donate = document.querySelector('.buttons .btn-primary') +var volunteer = document.querySelector('.btn-secondary') + +function changeToBlueColor() { + jumbo.style.backgroundColor = '#588fbd'; + donate.style.backgroundColor = '#ffa500'; + volunteer.style.backgroundColor = 'black'; + volunteer.style.color = 'white'; +} + +function changeToOrangeColor() { + jumbo.style.backgroundColor = '#f0ad4e'; + donate.style.backgroundColor = '#5751fd'; + volunteer.style.backgroundColor = '#31b0d5'; + volunteer.style.color = 'white'; +} + +function changeToGreenColor() { + jumbo.style.backgroundColor = '#87ca8a'; + donate.style.backgroundColor = 'black'; + volunteer.style.backgroundColor = '#8c9c08'; +} + + +//////////////////////////////////////////////////// +////// Part two of the Homework ///////// +///////////////////////////////////////////////// + + +// Selector for the form +var textEmail = document.querySelector('#exampleInputEmail1'); +var textName = document.querySelector('#example-text-input'); +var describe = document.querySelector('#exampleTextarea'); +//Selector for the submit button +var sbumitButton = document.querySelector('form .btn-primary'); +sbumitButton.addEventListener('click', submitForm); + +//check text in email field + +function userEmail() { + if (textEmail.value.indexOf('@') < 0 || textEmail.value.length <= 5 ) { + textEmail.style.backgroundColor = "red"; + alert('This is not a valid email address, because it doesn\'t have \'@\' sign, Or it is very short') + } + else { + textEmail.style.backgroundColor = "white"; + return true; + } +} + +//check text in name field +function userName() { + if (textName.value.length <= 1 ) { + textName.style.backgroundColor = "red"; + alert('You Have Entered unvalid Name') + } + else { + textName.style.backgroundColor = "white"; + return true; + } +} +//check text in describe your self field +function description() { + if (describe.value.length <= 5) { + describe.style.backgroundColor = "red"; + alert('The description should be at least 5 characters long') + + } + else { + describe.style.backgroundColor = "white"; + return true; + } +} + + + +function submitForm(event) { + event.preventDefault(); + userEmail(); + userName(); + description(); + + if (userEmail() && userName() && description() && ) { + textEmail.value = ""; + textName.value = ""; + textDescibe.value = ""; + alert('Thank you for filling out the form'); + + } +} diff --git a/js/main.js b/js/main.js index e69de29..bd27642 100644 --- a/js/main.js +++ b/js/main.js @@ -0,0 +1,128 @@ +var myButton = document.querySelector('#donateBike'); +myButton.addEventListener('click', myfunction); + + function myfunction(){ + + var myMsg =document.querySelector('input').value; + var id = document.querySelector('select').value; + + 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; + var a = JSON.parse( request.responseText); + var box = document.querySelector('.jumbotron') + + var paragraph = document.createElement('p'); + paragraph.innerText = a.message; + box.appendChild(paragraph); + //alert(a.message) + + } else { + + alert('An error occurred during your request: ' + request.status + ' ' + request.statusText); + + // textBox.innerHTML = 'An error occurred during your request: ' + request.status + ' ' + request.statusText; + } + } + } + var url = "http://ajax-cyf.eu-west-1.elasticbeanstalk.com/chatroom/?id=eee"; //server location + request.open("GET", url); // adding it to the request + +request.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //header info +request.send(); + + } + + + + +// var myButton = document.querySelector('#addArticleBtn'); +// myButton.addEventListener('click', myfunction); + +// function myfunction(){ +// 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=b"; //server location +// var params = " I love you "; // 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); +// } + + + + + + + +// var myButton = document.querySelector('#donateBike'); +// myButton.addEventListener('click', myfunction); +// function myfunction(){ +// var box = document.querySelector('.jumbotron'); +// box.className += ' blue'; +// } + + + + + +// function myfunction(){ + +// var images = document.querySelectorAll('img') +// for(var i = 0; i img { max-height: 80px; } -} \ No newline at end of file +} + + From 7e8d2b6ef73032c641fc14fcb097c9383ea884be Mon Sep 17 00:00:00 2001 From: khaled Date: Mon, 10 Jul 2017 11:45:41 +0100 Subject: [PATCH 2/2] I fixed the validation form --- index.html | 262 +++++++++++++++++++++++++------------------------ js/homework.js | 23 +++-- js/main.js | 65 ++++++------ 3 files changed, 177 insertions(+), 173 deletions(-) diff --git a/index.html b/index.html index 612281b..1b97089 100644 --- a/index.html +++ b/index.html @@ -1,155 +1,163 @@ - - Bikes for Refugees | Scotland - - - - - - - - - - - - Skip to main content -
-
- - - Logo for Bikes for Refugees Scotland -

Bikes for Refugees Scotland - Providing donated bikes and accessories to refugees and asylum seekers.

- + + Logo for Bikes for Refugees Scotland +

Bikes for Refugees Scotland - Providing donated bikes and accessories to refugees and asylum seekers.

+ -
+
-
- -
-
-
-

Bikes for Refugees

-

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

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

Bikes for Refugees

+

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

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

Learn more

-
-
-
- Why do refugees need bikes? -
-

Many refugees are placed in housing in areas where there are few jobs. Bikes provide low-cost transportation so that they can get to work, manage child care and do their shopping.

-

- - - Learn more - -

-
-
-
- How can I help? -
-

We need lots of bikes and bike accessories! If you have an old bike you don't use, bring it to one of our dropoff events. Or come attend one of our fundraisers.

-

- - - Learn more - -

-
-
+
-
-

Upcoming events

-
- -
+

Learn more

+
+
+
+ Why do refugees need bikes? +
+

Many refugees are placed in housing in areas where there are few jobs. Bikes provide low-cost transportation so that + they can get to work, manage child care and do their shopping.

+

- + Learn more -

- Bike dropoff event in Edinburgh on May 11 -
-
-
+

+
+
+
+ How can I help? +
+

We need lots of bikes and bike accessories! If you have an old bike you don't use, bring it to one of our dropoff events. + Or come attend one of our fundraisers.

+

- - -

- Help us cycle 4,797km -
-

We need you to help us cycle 4797km, the distance of Edinburgh to Damascus.

-
- +

+
+
+
+
+

Upcoming events

+
+
+

Riders needed now to help raise awareness and funds for BfR and Médecins Sans Frontières.

+ + + +
-
-
-
-

- Bikes for Refugees Scotland is a volunteer-led project to help people explore and make connections with their local communities. -

-
+
+
+
+
+
+

+ Bikes for Refugees Scotland is a volunteer-led project to help people explore and make connections with their local communities. +

- - - - - +
+ + + + + + \ No newline at end of file diff --git a/js/homework.js b/js/homework.js index 0244443..a4839b0 100644 --- a/js/homework.js +++ b/js/homework.js @@ -53,9 +53,9 @@ sbumitButton.addEventListener('click', submitForm); //check text in email field function userEmail() { - if (textEmail.value.indexOf('@') < 0 || textEmail.value.length <= 5 ) { + if (textEmail.value.indexOf('@') === 0) { textEmail.style.backgroundColor = "red"; - alert('This is not a valid email address, because it doesn\'t have \'@\' sign, Or it is very short') + alert('This is not a valid email address, because it doesn\'t have \'@\'') } else { textEmail.style.backgroundColor = "white"; @@ -65,7 +65,7 @@ function userEmail() { //check text in name field function userName() { - if (textName.value.length <= 1 ) { + if (textName.value.length <= 1) { textName.style.backgroundColor = "red"; alert('You Have Entered unvalid Name') } @@ -78,8 +78,7 @@ function userName() { function description() { if (describe.value.length <= 5) { describe.style.backgroundColor = "red"; - alert('The description should be at least 5 characters long') - + alert('The description should be at least 5 characters long') } else { describe.style.backgroundColor = "white"; @@ -91,15 +90,15 @@ function description() { function submitForm(event) { event.preventDefault(); - userEmail(); - userName(); + var verifyEmail = userEmail(); + var verifyName = userName(); + var verifyDescription = description() description(); - - if (userEmail() && userName() && description() && ) { + if (verifyEmail && verifyName && verifyDescription) { textEmail.value = ""; textName.value = ""; - textDescibe.value = ""; - alert('Thank you for filling out the form'); - + describe.value = ""; + alert('Thank you for filling out the form'); + } } diff --git a/js/main.js b/js/main.js index bd27642..7ee7353 100644 --- a/js/main.js +++ b/js/main.js @@ -1,40 +1,37 @@ var myButton = document.querySelector('#donateBike'); myButton.addEventListener('click', myfunction); - - function myfunction(){ - - var myMsg =document.querySelector('input').value; - var id = document.querySelector('select').value; - - 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; - var a = JSON.parse( request.responseText); - var box = document.querySelector('.jumbotron') - var paragraph = document.createElement('p'); - paragraph.innerText = a.message; - box.appendChild(paragraph); - //alert(a.message) - - } else { +function myfunction() { + + var myMsg = document.querySelector('input').value; + var id = document.querySelector('select').value; + + 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; + var a = JSON.parse(request.responseText); + var box = document.querySelector('.jumbotron') - alert('An error occurred during your request: ' + request.status + ' ' + request.statusText); - - // textBox.innerHTML = 'An error occurred during your request: ' + request.status + ' ' + request.statusText; - } - } - } - var url = "http://ajax-cyf.eu-west-1.elasticbeanstalk.com/chatroom/?id=eee"; //server location - request.open("GET", url); // adding it to the request + var paragraph = document.createElement('p'); + paragraph.innerText = a.message; + box.appendChild(paragraph); + //alert(a.message) + } else { + alert('An error occurred during your request: ' + request.status + ' ' + request.statusText); + // textBox.innerHTML = 'An error occurred during your request: ' + request.status + ' ' + request.statusText; + } + } + } + var url = "http://ajax-cyf.eu-west-1.elasticbeanstalk.com/chatroom/?id=eee"; //server location + request.open("GET", url); // adding it to the request -request.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //header info -request.send(); + request.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //header info + request.send(); - } +} @@ -97,7 +94,7 @@ request.send(); // function myfunction(){ - + // var box = document.querySelector('#mainArticles'); // var x=Math.floor(Math.random() * 255); @@ -105,7 +102,7 @@ request.send(); // var z=Math.floor(Math.random() * 255); // box.style.backgroundColor="rgb("+x+","+x+","+y+")"; - + // var paragraph = document.createElement('p'); // paragraph.innerText = "show me more text"; @@ -117,7 +114,7 @@ request.send(); // } // function myfunction(){ - + // var box = document.querySelector('.jumbotron') // box.style.backgroundColor="red";