Getting Started
Create a new svelte project inside your local directory with the following command:
# Creating a new project
npx degit sveltejs/template
# Install the dependencies...
npm install
...then start Rollup:
npm run dev
Navigate to localhost:8080. You should see your app running. Edit a component file in src, save it, and reload the page to see your changes.
Adding Bootstrap
Add Sveltstrap using one of the following methods:
# Method One: Install sveltestrap and peer dependencies via NPM
npm install sveltestrap
# Method Two: Include CDN within Static HTML layout
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.0/dist/css/bootstrap.min.css">
</head>
Folder Structure
On the root level, we will create the following files.
- Joke.svelte
- Transition.svelte
- Api.js
Extracting Data From API
Go into API.js and add the following code to fetch data from our API using the getJodeData
function.
export const getJokeData = async () => {
const response = await fetch('https://icanhazdadjoke.com', {
headers: {
Accept: 'application/json',
},
});
const json = await response.json();
return json.joke;
};
Creating Our Components
This project will have two components where we have one for the animations and one for displaying our Joke-text.
Now add the following code to our Joke.svelte
file.
<script>
import { Card } from "sveltestrap";
export let joke;
</script>
<style>
:global(.joke-text){
font-family: 'Montserrat', sans-serif;
font-weight: bold;
text-align: center;
}
</style>
<Card class="joke-text" body>{joke}</Card>
And create our fly transitions inside the Transition.svelte
file.
<script>
import { fly } from "svelte/transition";
export let duration = 1000;
export let distance = 200;
</script>
<div in:fly={{ y: distance, duration }} out:fly={{ x: distance, distance }}>
<slot />
</div>
Completing Our App.Svelte
Our App.Svelte
structure should look like this now.
<script>
// JavaScript Logic
</script>
<style>
// CSS Styles
</style>
<main>
// HTML Markup
</main>
Now we need to import the following bootstrap components from sveltestrap to our scripts.
import { Col, Container, Row, Button} from "sveltestrap";
Next up we can create our container using the following components that we just defined.
<Container class="joke-container">
<Row>
<Col>
<h1>The Best Dad Jokes!</h1>
</Col>
</Row>
<Row>
<Col>
<Button class="random-joke" color="danger">
Random Joke
</Button>
</Col>
</Row>
</Container>
This is the fun part of the App so let's style up our container.
<style>
:global(.random-joke) {
width: 100%;
}
:global(h1){
color: white;
}
:global(.row) {
margin-top: 10px;
padding: 10px;
}
:global(.joke-container){
border-radius: 10px;
background-color: #00092C;
}
</style>
Our App.svelte should then be modified to import the following components we just created alongside using onMount to load our Joke data over the network.
<script>
import { onMount } from "svelte";
import { Col, Container, Row, Button} from "sveltestrap";
import { getJokeData } from "./api.js";
import Transition from "./transition.svelte";
import Joke from "./joke.svelte";
</script>
Let's create our onMount handler with our get requests from our api and complete up our App.Svelte file.
<script>
import { onMount } from "svelte";
import { Col, Container, Row, Button} from "sveltestrap";
import { getJokeData } from "./api/api.js";
import Transition from "./components/transition.svelte";
import Joke from "./components/joke.svelte";
let randomJoke;
let jokes = [];
let mode = "loading";
onMount(async () => {
await onRandomJoke();
});
async function onRandomJoke() {
try {
mode = "loading";
await sleep(500);
randomJoke = await getJokeData();
await sleep(500);
mode = "random";
} catch (e) {
alert("Oops! You've Encountered An Error.");
}
}
const sleep = delayMS => new Promise(res => setTimeout(res, delayMS));
</script>
<style>
:global(.random-joke) {
width: 100%;
}
:global(h1){
color: white;
}
:global(.row) {
margin-top: 10px;
padding: 10px;
}
:global(.joke-container){
border-radius: 10px;
background-color: #00092C;
}
</style>
<Container class="joke-container">
<Row>
<Col>
<h1>The Best Dad Jokes!</h1>
</Col>
</Row>
<Row>
<Col>
<Button on:click={onRandomJoke} class="random-joke" color="danger">
Random Joke
</Button>
</Col>
</Row>
{#if mode === 'random'}
<Transition>
<Row>
<Col>
<Joke joke={randomJoke}/>
</Col>
</Row>
</Transition>
{/if}
</Container>
Deployment: π€―
You can deploy your svelte project to any hosting platform. I personally choose to deploy this application to Vercel by importing my git repository. I highly recommend you check out their docs if you get stuck on deployment.
Check It Out! π₯
Recap
If you followed along then you should have completed the project and finished off your Svelte Dad-Jokes App.
Now if you made it this far, then I am linking the code to my GitHub page for you to fork or clone and then the job's done.
License: π
This project is under the MIT License (MIT). See the LICENSE for more information.
Contributions
Contributions are always welcome...
- Fork the repository
- Improve current program by
- improving functionality
- adding a new feature
- bug fixes
- Push your work and Create a Pull Request
Top comments (0)