DOM Shopping - Revision history

Andr3w: /* Sum Quantity by Price */

2021-10-10T18:56:18Z

Sum Quantity by Price

← Older revision		Revision as of 18:56, 10 October 2021
Line 45:		Line 45:
	document.body.innerHTML = `		document.body.innerHTML = `
	<div>Adult (£10): <select id=adult>		<div>Adult (£10): <select id=adult>
	<option>1</option>		<option>1</option><option>2</option>
	<option>2</option>		</select>
	</select>
	</div>		</div>
	<div>Child (£5): <select id=child>		<div>Child (£5): <select id=child>

Andr3w: /* Sum Quantity by Price */

2021-10-10T18:55:16Z

Sum Quantity by Price

← Older revision		Revision as of 18:55, 10 October 2021
Line 44:		Line 44:
	<pre class=usr>		<pre class=usr>
	document.body.innerHTML = `		document.body.innerHTML = `
	<div>Adult: <select id=adult>		<div>Adult (£10): <select id=adult>
	<option>1</option>		<option>1</option>
	<option>2</option>		<option>2</option>
	</select>		</select>
	</div>		</div>
	<div>Child: <select id=child>		<div>Child (£5): <select id=child>
	<option>1</option><option>2</option>		<option>1</option><option>2</option>
	</select>		</select>
Line 62:		Line 62:
	<pre class=ans>		<pre class=ans>
	document.body.innerHTML = `		document.body.innerHTML = `
	<div>Adult: <select id=adult>		<div>Adult (£10): <select id=adult>
	<option>1</option>		<option>1</option>
	<option>2</option>		<option>2</option>
	</select>		</select>
	</div>		</div>
	<div>Child: <select id=child>		<div>Child (£5): <select id=child>
	<option>1</option><option>2</option>		<option>1</option><option>2</option>
	</select>		</select>

Andr3w: /* Sum Quantity by Price */

2021-10-10T18:54:10Z

Sum Quantity by Price

← Older revision		Revision as of 18:54, 10 October 2021
Line 44:		Line 44:
	<pre class=usr>		<pre class=usr>
	document.body.innerHTML = `		document.body.innerHTML = `
	<div>Adult~~: Quantity~~: <select id=adult>		<div>Adult: <select id=adult>
	<option>1</option>		<option>1</option>
	<option>2</option>		<option>2</option>
	</select>		</select>
	</div>		</div>
	<div>Child~~: Quantity~~: <select id=child>		<div>Child: <select id=child>
	<option>1</option><option>2</option>		<option>1</option><option>2</option>
	</select>		</select>
Line 62:		Line 62:
	<pre class=ans>		<pre class=ans>
	document.body.innerHTML = `		document.body.innerHTML = `
	<div>Adult~~: Quantity~~: <select id=adult>		<div>Adult: <select id=adult>
	<option>1</option>		<option>1</option>
	<option>2</option>		<option>2</option>
	</select>		</select>
	</div>		</div>
	<div>Child~~: Quantity~~: <select id=child>		<div>Child: <select id=child>
	<option>1</option><option>2</option>		<option>1</option><option>2</option>
	</select>		</select>

Andr3w: /* Sum Quantity by Price */

2021-10-10T18:52:25Z

Sum Quantity by Price

← Older revision		Revision as of 18:52, 10 October 2021
Line 56:		Line 56:
	<div>Total: <input id=total value='15' disabled></div>		<div>Total: <input id=total value='15' disabled></div>
	`;		`;
	document.~~querySelectorAll~~('recalculate').onclick = ()=>{		document.getElementById('recalculate').onclick = ()=>{
	};		};
	</pre>		</pre>
Line 74:		Line 74:
	<div>Total: <input id=total value='15' disabled></div>		<div>Total: <input id=total value='15' disabled></div>
	`;		`;
	document.~~querySelectorAll~~('recalculate').onclick = ()=>{		document.getElementById('recalculate').onclick = ()=>{
	document.getElementById('total').value =		document.getElementById('total').value =
	parseInt(document.getElementById('adult').value) * 10 +		parseInt(document.getElementById('adult').value) * 10 +

Andr3w: /* Sum Quantity by Price */

2021-10-10T18:50:21Z

Sum Quantity by Price

← Older revision		Revision as of 18:50, 10 October 2021
Line 38:		Line 38:
	<pre class=test>		<pre class=test>
	{expr:[{id:'total',prop:"value"}],		{expr:[{id:'total',prop:"value"}],
	actions:[{id:'~~adult~~',method:"~~onchange~~"},		actions:[{id:'recalculate',method:"click"},
	{id:'adult',value:"2"},		{id:'adult',value:"2"},
	{id:'~~adult~~',method:"~~onchange~~"},]}		{id:'recalculate',method:"click"},]}
	</pre>		</pre>
	<pre class=usr>		<pre class=usr>
	document.body.innerHTML = `		document.body.innerHTML = `
	<div>Adult: Quantity: <select id=adult ~~value=1~~>		<div>Adult: Quantity: <select id=adult>
	<option>1</option>		<option>1</option>
	<option>2</option>		<option>2</option>
	</select>		</select>
	</div>		</div>
	<div>Child: Quantity: <select id=child ~~value=1~~>		<div>Child: Quantity: <select id=child>
	<option>1</option>		<option>1</option><option>2</option>
	<option>2</option>		</select>
	</select>
	</div>		</div>
			<button id=recalculate>Recalculate</button>
	<div>Total: <input id=total value='15' disabled></div>		<div>Total: <input id=total value='15' disabled></div>
	`;		`;
	document.querySelectorAll('~~select~~').~~forEach(~~()=>{		document.querySelectorAll('recalculate').onclick = ()=>{
	})		};
	</pre>		</pre>

	<pre class=ans>		<pre class=ans>
	document.body.innerHTML = `		document.body.innerHTML = `
	<div>Adult: Quantity: <select id=adult ~~value='1'~~>		<div>Adult: Quantity: <select id=adult>
	<option>1</option>		<option>1</option>
	<option>2</option>		<option>2</option>
	</select>		</select>
	</div>		</div>
	<div>Child: Quantity: <select id=child ~~value='1'~~>		<div>Child: Quantity: <select id=child>
	<option>1</option>		<option>1</option><option>2</option>
	<option>2</option>		</select>
	</select>
	</div>		</div>
			<button id=recalculate>Recalculate</button>
	<div>Total: <input id=total value='15' disabled></div>		<div>Total: <input id=total value='15' disabled></div>
	`;		`;
	document.querySelectorAll('~~select~~').~~forEach(s=>{~~		document.querySelectorAll('recalculate').onclick = ()=>{
	~~s.onchange~~ = ()=>{
	document.getElementById('total').value =		document.getElementById('total').value =
	parseInt(document.getElementById('adult').value) * 10 +		parseInt(document.getElementById('adult').value) * 10 +
	parseInt(document.getElementById('child').value) * 5;		parseInt(document.getElementById('child').value) * 5;
	};		};
	})
	</pre>		</pre>
	</div>		</div>

Andr3w: /* Sum Quantity by Price */

2021-10-10T18:46:00Z

Sum Quantity by Price

← Older revision		Revision as of 18:46, 10 October 2021
Line 38:		Line 38:
	<pre class=test>		<pre class=test>
	{expr:[{id:'total',prop:"value"}],		{expr:[{id:'total',prop:"value"}],
	actions:[{id:'adult',method:"~~change~~"},		actions:[{id:'adult',method:"onchange"},
	{id:'adult',value:"2"},		{id:'adult',value:"2"},
	{id:'adult',method:"~~change~~"},]}		{id:'adult',method:"onchange"},]}
	</pre>		</pre>
	<pre class=usr>		<pre class=usr>

Andr3w: /* Multiply Quantity by Price */

2021-10-10T18:43:40Z

Multiply Quantity by Price

← Older revision		Revision as of 18:43, 10 October 2021
Line 2:		Line 2:
	==Multiply Quantity by Price==		==Multiply Quantity by Price==
	<div class=qu data-width=300>		<div class=qu data-width=300>
	*You can quantity		*You can change quantity
	*Multiply the number by the price to get total cost		*Multiply the number by the price to get total cost
	<pre class=test>		<pre class=test>
Line 31:		Line 31:
	</pre>		</pre>
	</div>		</div>


	==Sum Quantity by Price==		==Sum Quantity by Price==

Andr3w: /* Sum Quantity by Price */

2021-10-10T18:41:35Z

Sum Quantity by Price

← Older revision		Revision as of 18:41, 10 October 2021
Line 45:		Line 45:
	<pre class=usr>		<pre class=usr>
	document.body.innerHTML = `		document.body.innerHTML = `
	<div>Adult: Quantity: <select id=~~adultvalue~~='1'>		<div>Adult: Quantity: <select id=adult value=1>
	<option>1</option>		<option>1</option>
	<option>2</option>		<option>2</option>
	</select>		</select>
	</div>		</div>
	<div>Child: Quantity: <select id=child value='1'>		<div>Child: Quantity: <select id=child value=1>
	<option>1</option>		<option>1</option>
	<option>2</option>		<option>2</option>
Line 75:		Line 75:
	<div>Total: <input id=total value='15' disabled></div>		<div>Total: <input id=total value='15' disabled></div>
	`;		`;
	document.querySelectorAll('select').forEach(()=>{		document.querySelectorAll('select').forEach(s=>{
	document.getElementById('total').value =		s.onchange = ()=>{
	parseInt(document.getElementById('adult').value) * 10 +		document.getElementById('total').value =
	parseInt(document.getElementById('child').value) * 5;		parseInt(document.getElementById('adult').value) * 10 +
			parseInt(document.getElementById('child').value) * 5;
			};
	})		})
	</pre>		</pre>
	</div>		</div>

Andr3w: /* Sum Quantity by Price */

2021-10-10T18:38:34Z

Sum Quantity by Price

← Older revision		Revision as of 18:38, 10 October 2021
Line 45:		Line 45:
	<pre class=usr>		<pre class=usr>
	document.body.innerHTML = `		document.body.innerHTML = `
	<div>Adult: Quantity: <select id=~~quantity value~~='1'>		<div>Adult: Quantity: <select id=adultvalue='1'>
	<option>1</option>		<option>1</option>
	<option>2</option>		<option>2</option>
	</select>		</select>
	</div>		</div>
	<div>Child: Quantity: <select id=~~quantity~~ value='1'>		<div>Child: Quantity: <select id=child value='1'>
	<option>1</option>		<option>1</option>
	<option>2</option>		<option>2</option>
Line 63:		Line 63:
	<pre class=ans>		<pre class=ans>
	document.body.innerHTML = `		document.body.innerHTML = `
	<div>Adult: Quantity: <select id=~~quantity~~ value='1'>		<div>Adult: Quantity: <select id=adult value='1'>
	<option>1</option>		<option>1</option>
	<option>2</option>		<option>2</option>
	</select>		</select>
	</div>		</div>
	<div>Child: Quantity: <select id=~~quantity~~ value='1'>		<div>Child: Quantity: <select id=child value='1'>
	<option>1</option>		<option>1</option>
	<option>2</option>		<option>2</option>

Andr3w: /* Sum Quantity by Price */

2021-10-10T18:37:36Z

Sum Quantity by Price

← Older revision		Revision as of 18:37, 10 October 2021
Line 39:		Line 39:
	<pre class=test>		<pre class=test>
	{expr:[{id:'total',prop:"value"}],		{expr:[{id:'total',prop:"value"}],
	actions:[{id:'~~recalculate~~',method:"~~click~~"},{id:'~~quantity~~',value:"2"},{id:'~~recalculate~~',method:"~~click~~"},]}		actions:[{id:'adult',method:"change"},
			{id:'adult',value:"2"},
			{id:'adult',method:"change"},]}
	</pre>		</pre>
	<pre class=usr>		<pre class=usr>
Line 76:		Line 78:
	document.getElementById('total').value =		document.getElementById('total').value =
	parseInt(document.getElementById('adult').value) * 10 +		parseInt(document.getElementById('adult').value) * 10 +
	parseInt(document.getElementById('~~adult~~').value) * 5;		parseInt(document.getElementById('child').value) * 5;
	})		})
	</pre>		</pre>
	</div>		</div>