Interactive elements

Question
1

How is the business logic applied to interactive elements?

2

What do you mean? You need to expand on what you are asking!!

3

G’day Mike.

The interactive element on the page Sparkle 5 — Sparkle has a title of ‘Car Rentals’

Age is the first input.

<select name="age" class="input1">
    <option value="1.2" data-calc="1.2">16-24</option>
    <option value="1.1" data-calc="1.1">25-34</option>
    <option selected="" value="1" data-calc="1">35-44</option>
    <option value="1.1" data-calc="1.1">45-65</option>
    <option value="1.2" data-calc="1.2">+65</option>
</select>

Car is the second input.

<select name="car type" class="input2">
    <option selected="" value="1" data-calc="1">Economy</option>
    <option value="1.1" data-calc="1.1">Compact</option>
    <option value="1.1" data-calc="1.1">SUV</option>
    <option value="1.3" data-calc="1.3">Large</option>
    <option value="3" data-calc="3">Luxury</option>
</select>

The third option is the number of days.

<input type="range" min="1" max="30" value="3" name="slider" class="input3">

and the output is Your estimate.

<h1 class="p8 f22">
	Your estimate: <span class="f27"><span id="sf5">126</span>
	<script>
	document.addEventListener('DOMContentLoaded', function() {
	var calc = {
		addEvent: function(t, n, i) {
			return null != t.addEventListener ? t.addEventListener(n, i, !1) : null != t.attachEvent ? t.attachEvent("on" + n, i) : t[n] = i
		},
		update: function() {
			var t = document.getElementById("sf5"),
				n = this.formula(),
				i = this.digits;
			i >= 0 && (n = parseFloat(n).toLocaleString(undefined, {
				minimumFractionDigits: i,
				maximumFractionDigits: i
			})), t.innerHTML = n
		},
		formula: function() {
			return (function(v) {
				return (v.v0 ? parseFloat(v.v0) : 0) * (v.v1 ? parseFloat(v.v1) : 0) * (v.v2 ? parseFloat(v.v2) : 0) * 27
			})(this).toFixed(0)
		},
		digits: 0
	}; {
		var s = document.querySelector("input[name='slider']");
		calc.v0 = s.value;
		calc.addEvent(s, 'input', function() {
			calc.v0 = this.value;
			calc.update()
		})
	} {
		var s = document.querySelector("select[name='age']");
		calc.v1 = s.options[s.selectedIndex].dataset.calc;
		calc.addEvent(s, 'change', function() {
			calc.v1 = this.options[this.selectedIndex].dataset.calc;
			calc.update()
		})
	} {
		var s = document.querySelector("select[name='car type']");
		calc.v2 = s.options[s.selectedIndex].dataset.calc;
		calc.addEvent(s, 'change', function() {
			calc.v2 = this.options[this.selectedIndex].dataset.calc;
			calc.update()
		})
	}
	calc.update();
})

	</script></span><span class="f27">$</span>
</h1>

how is the javascript created and or edited and attached to the dom?

4

Be in mind, when you look into the source code off your Website in the Sparkle editor, the sourcecode not this what gets exported on your webspace.
Sparkle generates the source code when exporting.

5

Hi @csmu,

Sparkle is not about coding. Sparkle creates all that code for you. There’s a tutorial specifically about that sample actually:

2 Likes