Travel Journal Built with Svelte
Small svelte app that takes in an "API" and generates components from the data retrieved. In this project that API is just a file called "data.js" that export a list with 3 objects that contain the data for each prop.
Overview
The Goal
User should be able to:
- Change the "API" data and modify the components generated
- Add more travel locations
Demo
Screenshot
My process
Built with
- Sveltejs/template
- HTML markup
- CSS
- Javascript
What I learned
- How to work with a "fake" API and objects with svelte
- #each blocks
- Manipulating data
Compared to react instead of doing mappings with arrays you can use #each blocks and #if blocks to perform logic in your html markup.
// Imported data array with objects
<script>
import data from './data';
import Navbar from './components/navbar.svelte';
import Main from './components/Main.svelte';
</script>
// How to do it in React
function App(){
const travelData = data.map((item) => {
return <Main key={item.id} {...item} />;
});
return (
<div>
<Navbar />
{travelData}
</div>
);
}
// Svelte allows the user to not use array.prototype.map with each blocks
// How to do it in Svelte - much more simple
<div>
<Navbar />
{#each data as item}
<Main {...item} />
{/each}
</div>
Installation
Clone this repository and install the dependencies...
git clone https://github.com/kevmok/svelte-travel-journal.git my-app
cd my-app
npm install
To run locally then start Rollup
npm run dev
Author
- Website - kevinmok.com
- GitHub - @kevmok
- Twitter - @hustlerBoxer
Acknowledgements
