1<script>
2 import { onMount } from "svelte";
3
4 const apiKEY = "YOUR-API-KEY";
5 const dataUrl = `https://newsapi.org/v2/everything?q=javascript&sortBy=publishedAt&apiKey=${apiKEY}`;
6 let items = [];
7 const fetchData = async () => {
8
9
10 const response = await fetch(dataUrl);
11 const data = await response.json();
12 console.log(data);
13 items = data["articles"];
14 };
15
16 onMount(fetchData());
17
18</script>
19<div class="container">
20
21 {#each items as item}
22 <div class="card">
23 <img src="{item.urlToImage}">
24 <div class="card-body">
25 <h3>{item.title}</h3>
26 <p> {item.description} </p>
27 <a href="{item.url}">Read</a>
28 </div>
29 </div>
30 {/each}
31
32</div>
33
34<style>
35h1 {
36 color: purple;
37 font-family: 'kalam';
38}
39.container {
40 display: grid;
41 grid-template-columns: repeat(auto-fill, minmax(305px, 1fr));
42 grid-gap: 15px;
43}
44.container > .card img {
45 max-width: 100%;
46}
47</style>
48