7- Create and style landing page
8- Style side nav and modal
9- Add functionality to make menu open/close on button click
10- Add functionality to make modal open/close on button click
11
36
37// Create all cards
38function createCards() {
39 cardsData.forEach((data, index) => createCard(data, index));
40}
41
42// Create a single card in DOM
43function createCard(data, index) {
44 const card = document.createElement('div');
45 card.classList.add('card');
75
76// Show number of cards
77function updateCurrentText() {
78 currentEl.innerText = `${currentActiveCard + 1}/${cardsEl.length}`;
79}
80
81// Get cards from local storage
82function getCardsData() {
83 const cards = JSON.parse(localStorage.getItem('cards'));
84 return cards === null ? [] : cards;
86
87// Add card to local storage
88function setCardsData(cards) {
89 localStorage.setItem('cards', JSON.stringify(cards));
90 window.location.reload();
1export default function server(request: Request): Response {
2 return new Response(
3 `<!DOCTYPE html>
7
8// Search meal and fetch from API
9function searchMeal(e) {
10 e.preventDefault();
11
49
50// Fetch meal by ID
51function getMealById(mealID) {
52 fetch(`https://www.themealdb.com/api/json/v1/1/lookup.php?i=${mealID}`)
53 .then(res => res.json())
60
61// Fetch random meal from API
62function getRandomMeal() {
63 // Clear meals and heading
64 mealsEl.innerHTML = '';
75
76// Add meal to DOM
77function addMealToDOM(meal) {
78 const ingredients = [];
79
1export default function server(request: Request): Response {
2 return new Response(
3 `<!DOCTYPE html>
7
8// Search by song or artist
9async function searchSongs(term) {
10 const res = await fetch(`${apiURL}/suggest/${term}`);
11 const data = await res.json();
15
16// Show song and artist in DOM
17function showData(data) {
18 result.innerHTML = `
19 <ul class="songs">
48
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();
56
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();
8- Fetch songs/artists and put in DOM
9- Add pagination
10- Add get lyrics functionality and display in DOM
11
1export default function server(request: Request): Response {
2 return new Response(
3 `<!DOCTYPE html>
7
8// Fetch posts from API
9async function getPosts() {
10 const res = await fetch(
11 `https://jsonplaceholder.typicode.com/posts?_limit=${limit}&_page=${page}`
18
19// Show posts in DOM
20async function showPosts() {
21 const posts = await getPosts();
22
37
38// Show loader & fetch more posts
39function showLoading() {
40 loading.classList.add('show');
41
51
52// Filter posts by input
53function filterPosts(e) {
54 const term = e.target.value.toUpperCase();
55 const posts = document.querySelectorAll('.post');
1export default function server(request: Request): Response {
2 return new Response(
3 `<!DOCTYPE html>