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 diff --git a/cat.html b/cat.html new file mode 100644 index 0000000..0a2e4a9 --- /dev/null +++ b/cat.html @@ -0,0 +1,100 @@ + + + + + + + + + Cat Facts! + + + + + + + + + + + + + + +
+
+

RANDOM CAT FACTS

+
+ cat and dog background +
+ +
+
+
+

Submit a New Cat Fact

+
+
+
+ +
+
+
+
+ + +
+
+
+ +
+
+
+
+ + + + + + + + + + + + + + \ No newline at end of file diff --git a/css/style.css b/css/style.css index d17d83a..a0a1f76 100644 --- a/css/style.css +++ b/css/style.css @@ -1,9 +1,145 @@ body { - background-color: navy; + overflow-x: hidden; } +.grid-container { + display: grid; + grid-template-columns: auto auto auto auto; + margin: 20px; + } -object { - height: 100vh; - width: 100vh; +.heading { + height: 700px; + width: 100%; + text-align: center; } + +.heroImg { + margin: 50px 0; + height: 500px; + width: auto; +} + +.container-fluid { + color:#037bfe; + } + +/* 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; +} + +.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; + border-left: transparent; + padding-bottom: 0px; + margin-bottom: 10px; +} +} + +/* 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 new file mode 100644 index 0000000..685cfe8 --- /dev/null +++ b/dog.html @@ -0,0 +1,104 @@ + + + + + + + + + Dog Facts! + + + + + + + + + + + + + + +
+
+

RANDOM DOG FACTS

+
+ cat and dog background +
+ +
+
+
+ + +
+
+

Submit a New Dog Fact

+
+
+
+ +
+
+
+
+ + +
+
+
+ +
+
+
+
+ + + + + + + + + + + + + + \ No newline at end of file diff --git a/index.html b/index.html index 4dc0c72..e8fb813 100644 --- a/index.html +++ b/index.html @@ -1,57 +1,124 @@ - - - - + SBA Assessment Home Page + - - - - - - - - - - - - - + + + + + - - - - - - - The quickest of brown foxes. - - - - - - - - - - + + + +
+ +
+
+

Welcome to our Random Dog

+

and Cat Facts Generator Page

+
+ cat and dog background +
+
+ + + + + + + + + +
Total Cat FactsTotal Dog Facts
+
+
+
+
+ +
+

Sign Up for Our Animal Facts Newsletter!

+
+
+
+ + +
+
+ + +
+
+
+
+ + +
+
+
+ +
+
+ +
+ +
+ + + + + + + + - - - - \ 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..3e2ef36 --- /dev/null +++ b/js/script.js @@ -0,0 +1,157 @@ +// fetch('https://cat-fact.herokuapp.com/facts') +// .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=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 => { + 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(); + }) + .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 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); + }); +} + +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()