From 0eaf5b1198425f7da97fa153cce0ae79b1b6235a Mon Sep 17 00:00:00 2001 From: Steven Snyder Date: Thu, 9 Jul 2020 09:54:52 -0400 Subject: [PATCH 1/9] basic skeleton created --- css/style.css | 9 ------ features.html | 58 +++++++++++++++++++++++++++++++++++ index.html | 68 +++++++++++++++++++++--------------------- js/footer-functions.js | 2 -- js/header-functions.js | 11 ------- js/script.js | 0 pricing.html | 58 +++++++++++++++++++++++++++++++++++ 7 files changed, 150 insertions(+), 56 deletions(-) create mode 100644 features.html delete mode 100644 js/footer-functions.js delete mode 100644 js/header-functions.js create mode 100644 js/script.js create mode 100644 pricing.html diff --git a/css/style.css b/css/style.css index d17d83a..e69de29 100644 --- a/css/style.css +++ b/css/style.css @@ -1,9 +0,0 @@ -body { - background-color: navy; -} - - -object { - height: 100vh; - width: 100vh; -} diff --git a/features.html b/features.html new file mode 100644 index 0000000..6cbce68 --- /dev/null +++ b/features.html @@ -0,0 +1,58 @@ + + + + + + + + + Features + + + + + + + + +
+ + + +
+ +
+ +
+ + + + + + + + \ No newline at end of file diff --git a/index.html b/index.html index 4dc0c72..343ed83 100644 --- a/index.html +++ b/index.html @@ -1,57 +1,57 @@ - - - - + SBA Assessment + - - - - - - - - - - - - - - - - - - - - The quickest of brown foxes. +
+ + + +
+ +
+ +
- - - - + + + + + - - - - \ No newline at end of file diff --git a/js/footer-functions.js b/js/footer-functions.js deleted file mode 100644 index c7d6a2c..0000000 --- a/js/footer-functions.js +++ /dev/null @@ -1,2 +0,0 @@ -w3IncludeHTML(); -document.write(''); diff --git a/js/header-functions.js b/js/header-functions.js deleted file mode 100644 index ff2614d..0000000 --- a/js/header-functions.js +++ /dev/null @@ -1,11 +0,0 @@ -// import jquery-3.4.0 -document.write(''); -document.write(''); - -// import `utils.js` -document.write(''); - - - -// import w3-include -document.write(''); diff --git a/js/script.js b/js/script.js new file mode 100644 index 0000000..e69de29 diff --git a/pricing.html b/pricing.html new file mode 100644 index 0000000..cb30038 --- /dev/null +++ b/pricing.html @@ -0,0 +1,58 @@ + + + + + + + + + Pricing + + + + + + + + +
+ + + +
+ +
+ +
+ + + + + + + + \ No newline at end of file From c8af708bda026c10d807657ac03f77a8c7607bfa Mon Sep 17 00:00:00 2001 From: Steven Snyder Date: Thu, 9 Jul 2020 10:59:11 -0400 Subject: [PATCH 2/9] added structure to cards --- cat.html | 57 +++++++++++++++++++++ css/style.css | 5 ++ dog.html | 138 ++++++++++++++++++++++++++++++++++++++++++++++++++ features.html | 58 --------------------- index.html | 21 ++++---- js/script.js | 22 ++++++++ pricing.html | 58 --------------------- 7 files changed, 233 insertions(+), 126 deletions(-) create mode 100644 cat.html create mode 100644 dog.html delete mode 100644 features.html delete mode 100644 pricing.html diff --git a/cat.html b/cat.html new file mode 100644 index 0000000..f4aa94e --- /dev/null +++ b/cat.html @@ -0,0 +1,57 @@ + + + + + + + + + Pricing + + + + + + + +
+ + + +
+

Crazy Animal Facts

+
+ +
+ + + + +
+ + + + +
+ + + \ No newline at end of file diff --git a/css/style.css b/css/style.css index e69de29..23cab4e 100644 --- a/css/style.css +++ b/css/style.css @@ -0,0 +1,5 @@ +.grid-container { + display: grid; + grid-template-columns: auto auto auto auto; + margin: 20px; + } \ No newline at end of file diff --git a/dog.html b/dog.html new file mode 100644 index 0000000..e056fc2 --- /dev/null +++ b/dog.html @@ -0,0 +1,138 @@ + + + + + + + + + Features + + + + + + + +
+ + + +
+

Crazy Cat and Dog Facts

+
+ +
+
+
+
+
Card title
+
Card subtitle
+

Some quick example text to build on the card title and make up the bulk of the card's content.

+ Card link + Another link +
+
+
+
+
Card title
+
Card subtitle
+

Some quick example text to build on the card title and make up the bulk of the card's content.

+ Card link + Another link +
+
+
+
+
Card title
+
Card subtitle
+

Some quick example text to build on the card title and make up the bulk of the card's content.

+ Card link + Another link +
+
+
+
+
Card title
+
Card subtitle
+

Some quick example text to build on the card title and make up the bulk of the card's content.

+ Card link + Another link +
+
+
+
+
Card title
+
Card subtitle
+

Some quick example text to build on the card title and make up the bulk of the card's content.

+
+
+
+
+
Card title
+
Card subtitle
+

Some quick example text to build on the card title and make up the bulk of the card's content.

+
+
+
+
+
Card title
+
Card subtitle
+

Some quick example text to build on the card title and make up the bulk of the card's content.

+ Card link + Another link +
+
+
+
+
Card title
+
Card subtitle
+

Some quick example text to build on the card title and make up the bulk of the card's content.

+ Card link + Another link +
+
+
+
+
Card title
+
Card subtitle
+

Some quick example text to build on the card title and make up the bulk of the card's content.

+
+
+
+ + +
+
+ + + + +
+ + + + +
+ + + \ No newline at end of file diff --git a/features.html b/features.html deleted file mode 100644 index 6cbce68..0000000 --- a/features.html +++ /dev/null @@ -1,58 +0,0 @@ - - - - - - - - - Features - - - - - - - - -
- - - -
- -
- -
- - - - -
- - - - - -
- - - \ No newline at end of file diff --git a/index.html b/index.html index 343ed83..d1ab3a3 100644 --- a/index.html +++ b/index.html @@ -23,21 +23,22 @@ -
- +
+

Crazy Cat and Dog Facts

diff --git a/js/script.js b/js/script.js index e69de29..8dec44b 100644 --- a/js/script.js +++ b/js/script.js @@ -0,0 +1,22 @@ +// fetch('https://cat-fact.herokuapp.com/facts') +// .then(response => response.json()) +// .then(data => console.log(data)); + + fetch('https://cat-fact.herokuapp.com/facts/random?animal_type=dog&amount=10') + .then(response => { + if (!response.ok) { + throw new Error('Network response was not ok'); + } + return response.json(); + }) + .then(data => { + console.log(data) + for (let i = 0; i < data.length; i++) { + const element = data[i]; + console.log(element.text) + + } + }) + .catch(error => { + console.error('There has been a problem with your fetch operation:', error); + }); \ No newline at end of file diff --git a/pricing.html b/pricing.html deleted file mode 100644 index cb30038..0000000 --- a/pricing.html +++ /dev/null @@ -1,58 +0,0 @@ - - - - - - - - - Pricing - - - - - - - - -
- - - -
- -
- -
- - - - -
- - - - - -
- - - \ No newline at end of file From 8d2fd1e647002aac68ef2f71f46a71e546af46bb Mon Sep 17 00:00:00 2001 From: Steven Snyder Date: Thu, 9 Jul 2020 11:55:27 -0400 Subject: [PATCH 3/9] added button feature for cat and dog facts to be randomly generated and appended to page --- cat.html | 2 +- dog.html | 2 +- index.html | 16 ++++++++-------- js/script.js | 15 +++++++++++++-- 4 files changed, 23 insertions(+), 12 deletions(-) diff --git a/cat.html b/cat.html index f4aa94e..0e0a5c0 100644 --- a/cat.html +++ b/cat.html @@ -16,7 +16,7 @@
-
-
-

Crazy Cat and Dog Facts

-
- - - +
+
+ +
+
+
diff --git a/js/script.js b/js/script.js index 8dec44b..d19c998 100644 --- a/js/script.js +++ b/js/script.js @@ -2,7 +2,9 @@ // .then(response => response.json()) // .then(data => console.log(data)); - fetch('https://cat-fact.herokuapp.com/facts/random?animal_type=dog&amount=10') +function addMoreFacts() { + + fetch('https://cat-fact.herokuapp.com/facts/random?animal_type=cat,dog&amount=12') .then(response => { if (!response.ok) { throw new Error('Network response was not ok'); @@ -14,9 +16,18 @@ for (let i = 0; i < data.length; i++) { const element = data[i]; console.log(element.text) + $('.grid-container').prepend( + `
+
+
${element.type}
+

${element.text}

+
+
` + ) } }) .catch(error => { console.error('There has been a problem with your fetch operation:', error); - }); \ No newline at end of file + }); +} \ No newline at end of file From ef7768c91a5eeb0e90dbf501aa02e39c8107d167 Mon Sep 17 00:00:00 2001 From: Steven Snyder Date: Thu, 9 Jul 2020 14:43:14 -0400 Subject: [PATCH 4/9] added dog and cat seperate functions --- cat.html | 45 +++++++++++-------- css/style.css | 45 +++++++++++++++++++ dog.html | 118 ++++++++++---------------------------------------- index.html | 41 ++++++++++-------- js/script.js | 102 ++++++++++++++++++++++++++++++++++++++++--- 5 files changed, 216 insertions(+), 135 deletions(-) diff --git a/cat.html b/cat.html index 0e0a5c0..54ebdb1 100644 --- a/cat.html +++ b/cat.html @@ -10,37 +10,43 @@ + + + -
+
-
-

Crazy Animal Facts

-
+
+

RANDOM CAT FACTS

+
+ cat and dog background +
+
+
@@ -51,7 +57,8 @@

Crazy Animal Facts

-
+ + \ No newline at end of file diff --git a/css/style.css b/css/style.css index 23cab4e..536cd9f 100644 --- a/css/style.css +++ b/css/style.css @@ -2,4 +2,49 @@ display: grid; grid-template-columns: auto auto auto auto; margin: 20px; + } + +.heading { + height: 600px; + width: 100%; + text-align: center; +} + +.heroImg { + margin: 50px 0; + height: 90%; + width: auto; +} + +/* Tablet */ +@media only screen and (max-width: 768px) { + /* For mobile phones: */ + .grid-container { + display: grid; + grid-template-columns: auto auto; + margin: 20px; + } + } + +/* Mobile */ + +@media only screen and (max-width: 768px) { + /* For mobile phones: */ + .grid-container { + display: grid; + grid-template-columns: auto; + margin: 20px; + } + + .heading { + height: auto; + width: 100%; + text-align: center; + } + + .heroImg { + margin: 50px 0; + height: auto; + width: 100%; + } } \ No newline at end of file diff --git a/dog.html b/dog.html index 367a932..74922a4 100644 --- a/dog.html +++ b/dog.html @@ -10,114 +10,43 @@ + + + -
+
-
-

Crazy Cat and Dog Facts

-
+
+

RANDOM DOG FACTS

+
+ cat and dog background +
-
-
-
Card title
-
Card subtitle
-

Some quick example text to build on the card title and make up the bulk of the card's content.

- Card link - Another link -
-
-
-
-
Card title
-
Card subtitle
-

Some quick example text to build on the card title and make up the bulk of the card's content.

- Card link - Another link -
-
-
-
-
Card title
-
Card subtitle
-

Some quick example text to build on the card title and make up the bulk of the card's content.

- Card link - Another link -
-
-
-
-
Card title
-
Card subtitle
-

Some quick example text to build on the card title and make up the bulk of the card's content.

- Card link - Another link -
-
-
-
-
Card title
-
Card subtitle
-

Some quick example text to build on the card title and make up the bulk of the card's content.

-
-
-
-
-
Card title
-
Card subtitle
-

Some quick example text to build on the card title and make up the bulk of the card's content.

-
-
-
-
-
Card title
-
Card subtitle
-

Some quick example text to build on the card title and make up the bulk of the card's content.

- Card link - Another link -
-
-
-
-
Card title
-
Card subtitle
-

Some quick example text to build on the card title and make up the bulk of the card's content.

- Card link - Another link -
-
-
-
-
Card title
-
Card subtitle
-

Some quick example text to build on the card title and make up the bulk of the card's content.

-
-
@@ -132,7 +61,8 @@
Card subtitle
- + + \ No newline at end of file diff --git a/index.html b/index.html index 38e422e..f243486 100644 --- a/index.html +++ b/index.html @@ -10,37 +10,44 @@ + + + -
+
-
+
+

Welcome to our Random Dog

+

and Cat Facts Generator Page

+
+ cat and dog background +
-
diff --git a/js/script.js b/js/script.js index d19c998..21fd552 100644 --- a/js/script.js +++ b/js/script.js @@ -2,11 +2,72 @@ // .then(response => response.json()) // .then(data => console.log(data)); + +// https://alexwohlbruck.github.io/cat-facts/docs/endpoints/facts.html + function addMoreFacts() { - fetch('https://cat-fact.herokuapp.com/facts/random?animal_type=cat,dog&amount=12') + fetch('https://cat-fact.herokuapp.com/facts/random?animal_type=dog&amount=4') + .then(response => { + if (!response.ok) { + alert("Response failed please try again") + throw new Error('Network response was not ok'); + } + return response.json(); + }) + .then(data => { + console.log(data) + for (let i = 0; i < data.length; i++) { + const element = data[i]; + $('.grid-container').prepend( + `
+
+
${element.type.charAt(0).toUpperCase() + element.type.slice(1)} Fact
+

${element.text}

+
+
` + ) + + } + }) + .catch(error => { + console.error('There has been a problem with your fetch operation:', error); + }); + + fetch('https://cat-fact.herokuapp.com/facts/random?animal_type=cat&amount=4') + .then(response => { + if (!response.ok) { + alert("Response failed please try again") + throw new Error('Network response was not ok'); + } + return response.json(); + }) + .then(data => { + console.log(data) + for (let i = 0; i < data.length; i++) { + const element = data[i]; + $('.grid-container').prepend( + `
+
+
${element.type.charAt(0).toUpperCase() + element.type.slice(1)} Fact
+

${element.text}

+
+
` + ) + + } + }) + .catch(error => { + console.error('There has been a problem with your fetch operation:', error); + }); +} + +function addMoreCatFacts() { + + fetch('https://cat-fact.herokuapp.com/facts/random?animal_type=cat&amount=8') .then(response => { if (!response.ok) { + alert("Response failed please try again") throw new Error('Network response was not ok'); } return response.json(); @@ -15,11 +76,10 @@ function addMoreFacts() { console.log(data) for (let i = 0; i < data.length; i++) { const element = data[i]; - console.log(element.text) $('.grid-container').prepend( - `
+ `
-
${element.type}
+
${element.type.charAt(0).toUpperCase() + element.type.slice(1)} Fact

${element.text}

` @@ -30,4 +90,36 @@ function addMoreFacts() { .catch(error => { console.error('There has been a problem with your fetch operation:', error); }); -} \ No newline at end of file +} + +function addMoreDogFacts() { + + fetch('https://cat-fact.herokuapp.com/facts/random?animal_type=dog&amount=8') + .then(response => { + if (!response.ok) { + alert("Response failed please try again") + throw new Error('Network response was not ok'); + } + return response.json(); + }) + .then(data => { + console.log(data) + for (let i = 0; i < data.length; i++) { + const element = data[i]; + $('.grid-container').prepend( + `
+
+
${element.type.charAt(0).toUpperCase() + element.type.slice(1)} Fact
+

${element.text}

+
+
` + ) + + } + }) + .catch(error => { + console.error('There has been a problem with your fetch operation:', error); + }); +} + +window.onload(addMoreFacts()) \ No newline at end of file From 46f91cd18f242ae893fe03351de909afc35e6c0b Mon Sep 17 00:00:00 2001 From: Steven Snyder Date: Thu, 9 Jul 2020 15:54:20 -0400 Subject: [PATCH 5/9] fixed footer and navbar --- cat.html | 65 ++++++++++++++++++++++++----------------- css/style.css | 80 +++++++++++++++++++++++++++++++++++++++++++++++++-- dog.html | 65 ++++++++++++++++++++++++----------------- index.html | 62 ++++++++++++++++++++++----------------- js/script.js | 2 -- 5 files changed, 189 insertions(+), 85 deletions(-) diff --git a/cat.html b/cat.html index 54ebdb1..92ae30c 100644 --- a/cat.html +++ b/cat.html @@ -6,7 +6,7 @@ - Pricing + Cat Facts! @@ -15,34 +15,34 @@ - + + + +
- - -

RANDOM CAT FACTS

- cat and dog background + cat and dog background
@@ -52,13 +52,24 @@

RANDOM CAT FACT -
- + + + -
\ No newline at end of file diff --git a/css/style.css b/css/style.css index 536cd9f..47eff9b 100644 --- a/css/style.css +++ b/css/style.css @@ -5,17 +5,93 @@ } .heading { - height: 600px; + height: 700px; width: 100%; text-align: center; } .heroImg { margin: 50px 0; - height: 90%; + height: 500px; width: auto; } +/* Footer */ +@import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); +footer { + padding: 60px 0; +} + +footer .section-title { + text-align: center; + color: #037bfe; + margin-bottom: 50px; + text-transform: uppercase; +} +#footer { + background: #037bfe !important; +} +#footer h5{ + padding-left: 10px; + border-left: 3px solid #eeeeee; + padding-bottom: 6px; + margin-bottom: 20px; + color:#ffffff; +} +#footer a { + color: #ffffff; + text-decoration: none !important; + background-color: transparent; + -webkit-text-decoration-skip: objects; +} +#footer ul.social li{ + padding: 3px 0; +} +#footer ul.social li a i { + margin-right: 5px; + font-size:25px; + -webkit-transition: .5s all ease; + -moz-transition: .5s all ease; + transition: .5s all ease; +} +#footer ul.social li:hover a i { + font-size:30px; + margin-top:-10px; +} +#footer ul.social li a, +#footer ul.quick-links li a{ + color:#ffffff; +} +#footer ul.social li a:hover{ + color:#eeeeee; +} +#footer ul.quick-links li{ + padding: 3px 0; + -webkit-transition: .5s all ease; + -moz-transition: .5s all ease; + transition: .5s all ease; +} +#footer ul.quick-links li:hover{ + padding: 3px 0; + margin-left:5px; + font-weight:700; +} +#footer ul.quick-links li a i{ + margin-right: 5px; +} +#footer ul.quick-links li:hover a i { + font-weight: 700; +} + +@media (max-width:767px){ + #footer h5 { + padding-left: 0; + border-left: transparent; + padding-bottom: 0px; + margin-bottom: 10px; +} +} + /* Tablet */ @media only screen and (max-width: 768px) { /* For mobile phones: */ diff --git a/dog.html b/dog.html index 74922a4..9ac4eb7 100644 --- a/dog.html +++ b/dog.html @@ -6,7 +6,7 @@ - Features + Dog Facts! @@ -15,34 +15,34 @@ - + + + +
- - -

RANDOM DOG FACTS

- cat and dog background + cat and dog background
@@ -56,13 +56,24 @@

RANDOM DOG FACT -
- + + + -
\ No newline at end of file diff --git a/index.html b/index.html index f243486..b56d03d 100644 --- a/index.html +++ b/index.html @@ -6,7 +6,7 @@ - SBA Assessment + SBA Assessment Home Page @@ -15,30 +15,28 @@ - + +
- - -
@@ -53,13 +51,23 @@

and Cat Facts G

-
- + + + -
- \ No newline at end of file diff --git a/js/script.js b/js/script.js index 21fd552..73501cc 100644 --- a/js/script.js +++ b/js/script.js @@ -121,5 +121,3 @@ function addMoreDogFacts() { console.error('There has been a problem with your fetch operation:', error); }); } - -window.onload(addMoreFacts()) \ No newline at end of file From 0c74435e630e8992599f03b0986911fc4202c8ce Mon Sep 17 00:00:00 2001 From: Steven Snyder Date: Thu, 9 Jul 2020 16:17:04 -0400 Subject: [PATCH 6/9] added animations on home --- cat.html | 4 ++++ dog.html | 4 ++++ index.html | 12 ++++++++---- js/script.js | 2 +- 4 files changed, 17 insertions(+), 5 deletions(-) diff --git a/cat.html b/cat.html index 92ae30c..777517d 100644 --- a/cat.html +++ b/cat.html @@ -9,6 +9,10 @@ Cat Facts! + diff --git a/dog.html b/dog.html index 9ac4eb7..83177f1 100644 --- a/dog.html +++ b/dog.html @@ -9,6 +9,10 @@ Dog Facts! + diff --git a/index.html b/index.html index b56d03d..d19f07d 100644 --- a/index.html +++ b/index.html @@ -9,6 +9,10 @@ SBA Assessment Home Page + @@ -40,10 +44,10 @@
-

Welcome to our Random Dog

-

and Cat Facts Generator Page

-
- cat and dog background +

Welcome to our Random Dog

+

and Cat Facts Generator Page

+
+ cat and dog background
diff --git a/js/script.js b/js/script.js index 73501cc..901e25e 100644 --- a/js/script.js +++ b/js/script.js @@ -20,7 +20,7 @@ function addMoreFacts() { for (let i = 0; i < data.length; i++) { const element = data[i]; $('.grid-container').prepend( - `
+ `
${element.type.charAt(0).toUpperCase() + element.type.slice(1)} Fact

${element.text}

From f35d152b224eae70eb917a6242d3919d102ed8c0 Mon Sep 17 00:00:00 2001 From: Steven Snyder Date: Fri, 10 Jul 2020 15:47:22 -0400 Subject: [PATCH 7/9] added three forms for requirements --- cat.html | 25 +++++++++++++++++++++++-- css/style.css | 19 +++++++++++++++++++ dog.html | 21 +++++++++++++++++++++ index.html | 45 +++++++++++++++++++++++++++++++++++++++++++++ js/script.js | 46 ++++++++++++++++++++++++++++++++++++++++------ 5 files changed, 148 insertions(+), 8 deletions(-) diff --git a/cat.html b/cat.html index 777517d..0a2e4a9 100644 --- a/cat.html +++ b/cat.html @@ -31,10 +31,10 @@
  • Home
    • -
  • +
  • Cat Facts
    • -
  • +
  • Dog Facts
    • @@ -51,6 +51,27 @@

    RANDOM CAT FACT
    +
    +

    Submit a New Cat Fact

    +
    +
    +
    + +
    +
    +
    +
    + + +
    +
    +
    + +
    +
    +

    diff --git a/css/style.css b/css/style.css index 47eff9b..a0a1f76 100644 --- a/css/style.css +++ b/css/style.css @@ -1,3 +1,7 @@ +body { + overflow-x: hidden; +} + .grid-container { display: grid; grid-template-columns: auto auto auto auto; @@ -16,6 +20,10 @@ width: auto; } +.container-fluid { + color:#037bfe; + } + /* Footer */ @import url('https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css'); footer { @@ -83,6 +91,17 @@ footer .section-title { font-weight: 700; } +.formContainer { + width: 60%; + margin: 20px 20%; +} +.tableContainer { + width: 40%; + margin: 0 30% 0 30%; + font-size: 32px; +} + + @media (max-width:767px){ #footer h5 { padding-left: 0; diff --git a/dog.html b/dog.html index 83177f1..685cfe8 100644 --- a/dog.html +++ b/dog.html @@ -55,6 +55,27 @@

    RANDOM DOG FACT

    +
    +

    Submit a New Dog Fact

    +
    +
    +
    + +
    +
    +
    +
    + + +
    +
    +
    + +
    +
    +
    diff --git a/index.html b/index.html index d19f07d..703b265 100644 --- a/index.html +++ b/index.html @@ -16,6 +16,13 @@ + @@ -49,10 +56,48 @@

    Click For More Dog and Cat Facts

    cat and dog background

    +
    + + + + + + + + + +
    Total Cat FactsTotal Dog Facts
    +
    +
    +

    Sign Up for Our Animal Facts Newsletter!

    +
    +
    +
    + + +
    +
    + + +
    +
    +
    +
    + + +
    +
    +
    + +
    +
    +
    diff --git a/js/script.js b/js/script.js index 901e25e..3e2ef36 100644 --- a/js/script.js +++ b/js/script.js @@ -16,18 +16,16 @@ function addMoreFacts() { return response.json(); }) .then(data => { - console.log(data) for (let i = 0; i < data.length; i++) { const element = data[i]; $('.grid-container').prepend( `
    -
    ${element.type.charAt(0).toUpperCase() + element.type.slice(1)} Fact
    +

    ${element.type.charAt(0).toUpperCase() + element.type.slice(1)} Fact

    ${element.text}

    ` ) - } }) .catch(error => { @@ -49,7 +47,7 @@ function addMoreFacts() { $('.grid-container').prepend( `
    -
    ${element.type.charAt(0).toUpperCase() + element.type.slice(1)} Fact
    +

    ${element.type.charAt(0).toUpperCase() + element.type.slice(1)} Fact

    ${element.text}

    ` @@ -79,7 +77,7 @@ function addMoreCatFacts() { $('.grid-container').prepend( `
    -
    ${element.type.charAt(0).toUpperCase() + element.type.slice(1)} Fact
    +

    ${element.type.charAt(0).toUpperCase() + element.type.slice(1)} Fact

    ${element.text}

    ` @@ -109,7 +107,7 @@ function addMoreDogFacts() { $('.grid-container').prepend( `
    -
    ${element.type.charAt(0).toUpperCase() + element.type.slice(1)} Fact
    +

    ${element.type.charAt(0).toUpperCase() + element.type.slice(1)} Fact

    ${element.text}

    ` @@ -121,3 +119,39 @@ function addMoreDogFacts() { console.error('There has been a problem with your fetch operation:', error); }); } + +function getallCatFacts() { + fetch('https://cat-fact.herokuapp.com/facts?animal_type=cat') + .then(response => { + if (!response.ok) { + alert("Response failed please try again") + throw new Error('Network response was not ok'); + } + return response.json(); + }) + .then(data => { + console.log(data.all.length) + document.getElementById("catColumn").innerText = data.all.length + + }) + .catch(error => { + console.error('There has been a problem with your fetch operation:', error); + }); + + fetch('https://cat-fact.herokuapp.com/facts?animal_type=dog') + .then(response => { + if (!response.ok) { + alert("Response failed please try again") + throw new Error('Network response was not ok'); + } + return response.json(); + }) + .then(data => { + document.getElementById("dogColumn").innerText = data.all.length + }) + .catch(error => { + console.error('There has been a problem with your fetch operation:', error); + }); +} + +getallCatFacts() From 742537150133b3ac3de492a394cf793145fd4ff7 Mon Sep 17 00:00:00 2001 From: Steven Snyder Date: Fri, 10 Jul 2020 15:50:16 -0400 Subject: [PATCH 8/9] added video for requirements --- index.html | 2 ++ 1 file changed, 2 insertions(+) diff --git a/index.html b/index.html index 703b265..e8fb813 100644 --- a/index.html +++ b/index.html @@ -96,6 +96,8 @@

    Sign Up for Our Animal Facts Newsletter!


    +
    + From 32cbe7364404ac68551d6d175db4e63755d62a56 Mon Sep 17 00:00:00 2001 From: Steven Snyder Date: Fri, 10 Jul 2020 16:03:50 -0400 Subject: [PATCH 9/9] added readme --- README.md | 18 ++++++------------ 1 file changed, 6 insertions(+), 12 deletions(-) diff --git a/README.md b/README.md index 7ed589e..8faf9cc 100644 --- a/README.md +++ b/README.md @@ -1,8 +1,13 @@ # AD - SBA - HTML/CSS/JavaScript +* Access my site by navigating to the following link: https://stevens125.github.io/index.html + +### Objective +* This site showcases my use of html,css and javascript elements. +* The technologies used in this assignment include html, css, bootstrap, Javascript and JQuery +* I had the Dog and Cat Lover in Mind where the User can interact and find interesting dog and cat facts with the click of a button which were provided by calling the excellent cat facts api that can be found @ https://alexwohlbruck.github.io/ -### Description * In this Skill-based Assessment, you will be creating a small website and you get to pick what is the website about. The main purpose of this SBA is to test your skills in implementing a clean HTML structure that follows the methodologies of visual design, and styling your site so that it is user-friendly. * You have the entire day for this SBA. Make sure to check in with your instructor for approval of your idea. Your work will be graded based on the below technical requirements. Also, creativity always works in your favor. @@ -12,17 +17,6 @@ * Once you got your idea, think in the user’s perspective when creating the website.  You like your users to have a good experience when interacting with your site. This gives you a better chance of users trusting your site and coming back for more. For this SBA, don’t worry too much about the content. There are many places you can get free content to display on your site. Concentrate more on the web site's structure and grid system. -* Some resources for free content: - * Photos: `https://www.pexels.com/search/template/` - * Text: `https://www.lipsum.com/` - * GIFs: `https://www.motionelements.com/stock-image-10116013-business-and-startup-4k` - -* Useful API sites: - * https://rapidapi.com/ (Links to an external site.) - * https://any-api.com/ (Links to an external site.) - * https://github.com/toddmotto/public-apis#public-apis- (Links to an external site.) - * https://apilist.fun/ - ### Deliverable: * A theme for your site that you feel comfortable with * Complete all technical requirements for HTML, CSS, and Javascript