├── 01_boilerplate
├── assets
│ ├── css
│ │ └── style.css
│ ├── fonts
│ │ ├── Menlo-Bold.woff
│ │ ├── Menlo-BoldItalic.woff
│ │ ├── Menlo-Italic.woff
│ │ └── Menlo-Regular.woff
│ └── js
│ │ └── script.js
└── index.html
├── 02_making_a_request_1
├── assets
│ ├── css
│ │ └── style.css
│ ├── fonts
│ │ ├── Menlo-Bold.woff
│ │ ├── Menlo-BoldItalic.woff
│ │ ├── Menlo-Italic.woff
│ │ └── Menlo-Regular.woff
│ └── js
│ │ └── script.js
└── index.html
├── 03_making_a_request_2
├── assets
│ ├── css
│ │ └── style.css
│ ├── fonts
│ │ ├── Menlo-Bold.woff
│ │ ├── Menlo-BoldItalic.woff
│ │ ├── Menlo-Italic.woff
│ │ └── Menlo-Regular.woff
│ └── js
│ │ └── script.js
└── index.html
├── 04_making_a_POST_request_1
├── assets
│ ├── css
│ │ └── style.css
│ ├── fonts
│ │ ├── Menlo-Bold.woff
│ │ ├── Menlo-BoldItalic.woff
│ │ ├── Menlo-Italic.woff
│ │ └── Menlo-Regular.woff
│ └── js
│ │ └── script.js
└── index.html
├── 05_making_a_POST_request_2
├── assets
│ ├── css
│ │ └── style.css
│ ├── fonts
│ │ ├── Menlo-Bold.woff
│ │ ├── Menlo-BoldItalic.woff
│ │ ├── Menlo-Italic.woff
│ │ └── Menlo-Regular.woff
│ └── js
│ │ └── script.js
└── index.html
├── 06_finding_a_subtle_error
├── assets
│ ├── css
│ │ └── style.css
│ ├── fonts
│ │ ├── Menlo-Bold.woff
│ │ ├── Menlo-BoldItalic.woff
│ │ ├── Menlo-Italic.woff
│ │ └── Menlo-Regular.woff
│ └── js
│ │ └── script.js
└── index.html
└── 07_handling_exceptions
├── assets
├── css
│ └── style.css
├── fonts
│ ├── Menlo-Bold.woff
│ ├── Menlo-BoldItalic.woff
│ ├── Menlo-Italic.woff
│ └── Menlo-Regular.woff
└── js
│ └── script.js
└── index.html
/01_boilerplate/assets/css/style.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: "Menlo";
3 | font-style: normal;
4 | font-weight: normal;
5 | src: url("../fonts/Menlo-Regular.woff") format("woff");
6 | }
7 | @font-face {
8 | font-family: "Menlo";
9 | font-style: normal;
10 | font-weight: bold;
11 | src: url("../fonts/Menlo-Bold.woff") format("woff");
12 | }
13 | @font-face {
14 | font-family: "Menlo";
15 | font-style: italic;
16 | font-weight: normal;
17 | src: url("../fonts/Menlo-Italic.woff") format("woff");
18 | }
19 | @font-face {
20 | font-family: "Menlo";
21 | font-style: italic;
22 | font-weight: bold;
23 | src: url("../fonts/Menlo-BoldItalic.woff") format("woff");
24 | }
25 |
26 | ::-webkit-scrollbar {
27 | -webkit-appearance: none;
28 | width: 7px;
29 | }
30 |
31 | ::-webkit-scrollbar-thumb {
32 | border-radius: 4px;
33 | background-color: rgba(0, 0, 0, .5);
34 | box-shadow: 0 0 1px rgba(255, 255, 255, .5);
35 | }
36 |
37 | body {
38 | margin-top: 10px;
39 | }
40 |
41 | textarea
42 | {
43 | font-family: "Menlo", 'Courier New', Courier, monospace;
44 | height: 25vh;
45 | }
46 |
47 | .modal-body {
48 | max-height: 60vh;
49 | overflow-y: scroll;
50 | }
--------------------------------------------------------------------------------
/01_boilerplate/assets/fonts/Menlo-Bold.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Code-Institute-Solutions/API_walkthrough/9cf1796a31accfe2a0b03ba8867b56a5f3d1fccc/01_boilerplate/assets/fonts/Menlo-Bold.woff
--------------------------------------------------------------------------------
/01_boilerplate/assets/fonts/Menlo-BoldItalic.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Code-Institute-Solutions/API_walkthrough/9cf1796a31accfe2a0b03ba8867b56a5f3d1fccc/01_boilerplate/assets/fonts/Menlo-BoldItalic.woff
--------------------------------------------------------------------------------
/01_boilerplate/assets/fonts/Menlo-Italic.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Code-Institute-Solutions/API_walkthrough/9cf1796a31accfe2a0b03ba8867b56a5f3d1fccc/01_boilerplate/assets/fonts/Menlo-Italic.woff
--------------------------------------------------------------------------------
/01_boilerplate/assets/fonts/Menlo-Regular.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Code-Institute-Solutions/API_walkthrough/9cf1796a31accfe2a0b03ba8867b56a5f3d1fccc/01_boilerplate/assets/fonts/Menlo-Regular.woff
--------------------------------------------------------------------------------
/01_boilerplate/assets/js/script.js:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Code-Institute-Solutions/API_walkthrough/9cf1796a31accfe2a0b03ba8867b56a5f3d1fccc/01_boilerplate/assets/js/script.js
--------------------------------------------------------------------------------
/01_boilerplate/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
9 |
10 |
11 | JSHint Front End
12 |
13 |
14 |
15 |
16 |
17 |
18 |
JSHinterface
19 |
20 |
21 |
22 |
23 |
24 |
27 |
28 |
29 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
101 |
102 |
105 |
106 |
107 |
108 |
--------------------------------------------------------------------------------
/02_making_a_request_1/assets/css/style.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: "Menlo";
3 | font-style: normal;
4 | font-weight: normal;
5 | src: url("../fonts/Menlo-Regular.woff") format("woff");
6 | }
7 | @font-face {
8 | font-family: "Menlo";
9 | font-style: normal;
10 | font-weight: bold;
11 | src: url("../fonts/Menlo-Bold.woff") format("woff");
12 | }
13 | @font-face {
14 | font-family: "Menlo";
15 | font-style: italic;
16 | font-weight: normal;
17 | src: url("../fonts/Menlo-Italic.woff") format("woff");
18 | }
19 | @font-face {
20 | font-family: "Menlo";
21 | font-style: italic;
22 | font-weight: bold;
23 | src: url("../fonts/Menlo-BoldItalic.woff") format("woff");
24 | }
25 |
26 | ::-webkit-scrollbar {
27 | -webkit-appearance: none;
28 | width: 7px;
29 | }
30 |
31 | ::-webkit-scrollbar-thumb {
32 | border-radius: 4px;
33 | background-color: rgba(0, 0, 0, .5);
34 | box-shadow: 0 0 1px rgba(255, 255, 255, .5);
35 | }
36 |
37 | body {
38 | margin-top: 10px;
39 | }
40 |
41 | textarea
42 | {
43 | font-family: "Menlo", 'Courier New', Courier, monospace;
44 | height: 25vh;
45 | }
46 |
47 | .modal-body {
48 | max-height: 60vh;
49 | overflow-y: scroll;
50 | }
--------------------------------------------------------------------------------
/02_making_a_request_1/assets/fonts/Menlo-Bold.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Code-Institute-Solutions/API_walkthrough/9cf1796a31accfe2a0b03ba8867b56a5f3d1fccc/02_making_a_request_1/assets/fonts/Menlo-Bold.woff
--------------------------------------------------------------------------------
/02_making_a_request_1/assets/fonts/Menlo-BoldItalic.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Code-Institute-Solutions/API_walkthrough/9cf1796a31accfe2a0b03ba8867b56a5f3d1fccc/02_making_a_request_1/assets/fonts/Menlo-BoldItalic.woff
--------------------------------------------------------------------------------
/02_making_a_request_1/assets/fonts/Menlo-Italic.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Code-Institute-Solutions/API_walkthrough/9cf1796a31accfe2a0b03ba8867b56a5f3d1fccc/02_making_a_request_1/assets/fonts/Menlo-Italic.woff
--------------------------------------------------------------------------------
/02_making_a_request_1/assets/fonts/Menlo-Regular.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Code-Institute-Solutions/API_walkthrough/9cf1796a31accfe2a0b03ba8867b56a5f3d1fccc/02_making_a_request_1/assets/fonts/Menlo-Regular.woff
--------------------------------------------------------------------------------
/02_making_a_request_1/assets/js/script.js:
--------------------------------------------------------------------------------
1 | const API_KEY = "VZn-Fx2ohpPGHAs_RhP_m6IgxYA";
2 | const API_URL = "https://ci-jshint.herokuapp.com/api";
3 | const resultsModal = new bootstrap.Modal(document.getElementById("resultsModal"));
4 |
5 | document.getElementById("status").addEventListener("click", e => getStatus(e));
6 |
7 | async function getStatus(e) {
8 |
9 | const queryString = `${API_URL}?api_key=${API_KEY}`;
10 |
11 | const response = await fetch(queryString);
12 |
13 | const data = await response.json();
14 |
15 | if (response.ok) {
16 | console.log(data.expiry);
17 | }
18 |
19 | }
--------------------------------------------------------------------------------
/02_making_a_request_1/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
9 |
10 |
11 | JSHint Front End
12 |
13 |
14 |
15 |
16 |
17 |
18 |
JSHinterface
19 |
20 |
21 |
22 |
23 |
24 |
27 |
28 |
29 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
101 |
102 |
105 |
106 |
107 |
108 |
--------------------------------------------------------------------------------
/03_making_a_request_2/assets/css/style.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: "Menlo";
3 | font-style: normal;
4 | font-weight: normal;
5 | src: url("../fonts/Menlo-Regular.woff") format("woff");
6 | }
7 | @font-face {
8 | font-family: "Menlo";
9 | font-style: normal;
10 | font-weight: bold;
11 | src: url("../fonts/Menlo-Bold.woff") format("woff");
12 | }
13 | @font-face {
14 | font-family: "Menlo";
15 | font-style: italic;
16 | font-weight: normal;
17 | src: url("../fonts/Menlo-Italic.woff") format("woff");
18 | }
19 | @font-face {
20 | font-family: "Menlo";
21 | font-style: italic;
22 | font-weight: bold;
23 | src: url("../fonts/Menlo-BoldItalic.woff") format("woff");
24 | }
25 |
26 | ::-webkit-scrollbar {
27 | -webkit-appearance: none;
28 | width: 7px;
29 | }
30 |
31 | ::-webkit-scrollbar-thumb {
32 | border-radius: 4px;
33 | background-color: rgba(0, 0, 0, .5);
34 | box-shadow: 0 0 1px rgba(255, 255, 255, .5);
35 | }
36 |
37 | body {
38 | margin-top: 10px;
39 | }
40 |
41 | textarea
42 | {
43 | font-family: "Menlo", 'Courier New', Courier, monospace;
44 | height: 25vh;
45 | }
46 |
47 | .modal-body {
48 | max-height: 60vh;
49 | overflow-y: scroll;
50 | }
--------------------------------------------------------------------------------
/03_making_a_request_2/assets/fonts/Menlo-Bold.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Code-Institute-Solutions/API_walkthrough/9cf1796a31accfe2a0b03ba8867b56a5f3d1fccc/03_making_a_request_2/assets/fonts/Menlo-Bold.woff
--------------------------------------------------------------------------------
/03_making_a_request_2/assets/fonts/Menlo-BoldItalic.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Code-Institute-Solutions/API_walkthrough/9cf1796a31accfe2a0b03ba8867b56a5f3d1fccc/03_making_a_request_2/assets/fonts/Menlo-BoldItalic.woff
--------------------------------------------------------------------------------
/03_making_a_request_2/assets/fonts/Menlo-Italic.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Code-Institute-Solutions/API_walkthrough/9cf1796a31accfe2a0b03ba8867b56a5f3d1fccc/03_making_a_request_2/assets/fonts/Menlo-Italic.woff
--------------------------------------------------------------------------------
/03_making_a_request_2/assets/fonts/Menlo-Regular.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Code-Institute-Solutions/API_walkthrough/9cf1796a31accfe2a0b03ba8867b56a5f3d1fccc/03_making_a_request_2/assets/fonts/Menlo-Regular.woff
--------------------------------------------------------------------------------
/03_making_a_request_2/assets/js/script.js:
--------------------------------------------------------------------------------
1 | const API_KEY = "VZn-Fx2ohpPGHAs_RhP_m6IgxYA";
2 | const API_URL = "https://ci-jshint.herokuapp.com/api";
3 | const resultsModal = new bootstrap.Modal(document.getElementById("resultsModal"));
4 |
5 | document.getElementById("status").addEventListener("click", e => getStatus(e));
6 |
7 | async function getStatus(e) {
8 |
9 | const queryString = `${API_URL}?api_key=${API_KEY}`;
10 |
11 | const response = await fetch(queryString);
12 |
13 | const data = await response.json();
14 |
15 | if (response.ok) {
16 | displayStatus(data);
17 | } else {
18 | throw new Error(data.error);
19 | }
20 |
21 | }
22 |
23 | function displayStatus(data) {
24 |
25 | let heading = "API Key Status";
26 | let results = `Your key is valid until
`;
27 | results += `${data.expiry}
`;
28 |
29 | document.getElementById("resultsModalTitle").innerText = heading;
30 | document.getElementById("results-content").innerHTML = results;
31 | resultsModal.show();
32 |
33 | }
--------------------------------------------------------------------------------
/03_making_a_request_2/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
9 |
10 |
11 | JSHint Front End
12 |
13 |
14 |
15 |
16 |
17 |
18 |
JSHinterface
19 |
20 |
21 |
22 |
23 |
24 |
27 |
28 |
29 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
101 |
102 |
105 |
106 |
107 |
108 |
--------------------------------------------------------------------------------
/04_making_a_POST_request_1/assets/css/style.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: "Menlo";
3 | font-style: normal;
4 | font-weight: normal;
5 | src: url("../fonts/Menlo-Regular.woff") format("woff");
6 | }
7 | @font-face {
8 | font-family: "Menlo";
9 | font-style: normal;
10 | font-weight: bold;
11 | src: url("../fonts/Menlo-Bold.woff") format("woff");
12 | }
13 | @font-face {
14 | font-family: "Menlo";
15 | font-style: italic;
16 | font-weight: normal;
17 | src: url("../fonts/Menlo-Italic.woff") format("woff");
18 | }
19 | @font-face {
20 | font-family: "Menlo";
21 | font-style: italic;
22 | font-weight: bold;
23 | src: url("../fonts/Menlo-BoldItalic.woff") format("woff");
24 | }
25 |
26 | ::-webkit-scrollbar {
27 | -webkit-appearance: none;
28 | width: 7px;
29 | }
30 |
31 | ::-webkit-scrollbar-thumb {
32 | border-radius: 4px;
33 | background-color: rgba(0, 0, 0, .5);
34 | box-shadow: 0 0 1px rgba(255, 255, 255, .5);
35 | }
36 |
37 | body {
38 | margin-top: 10px;
39 | }
40 |
41 | textarea
42 | {
43 | font-family: "Menlo", 'Courier New', Courier, monospace;
44 | height: 25vh;
45 | }
46 |
47 | .modal-body {
48 | max-height: 60vh;
49 | overflow-y: scroll;
50 | }
--------------------------------------------------------------------------------
/04_making_a_POST_request_1/assets/fonts/Menlo-Bold.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Code-Institute-Solutions/API_walkthrough/9cf1796a31accfe2a0b03ba8867b56a5f3d1fccc/04_making_a_POST_request_1/assets/fonts/Menlo-Bold.woff
--------------------------------------------------------------------------------
/04_making_a_POST_request_1/assets/fonts/Menlo-BoldItalic.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Code-Institute-Solutions/API_walkthrough/9cf1796a31accfe2a0b03ba8867b56a5f3d1fccc/04_making_a_POST_request_1/assets/fonts/Menlo-BoldItalic.woff
--------------------------------------------------------------------------------
/04_making_a_POST_request_1/assets/fonts/Menlo-Italic.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Code-Institute-Solutions/API_walkthrough/9cf1796a31accfe2a0b03ba8867b56a5f3d1fccc/04_making_a_POST_request_1/assets/fonts/Menlo-Italic.woff
--------------------------------------------------------------------------------
/04_making_a_POST_request_1/assets/fonts/Menlo-Regular.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Code-Institute-Solutions/API_walkthrough/9cf1796a31accfe2a0b03ba8867b56a5f3d1fccc/04_making_a_POST_request_1/assets/fonts/Menlo-Regular.woff
--------------------------------------------------------------------------------
/04_making_a_POST_request_1/assets/js/script.js:
--------------------------------------------------------------------------------
1 | const API_KEY = "VZn-Fx2ohpPGHAs_RhP_m6IgxYA";
2 | const API_URL = "https://ci-jshint.herokuapp.com/api";
3 | const resultsModal = new bootstrap.Modal(document.getElementById("resultsModal"));
4 |
5 | document.getElementById("status").addEventListener("click", e => getStatus(e));
6 | document.getElementById("submit").addEventListener("click", e => postForm(e));
7 |
8 | async function postForm(e) {
9 |
10 | const form = new FormData(document.getElementById("checksform"));
11 |
12 | const response = await fetch(API_URL, {
13 | method: "POST",
14 | headers: {
15 | "Authorization": API_KEY,
16 | },
17 | body: form,
18 | });
19 |
20 | }
21 |
22 | async function getStatus(e) {
23 |
24 | const queryString = `${API_URL}?api_key=${API_KEY}`;
25 |
26 | const response = await fetch(queryString);
27 |
28 | const data = await response.json();
29 |
30 | if (response.ok) {
31 | displayStatus(data);
32 | } else {
33 | throw new Error(data.error);
34 | }
35 |
36 | }
37 |
38 | function displayStatus(data) {
39 |
40 | let heading = "API Key Status";
41 | let results = `Your key is valid until
`;
42 | results += `${data.expiry}
`;
43 |
44 | document.getElementById("resultsModalTitle").innerText = heading;
45 | document.getElementById("results-content").innerHTML = results;
46 | resultsModal.show();
47 |
48 | }
--------------------------------------------------------------------------------
/04_making_a_POST_request_1/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
9 |
10 |
11 | JSHint Front End
12 |
13 |
14 |
15 |
16 |
17 |
18 |
JSHinterface
19 |
20 |
21 |
22 |
23 |
24 |
27 |
28 |
29 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
101 |
102 |
105 |
106 |
107 |
108 |
--------------------------------------------------------------------------------
/05_making_a_POST_request_2/assets/css/style.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: "Menlo";
3 | font-style: normal;
4 | font-weight: normal;
5 | src: url("../fonts/Menlo-Regular.woff") format("woff");
6 | }
7 | @font-face {
8 | font-family: "Menlo";
9 | font-style: normal;
10 | font-weight: bold;
11 | src: url("../fonts/Menlo-Bold.woff") format("woff");
12 | }
13 | @font-face {
14 | font-family: "Menlo";
15 | font-style: italic;
16 | font-weight: normal;
17 | src: url("../fonts/Menlo-Italic.woff") format("woff");
18 | }
19 | @font-face {
20 | font-family: "Menlo";
21 | font-style: italic;
22 | font-weight: bold;
23 | src: url("../fonts/Menlo-BoldItalic.woff") format("woff");
24 | }
25 |
26 | ::-webkit-scrollbar {
27 | -webkit-appearance: none;
28 | width: 7px;
29 | }
30 |
31 | ::-webkit-scrollbar-thumb {
32 | border-radius: 4px;
33 | background-color: rgba(0, 0, 0, .5);
34 | box-shadow: 0 0 1px rgba(255, 255, 255, .5);
35 | }
36 |
37 | body {
38 | margin-top: 10px;
39 | }
40 |
41 | textarea
42 | {
43 | font-family: "Menlo", 'Courier New', Courier, monospace;
44 | height: 25vh;
45 | }
46 |
47 | .modal-body {
48 | max-height: 60vh;
49 | overflow-y: scroll;
50 | }
--------------------------------------------------------------------------------
/05_making_a_POST_request_2/assets/fonts/Menlo-Bold.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Code-Institute-Solutions/API_walkthrough/9cf1796a31accfe2a0b03ba8867b56a5f3d1fccc/05_making_a_POST_request_2/assets/fonts/Menlo-Bold.woff
--------------------------------------------------------------------------------
/05_making_a_POST_request_2/assets/fonts/Menlo-BoldItalic.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Code-Institute-Solutions/API_walkthrough/9cf1796a31accfe2a0b03ba8867b56a5f3d1fccc/05_making_a_POST_request_2/assets/fonts/Menlo-BoldItalic.woff
--------------------------------------------------------------------------------
/05_making_a_POST_request_2/assets/fonts/Menlo-Italic.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Code-Institute-Solutions/API_walkthrough/9cf1796a31accfe2a0b03ba8867b56a5f3d1fccc/05_making_a_POST_request_2/assets/fonts/Menlo-Italic.woff
--------------------------------------------------------------------------------
/05_making_a_POST_request_2/assets/fonts/Menlo-Regular.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Code-Institute-Solutions/API_walkthrough/9cf1796a31accfe2a0b03ba8867b56a5f3d1fccc/05_making_a_POST_request_2/assets/fonts/Menlo-Regular.woff
--------------------------------------------------------------------------------
/05_making_a_POST_request_2/assets/js/script.js:
--------------------------------------------------------------------------------
1 | const API_KEY = "VZn-Fx2ohpPGHAs_RhP_m6IgxYA";
2 | const API_URL = "https://ci-jshint.herokuapp.com/api";
3 | const resultsModal = new bootstrap.Modal(document.getElementById("resultsModal"));
4 |
5 | document.getElementById("status").addEventListener("click", e => getStatus(e));
6 | document.getElementById("submit").addEventListener("click", e => postForm(e));
7 |
8 | async function postForm(e) {
9 |
10 | const form = new FormData(document.getElementById("checksform"));
11 |
12 | const response = await fetch(API_URL, {
13 | method: "POST",
14 | headers: {
15 | "Authorization": API_KEY,
16 | },
17 | body: form,
18 | });
19 |
20 | const data = await response.json();
21 |
22 | if (response.ok) {
23 | displayErrors(data);
24 | } else {
25 | throw new Error(data.error);
26 | }
27 |
28 | }
29 |
30 | async function getStatus(e) {
31 |
32 | const queryString = `${API_URL}?api_key=${API_KEY}`;
33 |
34 | const response = await fetch(queryString);
35 |
36 | const data = await response.json();
37 |
38 | if (response.ok) {
39 | displayStatus(data);
40 | } else {
41 | throw new Error(data.error);
42 | }
43 |
44 | }
45 |
46 | function displayErrors(data) {
47 |
48 | let results = "";
49 |
50 | let heading = `JSHint Results for ${data.file}`;
51 | if (data.total_errors === 0) {
52 | results = `No errors reported!
`;
53 | } else {
54 | results = `Total Errors: ${data.total_errors}
`;
55 | for (let error of data.error_list) {
56 | results += `At line ${error.line}, `;
57 | results += `column ${error.col}:
`;
58 | results += `${error.error}
`;
59 | }
60 | }
61 |
62 | document.getElementById("resultsModalTitle").innerText = heading;
63 | document.getElementById("results-content").innerHTML = results;
64 | resultsModal.show();
65 | }
66 |
67 | function displayStatus(data) {
68 |
69 | let heading = "API Key Status";
70 | let results = `Your key is valid until
`;
71 | results += `${data.expiry}
`;
72 |
73 | document.getElementById("resultsModalTitle").innerText = heading;
74 | document.getElementById("results-content").innerHTML = results;
75 | resultsModal.show();
76 |
77 | }
--------------------------------------------------------------------------------
/05_making_a_POST_request_2/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
9 |
10 |
11 | JSHint Front End
12 |
13 |
14 |
15 |
16 |
17 |
18 |
JSHinterface
19 |
20 |
21 |
22 |
23 |
24 |
27 |
28 |
29 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
101 |
102 |
105 |
106 |
107 |
108 |
--------------------------------------------------------------------------------
/06_finding_a_subtle_error/assets/css/style.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: "Menlo";
3 | font-style: normal;
4 | font-weight: normal;
5 | src: url("../fonts/Menlo-Regular.woff") format("woff");
6 | }
7 | @font-face {
8 | font-family: "Menlo";
9 | font-style: normal;
10 | font-weight: bold;
11 | src: url("../fonts/Menlo-Bold.woff") format("woff");
12 | }
13 | @font-face {
14 | font-family: "Menlo";
15 | font-style: italic;
16 | font-weight: normal;
17 | src: url("../fonts/Menlo-Italic.woff") format("woff");
18 | }
19 | @font-face {
20 | font-family: "Menlo";
21 | font-style: italic;
22 | font-weight: bold;
23 | src: url("../fonts/Menlo-BoldItalic.woff") format("woff");
24 | }
25 |
26 | ::-webkit-scrollbar {
27 | -webkit-appearance: none;
28 | width: 7px;
29 | }
30 |
31 | ::-webkit-scrollbar-thumb {
32 | border-radius: 4px;
33 | background-color: rgba(0, 0, 0, .5);
34 | box-shadow: 0 0 1px rgba(255, 255, 255, .5);
35 | }
36 |
37 | body {
38 | margin-top: 10px;
39 | }
40 |
41 | textarea
42 | {
43 | font-family: "Menlo", 'Courier New', Courier, monospace;
44 | height: 25vh;
45 | }
46 |
47 | .modal-body {
48 | max-height: 60vh;
49 | overflow-y: scroll;
50 | }
--------------------------------------------------------------------------------
/06_finding_a_subtle_error/assets/fonts/Menlo-Bold.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Code-Institute-Solutions/API_walkthrough/9cf1796a31accfe2a0b03ba8867b56a5f3d1fccc/06_finding_a_subtle_error/assets/fonts/Menlo-Bold.woff
--------------------------------------------------------------------------------
/06_finding_a_subtle_error/assets/fonts/Menlo-BoldItalic.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Code-Institute-Solutions/API_walkthrough/9cf1796a31accfe2a0b03ba8867b56a5f3d1fccc/06_finding_a_subtle_error/assets/fonts/Menlo-BoldItalic.woff
--------------------------------------------------------------------------------
/06_finding_a_subtle_error/assets/fonts/Menlo-Italic.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Code-Institute-Solutions/API_walkthrough/9cf1796a31accfe2a0b03ba8867b56a5f3d1fccc/06_finding_a_subtle_error/assets/fonts/Menlo-Italic.woff
--------------------------------------------------------------------------------
/06_finding_a_subtle_error/assets/fonts/Menlo-Regular.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Code-Institute-Solutions/API_walkthrough/9cf1796a31accfe2a0b03ba8867b56a5f3d1fccc/06_finding_a_subtle_error/assets/fonts/Menlo-Regular.woff
--------------------------------------------------------------------------------
/06_finding_a_subtle_error/assets/js/script.js:
--------------------------------------------------------------------------------
1 | const API_KEY = "VZn-Fx2ohpPGHAs_RhP_m6IgxYA";
2 | const API_URL = "https://ci-jshint.herokuapp.com/api";
3 | const resultsModal = new bootstrap.Modal(document.getElementById("resultsModal"));
4 |
5 | document.getElementById("status").addEventListener("click", e => getStatus(e));
6 | document.getElementById("submit").addEventListener("click", e => postForm(e));
7 |
8 | function processOptions(form) {
9 | let optArray = [];
10 |
11 | for (let e of form.entries()) {
12 | if (e[0] === "options") {
13 | optArray.push(e[1]);
14 | }
15 | }
16 |
17 | form.delete("options");
18 |
19 | form.append("options", optArray.join());
20 |
21 | return form;
22 | }
23 |
24 | async function postForm(e) {
25 |
26 | const form = processOptions(new FormData(document.getElementById("checksform")));
27 |
28 | const response = await fetch(API_URL, {
29 | method: "POST",
30 | headers: {
31 | "Authorization": API_KEY,
32 | },
33 | body: form,
34 | });
35 |
36 | const data = await response.json();
37 |
38 | if (response.ok) {
39 | displayErrors(data);
40 | } else {
41 | throw new Error(data.error);
42 | }
43 |
44 | }
45 |
46 | async function getStatus(e) {
47 |
48 | const queryString = `${API_URL}?api_key=${API_KEY}`;
49 |
50 | const response = await fetch(queryString);
51 |
52 | const data = await response.json();
53 |
54 | if (response.ok) {
55 | displayStatus(data);
56 | } else {
57 | throw new Error(data.error);
58 | }
59 |
60 | }
61 |
62 | function displayErrors(data) {
63 |
64 | let results = "";
65 |
66 | let heading = `JSHint Results for ${data.file}`;
67 | if (data.total_errors === 0) {
68 | results = `No errors reported!
`;
69 | } else {
70 | results = `Total Errors: ${data.total_errors}
`;
71 | for (let error of data.error_list) {
72 | results += `At line ${error.line}, `;
73 | results += `column ${error.col}:
`;
74 | results += `${error.error}
`;
75 | }
76 | }
77 |
78 | document.getElementById("resultsModalTitle").innerText = heading;
79 | document.getElementById("results-content").innerHTML = results;
80 | resultsModal.show();
81 | }
82 |
83 | function displayStatus(data) {
84 |
85 | let heading = "API Key Status";
86 | let results = `Your key is valid until
`;
87 | results += `${data.expiry}
`;
88 |
89 | document.getElementById("resultsModalTitle").innerText = heading;
90 | document.getElementById("results-content").innerHTML = results;
91 | resultsModal.show();
92 |
93 | }
--------------------------------------------------------------------------------
/06_finding_a_subtle_error/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
9 |
10 |
11 | JSHint Front End
12 |
13 |
14 |
15 |
16 |
17 |
18 |
JSHinterface
19 |
20 |
21 |
22 |
23 |
24 |
27 |
28 |
29 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
101 |
102 |
105 |
106 |
107 |
108 |
--------------------------------------------------------------------------------
/07_handling_exceptions/assets/css/style.css:
--------------------------------------------------------------------------------
1 | @font-face {
2 | font-family: "Menlo";
3 | font-style: normal;
4 | font-weight: normal;
5 | src: url("../fonts/Menlo-Regular.woff") format("woff");
6 | }
7 | @font-face {
8 | font-family: "Menlo";
9 | font-style: normal;
10 | font-weight: bold;
11 | src: url("../fonts/Menlo-Bold.woff") format("woff");
12 | }
13 | @font-face {
14 | font-family: "Menlo";
15 | font-style: italic;
16 | font-weight: normal;
17 | src: url("../fonts/Menlo-Italic.woff") format("woff");
18 | }
19 | @font-face {
20 | font-family: "Menlo";
21 | font-style: italic;
22 | font-weight: bold;
23 | src: url("../fonts/Menlo-BoldItalic.woff") format("woff");
24 | }
25 |
26 | ::-webkit-scrollbar {
27 | -webkit-appearance: none;
28 | width: 7px;
29 | }
30 |
31 | ::-webkit-scrollbar-thumb {
32 | border-radius: 4px;
33 | background-color: rgba(0, 0, 0, .5);
34 | box-shadow: 0 0 1px rgba(255, 255, 255, .5);
35 | }
36 |
37 | body {
38 | margin-top: 10px;
39 | }
40 |
41 | textarea
42 | {
43 | font-family: "Menlo", 'Courier New', Courier, monospace;
44 | height: 25vh;
45 | }
46 |
47 | .modal-body {
48 | max-height: 60vh;
49 | overflow-y: scroll;
50 | }
--------------------------------------------------------------------------------
/07_handling_exceptions/assets/fonts/Menlo-Bold.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Code-Institute-Solutions/API_walkthrough/9cf1796a31accfe2a0b03ba8867b56a5f3d1fccc/07_handling_exceptions/assets/fonts/Menlo-Bold.woff
--------------------------------------------------------------------------------
/07_handling_exceptions/assets/fonts/Menlo-BoldItalic.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Code-Institute-Solutions/API_walkthrough/9cf1796a31accfe2a0b03ba8867b56a5f3d1fccc/07_handling_exceptions/assets/fonts/Menlo-BoldItalic.woff
--------------------------------------------------------------------------------
/07_handling_exceptions/assets/fonts/Menlo-Italic.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Code-Institute-Solutions/API_walkthrough/9cf1796a31accfe2a0b03ba8867b56a5f3d1fccc/07_handling_exceptions/assets/fonts/Menlo-Italic.woff
--------------------------------------------------------------------------------
/07_handling_exceptions/assets/fonts/Menlo-Regular.woff:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/Code-Institute-Solutions/API_walkthrough/9cf1796a31accfe2a0b03ba8867b56a5f3d1fccc/07_handling_exceptions/assets/fonts/Menlo-Regular.woff
--------------------------------------------------------------------------------
/07_handling_exceptions/assets/js/script.js:
--------------------------------------------------------------------------------
1 | const API_KEY = "VZn-Fx2ohpPGHAs_RhP_m6IgxYA";
2 | const API_URL = "https://ci-jshint.herokuapp.com/api";
3 | const resultsModal = new bootstrap.Modal(document.getElementById("resultsModal"));
4 |
5 | document.getElementById("status").addEventListener("click", e => getStatus(e));
6 | document.getElementById("submit").addEventListener("click", e => postForm(e));
7 |
8 | function processOptions(form) {
9 | let optArray = [];
10 |
11 | for (let e of form.entries()) {
12 | if (e[0] === "options") {
13 | optArray.push(e[1]);
14 | }
15 | }
16 |
17 | form.delete("options");
18 |
19 | form.append("options", optArray.join());
20 |
21 | return form;
22 | }
23 |
24 | async function postForm(e) {
25 |
26 | const form = processOptions(new FormData(document.getElementById("checksform")));
27 |
28 | const response = await fetch(API_URL, {
29 | method: "POST",
30 | headers: {
31 | "Authorization": API_KEY,
32 | },
33 | body: form,
34 | });
35 |
36 | const data = await response.json();
37 |
38 | if (response.ok) {
39 | displayErrors(data);
40 | } else {
41 | displayException(data);
42 | throw new Error(data.error);
43 | }
44 |
45 | }
46 |
47 | async function getStatus(e) {
48 |
49 | const queryString = `${API_URL}?api_key=${API_KEY}`;
50 |
51 | const response = await fetch(queryString);
52 |
53 | const data = await response.json();
54 |
55 | if (response.ok) {
56 | displayStatus(data);
57 | } else {
58 | displayException(data);
59 | throw new Error(data.error);
60 | }
61 |
62 | }
63 |
64 | function displayException(data) {
65 |
66 | let heading = `An Exception Occurred
`;
67 |
68 | results = `The API returned status code ${data.status_code}
`;
69 | results += `Error number: ${data.error_no}
`;
70 | results += `Error text: ${data.error}
`;
71 |
72 | document.getElementById("resultsModalTitle").innerText = heading;
73 | document.getElementById("results-content").innerHTML = results;
74 | resultsModal.show();
75 | }
76 |
77 | function displayErrors(data) {
78 |
79 | let results = "";
80 |
81 | let heading = `JSHint Results for ${data.file}`;
82 | if (data.total_errors === 0) {
83 | results = `No errors reported!
`;
84 | } else {
85 | results = `Total Errors: ${data.total_errors}
`;
86 | for (let error of data.error_list) {
87 | results += `At line ${error.line}, `;
88 | results += `column ${error.col}:
`;
89 | results += `${error.error}
`;
90 | }
91 | }
92 |
93 | document.getElementById("resultsModalTitle").innerText = heading;
94 | document.getElementById("results-content").innerHTML = results;
95 | resultsModal.show();
96 | }
97 |
98 | function displayStatus(data) {
99 |
100 | let heading = "API Key Status";
101 | let results = `Your key is valid until
`;
102 | results += `${data.expiry}
`;
103 |
104 | document.getElementById("resultsModalTitle").innerText = heading;
105 | document.getElementById("results-content").innerHTML = results;
106 | resultsModal.show();
107 |
108 | }
--------------------------------------------------------------------------------
/07_handling_exceptions/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
9 |
10 |
11 | JSHint Front End
12 |
13 |
14 |
15 |
16 |
17 |
18 |
JSHinterface
19 |
20 |
21 |
22 |
23 |
24 |
27 |
28 |
29 |
80 |
81 |
82 |
83 |
84 |
85 |
86 |
101 |
102 |
105 |
106 |
107 |
108 |
--------------------------------------------------------------------------------