From 644173aa919b64bd2fe7acda2931931a7ea12331 Mon Sep 17 00:00:00 2001 From: MHDRateb Date: Sun, 18 Jun 2017 19:40:22 +0100 Subject: [PATCH 1/5] Part 1 Solution_change jumbtron and the buttons background color --- js/homework.js | 34 ++++++++++++++++++++++++++++++++++ 1 file changed, 34 insertions(+) diff --git a/js/homework.js b/js/homework.js index e69de29..ee16ee3 100644 --- a/js/homework.js +++ b/js/homework.js @@ -0,0 +1,34 @@ +var box = document.querySelector('.jumbotron'); +var donateButton = document.querySelector('.buttons .btn-primary'); +var volunteerButton = document.querySelector('.buttons .btn-secondary'); + + +var blueButton = document.querySelector('#blueBtn'); +blueButton.addEventListener('click',colorBlue); + +var blueButton = document.querySelector('#orangeBtn'); +blueButton.addEventListener('click',colorOrange); + +var blueButton = document.querySelector('#greenBtn'); +blueButton.addEventListener('click',colorGreen); + +function colorBlue(){ +box.style.backgroundColor='#588fbd'; +donateButton.style.backgroundColor='#ffa500'; +volunteerButton.style.backgroundColor='black'; +volunteerButton.style.color='white'; +} + + +function colorOrange(){ +box.style.backgroundColor='#f0ad4e'; +donateButton.style.backgroundColor='#5751fd'; +volunteerButton.style.backgroundColor='#31b0d5'; +volunteerButton.style.color='white'; +} + +function colorGreen(){ +box.style.backgroundColor='#87ca8a'; +donateButton.style.backgroundColor='black'; +volunteerButton.style.backgroundColor='#8c9c08'; +} \ No newline at end of file From 7d3d44636634306cdfea9b904c161388a2541906 Mon Sep 17 00:00:00 2001 From: MHDRateb Date: Sun, 18 Jun 2017 20:31:57 +0100 Subject: [PATCH 2/5] Part 1_ add some comments to the code --- js/homework.js | 15 ++++++++++----- 1 file changed, 10 insertions(+), 5 deletions(-) diff --git a/js/homework.js b/js/homework.js index ee16ee3..bc326c4 100644 --- a/js/homework.js +++ b/js/homework.js @@ -1,17 +1,19 @@ +// part 1 var box = document.querySelector('.jumbotron'); var donateButton = document.querySelector('.buttons .btn-primary'); var volunteerButton = document.querySelector('.buttons .btn-secondary'); - +//blue button var blueButton = document.querySelector('#blueBtn'); blueButton.addEventListener('click',colorBlue); - +//orange button var blueButton = document.querySelector('#orangeBtn'); blueButton.addEventListener('click',colorOrange); - +// green button var blueButton = document.querySelector('#greenBtn'); blueButton.addEventListener('click',colorGreen); +//blue button function function colorBlue(){ box.style.backgroundColor='#588fbd'; donateButton.style.backgroundColor='#ffa500'; @@ -19,7 +21,7 @@ volunteerButton.style.backgroundColor='black'; volunteerButton.style.color='white'; } - +//orange button function function colorOrange(){ box.style.backgroundColor='#f0ad4e'; donateButton.style.backgroundColor='#5751fd'; @@ -27,8 +29,11 @@ volunteerButton.style.backgroundColor='#31b0d5'; volunteerButton.style.color='white'; } +//green button function function colorGreen(){ box.style.backgroundColor='#87ca8a'; donateButton.style.backgroundColor='black'; volunteerButton.style.backgroundColor='#8c9c08'; -} \ No newline at end of file +} + +//part 2 \ No newline at end of file From 0d1eebc256045189832564b0f588b7ec447c31a0 Mon Sep 17 00:00:00 2001 From: MHDRateb Date: Sun, 18 Jun 2017 23:21:22 +0100 Subject: [PATCH 3/5] Part 1_correct varibles name --- js/homework.js | 10 +++++----- 1 file changed, 5 insertions(+), 5 deletions(-) diff --git a/js/homework.js b/js/homework.js index bc326c4..651a122 100644 --- a/js/homework.js +++ b/js/homework.js @@ -7,11 +7,11 @@ var volunteerButton = document.querySelector('.buttons .btn-secondary'); var blueButton = document.querySelector('#blueBtn'); blueButton.addEventListener('click',colorBlue); //orange button -var blueButton = document.querySelector('#orangeBtn'); -blueButton.addEventListener('click',colorOrange); +var orangeButton = document.querySelector('#orangeBtn'); +orangeButton.addEventListener('click',colorOrange); // green button -var blueButton = document.querySelector('#greenBtn'); -blueButton.addEventListener('click',colorGreen); +var greenButton = document.querySelector('#greenBtn'); +greenButton.addEventListener('click',colorGreen); //blue button function function colorBlue(){ @@ -36,4 +36,4 @@ donateButton.style.backgroundColor='black'; volunteerButton.style.backgroundColor='#8c9c08'; } -//part 2 \ No newline at end of file +//part 2 From 86f4cd47a05fb3ba0016e2752b20125f8ba65dd0 Mon Sep 17 00:00:00 2001 From: MHDRateb Date: Mon, 19 Jun 2017 06:40:58 +0100 Subject: [PATCH 4/5] part 2 soulation_submit the form --- js/homework.js | 91 ++++++++++++++++++++++++++++++++++++++++---------- 1 file changed, 73 insertions(+), 18 deletions(-) diff --git a/js/homework.js b/js/homework.js index 651a122..6bf6cb3 100644 --- a/js/homework.js +++ b/js/homework.js @@ -5,35 +5,90 @@ var volunteerButton = document.querySelector('.buttons .btn-secondary'); //blue button var blueButton = document.querySelector('#blueBtn'); -blueButton.addEventListener('click',colorBlue); +blueButton.addEventListener('click', colorBlue); //orange button var orangeButton = document.querySelector('#orangeBtn'); -orangeButton.addEventListener('click',colorOrange); +orangeButton.addEventListener('click', colorOrange); // green button var greenButton = document.querySelector('#greenBtn'); -greenButton.addEventListener('click',colorGreen); +greenButton.addEventListener('click', colorGreen); //blue button function -function colorBlue(){ -box.style.backgroundColor='#588fbd'; -donateButton.style.backgroundColor='#ffa500'; -volunteerButton.style.backgroundColor='black'; -volunteerButton.style.color='white'; +function colorBlue() { + box.style.backgroundColor = '#588fbd'; + donateButton.style.backgroundColor = '#ffa500'; + volunteerButton.style.backgroundColor = 'black'; + volunteerButton.style.color = 'white'; } //orange button function -function colorOrange(){ -box.style.backgroundColor='#f0ad4e'; -donateButton.style.backgroundColor='#5751fd'; -volunteerButton.style.backgroundColor='#31b0d5'; -volunteerButton.style.color='white'; +function colorOrange() { + box.style.backgroundColor = '#f0ad4e'; + donateButton.style.backgroundColor = '#5751fd'; + volunteerButton.style.backgroundColor = '#31b0d5'; + volunteerButton.style.color = 'white'; } //green button function -function colorGreen(){ -box.style.backgroundColor='#87ca8a'; -donateButton.style.backgroundColor='black'; -volunteerButton.style.backgroundColor='#8c9c08'; +function colorGreen() { + box.style.backgroundColor = '#87ca8a'; + donateButton.style.backgroundColor = 'black'; + volunteerButton.style.backgroundColor = '#8c9c08'; } -//part 2 +//part 2 +//input Text +var textEmail = document.querySelector('#exampleInputEmail1'); +var textName = document.querySelector('#example-text-input'); +var textDescib = document.querySelector('#exampleTextarea'); +//submit button +var sbumitButton = document.querySelector('form .btn-primary'); +sbumitButton.addEventListener('click', submitForm); + +//submit function +function submitForm(event) { + event.preventDefault(); + checkEmail(); + checkName(); + checkDescrib(); + if (checkEmail() && checkName() && checkDescrib()) { + textEmail.value = ""; + textName.value = ""; + textDescib.value = ""; + setTimeout(function () { + alert('Thank you for filling out the form'); + }, 200); + } +} + +//check text in email field +function checkEmail() { + if (textEmail.value.length <= 0 || textEmail.value.indexOf('@') < 0 || !(/^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$/.test(textEmail.value))) { + textEmail.style.backgroundColor = "red"; + } + else { + textEmail.style.backgroundColor = "white"; + return true; + } +} + +//check text in name field +function checkName() { + if (textName.value.length <= 0 || /\d/.test(textName.value) || /[\.-@#$%^&*()-_=+]/.test(textName.value)) { + textName.style.backgroundColor = "red"; + } + else { + textName.style.backgroundColor = "white"; + return true; + } +} +//check text in describe your self field +function checkDescrib() { + if (textDescib.value.length <= 0) { + textDescib.style.backgroundColor = "red"; + } + else { + textDescib.style.backgroundColor = "white"; + return true; + } +} \ No newline at end of file From d6769926b4ca12e40264e4f3d05891bfdf58c4b2 Mon Sep 17 00:00:00 2001 From: MHDRateb Date: Fri, 7 Jul 2017 20:12:07 +0100 Subject: [PATCH 5/5] put functions results to three varibles to avoid the repation --- js/homework.js | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/js/homework.js b/js/homework.js index 6bf6cb3..d72ba8b 100644 --- a/js/homework.js +++ b/js/homework.js @@ -48,10 +48,10 @@ sbumitButton.addEventListener('click', submitForm); //submit function function submitForm(event) { event.preventDefault(); - checkEmail(); - checkName(); - checkDescrib(); - if (checkEmail() && checkName() && checkDescrib()) { + var checkValidateEmail=checkEmail(); + var checkValidateName=checkName(); + var checkValidatDescribe=checkDescrib(); + if (checkValidateEmail && checkValidateName && checkValidatDescribe) { textEmail.value = ""; textName.value = ""; textDescib.value = "";