From 11d106027f287ac4e967a18f77ac6ac567b2bb18 Mon Sep 17 00:00:00 2001 From: Alonso Ninalaya Date: Thu, 9 Jul 2020 09:17:04 -0400 Subject: [PATCH 1/7] clean up and adding README --- README.md | 66 ++---------------------------------------- css/style.css | 6 ---- index.html | 42 ++++----------------------- js/footer-functions.js | 2 -- js/header-functions.js | 11 ------- js/utils.js | 26 ----------------- 6 files changed, 8 insertions(+), 145 deletions(-) delete mode 100644 js/footer-functions.js delete mode 100644 js/header-functions.js delete mode 100644 js/utils.js diff --git a/README.md b/README.md index 7ed589e..da1f2c8 100644 --- a/README.md +++ b/README.md @@ -1,27 +1,11 @@ -# AD - SBA - HTML/CSS/JavaScript +# Website ### 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. +* A small website using vanilla javascript. -* 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. - -* Since this is your first time creating a 3 page website, keep it simple. Keeping it simple is very important. It ensures that you can complete this project within the given time and also gives you a better idea of what can you get done in the given time if you were to do it again with more requirements. - -* 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/ +* Requirements for this website is to have 3 pages ### Deliverable: * A theme for your site that you feel comfortable with @@ -33,8 +17,6 @@ * Submit the project in a ZIP file - - ## Technical requirements * HTML @@ -63,45 +45,3 @@ * Use JSON or XML (Optional) * Use JQuery (Optional) - - -## How to Download - -#### Part 1 - Forking the Project -* To _fork_ the project, click the `Fork` button located at the top right of the project. - - -#### Part 2 - Navigating to _forked_ Repository -* Navigate to your github profile to find the _newly forked repository_. -* Copy the URL of the project to the clipboard. - -#### Part 3 - Cloning _forked_ repository -* Clone the repository from **your account** into the `~/dev` directory. - * if you do not have a `~/dev` directory, make one by executing the following command: - * * `mkdir ~/dev` - * navigate to the `~/dev` directory by executing the following command: - * * `cd ~/dev` - * clone the project by executing the following command: - * * `git clone https://github.com/${MYUSERNAME}/${NAMEOFPROJECT}` - - - - - - -## How to Submit - -#### Part 1 - _Pushing_ local changes to remote repository -* from a _terminal_ navigate to the root directory of the _cloned_ project. -* from the root directory of the project, execute the following commands: - * * add all changes - * * `git add .` - * * commit changes to be pushed - * * `git commit -m 'I have added changes'` - * * push changes to your repository - * * `git push -u origin master` - -#### Part 2 - Submitting assignment -* from the browser, navigate to the _forked_ project from **your** github account. -* click the `Pull Requests` tab. -* select `New Pull Request` diff --git a/css/style.css b/css/style.css index d17d83a..8f939dd 100644 --- a/css/style.css +++ b/css/style.css @@ -1,9 +1,3 @@ body { background-color: navy; } - - -object { - height: 100vh; - width: 100vh; -} diff --git a/index.html b/index.html index 4dc0c72..a0ccda1 100644 --- a/index.html +++ b/index.html @@ -1,57 +1,25 @@ - - - - + - - - - - + - - - - - - - - - - - - - - - + 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/utils.js b/js/utils.js deleted file mode 100644 index bf0c12e..0000000 --- a/js/utils.js +++ /dev/null @@ -1,26 +0,0 @@ -// Utility JS functions are to be defined here -function resizeIFrameToFitContent( iFrame ) { - iFrame.width = iFrame.contentWindow.document.body.scrollWidth; - iFrame.height = iFrame.contentWindow.document.body.scrollHeight; -} - -// used to fetch all methods of an arbitrary object to display to client -function getAllMethodsOfObejct(obj) { - var result = []; - for (var id in obj) { - try { - if (typeof(obj[id]) == "function") { - result.push(id + ": " + obj[id].toString()); - } - } catch (err) { - result.push(id + ": inaccessible"); - } - } - return result; - } - - - -function loadHtml(elementId, fileName) { - $(elementId).html(''); -}; From 9951fa91787d11bf5d2e7347d7a302e1b576c8c9 Mon Sep 17 00:00:00 2001 From: Alonso Ninalaya Date: Thu, 9 Jul 2020 11:28:31 -0400 Subject: [PATCH 2/7] add homepage, login page and sign up page --- css/homepage.css | 9 +++++ css/loginForm.css | 86 ++++++++++++++++++++++++++++++++++++++++++++++ css/signupForm.css | 86 ++++++++++++++++++++++++++++++++++++++++++++++ css/style.css | 3 -- homepage.html | 42 ++++++++++++++++++++++ index.html | 25 -------------- js/homepage.js | 0 js/loginForm.js | 0 js/signupForm.js | 0 loginForm.html | 34 ++++++++++++++++++ signupForm.html | 38 ++++++++++++++++++++ 11 files changed, 295 insertions(+), 28 deletions(-) create mode 100644 css/homepage.css create mode 100644 css/loginForm.css create mode 100644 css/signupForm.css delete mode 100644 css/style.css create mode 100644 homepage.html delete mode 100644 index.html create mode 100644 js/homepage.js create mode 100644 js/loginForm.js create mode 100644 js/signupForm.js create mode 100644 loginForm.html create mode 100644 signupForm.html diff --git a/css/homepage.css b/css/homepage.css new file mode 100644 index 0000000..dee98d5 --- /dev/null +++ b/css/homepage.css @@ -0,0 +1,9 @@ +@import url('https://fonts.googleapis.com/css2?family=Bangers&display=swap'); + +body { + background-color: #C5CAE9; +} + +#homepageText { + font-family: 'Bangers', cursive; +} \ No newline at end of file diff --git a/css/loginForm.css b/css/loginForm.css new file mode 100644 index 0000000..dbc643c --- /dev/null +++ b/css/loginForm.css @@ -0,0 +1,86 @@ +@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700); + +body { + background: #C5CAE9; + font-family: 'Open Sans', sans-serif; +} + +.container { + width: 420px; + margin: 16px auto; + font-size: 16px; +} + +.container-header, +.container p { + margin-top: 0; + margin-bottom: 0; +} + +.container-triangle { + width: 0; + margin-right: auto; + margin-left: auto; + border: 12px solid transparent; + border-bottom-color: #28d; +} + +.container-header { + background: #28d; + padding: 20px; + font-size: 1.4em; + font-weight: normal; + text-align: center; + text-transform: uppercase; + color: #fff; +} + +.login { + background: #ebebeb; + padding: 12px; +} + +.login p { + padding: 12px; +} + +.login input { + box-sizing: border-box; + display: block; + width: 100%; + border-width: 1px; + border-style: solid; + padding: 16px; + outline: 0; + font-family: inherit; + font-size: 0.95em; +} + +#email, #password { + background: #fff; + border-color: #bbb; + color: #555; +} + +#email:focus, #password:focus { + border-color: #888; +} + +#submitButton { + background: #28d; + border-color: transparent; + color: #fff; + cursor: pointer; +} + +#submitButton:hover { + background: #17c; +} + +#submitButton:focus { + border-color: #05a; +} + +#navImage { + cursor: pointer; +} \ No newline at end of file diff --git a/css/signupForm.css b/css/signupForm.css new file mode 100644 index 0000000..440db29 --- /dev/null +++ b/css/signupForm.css @@ -0,0 +1,86 @@ +@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,700); + +body { + background: #C5CAE9; + font-family: 'Open Sans', sans-serif; +} + +.container { + width: 420px; + margin: 16px auto; + font-size: 16px; +} + +.container-header, +.container p { + margin-top: 0; + margin-bottom: 0; +} + +.container-triangle { + width: 0; + margin-right: auto; + margin-left: auto; + border: 12px solid transparent; + border-bottom-color: #28d; +} + +.container-header { + background: #28d; + padding: 20px; + font-size: 1.4em; + font-weight: normal; + text-align: center; + text-transform: uppercase; + color: #fff; +} + +.login { + background: #ebebeb; + padding: 12px; +} + +.login p { + padding: 12px; +} + +.login input { + box-sizing: border-box; + display: block; + width: 100%; + border-width: 1px; + border-style: solid; + padding: 16px; + outline: 0; + font-family: inherit; + font-size: 0.95em; +} + +#email, #password { + background: #fff; + border-color: #bbb; + color: #555; +} + +#email:focus, #password:focus { + border-color: #888; +} + +#submitButton { + background: #28d; + border-color: transparent; + color: #fff; + cursor: pointer; +} + +#submitButton:hover { + background: #17c; +} + +#submitButton:focus { + border-color: #05a; +} + +#navImage { + cursor: pointer; +} diff --git a/css/style.css b/css/style.css deleted file mode 100644 index 8f939dd..0000000 --- a/css/style.css +++ /dev/null @@ -1,3 +0,0 @@ -body { - background-color: navy; -} diff --git a/homepage.html b/homepage.html new file mode 100644 index 0000000..8642717 --- /dev/null +++ b/homepage.html @@ -0,0 +1,42 @@ + + + + + + + + + + + + + + + +
+ + + +
+ + + \ No newline at end of file diff --git a/index.html b/index.html deleted file mode 100644 index a0ccda1..0000000 --- a/index.html +++ /dev/null @@ -1,25 +0,0 @@ - - - - - - - - - - - - - - - - - The quickest of brown foxes. - - -
- -
- - - \ No newline at end of file diff --git a/js/homepage.js b/js/homepage.js new file mode 100644 index 0000000..e69de29 diff --git a/js/loginForm.js b/js/loginForm.js new file mode 100644 index 0000000..e69de29 diff --git a/js/signupForm.js b/js/signupForm.js new file mode 100644 index 0000000..e69de29 diff --git a/loginForm.html b/loginForm.html new file mode 100644 index 0000000..eb779a4 --- /dev/null +++ b/loginForm.html @@ -0,0 +1,34 @@ + + + + + + + + + + + + +
+ +
+ +
+
+

Log in

+ +
+
+ + + +
+ + + \ No newline at end of file diff --git a/signupForm.html b/signupForm.html new file mode 100644 index 0000000..406db4f --- /dev/null +++ b/signupForm.html @@ -0,0 +1,38 @@ + + + + + + + + + + + + +
+ +
+ +
+
+

Sign Up Form

+ +
+ + + +
+ + + +
+ + + \ No newline at end of file From 0ce9b2fffcdb069f7323dba13204be0dc4ca9deb Mon Sep 17 00:00:00 2001 From: Alonso Ninalaya Date: Thu, 9 Jul 2020 16:17:47 -0400 Subject: [PATCH 3/7] fetching data from API --- loginForm.html => extensions/loginForm.html | 4 +- signupForm.html => extensions/signupForm.html | 4 +- homepage.html | 18 ++- js/homepage.js | 128 ++++++++++++++++++ 4 files changed, 148 insertions(+), 6 deletions(-) rename loginForm.html => extensions/loginForm.html (89%) rename signupForm.html => extensions/signupForm.html (89%) diff --git a/loginForm.html b/extensions/loginForm.html similarity index 89% rename from loginForm.html rename to extensions/loginForm.html index eb779a4..3d2d80e 100644 --- a/loginForm.html +++ b/extensions/loginForm.html @@ -6,12 +6,12 @@ - +
- +
diff --git a/signupForm.html b/extensions/signupForm.html similarity index 89% rename from signupForm.html rename to extensions/signupForm.html index 406db4f..afa7161 100644 --- a/signupForm.html +++ b/extensions/signupForm.html @@ -6,12 +6,12 @@ - +
- +
diff --git a/homepage.html b/homepage.html index 8642717..5fac890 100644 --- a/homepage.html +++ b/homepage.html @@ -19,20 +19,34 @@ + + + + +
+ Card image cap +
+
Card title
+

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

+ Go somewhere +
+
+
+ diff --git a/js/homepage.js b/js/homepage.js index e69de29..efdb87f 100644 --- a/js/homepage.js +++ b/js/homepage.js @@ -0,0 +1,128 @@ +const url = 'https://ron-swanson-quotes.herokuapp.com/v2/quotes'; +let getSingleQuoteButton = document.getElementById("getSingleQuote"); +getSingleQuoteButton.addEventListener('click', () => { + getSingleQuote(); +}); + +let getManyQuoteButton = document.getElementById("getManyQuotes"); +getManyQuoteButton.addEventListener('click', () => { + getManyQuotes(); +}); + +let getTermQuote = document.getElementById("getTermQuote"); +getTermQuote.addEventListener('click', () => { + getTermQuotes(); +}); + +function getSingleQuote() { + // 1. Create a new XMLHttpRequest object + let xhr = new XMLHttpRequest(); + let responses = []; + // 2. Configure it: GET-request for the URL /article/.../load + xhr.open('GET', url); + + // 3. Send the request over the network + xhr.send(); + + // 4. This will be called after the response is received + xhr.onload = function() { + if (xhr.status != 200) { // analyze HTTP status of the response + alert(`Error ${xhr.status}: ${xhr.statusText}`); // e.g. 404: Not Found + } else { // show the result + alert(`Done, got ${xhr.response.length} bytes (This means we finshed fetching the response, yei)`); // response is the server + responses= JSON.parse(xhr.response); + console.log(responses); + } + }; + + xhr.onprogress = function(event) { + if (event.lengthComputable) { + alert(`Received ${event.loaded} of ${event.total} bytes ( this means we got the total size of the response; this means yei)`); + } else { + alert(`Received ${event.loaded} bytes`); // no Content-Length + } + + }; + + xhr.onerror = function() { + alert("Request failed"); + }; +} + +function getManyQuotes() { + + let responses; + let inputNumber = 63; // MAXIMUM VALUE IS 63 quotes + let changeableUrl = `${url}/${inputNumber}`; + // 1. Create a new XMLHttpRequest object + let xhr = new XMLHttpRequest(); + + // 2. Configure it: GET-request for the URL /article/.../load + xhr.open('GET', changeableUrl); + + // 3. Send the request over the network + xhr.send(); + + // 4. This will be called after the response is received + xhr.onload = function() { + if (xhr.status != 200) { // analyze HTTP status of the response + alert(`Error ${xhr.status}: ${xhr.statusText}`); // e.g. 404: Not Found + } else { // show the result + alert(`Done, got ${xhr.response.length} bytes (This means we finshed fetching the response, yei)`); // response is the server + responses= JSON.parse(xhr.response); + } + }; + + xhr.onprogress = function(event) { + if (event.lengthComputable) { + alert(`Received ${event.loaded} of ${event.total} bytes ( this means we got the total size of the response; this means yei)`); + } else { + alert(`Received ${event.loaded} bytes`); // no Content-Length + } + + }; + + xhr.onerror = function() { + alert("Request failed"); + }; +} + +function getTermQuotes() { + + let responses; + let quote = 'ass'; + let changeableUrl = `${url}/search/${quote}`; + // 1. Create a new XMLHttpRequest object + let xhr = new XMLHttpRequest(); + + // 2. Configure it: GET-request for the URL /article/.../load + xhr.open('GET', changeableUrl); + + // 3. Send the request over the network + xhr.send(); + + // 4. This will be called after the response is received + xhr.onload = function() { + if (xhr.status != 200) { // analyze HTTP status of the response + alert(`Error ${xhr.status}: ${xhr.statusText}`); // e.g. 404: Not Found + } else { // show the result + alert(`Done, got ${xhr.response.length} bytes (This means we finshed fetching the response, yei)`); // response is the server + responses= JSON.parse(xhr.response); + console.log(responses); + } + }; + + xhr.onprogress = function(event) { + if (event.lengthComputable) { + alert(`Received ${event.loaded} of ${event.total} bytes ( this means we got the total size of the response; this means yei)`); + } else { + alert(`Received ${event.loaded} bytes`); // no Content-Length + } + + }; + + xhr.onerror = function() { + alert("Request failed"); + }; +} + From e7b3d8e6c616c856bec7181f4bd52c64e2d34165 Mon Sep 17 00:00:00 2001 From: Alonso Ninalaya Date: Thu, 9 Jul 2020 18:14:53 -0400 Subject: [PATCH 4/7] adding dynamic cards bootstrap --- homepage.html | 12 +---- js/homepage.js | 129 ++++++++++++++++++++++++++++++++----------------- 2 files changed, 87 insertions(+), 54 deletions(-) diff --git a/homepage.html b/homepage.html index 5fac890..f7a4db5 100644 --- a/homepage.html +++ b/homepage.html @@ -34,17 +34,9 @@ +
+
-
- Card image cap -
-
Card title
-

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

- Go somewhere -
-
- -