diff --git a/js/homework.js b/js/homework.js
index e69de29..c3dab44 100644
--- a/js/homework.js
+++ b/js/homework.js
@@ -0,0 +1,106 @@
+
+/* Homework for the Bike for Refugee.
+ Making changes when clicking blue button.
+ First selecting #blueBtn id and assign with blueButton. Adding addEventlistener to that blueButton
+ to changeToBlue when it's clicked. class .jumbotron was selected and assigned as box. donateButton,
+ volunteerButton and volunteerText were assigned to relevant variable.*/
+var blueButton = document.querySelector('#blueBtn');
+blueButton.addEventListener('click', changeToBlue);
+var box = document.querySelector('.jumbotron');
+var donateButton = document.querySelector(".btn.btn-primary.btn-lrg");
+var volunteerButton = document.querySelector(".btn.btn-secondary.btn-lrg");
+var volunteerTextColor = document.querySelector('.volunteerText');
+
+/* This is a function called "changeToBlue" which will change box's,donateButton's
+, volunteerButton's background color and volunteerTextcolor.*/
+function changeToBlue() {
+ box.style.backgroundColor = '#588fbd';
+ donateButton.style.backgroundColor = '#ffa500';
+ volunteerButton.style.backgroundColor = 'black';
+ volunteerTextColor.style.color = 'white';
+}
+
+// Making changes when clicking orange button.*/
+var orangeButton = document.querySelector('#orangeBtn');
+orangeButton.addEventListener('click', changetoOrange);
+
+/*changetoOrange function. box, donateButton,volunteerButton's
+background color changed.*/
+function changetoOrange() {
+ box.style.backgroundColor = '#f0ad4e';
+ donateButton.style.backgroundColor = '#5751fd';
+ volunteerButton.style.backgroundColor = '#31b0d5';
+}
+
+// Making changes when clicking green button.
+var greenButton = document.querySelector('#greenBtn');
+greenButton.addEventListener('click', changeToGreen);
+
+/* changeToGreen function.box, donateButton,volunteerButton's
+background color changed. */
+function changeToGreen() {
+ box.style.backgroundColor = '#87ca8a';
+ donateButton.style.backgroundColor = 'black';
+ volunteerButton.style.backgroundColor = '#8c9c08';
+}
+
+/* Selecting the submit button and creating "validateTheForm" function.*/
+var submitButton = document.querySelector('#submitButton');
+submitButton.addEventListener('click', validateTheForm);
+
+// This is ValidateTheForm function. used event.preventDefault() method.
+function validateTheForm(event) {
+ event.preventDefault();
+
+ // selecting namebox with document.querySelector.
+ var namebox = document.querySelector('#example-text-input');
+ // Adding value in namebox.
+ var nameboxWV = namebox.value;
+
+ // selecting email input box with document.querySelector.
+ var emailInput = document.querySelector('#exampleInputEmail1');
+ // Adding value in emailInput.
+ var emailInputWV = emailInput.value;
+
+ // selecting describe yourself box with document.querySelector.
+ var describeYourselfInput = document.querySelector('#exampleTextarea');
+ // Adding value in emailInput.
+ var describeYourselfInputWV = describeYourselfInput.value;
+
+ // Setting the form is Valid by using boolean.(true)
+ var formIsValid = true;
+ /* if the namebox with value.length is invalid, changed background color of box to red
+ by assinging .className "inValid". Changing formIsValid from true to false.*/
+ if (nameboxWV.length === 0) {
+ namebox.className = 'form-control inValid';
+ formIsValid = false;
+ }
+
+ /* if the emailInput with value.length is invalid, changed background color of box to red
+ by assinging .className "inValid". Changing formIsValid from true to false.*/
+ if (emailInputWV.length === 0 || emailInputWV.indexOf('@') === -1) {
+ emailInput.className = 'form-control inValid';
+ formIsValid = false;
+ }
+ /* if the describeYourselfInput with value.length is invalid, changed background color of box to red
+ by assinging .className "inValid". Changing formIsValid from true to false.*/
+ if (describeYourselfInputWV.length === 0) {
+ describeYourselfInput.className = 'form-control inValid';
+ formIsValid = false;
+ }
+
+ /* if the form is valid, alert (" thanks "), change namebox, describeYourself
+ and email's value to empty string value.*/
+ if (formIsValid) {
+ alert("Thank you for filling out the form");
+ namebox.value = "";
+ describeYourselfInput.value = "";
+ emailInput.value = "";
+ }
+
+}
+
+
+
+
+
diff --git a/js/main.js b/js/main.js
index e69de29..e52f334 100644
--- a/js/main.js
+++ b/js/main.js
@@ -0,0 +1,107 @@
+
+// Setting an alert
+var learnMoreButton = document.querySelector("#addToLearnMore");
+learnMoreButton.addEventListener("click", ShowMore);
+
+function ShowMore() {
+ alert("Thanks for finding out more about us");
+}
+
+// Setting an alert
+var images = document.querySelector("#allImages");
+images.addEventListener("click", seeImages);
+
+function seeImages() {
+ alert("There you go, enjoy all our photos");
+}
+
+// changing background colour
+var boxColor = document.querySelector(".jumbotron");
+boxColor.addEventListener('click', changeColor);
+
+function changeColor() {
+ boxColor.style.backgroundColor = 'yellow';
+
+ var paragraph = document.createElement('p');
+ paragraph.innerText = "SHOW ME MORE JAVASCRIPT";
+
+ boxColor.appendChild(paragraph);
+}
+
+var learnButton = document.querySelector("#addToLearnMore");
+learnButton.addEventListener('click', addParagraph);
+
+function addParagraph() {
+
+ var newParagraph = document.createElement('p');
+ newParagraph.innerText = "SHOW ME MORE We need lots of bike what are the tricks";
+
+ var topOfArticle = document.querySelector('#mainArticles');
+ topOfArticle.appendChild(newParagraph);
+}
+
+var allImagesbutton = document.querySelector("#allImages");
+allImagesbutton.addEventListener("click", showAllImages);
+
+function showAllImages() {
+ var selectingAllimg = document.querySelectorAll("img");
+ for (var i = 0; i < selectingAllimg.length; i++) {
+ selectingAllimg[i].width = selectingAllimg[i].width - 10;
+ selectingAllimg[i].height = selectingAllimg[i].height - 10;
+ }
+}
+
+// Temporary code, testing now. Will need more explanation for this.
+var myButton = document.querySelector("#donateBike");
+
+myButton.addEventListener("click", doSomething);
+
+function doSomething() {
+ var box = document.querySelector(".jumbotron");
+ if (!box.className.includes("red")) {
+ box.className += " yellow";
+ }
+}
+
+
+
+// This works. Posting, Sending (params) to Server
+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
+ document.querySelector(".display-3").innerHTML = request.responseText;
+ } else {
+ alert('An error occurred during your request: ' + request.status + ' ' + request.statusText);
+ }
+ }
+}
+var url = "http://ajax-cyf.eu-west-1.elasticbeanstalk.com/chatroom/?id=c"; //server location
+var params = "Hello Mohamed and Nasir. What are you going to do now"; // 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); // sending the request
+
+
+
+
+// Getting/receiving the data from the server
+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
+ document.querySelector(".display-3").innerHTML = JSON.parse(request.responseText)['message'];
+ } else {
+ alert('An error occurred during your request: ' + request.status + ' ' + request.statusText);
+ }
+ }
+}
+var url = "http://ajax-cyf.eu-west-1.elasticbeanstalk.com/chatroom/?id=c"; //server location
+// var params = "Hello"// content we want to send
+request.open("GET", url);// adding them to the request
+request.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); //header info
+request.send(); // sending the request
+
+
+
diff --git a/styles/homeworkStyle.css b/styles/homeworkStyle.css
new file mode 100644
index 0000000..a9636d4
--- /dev/null
+++ b/styles/homeworkStyle.css
@@ -0,0 +1,7 @@
+.volunteerText {
+ color: black;
+}
+
+.inValid {
+ background-color:red;
+}
\ No newline at end of file