Im getting an error and wanted to know how I can fix this I will share the codes with you for the two files its showing. index.html file Cocktails cocktails API app.js file import presentDrinks from './src/presentDrinks.js'; import './src/searchForm.js'; const URL = 'http://www.thecocktaildb.com/api/json/v1/1/search.php?s=a'; window.addEventListener('DOMContentLoaded',()=>{ presentDrinks(URL); });
Im getting an error and wanted to know how I can fix this I will share the codes with you for the two files its showing.
index.html file
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cocktails</title>
<link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon">
<link
rel="stylesheet"
href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/css/all.min.css"
/>
<!-- css -->
<link rel="stylesheet" href="./styles.css" />
</head>
<body>
<form class="search-form">
<h2>cocktails API</h2>
<input type="text" placeholder="search your favorite"
name="drink"/>
</form>
<section class="section cocktails">
<article class="loading">
<img src="./loading.gif" alt="loading">
</article>
<h2 class="title"></h2>
<div class="section-center">
</div>
</section>
<script type="module" src="./app.js"></script>
</body>
</html>
app.js file
import presentDrinks from './src/presentDrinks.js';
import './src/searchForm.js';
const URL = 'http://www.thecocktaildb.com/api/json/v1/1/search.php?s=a';
window.addEventListener('DOMContentLoaded',()=>{
presentDrinks(URL);
});
Step by step
Solved in 2 steps with 1 images
