Merge pull request #1 from lalwanivikas/master

Did minor bug fixes and added a new image
lalwanivikas · Jan 12, 2015 · 61c18a4 · 61c18a4
2 parents b6baf5e + 8baa616
commit 61c18a4
Show file tree

Hide file tree

Showing 5 changed files with 16 additions and 9 deletions.
diff --git a/css/main.css b/css/main.css
@@ -8,7 +8,8 @@
 body {
 	background-color: #D2D7D3;
 	font-family: monospace;
-	max-width: 960px;
+	width: 960px;
+    max-width: 960px;
 	margin: 0 auto;
 }
 
@@ -69,10 +70,10 @@ form {
 	border: 2px solid grey;
 	border-radius: 10px;
 	padding: 5px;
-	width: 60%;
+	width: 65%;
 	max-width: 600px;
 	float: left;
-	margin: 25px;
+	margin: 20px;
 }
 
 #imageContainer img {
@@ -86,7 +87,8 @@ form {
 	float: left;
 	border: 2px solid grey;
 	border-radius: 10px;
-	margin-top: 25px;
+	margin-top: 20px;
+    margin-bottom: 20px;
 	padding-left: 10px;
 }
 

diff --git a/image/puppy.jpg b/image/puppy.jpg
diff --git a/image/stadium.jpg b/image/stadium.jpg
diff --git a/index.html b/index.html
@@ -8,13 +8,15 @@
 	<body>
 		<h1>Image Editor</h1>
 
+		<!--Form for collecting image URL -->
 		<form id="urlBox" class = "center">
 			<input class="url-box" type="url" id="imgUrl" placeholder="Paste any image link and start playing.">
 			<input id="go" type="button" value="Go">
 		</form>
 
 		<hr width="100%" color="grey">
 
+		<!--Controls for CSS filters via range input-->
 		<div class="sliders">
 			<form id="imageEditor">
 				<p>
@@ -67,8 +69,9 @@ <h1>Image Editor</h1>
 			</form>
 		</div>	
 
+		<!--container where image will be loaded-->
 		<div id="imageContainer" class="center">
-			<img src="image/puppy.jpg"/>
+			<img src="image/stadium.jpg"/>
 		</div>
 
 		<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>

diff --git a/js/main.js b/js/main.js
@@ -1,5 +1,5 @@
 
-// adding in image via url box
+// adding an image via url box
 function addImage(e) {
 	var imgUrl = $("#imgUrl").val();
 	if (imgUrl.length) {
@@ -8,8 +8,10 @@ function addImage(e) {
 	e.preventDefault();	
 }
 
-$("#go").click(addImage); //on click of go
+//on click of go(submit) button, addImage() will be called
+$("#go").click(addImage);
 
+//on pressing return, addImage() will be called
 $("#urlBox").submit(addImage);
 
 
@@ -37,10 +39,10 @@ function editImage() {
 
 }
 
-//When sliders change
+//When sliders change image will be updated via editImage() function
 $("input[type=range]").change(editImage).mousemove(editImage);
 
-// Reset sliders back to their original values
+// Reset sliders back to their original values on press of 'reset'
 $('#imageEditor').on('reset', function () {
 	setTimeout(function() {
 		editImage();