part 1 of js/homework

index.html

@@ -65,7 +65,12 @@ <h1 class="display-3">Bikes for Refugees</h1>
 					<div style="display: flex">
 						<input class="form-control addArticle" type="textbox">
 						<button id="addArticleBtn" type="button" class="btn btn-primary">Add</button>
-					</div>		
+					</div>
+					<div>
+						<button id="getMessageButton" type="button" class="btn btn-primary">Get message</button>
+
+
+					</div>
 					<h2 class="heading-underline">Learn more</h2>
 					<div id="mainArticles" class="articles">
 						<article class="article">
@@ -145,5 +150,6 @@ <h2 class="heading-underline">Upcoming events</h2>
 		<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
 		<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
 		<script src="./js/main.js"></script>
+		<script src="./js/ajax.js"></script>
 	</body>
 </html>

js/ajax.js

@@ -0,0 +1,23 @@
+function getMessage() {
+  var textBox = document.querySelector('.addArticle');
+  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.value = request.responseText;
+      } else {
+        textBox.value = 'An error occurred during your request: ' + request.status + ' ' + request.statusText;
+      }
+    }
+  }
+  var url = "http://ajax-cyf.eu-west-1.elasticbeanstalk.com/chatroom/?id=yohannes";                                        //server location
+  request.open("GET", url);                    // adding it to the request
+
+  request.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //header info
+  request.send();                                 // sending the request
+}
+
+var text = document.querySelector('#getMessageButton');
+text.addEventListener('click', getMessage);
+

js/homework.js

@@ -0,0 +1,44 @@
+
+
+function changeBackgroundColour(element, colour, ) {
+  element.style.backgroundColor = colour;
+}
+function changeFontColor(element, colour) {
+  element.style.color = colour;
+}
+function jumbotronColor(element, colour) {
+  element.style.backgroundColor = colour;
+}
+
+function changeColor(event) {
+  var jumbotron = document.querySelector('.jumbotron');
+  var donateAbike = document.querySelector('.btn.btn-primary.btn-lrg');
+  var volunteer = document.querySelector('.btn.btn-secondary.btn-lrg');
+
+  if (event.target.id === "blueBtn") {
+    changeBackgroundColour(jumbotron, '#588fbd');
+    changeBackgroundColour(donateAbike, '#ffa500');
+    changeBackgroundColour(volunteer, 'black');
+    changeFontColor(volunteer, 'white');
+  } else if (event.target.id === 'orangeBtn') {
+    changeBackgroundColour(jumbotron, '#f0ad4e');
+    changeBackgroundColour(donateAbike, '#5751fd');
+    changeBackgroundColour(volunteer, '#31b0d5');
+    changeFontColor(volunteer, 'white');
+
+  } else if (event.target.id === 'greenBtn') {
+    changeBackgroundColour(jumbotron, '#87ca8a');
+    changeBackgroundColour(donateAbike, 'black');
+    changeBackgroundColour(volunteer, '#8c9c08');
+
+
+  }
+
+}
+var myButtons = document.querySelectorAll('.colorButton');
+for (var i = 0; i < myButtons.length; i++) {
+  myButtons[i].addEventListener('click', changeColor);
+
+}
+
+

js/main.js

@@ -0,0 +1,26 @@
+// 1. Select element (using CSS selectors)
+var myButton = document.querySelector('.jumbotron');
+
+// 2. Define your event handler (callback <-- function)
+myButton.addEventListener('click', doSomething);
+
+function doSomething(){
+  var jumbotron = document.querySelector('.jumbotron');
+  jumbotron.style.backgroundColor = 'red';
+}
+
+var myButton = document.querySelector('#addToLearnMore');
+myButton.addEventListener('click', appendArticle);
+
+function changeColor() {
+  var mainArticles = document.querySelector('#mainArticles');
+  mainArticles.style.color = 'yellow';
+}
+
+function appendArticle() {
+  var paragragh = document.createElement('p');
+  paragragh.innerText = 'My name is Anthony and am a student';
+
+  var mainArticles = document.querySelector("#mainArticles");
+  mainArticles.appendChild(paragragh);
+}