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..1b97089 100644 --- a/index.html +++ b/index.html @@ -1,149 +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 -
-
-
- - -
-

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 - -

-
+
+ +
+
+
+

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
-
-

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 e69de29..a4839b0 100644 --- a/js/homework.js +++ b/js/homework.js @@ -0,0 +1,104 @@ + +//////////////////////////////////////////////////// +////// 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.style.backgroundColor = "red"; + alert('This is not a valid email address, because it doesn\'t have \'@\'') + } + 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(); + var verifyEmail = userEmail(); + var verifyName = userName(); + var verifyDescription = description() + description(); + if (verifyEmail && verifyName && verifyDescription) { + textEmail.value = ""; + textName.value = ""; + describe.value = ""; + alert('Thank you for filling out the form'); + + } +} diff --git a/js/main.js b/js/main.js index e69de29..7ee7353 100644 --- a/js/main.js +++ b/js/main.js @@ -0,0 +1,125 @@ +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 +} + +