From 0349086be1cc82cba7702cee0bb3d9dd392049db Mon Sep 17 00:00:00 2001 From: SARAH SHOWERS Date: Wed, 4 Aug 2021 17:31:34 -0400 Subject: [PATCH 1/9] create list of tasks --- README.md | 38 +++++++++++++++++++++++++++++++++++++- 1 file changed, 37 insertions(+), 1 deletion(-) diff --git a/README.md b/README.md index 124bc46..184102c 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,7 @@ # Welcome to Resy FE Interview Exercise ## This is a hands-on test + Provided here is a skeleton application. You'll find an index.html, app.js, and app.css. The task is to look at the provided .mov and build what is represented therein. @@ -11,8 +12,8 @@ The task is to look at the provided .mov and build what is represented therein. - When the user selects an item from the list eg 'boxer', then an image of a boxer appears below the select control. You can use this URL: https://dog.ceo/api/breed/{breed}/images/random to retrieve an image showing an example of that breed. - Below the image there is a button. The button has the text "I don't like this one. Show me another." When the user clicks on this button a new call is made to retrieve a new image of a dog of that breed. - This task utilizes these open source urls: + - [https://dog.ceo/api/breeds/list/all](https://dog.ceo/api/breeds/list/all) - [https://dog.ceo/api/breeds/image/random](https://dog.ceo/api/breeds/image/random) - [https://dog.ceo/api/breed/affenpinscher/images/random](https://dog.ceo/api/breed/affenpinscher/images/random) @@ -21,6 +22,7 @@ You will utilize these urls to create a select control in which the user can cho If the user clicks a button - "I don't like that one. Show me another."" - then a new image will be presented. Some of the things evaluated in this exercise are: + - Retrieving data and translating that to the UI controls - Writing HTML using JavaScript - Writing functions, keeping track of variables @@ -28,3 +30,37 @@ Some of the things evaluated in this exercise are: You can use any resources available on the web. Please communicate with us with any questions you might have. + +--- + +## The solve + +After revisiting the problem to be solved, I decided that I didn't need the full weight of an ember application, this can likely be tackled using vanillaJS. + +## Todo + +- [] Create header + +DOD - It should: + +- display the Resy logo +- display header text + +[] Dropdown input field + +DOD - It should: + +- contain a list of dog breeds from [the following endpoint](https://dog.ceo/api/breeds/list/all) +- render 'select a breed' on render + +[] Image display + +DOD - It should: + +- render an image of a dog matching the selected breed [using this endpoint](https://dog.ceo/api/breeds/image/random) + +[] Button + +DOD - It should: + +- fetch a new image, on click [from this endpoint](https://dog.ceo/api/breed/affenpinscher/images/random) From 200a26700f79a3858e9920905cf3b5be5cc9c229 Mon Sep 17 00:00:00 2001 From: SARAH SHOWERS Date: Wed, 4 Aug 2021 17:46:41 -0400 Subject: [PATCH 2/9] set up scss for styling --- README.md | 2 ++ app.css | 20 -------------------- styles/app.css | 11 +++++++++++ styles/app.css.map | 1 + styles/app.scss | 8 ++++++++ 5 files changed, 22 insertions(+), 20 deletions(-) delete mode 100644 app.css create mode 100644 styles/app.css create mode 100644 styles/app.css.map create mode 100644 styles/app.scss diff --git a/README.md b/README.md index 184102c..e2f375f 100644 --- a/README.md +++ b/README.md @@ -37,6 +37,8 @@ Please communicate with us with any questions you might have. After revisiting the problem to be solved, I decided that I didn't need the full weight of an ember application, this can likely be tackled using vanillaJS. +Styling - I like to write scss and use BEM to help keep my specificity manageable, I didn't need to add a build tool for this so I'm just running the `sass --watch` command to pick up changes. I'd also almost always use a [reset](https://meyerweb.com/eric/tools/css/reset/) to get around opinionated browser styling and let me start fresh but the layout here was simple enough that I can build this implementation without needed to worry about that. + ## Todo - [] Create header diff --git a/app.css b/app.css deleted file mode 100644 index b347124..0000000 --- a/app.css +++ /dev/null @@ -1,20 +0,0 @@ -box-sizing: border-box; - -html, -body { - font-family: "Open Sans", sans-serif; - margin: 0; - padding: 0; -} - -h1 { - font-family: "Playfair Display", serif; -} - -a { - color: #000; -} - -.Page { - background: #fafafa; -} diff --git a/styles/app.css b/styles/app.css new file mode 100644 index 0000000..81e725f --- /dev/null +++ b/styles/app.css @@ -0,0 +1,11 @@ +html { + box-sizing: border-box; +} + +*, +*:before, +*:after { + box-sizing: inherit; +} + +/*# sourceMappingURL=app.css.map */ diff --git a/styles/app.css.map b/styles/app.css.map new file mode 100644 index 0000000..f00b776 --- /dev/null +++ b/styles/app.css.map @@ -0,0 +1 @@ +{"version":3,"sourceRoot":"","sources":["app.scss"],"names":[],"mappings":"AAAA;EACE;;;AAEF;AAAA;AAAA;EAGE","file":"app.css"} \ No newline at end of file diff --git a/styles/app.scss b/styles/app.scss new file mode 100644 index 0000000..498362f --- /dev/null +++ b/styles/app.scss @@ -0,0 +1,8 @@ +html { + box-sizing: border-box; +} +*, +*:before, +*:after { + box-sizing: inherit; +} From 305c489b9297f5808984057f7056bf66b3793e1e Mon Sep 17 00:00:00 2001 From: SARAH SHOWERS Date: Wed, 4 Aug 2021 17:55:08 -0400 Subject: [PATCH 3/9] header section --- index.html | 37 +++++++++++++++++++++---------------- styles/app.css | 11 +++++++++++ styles/app.css.map | 2 +- styles/app.scss | 11 +++++++++++ 4 files changed, 44 insertions(+), 17 deletions(-) diff --git a/index.html b/index.html index f5f57d7..ebe63ce 100644 --- a/index.html +++ b/index.html @@ -1,27 +1,32 @@ - - - - - - - - + + + + + + + + + -
-

- Select a Breed -

+ +
+ +

Select a Breed

-
+
-

Ok, but which one?!

- + -
diff --git a/styles/app.css b/styles/app.css index 81e725f..927a8fd 100644 --- a/styles/app.css +++ b/styles/app.css @@ -8,4 +8,15 @@ html { box-sizing: inherit; } +.header-container { + display: flex; + align-content: center; + justify-content: center; +} + +.header-container__logo, +.header-container__text { + margin: 0 8px; +} + /*# sourceMappingURL=app.css.map */ diff --git a/styles/app.css.map b/styles/app.css.map index f00b776..c8451d4 100644 --- a/styles/app.css.map +++ b/styles/app.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["app.scss"],"names":[],"mappings":"AAAA;EACE;;;AAEF;AAAA;AAAA;EAGE","file":"app.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["app.scss"],"names":[],"mappings":"AAAA;EACE;;;AAEF;AAAA;AAAA;EAGE;;;AAGF;EACE;EACA;EACA;;;AAGF;AAAA;EAEE","file":"app.css"} \ No newline at end of file diff --git a/styles/app.scss b/styles/app.scss index 498362f..13d99a4 100644 --- a/styles/app.scss +++ b/styles/app.scss @@ -6,3 +6,14 @@ html { *:after { box-sizing: inherit; } + +.header-container { + display: flex; + align-content: center; + justify-content: center; +} + +.header-container__logo, +.header-container__text { + margin: 0 8px; +} From 6e80df12d61cd494b430ff17ebc524cd4c7d7816 Mon Sep 17 00:00:00 2001 From: SARAH SHOWERS Date: Wed, 4 Aug 2021 18:48:27 -0400 Subject: [PATCH 4/9] main layout and styling --- app.js | 1 - index.html | 28 +++++++++++++++++++++------- styles/app.css | 29 +++++++++++++++++++++++++++++ styles/app.css.map | 2 +- styles/app.scss | 41 +++++++++++++++++++++++++++++++++++++++++ 5 files changed, 92 insertions(+), 9 deletions(-) diff --git a/app.js b/app.js index bd6b307..e69de29 100644 --- a/app.js +++ b/app.js @@ -1 +0,0 @@ -// application code goes here diff --git a/index.html b/index.html index ebe63ce..55c0ee9 100644 --- a/index.html +++ b/index.html @@ -21,14 +21,28 @@

Select a Breed

-
-
-

Ok, but which one?!

- - - +
+
+

Ok, but which one?!

+ + + + + +
-
+ + diff --git a/styles/app.css b/styles/app.css index 927a8fd..c088d5a 100644 --- a/styles/app.css +++ b/styles/app.css @@ -9,6 +9,7 @@ html { } .header-container { + padding: 8px 0 16px; display: flex; align-content: center; justify-content: center; @@ -19,4 +20,32 @@ html { margin: 0 8px; } +.dog-breed-selector__container { + height: 100vh; + background-color: #fafafa; + display: flex; + justify-content: center; + align-content: center; +} + +.dog-breed-selector-container__header { + font-size: 32px; + font-weight: 700; +} + +.dog-breed-selector__dropdown, +.dog-breed-selector__button { + display: block; + margin: 8px; +} + +.dog-breed-selector__button { + background-color: #00c6ff; + color: #fafafa; + border-radius: 5px; + padding: 16px 8px; + border: none; + box-shadow: 0 3px 10px #808080; +} + /*# sourceMappingURL=app.css.map */ diff --git a/styles/app.css.map b/styles/app.css.map index c8451d4..43b5096 100644 --- a/styles/app.css.map +++ b/styles/app.css.map @@ -1 +1 @@ -{"version":3,"sourceRoot":"","sources":["app.scss"],"names":[],"mappings":"AAAA;EACE;;;AAEF;AAAA;AAAA;EAGE;;;AAGF;EACE;EACA;EACA;;;AAGF;AAAA;EAEE","file":"app.css"} \ No newline at end of file +{"version":3,"sourceRoot":"","sources":["app.scss"],"names":[],"mappings":"AACA;EACE;;;AAEF;AAAA;AAAA;EAGE;;;AAYF;EACE;EACA;EACA;EACA;;;AAGF;AAAA;EAEE;;;AAKF;EACE;EACA,kBAvBW;EAwBX;EACA;EACA;;;AAGF;EACE;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE,kBAvCkB;EAwClB,OAvCY;EAwCZ;EACA;EACA;EACA","file":"app.css"} \ No newline at end of file diff --git a/styles/app.scss b/styles/app.scss index 13d99a4..eb0b61b 100644 --- a/styles/app.scss +++ b/styles/app.scss @@ -1,3 +1,4 @@ +// global styles html { box-sizing: border-box; } @@ -7,7 +8,17 @@ html { box-sizing: inherit; } +// variables + +$light-gray: #fafafa; +$dark-gray: #808080; +$button-background: #00c6ff; +$button-font: #fafafa; + +// header styles + .header-container { + padding: 8px 0 16px; display: flex; align-content: center; justify-content: center; @@ -17,3 +28,33 @@ html { .header-container__text { margin: 0 8px; } + +// main feature styling + +.dog-breed-selector__container { + height: 100vh; + background-color: $light-gray; + display: flex; + justify-content: center; + align-content: center; +} + +.dog-breed-selector-container__header { + font-size: 32px; + font-weight: 700; +} + +.dog-breed-selector__dropdown, +.dog-breed-selector__button { + display: block; + margin: 8px; +} + +.dog-breed-selector__button { + background-color: $button-background; + color: $button-font; + border-radius: 5px; + padding: 16px 8px; + border: none; + box-shadow: 0 3px 10px $dark-gray; +} From 25b1be0a30fad2ac07a32895527cda05e5e1eeaf Mon Sep 17 00:00:00 2001 From: SARAH SHOWERS Date: Wed, 4 Aug 2021 20:32:41 -0400 Subject: [PATCH 5/9] WIP changes for list data fetch --- app.js | 15 +++++++++++++++ 1 file changed, 15 insertions(+) diff --git a/app.js b/app.js index e69de29..e0abe51 100644 --- a/app.js +++ b/app.js @@ -0,0 +1,15 @@ +(function () { + const dropdown = document.getElementById('breed-selector'); + + let url = 'https://dog.ceo/api/breeds/list/all'; + + fetch(url) + .then((resp) => resp.json()) + .then(function (data) { + let breeds = data.message; + debugger; + }) + .catch(function (error) { + console.log(error); + }); +})(); From 8dc976cd14b931bfd20439e237a32b2c2e5dcfa7 Mon Sep 17 00:00:00 2001 From: SARAH SHOWERS Date: Fri, 6 Aug 2021 15:02:33 -0400 Subject: [PATCH 6/9] populate dropdown with data --- app.js | 15 +++++++++++++-- index.html | 4 ++-- 2 files changed, 15 insertions(+), 4 deletions(-) diff --git a/app.js b/app.js index e0abe51..2cd2fa7 100644 --- a/app.js +++ b/app.js @@ -6,10 +6,21 @@ fetch(url) .then((resp) => resp.json()) .then(function (data) { - let breeds = data.message; - debugger; + return populateDropdownList(data.message); }) .catch(function (error) { console.log(error); }); })(); + +let populateDropdownList = (breeds) => { + const selectEl = document.getElementById('breed-selector'); + + for (const key in breeds) { + const optionEl = document.createElement('option'); + optionEl.value = key; + optionEl.text = key; + selectEl.add(optionEl); + } + return; +}; diff --git a/index.html b/index.html index 55c0ee9..e9ba35c 100644 --- a/index.html +++ b/index.html @@ -31,8 +31,8 @@

Select a Breed

id="breed-selector" aria-label="Choose a breed" > - - + + From 5421cbb5e07507f38f8f64de68a99fdd03787c5b Mon Sep 17 00:00:00 2001 From: SARAH SHOWERS Date: Fri, 6 Aug 2021 15:44:56 -0400 Subject: [PATCH 7/9] append puppies --- app.js | 26 +++++++++++++++++++++----- index.html | 3 +-- 2 files changed, 22 insertions(+), 7 deletions(-) diff --git a/app.js b/app.js index 2cd2fa7..db9fd90 100644 --- a/app.js +++ b/app.js @@ -1,17 +1,20 @@ -(function () { - const dropdown = document.getElementById('breed-selector'); +const dropdown = document.getElementById('breed-selector'); - let url = 'https://dog.ceo/api/breeds/list/all'; +dropdown.addEventListener('change', (event) => { + const breed = event.target.value; + const url = `https://dog.ceo/api/breed/${breed}/images/random`; + const image = document.getElementById('dog-img'); fetch(url) .then((resp) => resp.json()) .then(function (data) { - return populateDropdownList(data.message); + image.src = data.message; + image.alt = `Image of a ${breed}`; }) .catch(function (error) { console.log(error); }); -})(); +}); let populateDropdownList = (breeds) => { const selectEl = document.getElementById('breed-selector'); @@ -24,3 +27,16 @@ let populateDropdownList = (breeds) => { } return; }; + +(function () { + let url = 'https://dog.ceo/api/breeds/list/all'; + + fetch(url) + .then((resp) => resp.json()) + .then(function (data) { + return populateDropdownList(data.message); + }) + .catch(function (error) { + console.log(error); + }); +})(); diff --git a/index.html b/index.html index e9ba35c..df8cbc0 100644 --- a/index.html +++ b/index.html @@ -32,10 +32,9 @@

Select a Breed

aria-label="Choose a breed" > - - +