The Repeater

This project introduces how you can get information from the web page (and the user) to use in your JavaScript.

As with the previous project, you'll use some Svelte-specific code in curly braces { }.

Specifically, we'll use the bind:value={variableName} to connect the input in the HTML to a variable in the JavaScript.

Let's compare the jQuery version of The Repeater with the Svelte version.

<label>
  Write something:
  <input id="txtInput" type="text">
</label>

<button id="btnRepeat">Repeat</button>

<p id="txtOutput"></p>

$('#btnRepeat').click( () => {
  let text = $('#txtInput').val()
  $('#txtOutput').text('You wrote: ' + text)
})

<script>
  let text = ''
</script>

<label>
   Write something:
  <input bind:value={text}>
</label>

<p>You wrote: {text}</p>

Project

1. Look over the code below, think about how it runs, and compare the output with the source code.
2. Create a new Svelte project from the template.
3. In the terminal in VS Code, type npm install and then npm run dev.
4. Check that your server is running by going to https://localhost:3000.
5. Write an app that will add the GST for any price that's typed in.
6. This line might help: <p>Total Cost: {price * 1.15}</p>
7. Test your app in your browser.
8. Commit your code with an appropriate message.

Sandbox

Feel free to play around with the example below to see how the web app reacts to your changes in a consequence-free environment.