DEV Community: Mohammad Saiful Islam

Svelte multi step form apps

Mohammad Saiful Islam — Mon, 25 Oct 2021 05:51:42 +0000

Today we are going to make a multistep form app with Svelte. So let's start.

First, let's make a basic template with Start and Prev buttons:

<main>
  <div class="container">
    <div class="step-button">
      <button class="btn">Prev</button>
      <button class="btn">Next</button>
    </div>
  </div>
</main>

<style>
  @import url('https://fonts.googleapis.com/css?family=Muli&display=swap');

  * {
    box-sizing: border-box;
  }

  main {
    font-family: 'Muli', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
    margin: 0;
  }

  .btn {
    background-color: #3498db;
    color: #fff;
    border: 0;
    border-radius: 6px;
    cursor: pointer;
    font-family: inherit;
    padding: 8px 30px;
    margin: 5px;
    font-size: 14px;
  }

  .btn:active {
    transform: scale(0.98);
  }

  .btn:focus {
    outline: 0;
  }

  .btn:disabled {
    background-color: #e0e0e0;
    cursor: not-allowed;
  }

  .step-button{
    margin-top: 1rem;
    text-align: center;
  }
</style>

Now we are going to build a steps progress bar component, So first create this ProgressBar.svelte component:

<script>
  export let steps = ['Info', 'Address', 'Payment', 'Confirmation'];
</script>

<div class="progress-container">
  <div class="progress"></div>
  {#each steps as step, i}
    <div class="circle {i == 0 ? 'active' : ''}" data-title={step} >{i+1}</div>
  {/each}
</div>


<style>
  .progress-container {
    display: flex;
    justify-content: space-between;
    position: relative;
    margin-bottom: 30px;
    max-width: 100%;
    width: 350px;
  }

  .progress-container::before {
    content: '';
    background-color: #e0e0e0;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    height: 4px;
    width: 100%;
    z-index: -1;
  }

  .progress {
    background-color: #3498db;
    position: absolute;
    top: 50%;
    left: 0;
    transform: translateY(-50%);
    height: 4px;
    width: 0%;
    z-index: -1;
    transition: 0.4s ease;
  }

  .circle {
    background-color: #fff;
    color: #999;
    border-radius: 50%;
    height: 30px;
    width: 30px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 3px solid #e0e0e0;
    transition: 0.4s ease;
    cursor: pointer;
  }

  .circle::after{
    content: attr(data-title) " ";
    position: absolute;
    bottom: 35px;
    color: #999;
    transition: 0.4s ease;
  }

  .circle.active::after {
    color: #3498db;
  }

  .circle.active {
    border-color: #3498db;
  }
  </style>

Our progress bar UI is ready, Now we need to implement functionality for the Step panel and Prev, Next button.
The Prev button should be disabled for the first step Info and the Next button should be disabled for the last step Confirmation. So need to track the current active step currentActive and also for the handling progress we write a function handleProgress and for update the progress bar steps add a function update and declare circles for reference all steps elements and progress for progress bar element. So our latest ProgressBar.svelte version like this:

<script>
  export let steps = [], currentActive = 1;
  let circles, progress;

  export const handleProgress = (stepIncrement) => {
    circles = document.querySelectorAll('.circle');
    if(stepIncrement == 1){
      currentActive++

      if(currentActive > circles.length) {
          currentActive = circles.length
      }
    } else {
      currentActive--

      if(currentActive < 1) {
          currentActive = 1
      }
    }


    update()
  }

  function update() {
    circles.forEach((circle, idx) => {
        if(idx < currentActive) {
            circle.classList.add('active')
        } else {
            circle.classList.remove('active')
        }
    })

    const actives = document.querySelectorAll('.active');

    progress.style.width = (actives.length - 1) / (circles.length - 1) * 100 + '%';
  }
</script>

<div class="progress-container" bind:this={circles}>
  <div class="progress" bind:this={progress}></div>
  {#each steps as step, i}
    <div class="circle {i == 0 ? 'active' : ''}" data-title={step} >{i+1}</div>
  {/each}
</div>

And update App.svelte:

<script>
let steps = ['Info', 'Address', 'Payment', 'Confirmation'], currentActive = 1, progressBar;

const handleProgress = (stepIncrement) => {
  progressBar.handleProgress(stepIncrement)
}
</script>

<ProgressBar {steps} bind:currentActive bind:this={progressBar}/>

<button class="btn" on:click={() => handleProgress(-1)} disabled={currentActive == 1}>Prev</button>
<button class="btn" on:click={() => handleProgress(+1)} disabled={currentActive == steps.length}>Next</button>

Now we are going to make Form.svelte component, first, make an input component for reusability InputField.svelte.

<script>
  export let value, label, type = 'text';

  function typeAction(node){
    node.type = type;
  }
</script>

<p class="form-control">
  {#if label}
    <label class="label" for>{label}:</label>
  {/if}
  <input use:typeAction class="input" bind:value={value}/>
</p>

<style>
  .form-control{
    margin: .5rem 0;
    text-align: left;
  }
  .input{
    width: 100%;
    display: block;
    padding: 0.5rem 0;
    margin-top: 0.5rem;
    border-width: 1px;
    border-radius: 0.25rem;
  }
</style>

Here we see a new directive use:typeAction its use for set dynamic input type. Ok InputField is ready now move to Form.svelte:

<script>
  import InputField from './InputField.svelte';
  export let active_step;
  let formData = {
    name: '',
    surname: '',
    email: '',
    password: '',
    address: '',
    city: '',
    country: '',
    postcode: '',
    account_name: '',
    card_no: ''
  }

  const handleSubmit = () => {
    console.log("Your form data => ",formData)
  }
</script>

<form class="form-container" on:submit={handleSubmit}>
  {#if active_step == 'Info'}
    <InputField label={'Name'} bind:value={formData.name}/>
    <InputField label={'Surname'} bind:value={formData.surname}/>
    <InputField label={'Email'} bind:value={formData.email}/>
    <InputField type={'password'} label={'Password'} bind:value={formData.password}/>
  {:else if active_step == 'Address'}
    <InputField label={'Address'} bind:value={formData.address}/>
    <InputField label={'City'} bind:value={formData.city}/>
    <InputField label={'Country'} bind:value={formData.country}/>
    <InputField label={'Postcode'} bind:value={formData.postcode}/>
  {:else if active_step == 'Payment'}
    <InputField label={'Account Name'} bind:value={formData.account_name}/>
    <InputField label={'Card No'} bind:value={formData.card_no}/>
  {:else if active_step == 'Confirmation'}
    <div class="message">
      <h2>Thank you for choosing us</h2>
      <button class="btn submit">Finish </button>
    </div>
  {/if}
</form>

<style>

.form-container {
  background-color: #fff;
  border-radius: 10px;
  box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1), 0 6px 6px rgba(0, 0, 0, 0.1);
  padding: 50px 20px;
  text-align: center;
  max-width: 100%;
  width: 350px;
}
.btn{
  color: white;
  padding: 0.5rem 0;
  margin-top: 0.5rem;
  display: inline-block;
  width: 100%;
  border-radius: 0.25rem;
  cursor:pointer;
}
.submit{
  background:linear-gradient(to bottom, #44c767 5%, #50b01c 100%);
  background-color:#44c767;
}
.submit:hover {
  background:linear-gradient(to bottom, #50b01c 5%, #44c767 100%);
  background-color:#50b01c;
}
.message{
  text-align: center;
}
</style>

And update App.svelte:

<script>
  import Form from './Form.svelte';
  import ProgressBar from './ProgressBar.svelte';
  let steps = ['Info', 'Address', 'Payment', 'Confirmation'], currentActive = 1, progressBar;

  const handleProgress = (stepIncrement) => {
    progressBar.handleProgress(stepIncrement)
  }
</script>

<main>
  <div class="container">
    <ProgressBar {steps} bind:currentActive bind:this={progressBar}/>

    <Form active_step={steps[currentActive-1]}/>

    <div class="step-button">
      <button class="btn" on:click={() => handleProgress(-1)} disabled={currentActive == 1}>Prev</button>
      <button class="btn" on:click={() => handleProgress(+1)} disabled={currentActive == steps.length}>Next</button>
    </div>
  </div>
</main>

Here is the final output:

Svelte Expanding Card

Full source code in this repl.

You find me in Github.

Svelte 50 Projects 50 Days - Project 1 Expanding Card

Mohammad Saiful Islam — Sat, 23 Oct 2021 03:30:30 +0000

Learning a new JavaScript framework 50projects50days is a great resource. We can convert them to the new framework. Nowadays Svelte is one of the hot UI frameworks (actually it's a build-time compiler). I decided I convert those projects to Svelte. So I'm going to make our first project Expanding Cards in Svelte. For this project, we can use Svelte REPL. Here we can do live code. So let's start.

A Svelte component has 3 parts. script, template, style.

<script>
  //JavaScipt logic goes here
</script>

<!-- HTML content goes here -->

<style>
/* style goes here */
</style>

So let's implement the template part.

Making Template

<main>
  <div class="container">
    <div class="panel" style="background-image: url('https://images.unsplash.com/photo-1558979158-65a1eaa08691?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
      <h3>Explore The World</h3>
    </div>
  </div>
</main>

And the style part.

<style>
  @import url('https://fonts.googleapis.com/css?family=Muli&display=swap');

  * {
    box-sizing: border-box;
  }
  main {
    font-family: 'Muli', sans-serif;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    overflow: hidden;
    margin: 0;
  }

  .container {
    display: flex;
    width: 90vw;
  }

  .panel {
    height: 80vh;
    border-radius: 25px;
    color: #fff;
    flex: 1;
    cursor: pointer;
    margin: 10px;
    position: relative;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
  }

  .panel h3 {
    font-size: 24px;
    position: absolute;
    bottom: 20px;
    left: 20px;
    margin: 0;
    opacity: 0;
  }

</style>

And it looks like this.

Now we are going to add 5 photos in the container and the first panel should have an active class, and also for the active class add some CSS.

  <div class="panel active" style="background-image: url('https://images.unsplash.com/photo-1558979158-65a1eaa08691?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
    <h3>Explore The World</h3>
  </div>
  <div class="panel" style="background-image: url('https://images.unsplash.com/photo-1572276596237-5db2c3e16c5d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
    <h3>Wild Forest</h3>
  </div>
  <div class="panel" style="background-image: url('https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80')">
    <h3>Sunny Beach</h3>
  </div>
  <div class="panel" style="background-image: url('https://images.unsplash.com/photo-1551009175-8a68da93d5f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80')">
    <h3>City on Winter</h3>
  </div>
  <div class="panel" style="background-image: url('https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80')">
    <h3>Mountains - Clouds</h3>
  </div>

In Style Part

  .panel {
    flex: 0.5; //changed 1 to 0.5;
  }
  .panel.active {
    flex: 5;
  }

  .panel.active h3 {
    opacity: 1;
  }

Now, its look like this.

Now our template is ready, we need to implement the logic for the click event on a panel its need to expand and the rest of are shrink.

Implementing Logic

Here we write 5 hardcoded panel blocks, but in Svelte we can simplify them. For instance:

<script>
  const images = [
    { src: 'https://images.unsplash.com/photo-1558979158-65a1eaa08691?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80', caption: 'Explore The World'},
    { src: 'https://images.unsplash.com/photo-1572276596237-5db2c3e16c5d?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80', caption: 'Wild Forest'},
    { src: 'https://images.unsplash.com/photo-1507525428034-b723cf961d3e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1353&q=80', caption: 'Sunny Beach'},
    { src: 'https://images.unsplash.com/photo-1551009175-8a68da93d5f9?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1351&q=80', caption: 'City on Winter'},
    { src: 'https://images.unsplash.com/photo-1549880338-65ddcdfd017b?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=crop&w=1350&q=80', caption: 'Mountains - Clouds'}
  ]
</script>

<main>
  <div class="container">
    {#each images as {src, caption}, i}
      <div class="panel {i == 0 ? 'active' : ''}" style="background-image: url({src})">
        <h3>{caption}</h3>
      </div>
    {/each}
  </div>
</main>

Here we declare an image list and we render it by each block, each has two arguments first one the item and the next one the index, also in the template, we render a class conditionally, so for the 0th position add an active class.

Our next target is we need to add a click event and need to reference the container elements. First, let's do it in the script:

  let panel_container;

  function handleActiveClasses(i) {
    if(panel_container){
      panel_container.childNodes[i].classList.add('active')
    }
  }

In template for reference an element we use bind:this={panel_container} and add attach the event handler which takes a arguments i as an index:

<div class="container" bind:this={panel_container}>
  {#each images as {src, caption}, i}
    <div on:click={() => handleActiveClasses(i)} class="panel {i == 0 ? 'active' : ''}" style="background-image: url({src})">
      <h3>{caption}</h3>
    </div>
  {/each}
</div>

Now it looks like this.

Here still has two problems, first, one is expanded only targeted panel and need to rest are shrinking, but we see every panel are expanded for click. And the second problem is the expanding panel is looking weird, so we can add a transition. first, let's add the transition:

  .panel{
    -webkit-transition: all 700ms ease-in;
  }
  .panel.active h3 {
    transition: opacity 0.3s ease-in 0.4s;
  }

To shrink the panel we need to remove the active class from every element and add an active class for the current index. Let's update our function:

function handleActiveClasses(i) {
  if(panel_container){
    panel_container.childNodes.forEach(panel => {
      panel.classList.remove('active')
    })
    panel_container.childNodes[i].classList.add('active')
  }
}

The final output is:

We finish our first project in Svelte.

Summary

In this project this Svelte features we used:

adding Data
styling
each
dom-events
inline-handlers
reference html elements

You can find the final code in this REPL.

GitHub profile: GitHub.