Save user

index.html

@@ -7,11 +7,12 @@
     <title>Mars Rover Photo App</title>
 
     <script id = "image-template" type="text/x-handlebars-template">
-
+        <form class= "favImage">
         <article class="clearfix" data-image="{{id}}">
-            <img src="{{url}}" alt="image of mars">
-            <input id="I{{id}}" type="checkbox">
+            <img id="I{{id}}" src="{{url}}" alt="image of mars">
+            <input  class = "saveImage" type="submit">
         </article>
+        </form>
     </script>
 
 </head>
@@ -68,11 +69,11 @@
 
             <div id="gallery"><!-- this is where images will be appended--></div>
 
-            <form id="username">
-                <label for="username">Save your favorite images! Create a username</label>
-                <input type="text" name="username" required>
-                <input type="submit" value= "submit"></input>
-            </form>
+
+            <label for="username">Save your favorite images! Create a username</label>
+            <input id = "user" type="text" name="username" required>
+
+
         </section>
 
         <section id="favePhotos">

models/image.js

@@ -40,6 +40,24 @@ const API_URL = 'http://localhost:3000/api/v1';
         app.imageView.initDiscoverPage();
     }
 
+    Image.saveImage = () =>{
+        const rover = $('#rover option:selected').text();
+        const img_id = $(this).find('img').attr('id');
+        const img_num = img_id.slice(1);
+        const src = $(this).find('img').attr('src');
+
+
+        $.post(`${API_URL}/save` , {
+            image_id: img_num,
+            rover: rover,
+            camera: $('#camera option:selected').text(),
+            url: src,
+            user: $('#user').val()
+
+        })
+
+    }
+
     Image.prototype.toHtml = function () {
         $('#gallery').append();
         const template = Handlebars.compile($('#image-template').text());

views/imageView.js

@@ -14,6 +14,29 @@ var app = app || {};
                 app.Image.fetchImages();
         })
        app.Image.all.map(image => $('#photos').append(image.toHtml()));
+
+       $('.favImage').on('submit', function (event) {
+        event.preventDefault();
+
+        const rover = $('#rover option:selected').text();
+        const img_id = $(this).find('img').attr('id');
+        const img_num = img_id.slice(1);
+        const src = $(this).find('img').attr('src');
+
+        const image = {
+            image_id: img_num,
+            rover: rover,
+            camera: $('#camera option:selected').text(),
+            url: src,
+            user: $('#user').val()
+        }
+
+
+        // app.Image.saveImage();
+
+    });
+
+
     };
 
     imageView.initHomePage = () => {
@@ -29,6 +52,9 @@ var app = app || {};
     imageView.initFavesPage = () => {
         $('main section').hide();
         $('#favePhotos').show();
+
+
+
     }
 
     imageView.initAboutPage = () => {