Feature/provide curriculum ap is

common-content/en/module/js3/api/index.md

@@ -0,0 +1,62 @@
++++
+title = '🌐 API Request examples'
+headless = true
+time = 10
+facilitation = false
+emoji= '🧩'
+[objectives]
+1="GET Data from API's"
+2="POST Data to API's"
++++
+
+Let's try more API interactions
+
+To get song details of all songs we can make a `GET` request to the songs page
+
+```
+const url = 'https://curriculum.codeyourfuture.io/api/songs';
+
+fetch(url).then(response => response.json())
+    .then(data => console.log('All songs:', data));
+```
+
+Next, to retrieve details only for Adele's "Rolling in the Deep" we can send a `GET` request to the song's page
+
+This time, the URL can include the ID of the song we are interested in
+
+```
+const url = 'https://curriculum.codeyourfuture.io/api/song/5';
+
+fetch(url).then(response => response.json())
+    .then(data => console.log('Song No 5:', data));
+```
+
+To update the popularity of a song, API's might use a `POST` method to the song's page with the song's ID included in the URL
+
+As a response, it will display the newly updated details
+```
+const url = 'https://curriculum.codeyourfuture.io/api/song/3';
+
+const updateRequest = {
+    method: 'POST',
+    headers: {
+        'Content-Type': 'application/json',
+    },
+    body: JSON.stringify({
+        popularity: 97
+    }),
+};
+
+fetch(url, updateRequest)
+    .then(response => response.json())
+    .then(updatedData => console.log('Updated Song No 3:', updatedData));
+```
+
+Note please that, each API can utilize various types of {{<tooltip title="HTTP request methods">}}
+GET
+POST
+PUT
+DELETE
+PATCH<br>
+<a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Methods" target="_blank">and more...</a>
+{{</tooltip>}} to perform CRUD operations on data, and they may require you to include a different type of `Authentication` methods for security reasons.

common-theme/layouts/_default/apijson.json

@@ -0,0 +1,6 @@
+{{- $jsonFile := readFile "data/songs.json" -}}
+{{- $jsonData := (jsonify $jsonFile) -}}
+{{- if $jsonData -}}
+  {{- $.Scratch.Add "json" $jsonData -}}
+{{- end -}}
+{{- printf "%s" ($.Scratch.Get "json") -}}

org-cyf/config/issues-are-cached-and-incomplete/config.toml

@@ -9,4 +9,4 @@ issuesorgapi = "https://api.github.com/repos/CodeYourFuture/"
 [caches.getjson]
 # Cache JSON responses because making fetches is slow when iterating.
 # This means updates to issues (or newly created ones) won't be picked up when rebuilding.
-maxAge = "4h"
+maxAge = "4h"

org-cyf/content/api/songs/index.md

@@ -0,0 +1,5 @@
+---
+layout: "apijson"
+outputs:
+- json
+---

org-cyf/content/js3/sprints/3/prep/index.md

@@ -25,6 +25,9 @@ src="module/js3/callbacks"
 name="Using .fetch()"
 src="module/js3/using-fetch"
 [[blocks]]
+name="API usage"
+src="module/js3/api"
+[[blocks]]
 name="Product MVP and features"
 src="https://cyf-pd.netlify.app/blocks/define-your-products-mvp/readme/"
 +++

org-cyf/data/songs.json

@@ -0,0 +1,52 @@
+[
+    {
+        "id": "1",
+        "title": "Shape of You",
+        "artist": "Ed Sheeran",
+        "album": "÷ (Divide)",
+        "genre": "Pop",
+        "release_date": "2017-01-06",
+        "duration_ms": 233712,
+        "popularity": 90
+    },
+    {
+        "id": "2",
+        "title": "Blinding Lights",
+        "artist": "The Weeknd",
+        "album": "After Hours",
+        "genre": "R&B",
+        "release_date": "2019-11-29",
+        "duration_ms": 200040,
+        "popularity": 95
+    },
+    {
+        "id": "3",
+        "title": "Bohemian Rhapsody",
+        "artist": "Queen",
+        "album": "A Night at the Opera",
+        "genre": "Rock",
+        "release_date": "1975-10-31",
+        "duration_ms": 354320,
+        "popularity": 92
+    },
+    {
+        "id": "4",
+        "title": "Dance Monkey",
+        "artist": "Tones and I",
+        "album": "The Kids Are Coming",
+        "genre": "Pop",
+        "release_date": "2019-08-09",
+        "duration_ms": 209754,
+        "popularity": 88
+    },
+    {
+        "id": "5",
+        "title": "Rolling in the Deep",
+        "artist": "Adele",
+        "album": "21",
+        "genre": "Pop",
+        "release_date": "2010-11-29",
+        "duration_ms": 228293,
+        "popularity": 89
+    }
+]