Making the web svelter with SvelteKit

# Making the web Svelter with SvelteKit

### Part 1 - The index-page

[Back to part 0](part0_slides.html)
						---
						## The Index-page

- The index page resides within /src/routes/+page.svelte
							- This is a "page component", and consists of the markup, logic and styles needed for the component
						- Structured in a familiar way that feels conspicuously like a normal HTML5 website

```svelte []
						<script>
							const name = "Joachim";
						</script>

<h1>Hello {name}!</h1>

```svelte []
						<script>

</script>

<style>

</style>
						```
						---
						## Adding some styling

```css []
						 <style>
							 #cf2 {
								 position: relative;
								 width: 100vw;
								 height: 80vh;
								 overflow: hidden;
							 }

#cf2 div.transparent {
								 /* opacity: 0; */
							 }

#cf2 div.photo {
								 position: absolute;
								 top: 0;
								 width: 100vw;
								 height: 80vh;
								 object-fit: cover;
								 transition: opacity 1s ease-in-out, transform 10s;
								 background-size: cover;
								 background-position: center;
							 }

:global(#cf2 div.zoom) {
								 transform: scale(1.2);
							 }
						 </style>
						```
						---
						## Adding more images

```html []
						<div id="cf2">
							 <div class="photo transparent" style="background-image: url('/images/background1.jpg')" />
							 <div class="photo transparent" style="background-image: url('/images/IMGP4117.jpg')" />
							 <div class="photo transparent" style="background-image: url('/images/IMGP4642.jpg')" />
							 <div class="photo transparent" style="background-image: url('/images/IMGP6801.jpg')" />
						 </div>
						```
						---
						## Running code when code loads in the browser

```svelte []
						<script>
     						import {onMount} from "svelte";

let photoLength = 0;
							onMount(() => {
								photoLength = document.querySelector("#cf2").children.length;
								setFirstPhoto();
							});

function setFirstPhoto() {

}
						</script>

```svelte []
						    let intervalId = null;
							let intervalMs = 10000;
							let photoLength = 0;
							let currentPhoto = 0;

function changePhoto() {
								console.log("change photo: " + photoLength);
								let nextPhoto = currentPhoto >= photoLength - 1 ? 0 : currentPhoto + 1;
								console.log("currentPhoto: " + currentPhoto + " nextPhoto:" + nextPhoto);

if (document.getElementById("cf2")) {
									document.getElementById("cf2").children[currentPhoto].classList.add("transparent");
									document.getElementById("cf2").children[currentPhoto].classList.remove("zoom");
									document.getElementById("cf2").children[nextPhoto].classList.remove("transparent");
									document.getElementById("cf2").children[nextPhoto].classList.add("zoom");
								}

currentPhoto = nextPhoto;
							}

function setFirstPhoto() {
								if (document.getElementById("cf2") && document.getElementById("cf2").children.length > 0) {
									document.getElementById("cf2").children[0].classList.remove("transparent");
									setTimeout(function () {
										console.log('ADDING ZOOM: ' + document.getElementById("cf2").children[0].classList);
										document.getElementById("cf2").children[0].classList.add("zoom");
										console.log(document.getElementById("cf2").children[0].classList);
									}, 1000);
								}

if (intervalId) {
									clearInterval(intervalId);
								}

intervalId = setInterval(changePhoto, intervalMs);
							}
						```
						---
						## Onwards

[part 2](part2_slides.html)