-
+
Bikes for Refugees
Providing donated bikes and accessories to refugees and asylum seekers in Scotland.
@@ -66,7 +66,7 @@
Bikes for Refugees
Register with us today:
-
Learn more
diff --git a/js/homework.js b/js/homework.js
index e69de29..5e06777 100644
--- a/js/homework.js
+++ b/js/homework.js
@@ -0,0 +1,69 @@
+/*======================= 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 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()
+ 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');
+ }else if (!nameValid(name) && !emailValid(email) && !textAreaValid(textArea)){
+ elemBackColor(name);
+ elemBackColor(email);
+ elemBackColor(textArea);
+ }else if (nameValid(name) && !emailValid(email) && !textAreaValid(textArea)) {
+ elemBackColor(email);
+ elemBackColor(textArea);
+ }else if (!nameValid(name) && !emailValid(email) && textAreaValid(textArea)) {
+ elemBackColor(email);
+ elemBackColor(name);
+ }else if (!nameValid(name) && emailValid(email) && !textAreaValid(textArea)) {
+ elemBackColor(name);
+ elemBackColor(textArea);
+ }else if (nameValid(name) && !emailValid(email) && textAreaValid(textArea)) {
+ elemBackColor(email);
+ }else if (nameValid(name) && emailValid(email) && !textAreaValid(textArea)) {
+ elemBackColor(textArea);
+ }else if (!nameValid(name) && emailValid(email) && textAreaValid(textArea)) {
+ elemBackColor(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();
+});