Public
Edited
Jul 13, 2023
//all this script goes in the app.svelte file
<script>
</script>
<h1> Welcome</h1>
<div> today is {new Date().toLocaleDateString()}
<div>
//in app.svlete file
<h1>
h1 in the component
</h1>
<style>
h1{
color:skyblue;
}
</style?
//in index.html file
<!DOCTYPE html>
<html>
<head>
<title>Svelte sandbox</title>
</head>
<body>
<h1> this is an external h1 </h1>
<div id="app"></div>
<script src="index.js></script>"
</body>
</html>
//in app.svelte file
//in the script tag
<script>
const booleanExpresion=true
</script>
//the html section
<div>
{#if booleanExpression}
<p>This is true!</p>
{/if}
</div>
//in app.svelte file
<script>
const fruits=[{
name:'apple',
color:'red'
},{
name:'banana',
color:'yellow'
},{
name:'orange',
color:'orange'
}]
</script>
<div>
{#each fruits as fruit}
<p>{fruit.name}s are {fruit.color}</p>
{/each}
//on app.svelte file
<script>
let count=0
</script>
<button on:click={()=>{count=count+1}}>
count:{count}
</button>
//reference:
https://2019.wattenberger.com/blog/d3-interactive-charts#native-trigger-events
//on app.svelte file
<script>
let count=0
$: doubleCount=count*2
</script>
<button on:click={()=>{
count=count+1
}}>
count:{count}
</button>
<div>
doubleCount:{doubleCount}
</div>
//in app.svlete file
<script>
import Button from "./Button.svelte"
let count=0
</script>
<div>
parent count:{count}
</div>
<Button count={count}/>
//in button.svelte file
<script>
export let count
</script>
<button on:click={() =>{
count=count +1
}}>
button count:{count}
</button>
//in app.svelte file
<script>
import Text from "./Text.svelte"
</script>
<div/>
<Text/>
<style>
div{
width:100%;
height:300px;
background:skyblue;
}
</style>
//in text.svelte file
<script>
</script>
<div>
Text
</div>
<style>
div{
position:absolute;
top:0;
left:0;
pointer-events:none;
}
</style>
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
