DOM&AJAX homework solution

homework.html

@@ -52,21 +52,21 @@ <h1 class="sr-only">Bikes for Refugees Scotland - Providing donated bikes and ac
 			</div>
 			<div class="row">
 				<div class="primary-content col-lg-8">
-					<div class="jumbotron">
+					<div class="jumbotron greenJumb orangeJumb" id="jumbBackground" >
 						<h1 class="display-3">Bikes for Refugees</h1>
 						<p class="lead">Providing donated bikes and accessories to refugees and asylum seekers in Scotland.</p>
 						<hr class="my-4">
 						<div class="buttons">
-							<a class="btn btn-primary btn-lrg" href="#">Donate a bike today</a>
-							<a class="btn btn-secondary btn-lrg" href="#">Volunteer</a>
+							<a class="btn btn-primary btn-lrg greenDonate orangeDonate" href="#" id='donateBackground'>Donate a bike today</a>
+							<a class="btn btn-secondary btn-lrg greenVolun orangeVolun" href="#" id='volunteerBack'>Volunteer</a>
 						</div>
 					</div>
 					<button id="blueBtn" type="button" class="btn btn-primary colorButton">Blue</button>
 					<button id="orangeBtn" type="button" class="btn btn-primary colorButton">Orange</button>
 					<button id="greenBtn" type="button" class="btn btn-primary colorButton">Green</button>
 
 					Register with us today:
-					<form >
+					<form>
 						<div class="form-group">
 							<label for="exampleInputEmail1">Email address</label>
 							<input type="email" class="form-control" id="exampleInputEmail1" aria-describedby="emailHelp" placeholder="Enter email">
@@ -78,9 +78,9 @@ <h1 class="display-3">Bikes for Refugees</h1>
 						</div>
 						<div class="form-group">
 							<label for="exampleTextarea">Describe yourself</label>
-							<textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
+							<textarea class="form-control" id="textArea" rows="3"></textarea>
 						</div>
-						<button type="submit" class="btn btn-primary">Submit</button>
+						<button type="submit" id="subButton" class="btn btn-primary">Submit</button>
 						</form>
 					<h2 class="heading-underline">Learn more</h2>
 					<div class="articles">

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);
+    }      
+});
+
+

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();
+});