9- Display meals in DOM with image and hover effect
10- Click on meal and see the details
11- Click on generate button and fetch & display a random meal
12
8// Search by song or artist
9async function searchSongs(term) {
10 const res = await fetch(`${apiURL}/suggest/${term}`);
11 const data = await res.json();
12
49// Get prev and next songs
50async function getMoreSongs(url) {
51 const res = await fetch(`https://cors-anywhere.herokuapp.com/${url}`);
52 const data = await res.json();
53
57// Get lyrics for song
58async function getLyrics(artist, songTitle) {
59 const res = await fetch(`${apiURL}/v1/${artist}/${songTitle}`);
60 const data = await res.json();
61
6
7- Display UI with song/artist input
8- Fetch songs/artists and put in DOM
9- Add pagination
10- Add get lyrics functionality and display in DOM
6let page = 1;
7
8// Fetch posts from API
9async function getPosts() {
10 const res = await fetch(
11 `https://jsonplaceholder.typicode.com/posts?_limit=${limit}&_page=${page}`
12 );
36}
37
38// Show loader & fetch more posts
39function showLoading() {
40 loading.classList.add('show');
1## Infinite Scrolling & Filter
2
3Display blog posts from [jsonplaceholder](https://jsonplaceholder.typicode.com) and add infinite scroll to fetch posts and also add filter box
4
5## Project Specifications
6
7- Create UI & custom CSS loader animation
8- Fetch initial posts from API and display
9- Scroll down, show loader and fetch next set of posts
10- Add filtering for fetched posts
11
9 const currency_one = currencyEl_one.value;
10 const currency_two = currencyEl_two.value;
11 fetch("https://open.exchangerate-api.com/v6/latest")
12 .then(res => res.json())
13 .then(data => {
6
7- Display UI with 2 select lists for countries and 2 inputs for amounts
8- Fetch exchange rates from API (https://api.exchangerate-api.com)
9- Display the values for both countries
10- Update values on amount change
12getRandomUser();
13
14// Fetch random user and add money
15async function getRandomUser() {
16 const res = await fetch('https://randomuser.me/api');
17 const data = await res.json();
18
5## Project Specifications
6
7- Fetch random users from the [randomuser.me](https://randomuser.me) API
8- Use forEach() to loop and output user/wealth
9- Use map() to double wealth
5async function servePublicFile(path: string): Promise<Response> {
6 const url = new URL("./public/" + path, import.meta.url);
7 const text = await (await fetch(url, {
8 headers: {
9 "User-Agent": "", // to transpile TS to JS