# create-svelte

Everything you need to build a Svelte project, powered by [`create-svelte`](https://github.com/sveltejs/kit/tree/master/packages/create-svelte).

## Creating a project

If you're seeing this, you've probably already done this step. Congrats!

```bash
# create a new project in the current directory
npm create svelte@latest

# create a new project in my-app
npm create svelte@latest my-app
```

## Developing

Once you've created a project and installed dependencies with `npm install` (or `pnpm install` or `yarn`), start a development server:

```bash
npm run dev

# or start the server and open the app in a new browser tab
npm run dev -- --open
```

## Building

To create a production version of your app:

```bash
npm run build
```

You can preview the production build with `npm run preview`.

> To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.

////////////////

Right now, my signup page is set up like that:

<svelte:head>
    <title>Sign Up</title>
</svelte:head>

<script>
    import { signup } from '$lib/api';
    import Modal from '$components/Modal.svelte';

    let showModal = true;
    let modalMessage = 'Test message';

    let email = '';
    let password = '';
    
    async function handleSignup() {
        try {
            const user = await signup(email, password);
            alert('Signup successful');
        } catch (err) {
            alert('Signup failed because of : ' + err);
        }
    }

    function closeModal() {
        showModal = false;
    }

</script>
<main>

<div class="colonel">
    <input type="email" bind:value={email} placeholder="Email">
    <input type="password" bind:value={password} placeholder="Password">
    <button class="btn-fly" on:click={handleSignup}>Sign Up</button>
</div>

{#if showModal}
    <Modal {modalMessage} on:close={closeModal} />
{/if}

</main>

And input is set up like that in styles/forms.scss:

input[type=text], input[type=password], input[type=email], input[type=number], input[type=date], select {
    padding: 12px 0px;
    margin: 8px 0;
    box-sizing: border-box;
    border: none;
    border-bottom: 5px solid $fg-color;
    background-color: $bg-color;
    color: $fg-color;
    font-size: 1.2rem;
    font-weight: 400;
    &:focus {
        outline: none;
        border-bottom: 5px solid $red;
    }
}

So the email field has a red border on bottom when focused.

I would like that borer to become green when the email is valid.