Today's Svelte App With Minimal UI!
Tags: javascript, svelte, beginners, vercel
Published: 2022-05-16 16:53:17

## 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](https://icanhazdadjoke.com) 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](https://svelte.dev/tutorial/transition-events) 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](https://svelte.dev/tutorial/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](https://vercel.com/guides/deploying-svelte-with-vercel) if you get stuck on deployment. 

[Check It Out!](https://svelte-dad-jokes-app.vercel.app/) 🔥

## 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](https://github.com/JavascriptDon/Svelte-Dad-Jokes-App) 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

## Useful Resources
- https://sveltestrap.js.org/ 
- https://svelte.dev/
- https://github.com/sveltejs/template