bike for refugee

homework.html

@@ -80,7 +80,7 @@ <h1 class="display-3">Bikes for Refugees</h1>
 							<label for="exampleTextarea">Describe yourself</label>
 							<textarea class="form-control" id="exampleTextarea" rows="3"></textarea>
 						</div>
-						<button type="submit" class="btn btn-primary">Submit</button>
+						<button type="submit" id="summitValid" class="btn btn-primary">Submit</button>
 						</form>
 					<h2 class="heading-underline">Learn more</h2>
 					<div class="articles">

index.html

@@ -60,12 +60,16 @@ <h1 class="display-3">Bikes for Refugees</h1>
 							<a id="donateBike" class="btn btn-primary btn-lrg" href="#">Donate a bike today</a>
 							<a id="addToLearnMore" class="btn btn-secondary btn-lrg" href="#">Add to "Learn more"</a>
 							<a id="allImages" class="btn btn-secondary btn-lrg" href="#">All images</a>
+							<a id="changeButtons" class="btn btn-secondary btn-lrg" href="#"> Change Buttons</a>
 						</div>
 					</div>
 					<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 style="display: flex">
+						<button id="postMessageBtn" type="button" class="btn btn-primary">POST</button>
+					</div>
 					<h2 class="heading-underline">Learn more</h2>
 					<div id="mainArticles" class="articles">
 						<article class="article">
@@ -145,5 +149,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,51 @@
+// post code in ajax
+
+function postMessage() {
+    var mainArticles = document.querySelector('#mainArticles');
+    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
+                mainArticles.innerHTML = request.responseText;
+            } else {
+                mainArticles.innerHTML = 'An error occurred during your request: ' + request.status + ' ' + request.statusText;
+            }
+        }
+    }
+
+    var url = "http://ajax-cyf.eu-west-1.elasticbeanstalk.com/chatroom/?id=cyf";	                                        //server location
+    var params = textBox.value; 		// content we want to send
+    textBox.value = '';
+    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 postLetter = document.querySelector('#postMessageBtn');
+postLetter.addEventListener('click', postMessage);
+
+
+
+// get code 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
+       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=cyf";	                                    //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
+*/

js/homework.js

@@ -0,0 +1,79 @@
+var bluChange = document.querySelector('#blueBtn');// select the button and assign to the bluChange variable
+bluChange.addEventListener('click', changeBlueColor);// create an Event and call the function
+
+var oraChange = document.querySelector('#orangeBtn');
+oraChange.addEventListener('click', changeOrangeColor);
+
+var greenChange = document.querySelector('#greenBtn');
+greenChange.addEventListener('click', changeGreenColor);
+
+var myJumbo = document.querySelector('.jumbotron');
+var myDonate = document.querySelector('.btn-primary')
+var volnter = document.querySelector('.btn-secondary')
+
+function changeBlueColor() {
+    myJumbo.style.backgroundColor = '#588fbd';
+    myDonate.style.backgroundColor = '#ffa500';
+    volnter.style.backgroundColor = 'black';
+    volnter.style.color = 'white';
+}
+
+function changeOrangeColor() {
+    myJumbo.style.backgroundColor = '#f0ad4e';
+    myDonate.style.backgroundColor = '#5751fd';
+    volnter.style.backgroundColor = '#31b0d5';
+    volnter.style.color = 'white';
+}
+
+function changeGreenColor() {
+    myJumbo.style.backgroundColor = '#87ca8a';
+    myDonate.style.backgroundColor = 'black';
+    volnter.style.backgroundColor = '#8c9c08';
+}
+
+
+var register = document.querySelector('#summitValid');
+register.addEventListener('click', validatFormFild);
+
+
+function validatFormFild() {
+    event.preventDefault();
+    var userName = document.querySelector('#example-text-input');
+    var emailAddress = document.querySelector('#exampleInputEmail1');
+    var textArea = document.querySelector('#exampleTextarea');
+    var isEmail = false;
+    if ((emailAddress.value==="") && (userName.value==="") && (textArea.value==="")) {
+        alert('please Enter all the boxes');
+        emailAddress.style.backgroundColor = 'red';
+        userName.style.backgroundColor = 'red';
+        textArea.style.backgroundColor = 'red';
+    }
+    for (i = 0; i < emailAddress.value.length; i++) {
+        if (emailAddress.value[i] === '@') {
+            isEmail = true;
+        }
+    }
+    if (!isEmail) {
+        alert('please Enter a valid Email Address');
+        emailAddress.style.backgroundColor = 'red';
+
+    }
+    else if (!userName.value) {
+        alert('please Enter your user name?');
+        userName.style.backgroundColor = 'red';
+    }
+    else if (!textArea.value) {
+        alert('please discribe about yourself?');
+        textArea.style.backgroundColor = 'red';
+    } else {
+        //clear all the input
+        alert('thank you for filling out the form');
+        userName.value = '';
+        emailAddress.value = '';
+        textArea.value = '';
+        userName.style.backgroundColor = '';
+        emailAddress.style.backgroundColor = '';
+        textArea.style.backgroundColor = '';
+    }
+
+}

js/main.js

@@ -0,0 +1,73 @@
+// var donate = document.querySelector('#donateBike');
+// donate.addEventListener('click', showTheAlert);
+
+// function showTheAlert() {
+//     alert('Donate button clicked');
+// }
+/*var change = document.querySelector('#changeButtons');
+change.addEventListener('click', changeAll);
+
+function appendParagraph() {
+    var paragraph = document.createElement('p');
+    paragraph.innerText = "How are you?";
+    var main = document.querySelector('#mainArticles');
+    main.appendChild(paragraph);
+}
+function changeAll() {
+    changeTheColor();
+    appendParagraph();
+    changeParagraphColor();    
+}
+
+function changeParagraphColor(){
+    var paragraphs = document.querySelectorAll('p');
+    for(var i=0; i<paragraphs.length; i++){
+        paragraphs[i].style.backgroundColor = 'blue';
+    }
+}
+changeParagraphColor();
+
+*/
+
+
+var donate = document.querySelector('#donateBike');
+donate.addEventListener('click', changeTheColor);
+
+function changeTheColor(event) {
+    event.preventDefault();
+    var myJumbo = document.querySelector('.jumbotron');
+    myJumbo.className += " highlites";
+}
+
+
+var addArticle = document.querySelector('#addArticleBtn');
+addArticle.addEventListener('click', appendArticle);
+
+function appendArticle() {
+    var articleTextBox = document.querySelector('.addArticle');
+
+    if (!articleTextBox.value) {
+        alert('please Enter the values');
+    } else {
+        // 1. Create element based on input
+        var element = createArticle(articleTextBox.value);
+
+        // 2. Append input to main articles
+        var mainArticles = document.querySelector('#mainArticles');
+        mainArticles.appendChild(element);
+
+        // 3. clear input
+        articleTextBox.value = ' ';
+    }
+
+}
+
+function createArticle(textBoxValue) {
+    var article = document.createElement('article');
+    var element = document.createElement('div');
+    element.className = 'article-title';
+    article.className = 'article';
+    element.innerText = textBoxValue;
+    article.appendChild(element);
+    return article;
+}

styles/style.css

@@ -156,4 +156,7 @@ body {
 	.navbar-brand > img {
 	   max-height: 80px;
 	}
+}
+.highlites{
+	background: red;
 }