This repository was archived by the owner on Jan 3, 2023. It is now read-only.
Have completed the first homework #3
There are no files selected for viewing
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 | ||
|
There was a problem hiding this comment. Long comments tend to indicate that a part of the code can be replaced by an inner function. The nameboxMv if statement can be replaced by a function like "isNameValid" returning true or false depending on the case. You can apply the same for email and description. This reduces this function complexity and removes the need of comments. I will elaborate more in the next comment. |
||
| 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) { | ||
|
There was a problem hiding this comment. If we replace each function for a boolean check function, then we can replace this code for: The implementation can still be the same a part from formIsValid = false that is not needed anymore. The reason of doing so is to make it easier to expand other validations and to read and maintain the code.
Author
There was a problem hiding this comment. Thank you so much for your time to check the code and giving very useful advices.. :) :) I will edit them.. :) 👍 |
||
| alert("Thank you for filling out the form"); | ||
| namebox.value = ""; | ||
| describeYourselfInput.value = ""; | ||
| emailInput.value = ""; | ||
| } | ||
|
|
||
| } | ||
|
|
||
|
|
||
|
|
||
|
|
||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -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 | ||
|
There was a problem hiding this comment. By creating an object twice, only the last implementation will be use. (1st one will be discarded) Make sure that is what you want, otherwise use the same request object or create a 'postRequest, getRequest' |
||
| 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']; | ||
|
There was a problem hiding this comment. Try to follow always the same patter. If you are assiging the querySelector to a variable, do it across all your code |
||
| } 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 | ||
|
|
||
|
|
||
|
|
||
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -0,0 +1,7 @@ | ||
| .volunteerText { | ||
| color: black; | ||
| } | ||
|
|
||
| .inValid { | ||
| background-color:red; | ||
| } |
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I prefer to move the var declarations to the top of the file or function.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
same goes for greenButton, submitButton... etc.