create-svelte

Everything you need to build a Svelte project, powered by create-svelte.

Creating a project

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

# 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:

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:

npm run build

You can preview the production build with npm run preview.

To deploy your app, you may need to install an adapter for your target environment.

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

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

svelte:head </svelte:head>

Sign Up

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

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.