From eb7f988af5b828f82127f4def15d8fa66714cf3c Mon Sep 17 00:00:00 2001 From: Charlie Heiner Date: Sun, 17 Dec 2017 11:40:14 -0800 Subject: [PATCH 01/29] getting values from user selections and putting into an object --- index.html | 4 ++-- views/imageView.js | 10 +++++----- 2 files changed, 7 insertions(+), 7 deletions(-) diff --git a/index.html b/index.html index 65a8ee7..83053a2 100644 --- a/index.html +++ b/index.html @@ -38,7 +38,7 @@

This is a test, this is ONLY a test....

-
- + - + @@ -90,6 +94,7 @@
+
diff --git a/styles/layout.css b/styles/layout.css index 2f28598..bbb4507 100644 --- a/styles/layout.css +++ b/styles/layout.css @@ -1,7 +1,9 @@ #home { background-color: #000000; + } + footer{ width: 100%; margin: 0 auto; diff --git a/styles/module.css b/styles/module.css index a5e24f1..bf86f14 100644 --- a/styles/module.css +++ b/styles/module.css @@ -34,7 +34,7 @@ /* Container module for Gallery */ - +/* .flex-container { display: inline-flex; flex-direction: row; @@ -78,8 +78,28 @@ order: 0; flex: 0 1 auto; align-self: auto; + } */ + #gallery-wrapper { + position: relative; + display: flex; + justify-content: space-around; + flex-wrap: wrap; + padding: 40px 40px 100px 40px; + } + + .imageBlock { + display: block; + position: relative; + width: 25%; + height: 200px; + margin: 20px 0; + padding: 40px; + background-position: center; + background-size: cover; + text-align: center; + border-radius: 20px; + transition: box-shadow .3s ease-in-out; } - /* LEARN page module */ div.faq_container { diff --git a/views/imageView.js b/views/imageView.js index 3239c46..2f752f8 100644 --- a/views/imageView.js +++ b/views/imageView.js @@ -13,7 +13,7 @@ var app = app || {}; e.preventDefault(); app.Image.fetchImages(); }) - app.Image.all.map(image => $('#photos').append(image.toHtml())); + app.Image.all.map(image => $('#gallery-wrapper').append(image.toHtml())); $('.favImage').on('submit', function (event) { event.preventDefault(); From 2e1b1daf470e6cf53e22933dd5b98342bec7fcde Mon Sep 17 00:00:00 2001 From: Charlie Heiner Date: Tue, 19 Dec 2017 19:13:29 -0800 Subject: [PATCH 20/29] can stay on page and do multiple seaches and image saves --- models/image.js | 6 +++++- views/imageView.js | 48 +++++++++++++++++++++++++--------------------- 2 files changed, 31 insertions(+), 23 deletions(-) diff --git a/models/image.js b/models/image.js index 54b8f8a..e3f694c 100644 --- a/models/image.js +++ b/models/image.js @@ -37,7 +37,11 @@ const API_URL = 'http://localhost:3000/api/v1'; Image.loadAll = (data) => { Image.all = data.map(obj => new Image(obj)); console.log(Image.all); - app.imageView.initDiscoverPage(); + app.imageView.append(); + Image.all = []; + + + // app.imageView.initDiscoverPage(); } Image.saveImage = (image) =>{ diff --git a/views/imageView.js b/views/imageView.js index 8591351..9f38241 100644 --- a/views/imageView.js +++ b/views/imageView.js @@ -13,32 +13,35 @@ var app = app || {}; e.preventDefault(); app.Image.fetchImages(); }) - app.Image.all.map(image => $('#gallery-wrapper').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(image); - }); - }; +}; + imageView.append = () => { + + $('#gallery-wrapper').empty(); + app.Image.all.map(image => $('#gallery-wrapper').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(image); + + }); + } imageView.initHomePage = () => { $('main section').hide(); @@ -54,6 +57,7 @@ var app = app || {}; $('main section').hide(); $('#favePhotos').show(); + // $('').on('submit') } From a575e520a1b69985eb9054eaf44cf532d3ad0d8d Mon Sep 17 00:00:00 2001 From: Charlie Heiner Date: Tue, 19 Dec 2017 19:48:24 -0800 Subject: [PATCH 21/29] started front side request to api for favorites --- models/image.js | 13 +++++++++++++ views/imageView.js | 5 ++++- 2 files changed, 17 insertions(+), 1 deletion(-) diff --git a/models/image.js b/models/image.js index e3f694c..aed73e8 100644 --- a/models/image.js +++ b/models/image.js @@ -12,6 +12,7 @@ const API_URL = 'http://localhost:3000/api/v1'; this.url = obj.url; } Image.all = []; + Image.faves = []; Image.fetchImages = (cb) => { let camShort = ''; @@ -34,6 +35,18 @@ const API_URL = 'http://localhost:3000/api/v1'; .fail(console.error); } + Image.fetchFaves = () =>{ + Image.all = []; + $.get(`${API_URL}/favorites`) + .then(Image.loadAll) + .fail(console.error); + + } + Image.loadFaves = (data) => { + Image.faves = data.map(obj => new Image(obj)); + console.log(ImageFaves.all); + } + Image.loadAll = (data) => { Image.all = data.map(obj => new Image(obj)); console.log(Image.all); diff --git a/views/imageView.js b/views/imageView.js index 9f38241..ce952e9 100644 --- a/views/imageView.js +++ b/views/imageView.js @@ -57,7 +57,10 @@ var app = app || {}; $('main section').hide(); $('#favePhotos').show(); - // $('').on('submit') + $('#getFaves').on('submit', (e) => { + e.preventDefault(); + app.Image.fetchFaves(); + }) } From aa74512efb8948bd2c36c2bfaf36461a984b1714 Mon Sep 17 00:00:00 2001 From: Charlie Heiner Date: Tue, 19 Dec 2017 20:14:46 -0800 Subject: [PATCH 22/29] can pull images from database and append --- models/image.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/models/image.js b/models/image.js index aed73e8..f6510bd 100644 --- a/models/image.js +++ b/models/image.js @@ -40,7 +40,7 @@ const API_URL = 'http://localhost:3000/api/v1'; $.get(`${API_URL}/favorites`) .then(Image.loadAll) .fail(console.error); - + } Image.loadFaves = (data) => { Image.faves = data.map(obj => new Image(obj)); From 34be20665bd5eac84a45e5a43ac5811ca82bc4a7 Mon Sep 17 00:00:00 2001 From: Lizabeth Petersen Date: Tue, 19 Dec 2017 20:29:21 -0800 Subject: [PATCH 23/29] adds images wrapper to favorites page --- index.html | 16 +++++------- styles/base.css | 6 ++--- styles/module.css | 62 ++++++++++++++++------------------------------- 3 files changed, 30 insertions(+), 54 deletions(-) diff --git a/index.html b/index.html index 68b4899..516cdfe 100644 --- a/index.html +++ b/index.html @@ -79,7 +79,7 @@ - + @@ -89,21 +89,17 @@
-
-

This is a test, this is ONLY a test....

-
+
+
-
-
- - -
-
+ +
+
diff --git a/styles/base.css b/styles/base.css index c0c7c8e..72ee01e 100644 --- a/styles/base.css +++ b/styles/base.css @@ -8,7 +8,7 @@ body { } h1 { - font-family: 'Luckiest Guy', cursive; + font-family: 'Carter One', cursive; font-size: 2.3em; color: rgb(228, 53, 9); margin: 0; @@ -19,12 +19,12 @@ h1 { } h2 { - font-family: 'Luckiest Guy', cursive; + font-family: 'Carter One', cursive; font-size: 1.7em; } h3 { - font-family: 'Luckiest Guy', cursive; + font-family: 'Carter One', cursive; font-size: 1.3em; } diff --git a/styles/module.css b/styles/module.css index bf86f14..30a59cb 100644 --- a/styles/module.css +++ b/styles/module.css @@ -34,52 +34,32 @@ /* Container module for Gallery */ -/* -.flex-container { - display: inline-flex; - flex-direction: row; - flex-wrap: wrap; - justify-content: flex-start; - align-content: space-between; - align-items: flex-start; - } - -.flex-item:nth-child(1) { - order: 0; - flex: 0 1 auto; - align-self: auto; - } -.flex-item:nth-child(2) { - order: 0; - flex: 0 1 auto; - align-self: auto; - } - -.flex-item:nth-child(3) { - order: 0; - flex: 0 1 auto; - align-self: auto; + #gallery-wrapper { + position: relative; + display: flex; + justify-content: space-around; + flex-wrap: wrap; + padding: 40px 40px 100px 40px; } - -.flex-item:nth-child(4) { - order: 0; - flex: 0 1 auto; - align-self: auto; + + .imageBlock { + display: block; + position: relative; + width: 25%; + height: 200px; + margin: 20px 0; + padding: 40px; + background-position: center; + background-size: cover; + text-align: center; + border-radius: 20px; + transition: box-shadow .3s ease-in-out; } -.flex-item:nth-child(5) { - order: 0; - flex: 0 1 auto; - align-self: auto; - } + /* Container module for Favorites */ -.flex-item:nth-child(6) { - order: 0; - flex: 0 1 auto; - align-self: auto; - } */ - #gallery-wrapper { + #favorites-wrapper { position: relative; display: flex; justify-content: space-around; From 6336fd6b0839709638e938ba176b350012d3200b Mon Sep 17 00:00:00 2001 From: Charlie Heiner Date: Tue, 19 Dec 2017 20:56:14 -0800 Subject: [PATCH 24/29] appending favorite images to page but wrong page --- models/image.js | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/models/image.js b/models/image.js index f6510bd..d21ac45 100644 --- a/models/image.js +++ b/models/image.js @@ -41,10 +41,16 @@ const API_URL = 'http://localhost:3000/api/v1'; .then(Image.loadAll) .fail(console.error); + console.log("this is in fetchFaves", Image.all); + + + $('#favorites-wrapper').show(); + } Image.loadFaves = (data) => { Image.faves = data.map(obj => new Image(obj)); console.log(ImageFaves.all); + app.Image.faves.map(image => $('#favorites-wrapper').append(image.toHtml())); } Image.loadAll = (data) => { From 2d5dd501f0e7176fa071b4b2b5f16fae8a947cc1 Mon Sep 17 00:00:00 2001 From: Charlie Heiner Date: Tue, 19 Dec 2017 23:24:27 -0800 Subject: [PATCH 25/29] getting favorites to append to favorites html section but with hard coded query so far --- models/image.js | 32 +++++++++----------------------- 1 file changed, 9 insertions(+), 23 deletions(-) diff --git a/models/image.js b/models/image.js index d21ac45..d58a4e9 100644 --- a/models/image.js +++ b/models/image.js @@ -36,9 +36,10 @@ const API_URL = 'http://localhost:3000/api/v1'; } Image.fetchFaves = () =>{ + Image.all = []; $.get(`${API_URL}/favorites`) - .then(Image.loadAll) + .then(Image.loadFaves) .fail(console.error); console.log("this is in fetchFaves", Image.all); @@ -48,38 +49,23 @@ const API_URL = 'http://localhost:3000/api/v1'; } Image.loadFaves = (data) => { - Image.faves = data.map(obj => new Image(obj)); - console.log(ImageFaves.all); - app.Image.faves.map(image => $('#favorites-wrapper').append(image.toHtml())); + Image.all = data.map(obj => new Image(obj)); + console.log('this is in loadFaves', data); + console.log('this is image.all in loadFaves', Image.all) + $('#favorites-wrapper').empty(); + app.Image.all.map(image => $('#favorites-wrapper').append(image.toHtml())); + } Image.loadAll = (data) => { Image.all = data.map(obj => new Image(obj)); - console.log(Image.all); + console.log('this is in loadAll', Image.all); app.imageView.append(); Image.all = []; - - - // app.imageView.initDiscoverPage(); } Image.saveImage = (image) =>{ - // 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}/favorites`, image) - // { - // image_id: img_num, - // rover: rover, - // camera: $('#camera option:selected').text(), - // url: src, - // user: $('#user').val() - - // }) - } Image.prototype.toHtml = function () { From 04d8820ed7f3911b2888b9910a108d21a5d765cf Mon Sep 17 00:00:00 2001 From: Charlie Heiner Date: Wed, 20 Dec 2017 00:07:35 -0800 Subject: [PATCH 26/29] sending user name with query to server to return user faves --- index.html | 2 +- models/image.js | 5 ++++- 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/index.html b/index.html index 516cdfe..0934d61 100644 --- a/index.html +++ b/index.html @@ -93,7 +93,7 @@
- +
diff --git a/models/image.js b/models/image.js index d58a4e9..c90c04a 100644 --- a/models/image.js +++ b/models/image.js @@ -38,7 +38,10 @@ const API_URL = 'http://localhost:3000/api/v1'; Image.fetchFaves = () =>{ Image.all = []; - $.get(`${API_URL}/favorites`) + const user = { + user: $('#userInput').val() + } + $.get(`${API_URL}/favorites`, user) .then(Image.loadFaves) .fail(console.error); From 5a686bf4691d628967326279bb7fa42cd107a61a Mon Sep 17 00:00:00 2001 From: Katlyn Tucker Date: Wed, 20 Dec 2017 01:45:25 -0800 Subject: [PATCH 27/29] finished css styling for about page --- index.html | 59 ++++++++++++++++++-------------- styles/base.css | 16 ++++----- styles/layout.css | 5 +++ styles/module.css | 86 ++++++++++++----------------------------------- styles/theme.css | 65 ++++++++++++++++++++++++++++++++--- 5 files changed, 128 insertions(+), 103 deletions(-) diff --git a/index.html b/index.html index 68b4899..d961ef8 100644 --- a/index.html +++ b/index.html @@ -4,7 +4,7 @@ - + @@ -38,18 +38,18 @@
-
- +
+ -
+
-

This is a test, this is ONLY a test....

+
diff --git a/styles/base.css b/styles/base.css index cde9a9e..5c45170 100644 --- a/styles/base.css +++ b/styles/base.css @@ -7,7 +7,7 @@ body { h1 { - font-family: 'Carter+One',cursive; + font-family: 'Carter One',cursive; font-size: 2.3em; color: rgb(228, 53, 9); diff --git a/styles/module.css b/styles/module.css index bcbe664..f51b393 100644 --- a/styles/module.css +++ b/styles/module.css @@ -10,7 +10,7 @@ .nav li { display: inline-block; - font-family: 'Carter+One', cursive; + font-family: 'Carter One', cursive; font-size: 1.25em; line-height: 40px; height: 40px; diff --git a/styles/theme.css b/styles/theme.css index 6712ae2..baa6212 100644 --- a/styles/theme.css +++ b/styles/theme.css @@ -70,3 +70,28 @@ div.faq p#answer { clear: both; padding: 30px 30px 50px 50px; } + +/* Favorites page styling */ +#getFaves{ + display:block; + block-size: 20%; + color: rgb(74,98,163); + text-align:center; + font-size: 1.3em; + font-weight:bold; + padding-top: 100px; +} + +/* #favorites-wrapper { */ + display: block; + position: relative; + width: 100%; + height: 80%; + justify-content: space-around; + justify-content: space-between; + background-position: center; + text-align: center; + border-radius: 10px; + margin-left: 30px; + background-color:white; +/* } */ \ No newline at end of file From 76e2ccb45053cdcc68703ac255d7972c34ea8a1c Mon Sep 17 00:00:00 2001 From: Katlyn Tucker Date: Wed, 20 Dec 2017 11:22:21 -0800 Subject: [PATCH 29/29] finished css for about/learn/faves page --- index.html | 6 +++--- styles/theme.css | 18 ++++++++++-------- 2 files changed, 13 insertions(+), 11 deletions(-) diff --git a/index.html b/index.html index 89eb9e7..a54604e 100644 --- a/index.html +++ b/index.html @@ -92,7 +92,7 @@
- +
@@ -138,7 +138,7 @@

Team Nitrogen

Charlie Heiner

black and white alien image -

I appreciate the Universe most by getting away from the city and into nature with my camera. It's not as easy these days while learning to code with a new one at home, but my supportive, beautiful wife and two amazing children make it very worthwhile.

+

I appreciate the Universe most by getting away from the city and into nature with my camera. It's not as easy these days while learning to code with a new one at home, but my supportive, beautiful wife and two amazing children make it very worthwhile. The eclipse this year was such an incredible reminder of how vast the Universe really is.

@@ -150,7 +150,7 @@

Liz Petersen

Carmen Perezchica

Martians pointing at Mars rover -

Mars lover and enthusiast who has dreamed of blasting off planet Earth to Mars since the age of 3.

+

Mars lover and enthusiast who has dreamed of blasting off planet Earth to Mars since the age of 3. If they open up applications to Elon Musk's Tesla trip to Mars, I will be the first to sign up myself, my husband and two stellar kids. My coding breaks often involve viewing photos of Mars.

diff --git a/styles/theme.css b/styles/theme.css index baa6212..ba62feb 100644 --- a/styles/theme.css +++ b/styles/theme.css @@ -74,24 +74,26 @@ div.faq p#answer { /* Favorites page styling */ #getFaves{ display:block; - block-size: 20%; + block-size: 80%; color: rgb(74,98,163); text-align:center; font-size: 1.3em; font-weight:bold; padding-top: 100px; + padding-bottom: 100px; } -/* #favorites-wrapper { */ - display: block; +#favorites-wrapper { + position: relative; - width: 100%; - height: 80%; + width: 80%; + height:auto; justify-content: space-around; justify-content: space-between; background-position: center; text-align: center; border-radius: 10px; - margin-left: 30px; - background-color:white; -/* } */ \ No newline at end of file + margin-left: 100px; + background-color:rgb(74,98,163); + padding-top: 200px; +} \ No newline at end of file