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