Skip to content

Commit 24ed44e

Browse files
jairomelojairomelo
committed
fix issue with modal conflicting with content section div
1 parent d6d8b2c commit 24ed44e

File tree

1 file changed

+55
-50
lines changed

1 file changed

+55
-50
lines changed

‎chapters/what-is-an-api.qmd

Lines changed: 55 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -11,6 +11,8 @@ format:
1111
lightbox: true
1212
---
1313

14+
[Following code is just for the modal to work]: #
15+
1416
```{=html}
1517
<script>
1618
document.addEventListener("DOMContentLoaded", function() {
@@ -22,6 +24,59 @@ document.addEventListener("DOMContentLoaded", function() {
2224
</script>
2325
```
2426

27+
::: {#mymodal .modal .micromodal-slide aria-hidden="true"}
28+
::: {.modal__overlay tabindex="-1" data-micromodal-close="true"}
29+
::: {.modal__container role="dialog" aria-modal="true" aria-labelledby="mymodal-title"}
30+
31+
<button class="modal__close" aria-label="Close modal" data-micromodal-close></button>
32+
33+
<header>
34+
## Code {#mymodal-title}
35+
</header>
36+
37+
::: {#modal-1-content}
38+
39+
<pre><code>
40+
<span class="html-tag">&lt;script&gt;</span>
41+
<span class="variable">window</span>.<span class="function">getRandomCat</span> = <span class="keyword">async</span> <span class="keyword">function</span> () {
42+
43+
<span class="keyword">const</span> response = <span class="keyword">await</span> <span class="function">fetch</span>(<span class="string">"https://api.thecatapi.com/v1/images/search?size=med&mime_types=jpg&format=json&has_breeds=true&order=RANDOM&page=0&limit=1"</span>);
44+
<span class="keyword">if</span> (!response.ok) <span class="keyword">throw new</span> <span class="variable">Error</span>(<span class="string">"Failed to fetch random cat."</span>);
45+
<span class="keyword">const</span> data = <span class="keyword">await</span> response.<span class="function">json</span>();
46+
47+
<span class="keyword">const</span> cat = data[<span class="number">0</span>];
48+
<span class="keyword">const</span> cat_id = cat.id;
49+
50+
<span class="keyword">const</span> cat_detailed_info = <span class="keyword">await</span> <span class="function">fetch</span>(`<span class="string">https://api.thecatapi.com/v1/images/${cat_id}</span>`);
51+
<span class="keyword">const</span> cat_detailed_info_json = <span class="keyword">await</span> cat_detailed_info.<span class="function">json</span>();
52+
53+
<span class="comment">// Safely access items that might be undefined or empty</span>
54+
<span class="keyword">const</span> breed = cat_detailed_info_json.breeds && cat_detailed_info_json.breeds.length > <span class="number">0</span> ? cat_detailed_info_json.breeds[<span class="number">0</span>].name : <span class="string">"Unknown"</span>;
55+
<span class="keyword">const</span> description = cat_detailed_info_json.breeds && cat_detailed_info_json.breeds.length > <span class="number">0</span> ? cat_detailed_info_json.breeds[<span class="number">0</span>].description : <span class="string">"Unknown"</span>;
56+
57+
<span class="variable">document</span>.<span class="function">getElementById</span>(<span class="string">"cat-image"</span>).innerHTML = `
58+
<span class="html-tag">&lt;div <span class="html-attr">class</span>=<span class="string">"card"</span> <span class="html-attr">style</span>=<span class="string">"max-width: 300px; margin: 15px auto;"</span>&gt;</span>
59+
<span class="html-tag">&lt;img <span class="html-attr">src</span>=<span class="string">"${cat.url}"</span> <span class="html-attr">class</span>=<span class="string">"card-img-top"</span> <span class="html-attr">alt</span>=<span class="string">"Random Cat"</span>&gt;</span>
60+
<span class="html-tag">&lt;div <span class="html-attr">class</span>=<span class="string">"card-body"</span>&gt;</span>
61+
<span class="html-tag">&lt;h5 <span class="html-attr">class</span>=<span class="string">"card-title"</span>&gt;</span>Breed: ${breed}<span class="html-tag">&lt;/h5&gt;</span>
62+
<span class="html-tag">&lt;p <span class="html-attr">class</span>=<span class="string">"card-text"</span>&gt;</span>${description}<span class="html-tag">&lt;/p&gt;</span>
63+
<span class="html-tag">&lt;/div&gt;</span>
64+
<span class="html-tag">&lt;/div&gt;</span>
65+
`;
66+
};
67+
<span class="html-tag">&lt;/script&gt;</span>
68+
<span class="html-tag">&lt;button <span class="html-attr">onclick</span>=<span class="string">"getRandomCat()"</span> <span class="html-attr">class</span>=<span class="string">"btn btn-primary"</span> <span class="html-attr">style</span>=<span class="string">"padding: 10px 20px; font-size: 16px; display: block; margin: 0 auto;"</span>&gt;</span>Click here to get a random cat :)<span class="html-tag">&lt;/button&gt;</span>
69+
<span class="html-tag">&lt;div <span class="html-attr">id</span>=<span class="string">"cat-image"</span> <span class="html-attr">style</span>=<span class="string">"margin-top: 15px;"</span>&gt;</span><span class="html-tag">&lt;/div&gt;</span>
70+
</code></pre>
71+
72+
:::
73+
74+
:::
75+
:::
76+
:::
77+
78+
[End of modal code]: #
79+
2580
An API (Application Programming Interface) is a set of rules and protocols enabling software programs to communicate and share information. While the term is often associated with "web APIs," it encompasses a broader concept. For instance, an API might allow a library to share its collection data with a museum or enable a weather service to provide updates to a news organization. APIs operate based on predefined rules set by developers, specifying how data can be accessed and used. While some APIs are public, most are internal, facilitating communication between systems within an organization.
2681

2782
## Using an API
@@ -180,53 +235,3 @@ APIs are not just tools for developers—they hold immense potential for researc
180235
:::
181236

182237

183-
:::::: {#mymodal .modal .micromodal-slide aria-hidden="true"}
184-
::::: {.modal__overlay tabindex="-1" data-micromodal-close="true"}
185-
:::: {.modal__container role="dialog" aria-modal="true" aria-labelledby="mymodal-title"}
186-
187-
<button class="modal__close" aria-label="Close modal" data-micromodal-close></button>
188-
189-
<header>
190-
## Code {#mymodal-title}
191-
</header>
192-
193-
::: {#modal-1-content}
194-
195-
<pre><code>
196-
<span class="html-tag">&lt;script&gt;</span>
197-
<span class="variable">window</span>.<span class="function">getRandomCat</span> = <span class="keyword">async</span> <span class="keyword">function</span> () {
198-
199-
<span class="keyword">const</span> response = <span class="keyword">await</span> <span class="function">fetch</span>(<span class="string">"https://api.thecatapi.com/v1/images/search?size=med&mime_types=jpg&format=json&has_breeds=true&order=RANDOM&page=0&limit=1"</span>);
200-
<span class="keyword">if</span> (!response.ok) <span class="keyword">throw new</span> <span class="variable">Error</span>(<span class="string">"Failed to fetch random cat."</span>);
201-
<span class="keyword">const</span> data = <span class="keyword">await</span> response.<span class="function">json</span>();
202-
203-
<span class="keyword">const</span> cat = data[<span class="number">0</span>];
204-
<span class="keyword">const</span> cat_id = cat.id;
205-
206-
<span class="keyword">const</span> cat_detailed_info = <span class="keyword">await</span> <span class="function">fetch</span>(`<span class="string">https://api.thecatapi.com/v1/images/${cat_id}</span>`);
207-
<span class="keyword">const</span> cat_detailed_info_json = <span class="keyword">await</span> cat_detailed_info.<span class="function">json</span>();
208-
209-
<span class="comment">// Safely access items that might be undefined or empty</span>
210-
<span class="keyword">const</span> breed = cat_detailed_info_json.breeds && cat_detailed_info_json.breeds.length > <span class="number">0</span> ? cat_detailed_info_json.breeds[<span class="number">0</span>].name : <span class="string">"Unknown"</span>;
211-
<span class="keyword">const</span> description = cat_detailed_info_json.breeds && cat_detailed_info_json.breeds.length > <span class="number">0</span> ? cat_detailed_info_json.breeds[<span class="number">0</span>].description : <span class="string">"Unknown"</span>;
212-
213-
<span class="variable">document</span>.<span class="function">getElementById</span>(<span class="string">"cat-image"</span>).innerHTML = `
214-
<span class="html-tag">&lt;div <span class="html-attr">class</span>=<span class="string">"card"</span> <span class="html-attr">style</span>=<span class="string">"max-width: 300px; margin: 15px auto;"</span>&gt;</span>
215-
<span class="html-tag">&lt;img <span class="html-attr">src</span>=<span class="string">"${cat.url}"</span> <span class="html-attr">class</span>=<span class="string">"card-img-top"</span> <span class="html-attr">alt</span>=<span class="string">"Random Cat"</span>&gt;</span>
216-
<span class="html-tag">&lt;div <span class="html-attr">class</span>=<span class="string">"card-body"</span>&gt;</span>
217-
<span class="html-tag">&lt;h5 <span class="html-attr">class</span>=<span class="string">"card-title"</span>&gt;</span>Breed: ${breed}<span class="html-tag">&lt;/h5&gt;</span>
218-
<span class="html-tag">&lt;p <span class="html-attr">class</span>=<span class="string">"card-text"</span>&gt;</span>${description}<span class="html-tag">&lt;/p&gt;</span>
219-
<span class="html-tag">&lt;/div&gt;</span>
220-
<span class="html-tag">&lt;/div&gt;</span>
221-
`;
222-
};
223-
<span class="html-tag">&lt;/script&gt;</span>
224-
<span class="html-tag">&lt;button <span class="html-attr">onclick</span>=<span class="string">"getRandomCat()"</span> <span class="html-attr">class</span>=<span class="string">"btn btn-primary"</span> <span class="html-attr">style</span>=<span class="string">"padding: 10px 20px; font-size: 16px; display: block; margin: 0 auto;"</span>&gt;</span>Click here to get a random cat :)<span class="html-tag">&lt;/button&gt;</span>
225-
<span class="html-tag">&lt;div <span class="html-attr">id</span>=<span class="string">"cat-image"</span> <span class="html-attr">style</span>=<span class="string">"margin-top: 15px;"</span>&gt;</span><span class="html-tag">&lt;/div&gt;</span>
226-
</code></pre>
227-
228-
:::
229-
230-
::::
231-
:::::
232-
::::::

0 commit comments

Comments
 (0)