106 lines
2.5 KiB
Markdown
106 lines
2.5 KiB
Markdown
# 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. |