CINXE.COM

<!DOCTYPE html><html lang="en" class="scroll-smooth antialiased snow"> <head><meta name="astro-view-transitions-enabled" content="true"><meta name="astro-view-transitions-fallback" content="animate"><meta charset="utf-8"><meta name="viewport" content="width=device-width"><title>Getting started with Svelte JS | Skcript</title><meta name="theme-color" content="#F10600"><meta name="msapplication-TileColor" content="#F10600"><link rel="preload" href="/fonts/skcripttype/SkcriptType-Regular.woff2" as="font" type="font/woff2" crossorigin><link rel="preload" href="/fonts/skcripttype/SkcriptType-SemiBold.woff2" as="font" type="font/woff2" crossorigin><link rel="preload" href="/fonts/skcripttype/SkcriptType-Medium.woff2" as="font" type="font/woff2" crossorigin><link rel="preload" href="/fonts/skcripttype/SkcriptType-Bold.woff2" as="font" type="font/woff2" crossorigin><link rel="preload" href="/fonts/skcripttype/SkcriptType-Italic.woff2" as="font" type="font/woff2" crossorigin><link rel="apple-touch-icon" sizes="57x57" href="https://assets.production.skcript.com/skcript/site-assets/images/favicon/apple-icon-57x57.png?v11"><link rel="apple-touch-icon" sizes="60x60" href="https://assets.production.skcript.com/skcript/site-assets/images/favicon/apple-icon-60x60.png?v11"><link rel="apple-touch-icon" sizes="72x72" href="https://assets.production.skcript.com/skcript/site-assets/images/favicon/apple-icon-72x72.png?v11"><link rel="apple-touch-icon" sizes="76x76" href="https://assets.production.skcript.com/skcript/site-assets/images/favicon/apple-icon-76x76.png?v11"><link rel="apple-touch-icon" sizes="114x114" href="https://assets.production.skcript.com/skcript/site-assets/images/favicon/apple-icon-114x114.png?v11"><link rel="apple-touch-icon" sizes="120x120" href="https://assets.production.skcript.com/skcript/site-assets/images/favicon/apple-icon-120x120.png?v11"><link rel="apple-touch-icon" sizes="144x144" href="https://assets.production.skcript.com/skcript/site-assets/images/favicon/apple-icon-144x144.png?v11"><link rel="apple-touch-icon" sizes="152x152" href="https://assets.production.skcript.com/skcript/site-assets/images/favicon/apple-icon-152x152.png?v11"><link rel="apple-touch-icon" sizes="180x180" href="https://assets.production.skcript.com/skcript/site-assets/images/favicon/apple-icon-180x180.png?v11"><link rel="icon" type="image/png" sizes="192x192" href="https://assets.production.skcript.com/skcript/site-assets/images/favicon/android-icon-192x192.png?v11"><meta name="msapplication-TileImage" content="https://assets.production.skcript.com/skcript/site-assets/images/favicon/ms-icon-144x144.png?v11"><link rel="sitemap" href="/sitemap-index.xml"><link rel="canonical" href="https://www.skcript.com/blog/getting-started-with-svelte-js"><meta name="description" content="Svelte is a powerful compiler which any developer can choose for building UIs for the web. Ready-to-use web applications are easily created at a faster pace using svelte as it compiles the code while building the app instead of compiling the code during runtime."><meta property="og:title" content="Getting started with Svelte JS | Skcript"><meta property="og:type" content="website"><meta property="og:url" content="https://www.skcript.com/blog/getting-started-with-svelte-js"><meta property="og:locale" content="en"><meta property="og:description" content="Svelte is a powerful compiler which any developer can choose for building UIs for the web. Ready-to-use web applications are easily created at a faster pace using svelte as it compiles the code while building the app instead of compiling the code during runtime."><meta property="og:site_name" content="Skcript"><meta property="og:image" content="https://assets.production.skcript.com/skcript/site-assets/images/og.jpg"><meta property="og:image:alt" content="Build great products."><meta name="twitter:card" content="summary_large_image"><meta name="twitter:site" content="SkcriptHQ"><meta name="twitter:title" content="Getting started with Svelte JS | Skcript"><meta name="twitter:description" content="Svelte is a powerful compiler which any developer can choose for building UIs for the web. Ready-to-use web applications are easily created at a faster pace using svelte as it compiles the code while building the app instead of compiling the code during runtime."><meta name="twitter:image" content="https://assets.production.skcript.com/skcript/site-assets/images/og.jpg"><meta name="twitter:image:alt" content="Build great products."><script defer src="https://a.skcript.com/script.js" data-website-id="cdb5b874-14c5-43ee-bcc0-c63ca82f51c7"></script><link rel="stylesheet" href="/_astro/_slug_.CtL0deT-.css"> <style>.categories[data-astro-cid-7jjqptxk]{display:flex;gap:.5rem;margin-top:1rem}.category-tag[data-astro-cid-7jjqptxk]{background-color:var(--snow-alt);padding:.25rem .5rem;border-radius:.25rem;font-size:.8rem;text-decoration:none;color:var(--carbon)}.category-tag[data-astro-cid-7jjqptxk]:hover{color:var(--text-link);transition-duration:.2s} </style><script type="module" src="/_astro/hoisted.BScVxmeO.js"></script></head> <body> <div class="bg-[rgba(255, 255, 255, 0.85)] sticky top-0 z-[2] w-screen saturate-[180%] backdrop-blur-[20px] md:block"> <style>astro-island,astro-slot,astro-static-slot{display:contents}</style><script>(()=>{var e=async t=>{await(await t())()};(self.Astro||(self.Astro={})).load=e;window.dispatchEvent(new Event("astro:load"));})();;(()=>{var A=Object.defineProperty;var g=(i,o,a)=>o in i?A(i,o,{enumerable:!0,configurable:!0,writable:!0,value:a}):i[o]=a;var d=(i,o,a)=>g(i,typeof o!="symbol"?o+"":o,a);{let i={0:t=>m(t),1:t=>a(t),2:t=>new RegExp(t),3:t=>new Date(t),4:t=>new Map(a(t)),5:t=>new Set(a(t)),6:t=>BigInt(t),7:t=>new URL(t),8:t=>new Uint8Array(t),9:t=>new Uint16Array(t),10:t=>new Uint32Array(t),11:t=>1/0*t},o=t=>{let[l,e]=t;return l in i?i[l](e):void 0},a=t=>t.map(o),m=t=>typeof t!="object"||t===null?t:Object.fromEntries(Object.entries(t).map(([l,e])=>[l,o(e)]));class y extends HTMLElement{constructor(){super(...arguments);d(this,"Component");d(this,"hydrator");d(this,"hydrate",async()=>{var b;if(!this.hydrator||!this.isConnected)return;let e=(b=this.parentElement)==null?void 0:b.closest("astro-island[ssr]");if(e){e.addEventListener("astro:hydrate",this.hydrate,{once:!0});return}let c=this.querySelectorAll("astro-slot"),n={},h=this.querySelectorAll("template[data-astro-template]");for(let r of h){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("data-astro-template")||"default"]=r.innerHTML,r.remove())}for(let r of c){let s=r.closest(this.tagName);s!=null&&s.isSameNode(this)&&(n[r.getAttribute("name")||"default"]=r.innerHTML)}let p;try{p=this.hasAttribute("props")?m(JSON.parse(this.getAttribute("props"))):{}}catch(r){let s=this.getAttribute("component-url")||"<unknown>",v=this.getAttribute("component-export");throw v&&(s+=` (export ${v})`),console.error(`[hydrate] Error parsing props for component ${s}`,this.getAttribute("props"),r),r}let u;await this.hydrator(this)(this.Component,p,n,{client:this.getAttribute("client")}),this.removeAttribute("ssr"),this.dispatchEvent(new CustomEvent("astro:hydrate"))});d(this,"unmount",()=>{this.isConnected||this.dispatchEvent(new CustomEvent("astro:unmount"))})}disconnectedCallback(){document.removeEventListener("astro:after-swap",this.unmount),document.addEventListener("astro:after-swap",this.unmount,{once:!0})}connectedCallback(){if(!this.hasAttribute("await-children")||document.readyState==="interactive"||document.readyState==="complete")this.childrenConnectedCallback();else{let e=()=>{document.removeEventListener("DOMContentLoaded",e),c.disconnect(),this.childrenConnectedCallback()},c=new MutationObserver(()=>{var n;((n=this.lastChild)==null?void 0:n.nodeType)===Node.COMMENT_NODE&&this.lastChild.nodeValue==="astro:end"&&(this.lastChild.remove(),e())});c.observe(this,{childList:!0}),document.addEventListener("DOMContentLoaded",e)}}async childrenConnectedCallback(){let e=this.getAttribute("before-hydration-url");e&&await import(e),this.start()}async start(){let e=JSON.parse(this.getAttribute("opts")),c=this.getAttribute("client");if(Astro[c]===void 0){window.addEventListener(`astro:${c}`,()=>this.start(),{once:!0});return}try{await Astro[c](async()=>{let n=this.getAttribute("renderer-url"),[h,{default:p}]=await Promise.all([import(this.getAttribute("component-url")),n?import(n):()=>()=>{}]),u=this.getAttribute("component-export")||"default";if(!u.includes("."))this.Component=h[u];else{this.Component=h;for(let f of u.split("."))this.Component=this.Component[f]}return this.hydrator=p,this.hydrate},e,this)}catch(n){console.error(`[astro-island] Error hydrating ${this.getAttribute("component-url")}`,n)}}attributeChangedCallback(){this.hydrate()}}d(y,"observedAttributes",["props"]),customElements.get("astro-island")||customElements.define("astro-island",y)}})();</script><astro-island uid="2lIWHz" prefix="r0" component-url="/_astro/NavBar.ChbyzrH3.js" component-export="default" renderer-url="/_astro/client.BrkTfP91.js" props="{}" ssr="" client="load" opts="{"name":"NavBar","value":true}" await-children=""><nav aria-label="Main" data-orientation="horizontal" dir="ltr"><div style="position:relative"><ul data-orientation="horizontal" class="container flex h-[50px] list-none items-center justify-between" dir="ltr"><div class="hidden items-center gap-x-4 md:flex"><li><a class="block select-none rounded-[4px] py-2 text-[13px] font-medium leading-none no-underline outline-none hover:opacity-80" href="/s1" style="color:var(--carbon)" data-radix-collection-item="">S1 EDGE</a></li><li><a class="block select-none rounded-[4px] py-2 text-[13px] font-medium leading-none no-underline outline-none hover:opacity-80" href="/company" style="color:var(--carbon)" data-radix-collection-item="">Company</a></li><li><a class="block select-none rounded-[4px] py-2 text-[13px] font-medium leading-none no-underline outline-none hover:opacity-80" href="/careers" style="color:var(--carbon)" data-radix-collection-item="">Careers</a></li></div><div class="absolute left-1/2 flex -translate-x-1/2 transform items-center"><li><a href="/" aria-label="Click on this link to go to the homepage" data-umami-event="header-logo" class="block py-1"><svg width="135" height="22.5" viewBox="0 0 572 90" xmlns="http://www.w3.org/2000/svg"><g fill="none" fill-rule="evenodd"><polygon fill="var(--accent)" points="48.433 2.216 0 33.663 7.813 56.462 34.99 51.572 11.437 67.036 19.307 90 42.543 87.043 90 55.841 82.13 32.877 57.435 37.632 78.648 22.716 70.863 0"></polygon><g transform="translate(114 33)" fill="var(--carbon)"><path d="M35.048 57C55.065 57 67 52.621 67 38.956 67 24.989 55.065 23.026 36.559 21.592L33.462 21.366C21.301 20.535 19.262 19.478 19.262 16.685 19.262 14.344 21.603 12.834 31.196 12.834 41.393 12.834 46.303 14.344 46.303 18.497L64.734 18.497C64.054 6.493 52.648 0 31.347 0 12.69 0 0.831 5.587 0.831 16.685 0.831 28.311 9.971 33.445 30.743 34.653L33.387 34.804C46.53 35.634 48.569 36.314 48.569 39.636 48.569 42.505 46.303 44.166 34.293 44.166 22.51 44.166 18.431 41.523 18.431 37.597L0 37.597C0.68 51.791 13.219 57 35.048 57Z"></path><polygon points="74 55 91.736 55 91.736 43.719 103.736 33.565 120.415 55 142 55 116.491 22.735 142 1 115.887 1 91.736 22.435 91.736 1 74 1"></polygon><path d="M177.19 57C197.371 57 211.558 47.714 213 33.672L194.033 33.672C193.122 38.428 186.597 42.052 177.19 42.052 166.492 42.052 159.588 36.54 159.588 28.387 159.588 20.309 166.492 14.873 177.19 14.873 186.597 14.873 193.122 18.497 194.033 23.177L213 23.177C211.558 9.286 197.371 0 177.19 0 155.339 0 141 11.174 141 28.387 141 45.751 155.339 57 177.19 57Z"></path><path d="M220 55L237.625 55 237.625 39.733 262.15 39.733C266.95 39.733 268.3 41.162 268.3 45.975L268.3 55 285.925 55 285.925 43.117C285.925 36.499 281.575 32.513 274.675 32.061 281.95 29.88 286 24.992 286 17.546 286 6.641 278.65 1 263.875 1L220 1 220 55ZM237.625 25.593L237.625 15.139 259.675 15.139C264.4 15.139 267.625 15.967 267.625 20.329 267.625 24.691 264.4 25.593 259.675 25.593L237.625 25.593Z"></path><polygon points="295 55 313 55 313 1 295 1"></polygon><path d="M323 55L340.694 55 340.694 41.613 365.315 41.613C378.793 41.613 387 34.017 387 21.306 387 8.521 378.793 1 365.315 1L323 1 323 55ZM340.694 26.797L340.694 15.891 361.099 15.891C366.144 15.891 368.553 16.869 368.553 21.306 368.553 25.744 366.144 26.797 361.099 26.797L340.694 26.797Z"></path><polygon points="394 15.891 417.232 15.891 417.232 55 434.843 55 434.843 15.891 458 15.891 458 1 394 1"></polygon></g></g></svg></a></li></div><div class="hidden items-center gap-x-4 md:flex"><li><a class="block select-none rounded-[4px] py-2 text-[13px] font-medium leading-none no-underline outline-none hover:opacity-80" href="/blog" data-umami-event="header-blog" style="color:var(--carbon)" data-radix-collection-item="">Blog</a></li><li><a class="block select-none rounded-[4px] py-2 text-[13px] font-medium leading-none no-underline outline-none hover:opacity-80" href="/newsroom" data-umami-event="header-newsroom" style="color:var(--carbon)" data-radix-collection-item="">Newsroom</a></li><li><a class="block select-none rounded-[4px] py-2 text-[13px] font-medium leading-none no-underline outline-none hover:opacity-80" href="/contact" data-umami-event="header-contact" style="color:var(--carbon)" data-radix-collection-item="">Contact</a></li></div><div class="md:hidden"><li><button id="radix-:r0R0:-trigger-radix-:r0R13:" data-state="closed" aria-expanded="false" aria-controls="radix-:r0R0:-content-radix-:r0R13:" class="p-2" aria-label="Toggle mobile menu" style="color:var(--carbon)" data-radix-collection-item=""><div class="relative h-4 w-4"><svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="absolute h-4 w-4 transition-all duration-300 rotate-0 opacity-100"><path d="M1.5 3C1.22386 3 1 3.22386 1 3.5C1 3.77614 1.22386 4 1.5 4H13.5C13.7761 4 14 3.77614 14 3.5C14 3.22386 13.7761 3 13.5 3H1.5ZM1 7.5C1 7.22386 1.22386 7 1.5 7H13.5C13.7761 7 14 7.22386 14 7.5C14 7.77614 13.7761 8 13.5 8H1.5C1.22386 8 1 7.77614 1 7.5ZM1 11.5C1 11.2239 1.22386 11 1.5 11H13.5C13.7761 11 14 11.2239 14 11.5C14 11.7761 13.7761 12 13.5 12H1.5C1.22386 12 1 11.7761 1 11.5Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg><svg width="15" height="15" viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg" class="absolute h-4 w-4 transition-all duration-300 -rotate-90 opacity-0"><path d="M12.8536 2.85355C13.0488 2.65829 13.0488 2.34171 12.8536 2.14645C12.6583 1.95118 12.3417 1.95118 12.1464 2.14645L7.5 6.79289L2.85355 2.14645C2.65829 1.95118 2.34171 1.95118 2.14645 2.14645C1.95118 2.34171 1.95118 2.65829 2.14645 2.85355L6.79289 7.5L2.14645 12.1464C1.95118 12.3417 1.95118 12.6583 2.14645 12.8536C2.34171 13.0488 2.65829 13.0488 2.85355 12.8536L7.5 8.20711L12.1464 12.8536C12.3417 13.0488 12.6583 13.0488 12.8536 12.8536C13.0488 12.6583 13.0488 12.3417 12.8536 12.1464L8.20711 7.5L12.8536 2.85355Z" fill="currentColor" fill-rule="evenodd" clip-rule="evenodd"></path></svg></div></button></li></div></ul></div><div class="perspective-[2000px] absolute left-0 top-full flex w-full justify-center"></div></nav></astro-island> </div> <main> <div class="bg-alternative py-10 md:py-20" data-astro-cid-7jjqptxk> <div class="container grid grid-cols-12 gap-4" data-astro-cid-7jjqptxk> <div class="col-span-12 flex flex-col gap-2 md:col-span-6" data-astro-cid-7jjqptxk> <div class="flex items-center gap-2" data-astro-cid-7jjqptxk> <nav aria-label="Breadcrumb" class="mb-4"> <ol class="flex flex-wrap items-center space-x-2 text-xs"> <li class="flex items-center"> <a href="https://www.skcript.com" class="hover:text-type-primary text-type-alternative"> Skcript </a> </li><li class="flex items-center"> <span class="mr-1 text-type-alternative">/</span> <span class="text-type-alternative" aria-current="page"> Blog </span> </li> </ol> </nav> </div> <div class="text-xs text-type-alternative" data-astro-cid-7jjqptxk> <time datetime="2019-09-17T18:30:00.000Z"> Tue, Sep 17, 2019 </time> </div> <h1 class="article-title" data-astro-cid-7jjqptxk>Getting started with Svelte JS</h1> <div class="pt-2" data-astro-cid-7jjqptxk> </div> <div class="categories" data-astro-cid-7jjqptxk> </div> </div> <div class="col-span-12 md:col-span-6" data-astro-cid-7jjqptxk> <picture data-astro-cid-7jjqptxk> <source srcset="/_astro/getting-started-with-svelte-js@1.5x_Z1lgAgs.avif" type="image/avif"><source srcset="/_astro/getting-started-with-svelte-js@1.5x_ZQgwKe.webp" type="image/webp"> <img src="/_astro/getting-started-with-svelte-js@1.5x_Z1oLv6M.jpg" alt="Getting started with Svelte JS" decoding="async" loading="lazy" class="rounded-lg" data-astro-cid-7jjqptxk width="1055" height="589"> </picture> </div> </div> </div> <div class="bg-snow" data-astro-cid-7jjqptxk> <article class="container py-10" data-astro-cid-7jjqptxk> <div class="skcript-article skcript-content mx-auto max-w-3xl px-4" data-astro-cid-7jjqptxk> <p>React, Angular and Vue developers would know the packages, node_modules, dependencies they would have to maintain and compile in their app during runtime. This would definitely pull down the speed of the application by a very few milliseconds. Yes, it is very small, but combine every decrease in speed and take a look. We would have lost a couple of seconds, which is crucial. So why don’t we do everything when building the app itself. Instead of compiling at runtime, why don’t we build everything ready before rendering?</p> <p><img src="https://media.giphy.com/media/xT0xem7ZlZ2DOYqpG0/giphy.gif" alt=""/></p> <p>That’s where <strong>SvelteJS</strong> comes in handy. Svelte is not a framework, but rather a compiler. Svelte <strong>does not use the virtual DOM,</strong> but rather makes use of the real DOM. Svelte takes advantage of this and is lightning fast. So let’s dive a little deeper into creating a simple Todo List using svelte.</p> <p>In the app, we will take a look at</p> <ul> <li>How to create a svelte component</li> <li>How to pass props between the components</li> <li>How to call a function between components</li> </ul> <p>If you are a React developer, you will be familiar with passing props and functions as props or components.</p> <h3 id="setting-up-the-svelte-app">Setting up the Svelte App:</h3> <p>There are 2 ways to get you started with the Svelte template</p> <ol> <li>Use the REPL</li> <li>Use degit</li> </ol> <p>For this app, we will use degit. If you do want to use REPL follow the instructions <a href="https://svelte.dev/blog/the-easiest-way-to-get-started#1_Use_the_REPL" target="_blank" rel="noopener noreferrer"> here </a>.</p> <p><strong>Use degit:</strong></p> <p>Degit is a project scaffolding tool. Open your terminal and do the following to create your svelte project.</p> <div class="expressive-code"><link rel="stylesheet" href="/_astro/ec.ue4wx.css"/><script type="module" src="/_astro/ec.8zarh.js"></script><figure class="frame is-terminal"><figcaption class="header"><span class="title"></span><span class="sr-only">Terminal window</span></figcaption><pre data-language="sh"><code><div class="ec-line"><div class="code"><span style="--0:#FFCB6B">npx</span><span style="--0:#BBBBBB"> </span><span style="--0:#C3E88D">degit</span><span style="--0:#BBBBBB"> </span><span style="--0:#C3E88D">sveltejs/template</span><span style="--0:#BBBBBB"> </span><span style="--0:#C3E88D">sample-svelte-project</span></div></div><div class="ec-line"><div class="code"><span style="--0:#82AAFF">cd</span><span style="--0:#BBBBBB"> </span><span style="--0:#C3E88D">sample-svelte-project</span></div></div><div class="ec-line"><div class="code"><span style="--0:#FFCB6B">npm</span><span style="--0:#BBBBBB"> </span><span style="--0:#C3E88D">install</span></div></div><div class="ec-line"><div class="code"><span style="--0:#FFCB6B">npm</span><span style="--0:#BBBBBB"> </span><span style="--0:#C3E88D">run</span><span style="--0:#BBBBBB"> </span><span style="--0:#C3E88D">dev</span></div></div></code></pre><div class="copy"><button title="Copy to clipboard" data-copied="Copied!" data-code="npx degit sveltejs/template sample-svelte-projectcd sample-svelte-projectnpm installnpm run dev"><div></div></button></div></figure></div> <p><img src="https://assets.production.skcript.com/skcript/site-assets/svrmedia/dynamic/getting-started-with-svelte-js/1.png" alt=""/></p> <p>Let’s now take a look at the project structure.</p> <p><img src="https://assets.production.skcript.com/skcript/site-assets/svrmedia/dynamic/getting-started-with-svelte-js/2.png" alt=""/></p> <p>It is quite similar to a React project. If you see the src directory, you will find that there is a main.js and App.svelte. Imagine the main.js like your index.js which is going to interact with the DOM by compiling everything together. The ‘<strong>.svelte’</strong> files are separate components that have its own HTML, CSS and js code. Let’s take a look at the default files</p> <p><strong>App.svelte</strong></p> <div class="expressive-code"><figure class="frame"><figcaption class="header"></figcaption><pre data-language="html"><code><div class="ec-line"><div class="code"><span style="--0:#89DDFF"><</span><span style="--0:#F07178">script</span><span style="--0:#89DDFF">></span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#89DDFF">export</span><span style="--0:#BBBBBB"> </span><span style="--0:#C792EA">let</span><span style="--0:#BBBBBB"> </span><span style="--0:#EEFFFF">name</span></div></div><div class="ec-line"><div class="code"><span style="--0:#89DDFF"></</span><span style="--0:#F07178">script</span><span style="--0:#89DDFF">></span></div></div><div class="ec-line"><div class="code"> </div></div><div class="ec-line"><div class="code"><span style="--0:#89DDFF"><</span><span style="--0:#F07178">style</span><span style="--0:#89DDFF">></span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#F07178">h1</span><span style="--0:#BBBBBB"> </span><span style="--0:#89DDFF">{</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#B2CCD6">color</span><span style="--0:#89DDFF">:</span><span style="--0:#BBBBBB"> </span><span style="--0:#F78C6C">purple</span><span style="--0:#89DDFF">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#89DDFF">}</span></div></div><div class="ec-line"><div class="code"><span style="--0:#89DDFF"></</span><span style="--0:#F07178">style</span><span style="--0:#89DDFF">></span></div></div><div class="ec-line"><div class="code"> </div></div><div class="ec-line"><div class="code"><span style="--0:#89DDFF"><</span><span style="--0:#F07178">h1</span><span style="--0:#89DDFF">></span><span style="--0:#BBBBBB">Hello {name}!</span><span style="--0:#89DDFF"></</span><span style="--0:#F07178">h1</span><span style="--0:#89DDFF">></span></div></div></code></pre><div class="copy"><button title="Copy to clipboard" data-copied="Copied!" data-code="<script> export let name</script><style> h1 { color: purple; }</style><h1>Hello {name}!</h1>"><div></div></button></div></figure></div> <p>It is just a simple component with HTML, CSS, and js. The good thing about svelte components is that the styles remain inside the component block level. Meaning, adding style to the h1 tag in App.svelte will not be reflecting on any h1 tags used outside of App.svelte. Like Angular and React, the variables are used in the same way.</p> <p><strong>main.js</strong></p> <div class="expressive-code"><figure class="frame"><figcaption class="header"></figcaption><pre data-language="js"><code><div class="ec-line"><div class="code"><span style="--0:#89DDFF">import</span><span style="--0:#BBBBBB"> </span><span style="--0:#EEFFFF">App</span><span style="--0:#BBBBBB"> </span><span style="--0:#89DDFF">from</span><span style="--0:#BBBBBB"> </span><span style="--0:#89DDFF">"</span><span style="--0:#C3E88D">./App.svelte</span><span style="--0:#89DDFF">"</span><span style="--0:#89DDFF">;</span></div></div><div class="ec-line"><div class="code"> </div></div><div class="ec-line"><div class="code"><span style="--0:#C792EA">const</span><span style="--0:#BBBBBB"> </span><span style="--0:#EEFFFF">app</span><span style="--0:#C792EA">:</span><span style="--0:#FFCB6B">new</span><span style="--0:#BBBBBB"> </span><span style="--0:#FFCB6B">App</span><span style="--0:#BBBBBB">(</span><span style="--0:#89DDFF">{</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#EEFFFF">target</span><span style="--0:#C792EA">:</span><span style="--0:#BBBBBB"> </span><span style="--0:#FFCB6B">document</span><span style="--0:#89DDFF">.</span><span style="--0:#FFCB6B">body</span><span style="--0:#89DDFF">,</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#EEFFFF">props</span><span style="--0:#C792EA">:</span><span style="--0:#BBBBBB"> </span><span style="--0:#89DDFF">{</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#EEFFFF">name</span><span style="--0:#C792EA">:</span><span style="--0:#BBBBBB"> </span><span style="--0:#89DDFF">"</span><span style="--0:#C3E88D">world</span><span style="--0:#89DDFF">"</span><span style="--0:#89DDFF">,</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#89DDFF">},</span></div></div><div class="ec-line"><div class="code"><span style="--0:#89DDFF">}</span><span style="--0:#BBBBBB">)</span><span style="--0:#89DDFF">;</span></div></div><div class="ec-line"><div class="code"> </div></div><div class="ec-line"><div class="code"><span style="--0:#89DDFF">export</span><span style="--0:#BBBBBB"> </span><span style="--0:#89DDFF">default</span><span style="--0:#BBBBBB"> </span><span style="--0:#EEFFFF">app</span><span style="--0:#89DDFF">;</span></div></div></code></pre><div class="copy"><button title="Copy to clipboard" data-copied="Copied!" data-code="import App from "./App.svelte";const app:new App({ target: document.body, props: { name: "world", },});export default app;"><div></div></button></div></figure></div> <p>Here is where svelte compiles and builds your app. It imports the component App and creates a new element inside the real DOM body with the props name.</p> <p>Now let’s see our page live</p> <p><img src="https://assets.production.skcript.com/skcript/site-assets/svrmedia/dynamic/getting-started-with-svelte-js/3.png" alt=""/></p> <p>Rendered so fast! didn’t it?</p> <p><img src="https://media.giphy.com/media/WRFXuiK6FvlOU/giphy.gif" alt=""/></p> <p><strong>Programmer</strong>: npm ru…. <strong>Svelte</strong>: Done!</p> <p>This is what’s cool about Svelte. After you have made changes to your code, hit save, check your <strong>bundle.js</strong> under public and you will be able to find all your components, classes, texts declared everything compiled and ready, just waiting to be rendered.</p> <p>Now let’s change things up a bit for the todo-list. We will split our app into 4 different svelte components.</p> <ul> <li>App.svelte</li> <li>Sidebar.svelte</li> <li>Todo.svelte</li> <li>TodoView.svelte</li> <li>main.js</li> </ul> <p><img src="https://assets.production.skcript.com/skcript/site-assets/svrmedia/dynamic/getting-started-with-svelte-js/4.png" alt=""/></p> <p><em>Todo List App flow</em></p> <p>Let’s take a look at them individually.</p> <p><strong>main.js</strong></p> <div class="expressive-code"><figure class="frame"><figcaption class="header"></figcaption><pre data-language="js"><code><div class="ec-line"><div class="code"><span style="--0:#89DDFF">import</span><span style="--0:#BBBBBB"> </span><span style="--0:#EEFFFF">App</span><span style="--0:#BBBBBB"> </span><span style="--0:#89DDFF">from</span><span style="--0:#BBBBBB"> </span><span style="--0:#89DDFF">"</span><span style="--0:#C3E88D">./App.svelte</span><span style="--0:#89DDFF">"</span><span style="--0:#89DDFF">;</span></div></div><div class="ec-line"><div class="code"> </div></div><div class="ec-line"><div class="code"><span style="--0:#C792EA">const</span><span style="--0:#BBBBBB"> </span><span style="--0:#EEFFFF">app</span><span style="--0:#C792EA">:</span><span style="--0:#FFCB6B">new</span><span style="--0:#BBBBBB"> </span><span style="--0:#FFCB6B">App</span><span style="--0:#BBBBBB">(</span><span style="--0:#89DDFF">{</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#EEFFFF">target</span><span style="--0:#C792EA">:</span><span style="--0:#BBBBBB"> </span><span style="--0:#FFCB6B">document</span><span style="--0:#89DDFF">.</span><span style="--0:#FFCB6B">body</span><span style="--0:#89DDFF">,</span></div></div><div class="ec-line"><div class="code"><span style="--0:#89DDFF">}</span><span style="--0:#BBBBBB">)</span><span style="--0:#89DDFF">;</span></div></div><div class="ec-line"><div class="code"> </div></div><div class="ec-line"><div class="code"><span style="--0:#89DDFF">export</span><span style="--0:#BBBBBB"> </span><span style="--0:#89DDFF">default</span><span style="--0:#BBBBBB"> </span><span style="--0:#EEFFFF">app</span><span style="--0:#89DDFF">;</span></div></div></code></pre><div class="copy"><button title="Copy to clipboard" data-copied="Copied!" data-code="import App from "./App.svelte";const app:new App({ target: document.body,});export default app;"><div></div></button></div></figure></div> <p>We don’t need to pass any props to the App component, for now, so ignoring the props.</p> <p><strong>Sidebar.js</strong></p> <div class="expressive-code"><figure class="frame"><figcaption class="header"></figcaption><pre data-language="html"><code><div class="ec-line"><div class="code"><span style="--0:#89DDFF"><</span><span style="--0:#F07178">script</span><span style="--0:#89DDFF">></span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#89DDFF">import</span><span style="--0:#BBBBBB"> </span><span style="--0:#EEFFFF">Todo</span><span style="--0:#BBBBBB"> </span><span style="--0:#89DDFF">from</span><span style="--0:#BBBBBB"> </span><span style="--0:#89DDFF">'</span><span style="--0:#C3E88D">./Todo.svelte</span><span style="--0:#89DDFF">'</span></div></div><div class="ec-line"><div class="code"> </div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#89DDFF">export</span><span style="--0:#BBBBBB"> </span><span style="--0:#C792EA">let</span><span style="--0:#BBBBBB"> </span><span style="--0:#EEFFFF">viewTodo</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#89DDFF">export</span><span style="--0:#BBBBBB"> </span><span style="--0:#C792EA">let</span><span style="--0:#BBBBBB"> </span><span style="--0:#EEFFFF">removeTodo</span></div></div><div class="ec-line"><div class="code"> </div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#C792EA">let</span><span style="--0:#BBBBBB"> </span><span style="--0:#EEFFFF">todo</span><span style="--0:#C792EA">:</span><span style="--0:#BBBBBB"> </span><span style="--0:#89DDFF">''</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#C792EA">let</span><span style="--0:#BBBBBB"> </span><span style="--0:#EEFFFF">todoList</span><span style="--0:#C792EA">:</span><span style="--0:#BBBBBB"> []</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#C792EA">function</span><span style="--0:#BBBBBB"> </span><span style="--0:#82AAFF">addTodo</span><span style="--0:#89DDFF">(</span><span style="--0:#F78C6C">e</span><span style="--0:#89DDFF">)</span><span style="--0:#BBBBBB"> </span><span style="--0:#89DDFF">{</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#89DDFF">if</span><span style="--0:#BBBBBB"> (</span><span style="--0:#F07178">e</span><span style="--0:#89DDFF">.</span><span style="--0:#F07178">keyCode</span><span style="--0:#BBBBBB"> </span><span style="--0:#C792EA">===</span><span style="--0:#BBBBBB"> </span><span style="--0:#F78C6C">13</span><span style="--0:#BBBBBB">) </span><span style="--0:#89DDFF">{</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#FFCB6B">todoList</span><span style="--0:#89DDFF">:</span><span style="--0:#BBBBBB"> </span><span style="--0:#F07178">todoList</span><span style="--0:#89DDFF">.</span><span style="--0:#82AAFF">concat</span><span style="--0:#BBBBBB">(</span><span style="--0:#F07178">todo</span><span style="--0:#BBBBBB">)</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#FFCB6B">todo</span><span style="--0:#89DDFF">:</span><span style="--0:#BBBBBB"> </span><span style="--0:#89DDFF">''</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#89DDFF">}</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#89DDFF">}</span></div></div><div class="ec-line"><div class="code"> </div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#C792EA">function</span><span style="--0:#BBBBBB"> </span><span style="--0:#82AAFF">todoDone</span><span style="--0:#89DDFF">(</span><span style="--0:#F78C6C">key</span><span style="--0:#89DDFF">)</span><span style="--0:#BBBBBB"> </span><span style="--0:#89DDFF">{</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#C792EA">var</span><span style="--0:#BBBBBB"> </span><span style="--0:#F07178">temp</span><span style="--0:#C792EA">:</span><span style="--0:#BBBBBB"> </span><span style="--0:#FFCB6B">todoList</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#F07178">temp</span><span style="--0:#89DDFF">.</span><span style="--0:#82AAFF">splice</span><span style="--0:#BBBBBB">(</span><span style="--0:#F07178">key</span><span style="--0:#89DDFF">,</span><span style="--0:#BBBBBB"> </span><span style="--0:#F78C6C">1</span><span style="--0:#BBBBBB">)</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#FFCB6B">todoList</span><span style="--0:#89DDFF">:</span><span style="--0:#BBBBBB"> </span><span style="--0:#F07178">temp</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#82AAFF">removeTodo</span><span style="--0:#BBBBBB">()</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#89DDFF">}</span></div></div><div class="ec-line"><div class="code"><span style="--0:#89DDFF"></</span><span style="--0:#F07178">script</span><span style="--0:#89DDFF">></span></div></div><div class="ec-line"><div class="code"> </div></div><div class="ec-line"><div class="code"><span style="--0:#89DDFF"><</span><span style="--0:#F07178">style</span><span style="--0:#89DDFF">></span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#89DDFF">.</span><span style="--0:#FFCB6B">sidebar-container</span><span style="--0:#BBBBBB"> </span><span style="--0:#89DDFF">{</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#B2CCD6">position</span><span style="--0:#89DDFF">:</span><span style="--0:#BBBBBB"> </span><span style="--0:#F78C6C">fixed</span><span style="--0:#89DDFF">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#B2CCD6">right</span><span style="--0:#89DDFF">:</span><span style="--0:#BBBBBB"> </span><span style="--0:#F78C6C">0</span><span style="--0:#89DDFF">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#B2CCD6">width</span><span style="--0:#89DDFF">:</span><span style="--0:#BBBBBB"> </span><span style="--0:#F78C6C">400px</span><span style="--0:#89DDFF">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#B2CCD6">height</span><span style="--0:#89DDFF">:</span><span style="--0:#BBBBBB"> </span><span style="--0:#F78C6C">100vh</span><span style="--0:#89DDFF">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#B2CCD6">background-color</span><span style="--0:#89DDFF">:</span><span style="--0:#BBBBBB"> </span><span style="--0:#89DDFF">#fff;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#B2CCD6">top</span><span style="--0:#89DDFF">:</span><span style="--0:#BBBBBB"> </span><span style="--0:#F78C6C">0</span><span style="--0:#89DDFF">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#B2CCD6">z-index</span><span style="--0:#89DDFF">:</span><span style="--0:#BBBBBB"> </span><span style="--0:#F78C6C">999</span><span style="--0:#89DDFF">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#B2CCD6">box-shadow</span><span style="--0:#89DDFF">:</span><span style="--0:#BBBBBB"> </span><span style="--0:#F78C6C">1px</span><span style="--0:#BBBBBB"> </span><span style="--0:#F78C6C">1px</span><span style="--0:#BBBBBB"> </span><span style="--0:#F78C6C">20px</span><span style="--0:#BBBBBB"> </span><span style="--0:#89DDFF">#000;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#89DDFF">}</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#89DDFF">.</span><span style="--0:#FFCB6B">todo-input</span><span style="--0:#BBBBBB"> </span><span style="--0:#89DDFF">{</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#B2CCD6">width</span><span style="--0:#89DDFF">:</span><span style="--0:#BBBBBB"> </span><span style="--0:#F78C6C">100%</span><span style="--0:#89DDFF">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#B2CCD6">height</span><span style="--0:#89DDFF">:</span><span style="--0:#BBBBBB"> </span><span style="--0:#F78C6C">5%</span><span style="--0:#89DDFF">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#89DDFF">}</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#F07178">input</span><span style="--0:#BBBBBB"> </span><span style="--0:#89DDFF">{</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#B2CCD6">color</span><span style="--0:#89DDFF">:</span><span style="--0:#BBBBBB"> </span><span style="--0:#82AAFF">rgb</span><span style="--0:#89DDFF">(</span><span style="--0:#F78C6C">56</span><span style="--0:#89DDFF">,</span><span style="--0:#BBBBBB"> </span><span style="--0:#F78C6C">56</span><span style="--0:#89DDFF">,</span><span style="--0:#BBBBBB"> </span><span style="--0:#F78C6C">56</span><span style="--0:#89DDFF">);</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#B2CCD6">font-weight</span><span style="--0:#89DDFF">:</span><span style="--0:#BBBBBB"> </span><span style="--0:#F78C6C">70</span><span style="--0:#89DDFF">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#B2CCD6">font-size</span><span style="--0:#89DDFF">:</span><span style="--0:#BBBBBB"> </span><span style="--0:#F78C6C">15px</span><span style="--0:#89DDFF">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#89DDFF">}</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#F07178">input</span><span style="--0:#89DDFF;--0fs:italic">::</span><span style="--0:#FFCB6B;--0fs:italic">placeholder</span><span style="--0:#BBBBBB"> </span><span style="--0:#89DDFF">{</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#B2CCD6">color</span><span style="--0:#89DDFF">:</span><span style="--0:#BBBBBB"> </span><span style="--0:#82AAFF">rgb</span><span style="--0:#89DDFF">(</span><span style="--0:#F78C6C">165</span><span style="--0:#89DDFF">,</span><span style="--0:#BBBBBB"> </span><span style="--0:#F78C6C">165</span><span style="--0:#89DDFF">,</span><span style="--0:#BBBBBB"> </span><span style="--0:#F78C6C">165</span><span style="--0:#89DDFF">);</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#B2CCD6">font-weight</span><span style="--0:#89DDFF">:</span><span style="--0:#BBBBBB"> </span><span style="--0:#F78C6C">70</span><span style="--0:#89DDFF">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#B2CCD6">font-size</span><span style="--0:#89DDFF">:</span><span style="--0:#BBBBBB"> </span><span style="--0:#F78C6C">15px</span><span style="--0:#89DDFF">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#89DDFF">}</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#89DDFF">.</span><span style="--0:#FFCB6B">empty-todo</span><span style="--0:#BBBBBB"> </span><span style="--0:#89DDFF">{</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#B2CCD6">padding</span><span style="--0:#89DDFF">:</span><span style="--0:#BBBBBB"> </span><span style="--0:#F78C6C">10px</span><span style="--0:#89DDFF">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#B2CCD6">height</span><span style="--0:#89DDFF">:</span><span style="--0:#BBBBBB"> </span><span style="--0:#F78C6C">100%</span><span style="--0:#89DDFF">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#B2CCD6">width</span><span style="--0:#89DDFF">:</span><span style="--0:#BBBBBB"> </span><span style="--0:#F78C6C">100%</span><span style="--0:#89DDFF">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#B2CCD6">display</span><span style="--0:#89DDFF">:</span><span style="--0:#BBBBBB"> </span><span style="--0:#F78C6C">flex</span><span style="--0:#89DDFF">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#B2CCD6">justify-content</span><span style="--0:#89DDFF">:</span><span style="--0:#BBBBBB"> </span><span style="--0:#F78C6C">center</span><span style="--0:#89DDFF">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#B2CCD6">align-items</span><span style="--0:#89DDFF">:</span><span style="--0:#BBBBBB"> </span><span style="--0:#F78C6C">center</span><span style="--0:#89DDFF">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#B2CCD6">flex-direction</span><span style="--0:#89DDFF">:</span><span style="--0:#BBBBBB"> </span><span style="--0:#F78C6C">column</span><span style="--0:#89DDFF">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#B2CCD6">color</span><span style="--0:#89DDFF">:</span><span style="--0:#BBBBBB"> </span><span style="--0:#82AAFF">rgb</span><span style="--0:#89DDFF">(</span><span style="--0:#F78C6C">133</span><span style="--0:#89DDFF">,</span><span style="--0:#BBBBBB"> </span><span style="--0:#F78C6C">133</span><span style="--0:#89DDFF">,</span><span style="--0:#BBBBBB"> </span><span style="--0:#F78C6C">133</span><span style="--0:#89DDFF">);</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#B2CCD6">font-weight</span><span style="--0:#89DDFF">:</span><span style="--0:#BBBBBB"> </span><span style="--0:#F78C6C">70</span><span style="--0:#89DDFF">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#B2CCD6">font-size</span><span style="--0:#89DDFF">:</span><span style="--0:#BBBBBB"> </span><span style="--0:#F78C6C">15px</span><span style="--0:#89DDFF">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#89DDFF">}</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#89DDFF">.</span><span style="--0:#FFCB6B">todo-list-container</span><span style="--0:#BBBBBB"> </span><span style="--0:#89DDFF">{</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#B2CCD6">overflow-y</span><span style="--0:#89DDFF">:</span><span style="--0:#BBBBBB"> </span><span style="--0:#F78C6C">scroll</span><span style="--0:#89DDFF">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#B2CCD6">height</span><span style="--0:#89DDFF">:</span><span style="--0:#BBBBBB"> </span><span style="--0:#F78C6C">95%</span><span style="--0:#89DDFF">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#89DDFF">}</span></div></div><div class="ec-line"><div class="code"><span style="--0:#89DDFF"></</span><span style="--0:#F07178">style</span><span style="--0:#89DDFF">></span></div></div><div class="ec-line"><div class="code"> </div></div><div class="ec-line"><div class="code"><span style="--0:#89DDFF"><</span><span style="--0:#F07178">div</span><span style="--0:#89DDFF"> </span><span style="--0:#FFCB6B;--0fs:italic">class</span><span style="--0:#89DDFF">=</span><span style="--0:#89DDFF">"</span><span style="--0:#C3E88D">sidebar-container</span><span style="--0:#89DDFF">"</span><span style="--0:#89DDFF">></span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#89DDFF"><</span><span style="--0:#F07178">input</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#FFCB6B;--0fs:italic">placeholder</span><span style="--0:#89DDFF">=</span><span style="--0:#89DDFF">"</span><span style="--0:#C3E88D">Enter todo list</span><span style="--0:#89DDFF">"</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#FFCB6B;--0fs:italic">type</span><span style="--0:#89DDFF">=</span><span style="--0:#89DDFF">"</span><span style="--0:#C3E88D">text</span><span style="--0:#89DDFF">"</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#FFCB6B;--0fs:italic">class</span><span style="--0:#89DDFF">=</span><span style="--0:#89DDFF">"</span><span style="--0:#C3E88D">todo-input</span><span style="--0:#89DDFF">"</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#FFCB6B;--0fs:italic">bind:value</span><span style="--0:#89DDFF">=</span><span style="--0:#89DDFF">"</span><span style="--0:#C3E88D">{todo}</span><span style="--0:#89DDFF">"</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#FFCB6B;--0fs:italic">on:keydown</span><span style="--0:#89DDFF">=</span><span style="--0:#89DDFF">"</span><span style="--0:#C3E88D">{addTodo}</span><span style="--0:#89DDFF">"</span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#89DDFF"> </span></span><span style="--0:#89DDFF">/></span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#89DDFF"><</span><span style="--0:#F07178">div</span><span style="--0:#89DDFF"> </span><span style="--0:#FFCB6B;--0fs:italic">class</span><span style="--0:#89DDFF">=</span><span style="--0:#89DDFF">"</span><span style="--0:#C3E88D">todo-list-container</span><span style="--0:#89DDFF">"</span><span style="--0:#89DDFF">></span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#BBBBBB"> </span></span><span style="--0:#BBBBBB">{#if !todoList.length}</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#89DDFF"><</span><span style="--0:#F07178">div</span><span style="--0:#89DDFF"> </span><span style="--0:#FFCB6B;--0fs:italic">class</span><span style="--0:#89DDFF">=</span><span style="--0:#89DDFF">"</span><span style="--0:#C3E88D">empty-todo</span><span style="--0:#89DDFF">"</span><span style="--0:#89DDFF">></span><span style="--0:#BBBBBB">No Todos yet!</span><span style="--0:#89DDFF"></</span><span style="--0:#F07178">div</span><span style="--0:#89DDFF">></span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#BBBBBB"> </span></span><span style="--0:#BBBBBB">{:else} {#each todoList as todo,i }</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#89DDFF"><</span><span style="--0:#FF5370">Todo</span><span style="--0:#89DDFF"> </span><span style="--0:#FFCB6B;--0fs:italic">todo</span><span style="--0:#89DDFF">=</span><span style="--0:#89DDFF">"</span><span style="--0:#C3E88D">{todo}</span><span style="--0:#89DDFF">"</span><span style="--0:#89DDFF"> </span><span style="--0:#FFCB6B;--0fs:italic">key</span><span style="--0:#89DDFF">=</span><span style="--0:#89DDFF">"</span><span style="--0:#C3E88D">{i}</span><span style="--0:#89DDFF">"</span><span style="--0:#89DDFF"> </span><span style="--0:#FFCB6B;--0fs:italic">viewTodo</span><span style="--0:#89DDFF">=</span><span style="--0:#89DDFF">"</span><span style="--0:#C3E88D">{viewTodo}</span><span style="--0:#89DDFF">"</span><span style="--0:#89DDFF"> </span><span style="--0:#FFCB6B;--0fs:italic">todoDone</span><span style="--0:#89DDFF">=</span><span style="--0:#89DDFF">"</span><span style="--0:#C3E88D">{todoDone}</span><span style="--0:#89DDFF">"</span><span style="--0:#89DDFF"> /></span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#BBBBBB"> </span></span><span style="--0:#BBBBBB">{/each} {/if}</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#89DDFF"></</span><span style="--0:#F07178">div</span><span style="--0:#89DDFF">></span></div></div><div class="ec-line"><div class="code"><span style="--0:#89DDFF"></</span><span style="--0:#F07178">div</span><span style="--0:#89DDFF">></span></div></div></code></pre><div class="copy"><button title="Copy to clipboard" data-copied="Copied!" data-code="<script> import Todo from './Todo.svelte' export let viewTodo export let removeTodo let todo: '' let todoList: [] function addTodo(e) { if (e.keyCode === 13) { todoList: todoList.concat(todo) todo: '' } } function todoDone(key) { var temp: todoList temp.splice(key, 1) todoList: temp removeTodo() }</script><style> .sidebar-container { position: fixed; right: 0; width: 400px; height: 100vh; background-color: #fff; top: 0; z-index: 999; box-shadow: 1px 1px 20px #000; } .todo-input { width: 100%; height: 5%; } input { color: rgb(56, 56, 56); font-weight: 70; font-size: 15px; } input::placeholder { color: rgb(165, 165, 165); font-weight: 70; font-size: 15px; } .empty-todo { padding: 10px; height: 100%; width: 100%; display: flex; justify-content: center; align-items: center; flex-direction: column; color: rgb(133, 133, 133); font-weight: 70; font-size: 15px; } .todo-list-container { overflow-y: scroll; height: 95%; }</style><div class="sidebar-container"> <input placeholder="Enter todo list" type="text" class="todo-input" bind:value="{todo}" on:keydown="{addTodo}" /> <div class="todo-list-container"> {#if !todoList.length} <div class="empty-todo">No Todos yet!</div> {:else} {#each todoList as todo,i } <Todo todo="{todo}" key="{i}" viewTodo="{viewTodo}" todoDone="{todoDone}" /> {/each} {/if} </div></div>"><div></div></button></div></figure></div> <p>A very simple todo list sidebar. We will just create an array to store the todos and render the todos as a different component.</p> <p><strong>Todo.js</strong></p> <div class="expressive-code"><figure class="frame"><figcaption class="header"></figcaption><pre data-language="html"><code><div class="ec-line"><div class="code"><span style="--0:#89DDFF"><</span><span style="--0:#F07178">script</span><span style="--0:#89DDFF">></span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#89DDFF">export</span><span style="--0:#BBBBBB"> </span><span style="--0:#C792EA">let</span><span style="--0:#BBBBBB"> </span><span style="--0:#EEFFFF">todo</span><span style="--0:#89DDFF">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#89DDFF">export</span><span style="--0:#BBBBBB"> </span><span style="--0:#C792EA">let</span><span style="--0:#BBBBBB"> </span><span style="--0:#EEFFFF">key</span><span style="--0:#89DDFF">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#89DDFF">export</span><span style="--0:#BBBBBB"> </span><span style="--0:#C792EA">let</span><span style="--0:#BBBBBB"> </span><span style="--0:#EEFFFF">todoDone</span><span style="--0:#89DDFF">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#89DDFF">export</span><span style="--0:#BBBBBB"> </span><span style="--0:#C792EA">let</span><span style="--0:#BBBBBB"> </span><span style="--0:#EEFFFF">viewTodo</span><span style="--0:#89DDFF">;</span></div></div><div class="ec-line"><div class="code"> </div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#C792EA">const</span><span style="--0:#BBBBBB"> </span><span style="--0:#EEFFFF">completedMessage</span><span style="--0:#C792EA">:</span><span style="--0:#BBBBBB">[</span><span style="--0:#89DDFF">"</span><span style="--0:#C3E88D">I'm Done!</span><span style="--0:#89DDFF">"</span><span style="--0:#89DDFF">,</span><span style="--0:#BBBBBB"> </span><span style="--0:#89DDFF">"</span><span style="--0:#C3E88D">Accomplished!</span><span style="--0:#89DDFF">"</span><span style="--0:#89DDFF">,</span><span style="--0:#BBBBBB"> </span><span style="--0:#89DDFF">"</span><span style="--0:#C3E88D">Finished!</span><span style="--0:#89DDFF">"</span><span style="--0:#89DDFF">,</span><span style="--0:#BBBBBB"> </span><span style="--0:#89DDFF">"</span><span style="--0:#C3E88D">Done and dusted!</span><span style="--0:#89DDFF">"</span><span style="--0:#89DDFF">,</span><span style="--0:#BBBBBB"> </span><span style="--0:#89DDFF">"</span><span style="--0:#C3E88D">Done for the day!</span><span style="--0:#89DDFF">"</span><span style="--0:#89DDFF">,</span><span style="--0:#BBBBBB"> </span><span style="--0:#89DDFF">"</span><span style="--0:#C3E88D">Peace out!</span><span style="--0:#89DDFF">"</span><span style="--0:#89DDFF">,</span><span style="--0:#BBBBBB"> </span><span style="--0:#89DDFF">"</span><span style="--0:#C3E88D">Cash me outside!</span><span style="--0:#89DDFF">"</span><span style="--0:#BBBBBB">]</span><span style="--0:#89DDFF">;</span></div></div><div class="ec-line"><div class="code"> </div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#C792EA">function</span><span style="--0:#BBBBBB"> </span><span style="--0:#82AAFF">setRandomCompletedMessage</span><span style="--0:#89DDFF">()</span><span style="--0:#BBBBBB"> </span><span style="--0:#89DDFF">{</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#C792EA">var</span><span style="--0:#BBBBBB"> </span><span style="--0:#F07178">index</span><span style="--0:#C792EA">:</span><span style="--0:#FFCB6B">Math</span><span style="--0:#89DDFF">.</span><span style="--0:#FFCB6B">floor</span><span style="--0:#BBBBBB">(</span><span style="--0:#FFCB6B">Math</span><span style="--0:#89DDFF">.</span><span style="--0:#FFCB6B">random</span><span style="--0:#89DDFF">()</span><span style="--0:#BBBBBB"> * </span><span style="--0:#F78C6C">7</span><span style="--0:#BBBBBB">)</span><span style="--0:#89DDFF">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#89DDFF">return</span><span style="--0:#BBBBBB"> </span><span style="--0:#F07178">completedMessage</span><span style="--0:#BBBBBB">[</span><span style="--0:#F07178">index</span><span style="--0:#BBBBBB">]</span><span style="--0:#89DDFF">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#89DDFF">}</span></div></div><div class="ec-line"><div class="code"><span style="--0:#89DDFF"></</span><span style="--0:#F07178">script</span><span style="--0:#89DDFF">></span></div></div><div class="ec-line"><div class="code"> </div></div><div class="ec-line"><div class="code"><span style="--0:#89DDFF"><</span><span style="--0:#F07178">style</span><span style="--0:#89DDFF">></span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#89DDFF">.</span><span style="--0:#FFCB6B">todo-item-wrapper</span><span style="--0:#BBBBBB"> </span><span style="--0:#89DDFF">{</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#B2CCD6">padding</span><span style="--0:#89DDFF">:</span><span style="--0:#BBBBBB"> </span><span style="--0:#F78C6C">10px</span><span style="--0:#89DDFF">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#B2CCD6">color</span><span style="--0:#89DDFF">:</span><span style="--0:#BBBBBB"> </span><span style="--0:#82AAFF">rgb</span><span style="--0:#89DDFF">(</span><span style="--0:#F78C6C">65</span><span style="--0:#89DDFF">,</span><span style="--0:#BBBBBB"> </span><span style="--0:#F78C6C">65</span><span style="--0:#89DDFF">,</span><span style="--0:#BBBBBB"> </span><span style="--0:#F78C6C">65</span><span style="--0:#89DDFF">);</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#B2CCD6">font-weight</span><span style="--0:#89DDFF">:</span><span style="--0:#BBBBBB"> </span><span style="--0:#F78C6C">70</span><span style="--0:#89DDFF">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#B2CCD6">font-size</span><span style="--0:#89DDFF">:</span><span style="--0:#BBBBBB"> </span><span style="--0:#F78C6C">15px</span><span style="--0:#89DDFF">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#B2CCD6">display</span><span style="--0:#89DDFF">:</span><span style="--0:#BBBBBB"> </span><span style="--0:#F78C6C">flex</span><span style="--0:#89DDFF">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#B2CCD6">justify-content</span><span style="--0:#89DDFF">:</span><span style="--0:#BBBBBB"> </span><span style="--0:#F78C6C">space-between</span><span style="--0:#89DDFF">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#B2CCD6">align-items</span><span style="--0:#89DDFF">:</span><span style="--0:#BBBBBB"> </span><span style="--0:#F78C6C">center</span><span style="--0:#89DDFF">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#89DDFF">}</span></div></div><div class="ec-line"><div class="code"> </div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#89DDFF">.</span><span style="--0:#FFCB6B">todo-item</span><span style="--0:#BBBBBB"> </span><span style="--0:#89DDFF">{</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#B2CCD6">cursor</span><span style="--0:#89DDFF">:</span><span style="--0:#BBBBBB"> </span><span style="--0:#F78C6C">pointer</span><span style="--0:#89DDFF">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#89DDFF">}</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#89DDFF">.</span><span style="--0:#FFCB6B">done-btn</span><span style="--0:#BBBBBB"> </span><span style="--0:#89DDFF">{</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#B2CCD6">background-color</span><span style="--0:#89DDFF">:</span><span style="--0:#BBBBBB"> </span><span style="--0:#89DDFF">#fff;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#B2CCD6">border-radius</span><span style="--0:#89DDFF">:</span><span style="--0:#BBBBBB"> </span><span style="--0:#F78C6C">15px</span><span style="--0:#89DDFF">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#B2CCD6">color</span><span style="--0:#89DDFF">:</span><span style="--0:#BBBBBB"> </span><span style="--0:#82AAFF">rgb</span><span style="--0:#89DDFF">(</span><span style="--0:#F78C6C">65</span><span style="--0:#89DDFF">,</span><span style="--0:#BBBBBB"> </span><span style="--0:#F78C6C">65</span><span style="--0:#89DDFF">,</span><span style="--0:#BBBBBB"> </span><span style="--0:#F78C6C">65</span><span style="--0:#89DDFF">);</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#B2CCD6">cursor</span><span style="--0:#89DDFF">:</span><span style="--0:#BBBBBB"> </span><span style="--0:#F78C6C">pointer</span><span style="--0:#89DDFF">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#89DDFF">}</span></div></div><div class="ec-line"><div class="code"><span style="--0:#89DDFF"></</span><span style="--0:#F07178">style</span><span style="--0:#89DDFF">></span></div></div><div class="ec-line"><div class="code"> </div></div><div class="ec-line"><div class="code"><span style="--0:#89DDFF"><</span><span style="--0:#F07178">div</span><span style="--0:#89DDFF"> </span><span style="--0:#FFCB6B;--0fs:italic">class</span><span style="--0:#89DDFF">=</span><span style="--0:#89DDFF">"</span><span style="--0:#C3E88D">todo-item-wrapper</span><span style="--0:#89DDFF">"</span><span style="--0:#89DDFF">></span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#89DDFF"><</span><span style="--0:#F07178">div</span><span style="--0:#89DDFF"> </span><span style="--0:#FFCB6B;--0fs:italic">class</span><span style="--0:#89DDFF">=</span><span style="--0:#89DDFF">"</span><span style="--0:#C3E88D">todo-item</span><span style="--0:#89DDFF">"</span><span style="--0:#89DDFF"> </span><span style="--0:#FFCB6B;--0fs:italic">on:click</span><span style="--0:#89DDFF">=</span><span style="--0:#89DDFF">"</span><span style="--0:#C3E88D">{viewTodo.bind(this,</span><span style="--0:#89DDFF">"</span><span style="--0:#89DDFF"> </span><span style="--0:#FFCB6B;--0fs:italic">todo)}</span><span style="--0:#89DDFF">></span><span style="--0:#BBBBBB">{todo}</span><span style="--0:#89DDFF"></</span><span style="--0:#F07178">div</span><span style="--0:#89DDFF">></span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#89DDFF"><</span><span style="--0:#F07178">button</span><span style="--0:#89DDFF"> </span><span style="--0:#FFCB6B;--0fs:italic">class</span><span style="--0:#89DDFF">=</span><span style="--0:#89DDFF">"</span><span style="--0:#C3E88D">done-btn</span><span style="--0:#89DDFF">"</span><span style="--0:#89DDFF"> </span><span style="--0:#FFCB6B;--0fs:italic">on:click</span><span style="--0:#89DDFF">=</span><span style="--0:#89DDFF">"</span><span style="--0:#C3E88D">{todoDone.bind(this,</span><span style="--0:#89DDFF">"</span><span style="--0:#89DDFF"> </span><span style="--0:#FFCB6B;--0fs:italic">key)}</span><span style="--0:#89DDFF">></span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#BBBBBB"> </span></span><span style="--0:#BBBBBB">{setRandomCompletedMessage()}</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#89DDFF"></</span><span style="--0:#F07178">button</span><span style="--0:#89DDFF">></span></div></div><div class="ec-line"><div class="code"><span style="--0:#89DDFF"></</span><span style="--0:#F07178">div</span><span style="--0:#89DDFF">></span></div></div></code></pre><div class="copy"><button title="Copy to clipboard" data-copied="Copied!" data-code="<script> export let todo; export let key; export let todoDone; export let viewTodo; const completedMessage:["I'm Done!", "Accomplished!", "Finished!", "Done and dusted!", "Done for the day!", "Peace out!", "Cash me outside!"]; function setRandomCompletedMessage() { var index:Math.floor(Math.random() * 7); return completedMessage[index]; }</script><style> .todo-item-wrapper { padding: 10px; color: rgb(65, 65, 65); font-weight: 70; font-size: 15px; display: flex; justify-content: space-between; align-items: center; } .todo-item { cursor: pointer; } .done-btn { background-color: #fff; border-radius: 15px; color: rgb(65, 65, 65); cursor: pointer; }</style><div class="todo-item-wrapper"> <div class="todo-item" on:click="{viewTodo.bind(this," todo)}>{todo}</div> <button class="done-btn" on:click="{todoDone.bind(this," key)}> {setRandomCompletedMessage()} </button></div>"><div></div></button></div></figure></div> <p>We will just render the new Todo as the received props. We will also add a finish button to pop that element out of the array.</p> <p><strong>TodoView.js</strong></p> <div class="expressive-code"><figure class="frame"><figcaption class="header"></figcaption><pre data-language="html"><code><div class="ec-line"><div class="code"><span style="--0:#89DDFF"><</span><span style="--0:#F07178">script</span><span style="--0:#89DDFF">></span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#C792EA">let</span><span style="--0:#BBBBBB"> </span><span style="--0:#EEFFFF">width</span><span style="--0:#C792EA">:</span><span style="--0:#FFCB6B">document</span><span style="--0:#89DDFF">.</span><span style="--0:#FFCB6B">body</span><span style="--0:#89DDFF">.</span><span style="--0:#FFCB6B">clientWidth</span><span style="--0:#89DDFF">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#FFCB6B">width</span><span style="--0:#89DDFF">:</span><span style="--0:#EEFFFF">width</span><span style="--0:#BBBBBB"> </span><span style="--0:#C792EA">-</span><span style="--0:#BBBBBB"> </span><span style="--0:#F78C6C">400</span><span style="--0:#89DDFF">;</span></div></div><div class="ec-line"><div class="code"> </div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#89DDFF">export</span><span style="--0:#BBBBBB"> </span><span style="--0:#C792EA">let</span><span style="--0:#BBBBBB"> </span><span style="--0:#EEFFFF">currentTodo</span><span style="--0:#89DDFF">;</span></div></div><div class="ec-line"><div class="code"> </div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#C792EA">var</span><span style="--0:#BBBBBB"> </span><span style="--0:#EEFFFF">extras</span><span style="--0:#C792EA">:</span><span style="--0:#BBBBBB">[]</span><span style="--0:#89DDFF">;</span></div></div><div class="ec-line"><div class="code"> </div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#C792EA">var</span><span style="--0:#BBBBBB"> </span><span style="--0:#EEFFFF">currentTodoExtra</span><span style="--0:#C792EA">:</span><span style="--0:#FFCB6B">extras</span><span style="--0:#BBBBBB">[</span><span style="--0:#FFCB6B">currentTodo</span><span style="--0:#BBBBBB">] </span><span style="--0:#C792EA">?</span><span style="--0:#BBBBBB"> </span><span style="--0:#FFCB6B">extras</span><span style="--0:#BBBBBB">[</span><span style="--0:#FFCB6B">currentTodo</span><span style="--0:#BBBBBB">] </span><span style="--0:#C792EA">:</span><span style="--0:#BBBBBB"> </span><span style="--0:#89DDFF">"</span><span style="--0:#C3E88D">Sample</span><span style="--0:#89DDFF">"</span><span style="--0:#89DDFF">;</span></div></div><div class="ec-line"><div class="code"><span style="--0:#89DDFF"></</span><span style="--0:#F07178">script</span><span style="--0:#89DDFF">></span></div></div><div class="ec-line"><div class="code"> </div></div><div class="ec-line"><div class="code"><span style="--0:#89DDFF"><</span><span style="--0:#F07178">style</span><span style="--0:#89DDFF">></span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#89DDFF">.</span><span style="--0:#FFCB6B">view-todo-container</span><span style="--0:#BBBBBB"> </span><span style="--0:#89DDFF">{</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#B2CCD6">height</span><span style="--0:#89DDFF">:</span><span style="--0:#BBBBBB"> </span><span style="--0:#F78C6C">100%</span><span style="--0:#89DDFF">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#B2CCD6">display</span><span style="--0:#89DDFF">:</span><span style="--0:#BBBBBB"> </span><span style="--0:#F78C6C">flex</span><span style="--0:#89DDFF">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#B2CCD6">justify-content</span><span style="--0:#89DDFF">:</span><span style="--0:#BBBBBB"> </span><span style="--0:#F78C6C">center</span><span style="--0:#89DDFF">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#B2CCD6">align-items</span><span style="--0:#89DDFF">:</span><span style="--0:#BBBBBB"> </span><span style="--0:#F78C6C">center</span><span style="--0:#89DDFF">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#89DDFF">}</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#89DDFF">.</span><span style="--0:#FFCB6B">current-todo-wrapper</span><span style="--0:#BBBBBB"> </span><span style="--0:#89DDFF">{</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#B2CCD6">background-color</span><span style="--0:#89DDFF">:</span><span style="--0:#BBBBBB"> </span><span style="--0:#89DDFF">#fff;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#B2CCD6">height</span><span style="--0:#89DDFF">:</span><span style="--0:#BBBBBB"> </span><span style="--0:#F78C6C">95%</span><span style="--0:#89DDFF">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#B2CCD6">width</span><span style="--0:#89DDFF">:</span><span style="--0:#BBBBBB"> </span><span style="--0:#F78C6C">95%</span><span style="--0:#89DDFF">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#B2CCD6">display</span><span style="--0:#89DDFF">:</span><span style="--0:#BBBBBB"> </span><span style="--0:#F78C6C">flex</span><span style="--0:#89DDFF">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#B2CCD6">justify-content</span><span style="--0:#89DDFF">:</span><span style="--0:#BBBBBB"> </span><span style="--0:#F78C6C">center</span><span style="--0:#89DDFF">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#B2CCD6">align-items</span><span style="--0:#89DDFF">:</span><span style="--0:#BBBBBB"> </span><span style="--0:#F78C6C">center</span><span style="--0:#89DDFF">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#B2CCD6">flex-direction</span><span style="--0:#89DDFF">:</span><span style="--0:#BBBBBB"> </span><span style="--0:#F78C6C">column</span><span style="--0:#89DDFF">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#B2CCD6">box-shadow</span><span style="--0:#89DDFF">:</span><span style="--0:#BBBBBB"> </span><span style="--0:#F78C6C">0px</span><span style="--0:#BBBBBB"> </span><span style="--0:#F78C6C">0px</span><span style="--0:#BBBBBB"> </span><span style="--0:#F78C6C">20px</span><span style="--0:#BBBBBB"> </span><span style="--0:#89DDFF">#000;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#B2CCD6">border-top-right-radius</span><span style="--0:#89DDFF">:</span><span style="--0:#BBBBBB"> </span><span style="--0:#F78C6C">40px</span><span style="--0:#89DDFF">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#89DDFF">}</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#89DDFF">.</span><span style="--0:#FFCB6B">current-todo-item</span><span style="--0:#BBBBBB"> </span><span style="--0:#89DDFF">{</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#B2CCD6">color</span><span style="--0:#89DDFF">:</span><span style="--0:#BBBBBB"> </span><span style="--0:#82AAFF">rgb</span><span style="--0:#89DDFF">(</span><span style="--0:#F78C6C">56</span><span style="--0:#89DDFF">,</span><span style="--0:#BBBBBB"> </span><span style="--0:#F78C6C">56</span><span style="--0:#89DDFF">,</span><span style="--0:#BBBBBB"> </span><span style="--0:#F78C6C">56</span><span style="--0:#89DDFF">);</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#B2CCD6">font-size</span><span style="--0:#89DDFF">:</span><span style="--0:#BBBBBB"> </span><span style="--0:#F78C6C">40px</span><span style="--0:#89DDFF">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#B2CCD6">font-weight</span><span style="--0:#89DDFF">:</span><span style="--0:#BBBBBB"> </span><span style="--0:#F78C6C">100</span><span style="--0:#89DDFF">;</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#89DDFF">}</span></div></div><div class="ec-line"><div class="code"><span style="--0:#89DDFF"></</span><span style="--0:#F07178">style</span><span style="--0:#89DDFF">></span></div></div><div class="ec-line"><div class="code"> </div></div><div class="ec-line"><div class="code"><span style="--0:#89DDFF"><</span><span style="--0:#F07178">div</span><span style="--0:#89DDFF"> </span><span style="--0:#FFCB6B;--0fs:italic">class</span><span style="--0:#89DDFF">=</span><span style="--0:#89DDFF">"</span><span style="--0:#C3E88D">view-todo-container</span><span style="--0:#89DDFF">"</span><span style="--0:#89DDFF"> </span><span style="--0:#FFCB6B;--0fs:italic">style</span><span style="--0:#89DDFF">=</span><span style="--0:#89DDFF">"</span><span style="--0:#C3E88D">{`width:${width}px`}</span><span style="--0:#89DDFF">"</span><span style="--0:#89DDFF">></span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#BBBBBB"> </span></span><span style="--0:#BBBBBB">{#if currentTodo.length}</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#89DDFF"><</span><span style="--0:#F07178">div</span><span style="--0:#89DDFF"> </span><span style="--0:#FFCB6B;--0fs:italic">class</span><span style="--0:#89DDFF">=</span><span style="--0:#89DDFF">"</span><span style="--0:#C3E88D">current-todo-wrapper</span><span style="--0:#89DDFF">"</span><span style="--0:#89DDFF">></span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#89DDFF"><</span><span style="--0:#F07178">div</span><span style="--0:#89DDFF"> </span><span style="--0:#FFCB6B;--0fs:italic">class</span><span style="--0:#89DDFF">=</span><span style="--0:#89DDFF">"</span><span style="--0:#C3E88D">current-todo-item</span><span style="--0:#89DDFF">"</span><span style="--0:#89DDFF">></span><span style="--0:#BBBBBB">{currentTodo}</span><span style="--0:#89DDFF"></</span><span style="--0:#F07178">div</span><span style="--0:#89DDFF">></span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#89DDFF"></</span><span style="--0:#F07178">div</span><span style="--0:#89DDFF">></span></div></div><div class="ec-line"><div class="code"><span class="indent"><span style="--0:#BBBBBB"> </span></span><span style="--0:#BBBBBB">{/if}</span></div></div><div class="ec-line"><div class="code"><span style="--0:#89DDFF"></</span><span style="--0:#F07178">div</span><span style="--0:#89DDFF">></span></div></div></code></pre><div class="copy"><button title="Copy to clipboard" data-copied="Copied!" data-code="<script> let width:document.body.clientWidth; width:width - 400; export let currentTodo; var extras:[]; var currentTodoExtra:extras[currentTodo] ? extras[currentTodo] : "Sample";</script><style> .view-todo-container { height: 100%; display: flex; justify-content: center; align-items: center; } .current-todo-wrapper { background-color: #fff; height: 95%; width: 95%; display: flex; justify-content: center; align-items: center; flex-direction: column; box-shadow: 0px 0px 20px #000; border-top-right-radius: 40px; } .current-todo-item { color: rgb(56, 56, 56); font-size: 40px; font-weight: 100; }</style><div class="view-todo-container" style="{`width:${width}px`}"> {#if currentTodo.length} <div class="current-todo-wrapper"> <div class="current-todo-item">{currentTodo}</div> </div> {/if}</div>"><div></div></button></div></figure></div> <p>This is just an additional feature to View the props into another component. Like Sidebar to App and then App to TodoView.</p> <p><strong>App.svelte</strong></p> <div class="expressive-code"><figure class="frame"><figcaption class="header"></figcaption><pre data-language="html"><code><div class="ec-line"><div class="code"><span style="--0:#89DDFF"><</span><span style="--0:#F07178">script</span><span style="--0:#89DDFF">></span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#89DDFF">import</span><span style="--0:#BBBBBB"> </span><span style="--0:#EEFFFF">Sidebar</span><span style="--0:#BBBBBB"> </span><span style="--0:#89DDFF">from</span><span style="--0:#BBBBBB"> </span><span style="--0:#89DDFF">'</span><span style="--0:#C3E88D">./Sidebar.svelte</span><span style="--0:#89DDFF">'</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#89DDFF">import</span><span style="--0:#BBBBBB"> </span><span style="--0:#EEFFFF">TodoView</span><span style="--0:#BBBBBB"> </span><span style="--0:#89DDFF">from</span><span style="--0:#BBBBBB"> </span><span style="--0:#89DDFF">'</span><span style="--0:#C3E88D">./TodoView.svelte</span><span style="--0:#89DDFF">'</span></div></div><div class="ec-line"><div class="code"> </div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#C792EA">var</span><span style="--0:#BBBBBB"> </span><span style="--0:#EEFFFF">currentTodo</span><span style="--0:#C792EA">:</span><span style="--0:#BBBBBB"> </span><span style="--0:#89DDFF">''</span></div></div><div class="ec-line"><div class="code"> </div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#C792EA">function</span><span style="--0:#BBBBBB"> </span><span style="--0:#82AAFF">viewTodo</span><span style="--0:#89DDFF">(</span><span style="--0:#F78C6C">todo</span><span style="--0:#89DDFF">)</span><span style="--0:#BBBBBB"> </span><span style="--0:#89DDFF">{</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#FFCB6B">currentTodo</span><span style="--0:#89DDFF">:</span><span style="--0:#BBBBBB"> </span><span style="--0:#F07178">todo</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#89DDFF">}</span></div></div><div class="ec-line"><div class="code"> </div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#C792EA">function</span><span style="--0:#BBBBBB"> </span><span style="--0:#82AAFF">removeTodo</span><span style="--0:#89DDFF">()</span><span style="--0:#BBBBBB"> </span><span style="--0:#89DDFF">{</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#FFCB6B">currentTodo</span><span style="--0:#89DDFF">:</span><span style="--0:#BBBBBB"> </span><span style="--0:#89DDFF">''</span></div></div><div class="ec-line"><div class="code"><span class="indent"> </span><span style="--0:#89DDFF">}</span></div></div><div class="ec-line"><div class="code"><span style="--0:#89DDFF"></</span><span style="--0:#F07178">script</span><span style="--0:#89DDFF">></span></div></div><div class="ec-line"><div class="code"> </div></div><div class="ec-line"><div class="code"><span style="--0:#89DDFF"><</span><span style="--0:#FF5370">TodoView</span><span style="--0:#89DDFF"> </span><span style="--0:#FFCB6B;--0fs:italic">currentTodo</span><span style="--0:#89DDFF">=</span><span style="--0:#89DDFF">"</span><span style="--0:#C3E88D">{currentTodo}</span><span style="--0:#89DDFF">"</span><span style="--0:#89DDFF"> /></span></div></div><div class="ec-line"><div class="code"><span style="--0:#89DDFF"><</span><span style="--0:#FF5370">Sidebar</span><span style="--0:#89DDFF"> </span><span style="--0:#FFCB6B;--0fs:italic">viewTodo</span><span style="--0:#89DDFF">=</span><span style="--0:#89DDFF">"</span><span style="--0:#C3E88D">{viewTodo}</span><span style="--0:#89DDFF">"</span><span style="--0:#89DDFF"> </span><span style="--0:#FFCB6B;--0fs:italic">removeTodo</span><span style="--0:#89DDFF">=</span><span style="--0:#89DDFF">"</span><span style="--0:#C3E88D">{removeTodo}</span><span style="--0:#89DDFF">"</span><span style="--0:#89DDFF"> /></span></div></div></code></pre><div class="copy"><button title="Copy to clipboard" data-copied="Copied!" data-code="<script> import Sidebar from './Sidebar.svelte' import TodoView from './TodoView.svelte' var currentTodo: '' function viewTodo(todo) { currentTodo: todo } function removeTodo() { currentTodo: '' }</script><TodoView currentTodo="{currentTodo}" /><Sidebar viewTodo="{viewTodo}" removeTodo="{removeTodo}" />"><div></div></button></div></figure></div> <p>Finally let’s see out app in action.</p> <video autoplay loop muted="true" controls class="img-fluid mb-3" title=""><source src="https://assets.production.skcript.com/skcript/site-assets/svrmedia/dynamic/getting-started-with-svelte-js/svelte.mp4" type="video/mp4"/><p><p>Your browser doesn’t support HTML5 video. Here is a</p><a href="https://assets.production.skcript.com/skcript/site-assets/svrmedia/dynamic/getting-started-with-svelte-js/svelte.mp4"><p>link to the video</p></a><p>instead.</p></p></video> <p>And we’ve done it</p> <p><img src="https://media.giphy.com/media/DffShiJ47fPqM/giphy.gif" alt=""/></p> <p><strong>Programmer:</strong> We won…..!</p> </div> </article> </div> </main> <footer class="bg-snowAlt"> <div class="container py-10 text-[13px]"> <div class="grid grid-cols-1 gap-12 md:grid-cols-5"> <div class="flex"> <a href="/" aria-label="Click on this link to go to the homepage" data-umami-event="header-logo" class="flex py-2"> <svg width="135" height="22.5" viewBox="0 0 572 90"> <title>Skcript Logo</title> <g fill="none"> <path fill="var(--accent)" d="M48.4 2.2 0 33.7l7.8 22.8 27.2-4.9L11.4 67l7.9 23 23.2-3 47.5-31.2-7.9-23-24.7 4.8 21.2-15-7.8-22.7z"></path> <g transform="translate(114 33)" fill="var(--carbon)"> <path d="M35 57c20 0 32-4.4 32-18C67 25 55 23 36.6 21.6l-3.1-.2c-12.2-.8-14.2-1.9-14.2-4.7 0-2.3 2.3-3.8 11.9-3.8 10.2 0 15.1 1.5 15.1 5.7h18.4C64.1 6.5 52.6 0 31.3 0 12.7 0 .8 5.6.8 16.7c0 11.6 9.2 16.7 30 18l2.6.2c13.1.8 15.2 1.5 15.2 4.8 0 2.9-2.3 4.5-14.3 4.5-11.8 0-15.9-2.6-15.9-6.6H0c.7 14.2 13.2 19.4 35 19.4z"></path> <path d="M74 55h17.7V43.7L104 33.6 120.4 55H142l-25.5-32.3L142 1h-26.1L91.7 22.4V1H74z"></path> <path d="M177.2 57c20.2 0 34.4-9.3 35.8-23.3H194c-.9 4.7-7.4 8.4-16.8 8.4-10.7 0-17.6-5.5-17.6-13.7 0-8 6.9-13.5 17.6-13.5 9.4 0 15.9 3.6 16.8 8.3H213c-1.4-13.9-15.6-23.2-35.8-23.2C155.3 0 141 11.2 141 28.4S155.3 57 177.2 57z"></path> <path d="M220 55h17.6V39.7h24.5c4.8 0 6.2 1.4 6.2 6.3V55h17.6V43.1c0-6.6-4.3-10.6-11.2-11 7.3-2.2 11.3-7.1 11.3-14.5C286 6.6 278.7 1 263.9 1H220v54zm17.6-29.4V15.1h22c4.7 0 8 .8 8 5.2 0 4.4-3.2 5.3-8 5.3h-22z"></path> <path d="M295 55h18V1h-18z"></path> <path d="M323 55h17.7V41.6h24.6C379 41.6 387 34 387 21.3 387 8.5 379 1 365.3 1H323v54zm17.7-28.2V15.9h20.4c5 0 7.5 1 7.5 5.4 0 4.4-2.4 5.5-7.5 5.5h-20.4z"></path> <path d="M394 15.9h23.2V55h17.6V15.9H458V1h-64z"></path> </g> </g> </svg> </a> </div> <div class="flex flex-col gap-y-2"> <h3 class="font-semibold">Company</h3> <ul class="flex flex-col"> <li class="flex"> <a href="/company" class="group flex py-2 font-normal leading-none text-carbonAlt duration-150 hover:text-carbon" target=""> About </a> </li><li class="flex"> <a href="/careers" class="group flex py-2 font-normal leading-none text-carbonAlt duration-150 hover:text-carbon" target=""> Careers </a> </li><li class="flex"> <a href="/contact" class="group flex py-2 font-normal leading-none text-carbonAlt duration-150 hover:text-carbon" target=""> Contact us </a> </li><li class="flex"> <a href="/blog" class="group flex py-2 font-normal leading-none text-carbonAlt duration-150 hover:text-carbon" target=""> Blog </a> </li><li class="flex"> <a href="/newsroom" class="group flex py-2 font-normal leading-none text-carbonAlt duration-150 hover:text-carbon" target=""> Newsroom </a> </li><li class="flex"> <a href="/careers/camp" class="group flex py-2 font-normal leading-none text-carbonAlt duration-150 hover:text-carbon" target=""> Camp </a> </li><li class="flex"> <a href="/research" class="group flex py-2 font-normal leading-none text-carbonAlt duration-150 hover:text-carbon" target=""> R&E Group </a> </li> </ul> </div><div class="flex flex-col gap-y-2"> <h3 class="font-semibold">Products / Investments</h3> <ul class="flex flex-col"> <li class="flex"> <a href="/s1" class="group flex py-2 font-normal leading-none text-carbonAlt duration-150 hover:text-carbon" target=""> S1 EDGE </a> </li><li class="flex"> <a href="https://featureos.app" class="group flex py-2 font-normal leading-none text-carbonAlt duration-150 hover:text-carbon" target="_blank"> featureOS <svg width="1em" height="1em" class="ml-1 mt-px h-3 w-3 fill-current text-typeLink opacity-0 transition-opacity duration-150 ease-out group-hover:opacity-100" data-icon="icons/newtab"> <symbol id="ai:local:icons/newtab" viewBox="0 0 16 16"><path fill="currentColor" d="M5 3v1h6.295L3 12.295l.705.705L12 4.705V11h1V3z"/></symbol><use href="#ai:local:icons/newtab"></use> </svg> </a> </li><li class="flex"> <a href="/research" class="group flex py-2 font-normal leading-none text-carbonAlt duration-150 hover:text-carbon" target=""> Skcript Research </a> </li><li class="flex"> <a href="https://github.com/skcript" class="group flex py-2 font-normal leading-none text-carbonAlt duration-150 hover:text-carbon" target="_blank"> Skcript Open Source <svg width="1em" height="1em" viewBox="0 0 16 16" class="ml-1 mt-px h-3 w-3 fill-current text-typeLink opacity-0 transition-opacity duration-150 ease-out group-hover:opacity-100" data-icon="icons/newtab"> <use href="#ai:local:icons/newtab"></use> </svg> </a> </li> </ul> </div><div class="flex flex-col gap-y-2"> <h3 class="font-semibold">Resources</h3> <ul class="flex flex-col"> <li class="flex"> <a href="/contact" class="group flex py-2 font-normal leading-none text-carbonAlt duration-150 hover:text-carbon" target=""> Request S1 Demo </a> </li><li class="flex"> <a href="https://featureos.app/tools/changelog-generator" class="group flex py-2 font-normal leading-none text-carbonAlt duration-150 hover:text-carbon" target="_blank"> AI Changelog Generator <svg width="1em" height="1em" viewBox="0 0 16 16" class="ml-1 mt-px h-3 w-3 fill-current text-typeLink opacity-0 transition-opacity duration-150 ease-out group-hover:opacity-100" data-icon="icons/newtab"> <use href="#ai:local:icons/newtab"></use> </svg> </a> </li><li class="flex"> <a href="https://featureos.app/tools" class="group flex py-2 font-normal leading-none text-carbonAlt duration-150 hover:text-carbon" target="_blank"> All free AI tools <svg width="1em" height="1em" viewBox="0 0 16 16" class="ml-1 mt-px h-3 w-3 fill-current text-typeLink opacity-0 transition-opacity duration-150 ease-out group-hover:opacity-100" data-icon="icons/newtab"> <use href="#ai:local:icons/newtab"></use> </svg> </a> </li><li class="flex"> <a href="/technology" class="group flex py-2 font-normal leading-none text-carbonAlt duration-150 hover:text-carbon" target=""> Technology </a> </li><li class="flex"> <a href="/kaffeehaus" class="group flex py-2 font-normal leading-none text-carbonAlt duration-150 hover:text-carbon" target=""> Skcript Kaffeehaus </a> </li> </ul> </div><div class="flex flex-col gap-y-2"> <h3 class="font-semibold">Social</h3> <ul class="flex flex-col"> <li class="flex"> <a href="https://twitter.com/SkcriptHQ" class="group flex py-2 font-normal leading-none text-carbonAlt duration-150 hover:text-carbon" target="_blank"> Twitter <svg width="1em" height="1em" viewBox="0 0 16 16" class="ml-1 mt-px h-3 w-3 fill-current text-typeLink opacity-0 transition-opacity duration-150 ease-out group-hover:opacity-100" data-icon="icons/newtab"> <use href="#ai:local:icons/newtab"></use> </svg> </a> </li><li class="flex"> <a href="https://instagram.com/skcript" class="group flex py-2 font-normal leading-none text-carbonAlt duration-150 hover:text-carbon" target="_blank"> Instagram <svg width="1em" height="1em" viewBox="0 0 16 16" class="ml-1 mt-px h-3 w-3 fill-current text-typeLink opacity-0 transition-opacity duration-150 ease-out group-hover:opacity-100" data-icon="icons/newtab"> <use href="#ai:local:icons/newtab"></use> </svg> </a> </li><li class="flex"> <a href="https://www.linkedin.com/company/skcript" class="group flex py-2 font-normal leading-none text-carbonAlt duration-150 hover:text-carbon" target="_blank"> LinkedIn <svg width="1em" height="1em" viewBox="0 0 16 16" class="ml-1 mt-px h-3 w-3 fill-current text-typeLink opacity-0 transition-opacity duration-150 ease-out group-hover:opacity-100" data-icon="icons/newtab"> <use href="#ai:local:icons/newtab"></use> </svg> </a> </li><li class="flex"> <a href="https://www.youtube.com/skcript" class="group flex py-2 font-normal leading-none text-carbonAlt duration-150 hover:text-carbon" target="_blank"> YouTube <svg width="1em" height="1em" viewBox="0 0 16 16" class="ml-1 mt-px h-3 w-3 fill-current text-typeLink opacity-0 transition-opacity duration-150 ease-out group-hover:opacity-100" data-icon="icons/newtab"> <use href="#ai:local:icons/newtab"></use> </svg> </a> </li><li class="flex"> <a href="https://wellfound.com/company/skcript" class="group flex py-2 font-normal leading-none text-carbonAlt duration-150 hover:text-carbon" target="_blank"> Wellfound <svg width="1em" height="1em" viewBox="0 0 16 16" class="ml-1 mt-px h-3 w-3 fill-current text-typeLink opacity-0 transition-opacity duration-150 ease-out group-hover:opacity-100" data-icon="icons/newtab"> <use href="#ai:local:icons/newtab"></use> </svg> </a> </li><li class="flex"> <a href="https://github.com/skcript" class="group flex py-2 font-normal leading-none text-carbonAlt duration-150 hover:text-carbon" target="_blank"> GitHub <svg width="1em" height="1em" viewBox="0 0 16 16" class="ml-1 mt-px h-3 w-3 fill-current text-typeLink opacity-0 transition-opacity duration-150 ease-out group-hover:opacity-100" data-icon="icons/newtab"> <use href="#ai:local:icons/newtab"></use> </svg> </a> </li> </ul> </div> </div> <div class="flex flex-col pt-10 text-carbonAlt md:flex-row md:items-center md:justify-between md:pt-16"> <p>© 2024. Skcript Technologies Pvt. Ltd.</p> <a href="/cdn-cgi/l/email-protection#a4c2d6cdc1cac0d7e4d7cfc7d6cdd4d08ac7cbc9" class="duration-150 hover:text-carbon"> Thanks for being here! How are you? </a> </div> </div> </footer> <script data-cfasync="false" src="/cdn-cgi/scripts/5c5dd728/cloudflare-static/email-decode.min.js"></script></body></html> <script type="application/ld+json">{"@context":"https://schema.org","@type":"BlogPosting","headline":"Getting started with Svelte JS","datePublished":"2019-09-17T18:30:00.000Z","description":"Svelte is a powerful compiler which any developer can choose for building UIs for the web. Ready-to-use web applications are easily created at a faster pace using svelte as it compiles the code while building the app instead of compiling the code during runtime.","author":{"@type":"Person","name":""}}</script> <script type="application/ld+json">{"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Skcript","item":"https://www.skcript.com"},{"@type":"ListItem","position":2,"name":"Blog","item":"https://www.skcript.com/blog"},{"@type":"ListItem","position":3,"name":"Getting started with Svelte JS","item":"https://www.skcript.com/blog/getting-started-with-svelte-js"}]}</script>