DOM Common Logic - Revision history

Andr3w: /* Express Delivery */

2021-10-10T15:30:32Z

Express Delivery

← Older revision		Revision as of 15:30, 10 October 2021
Line 86:		Line 86:
	Pay £10 extra for express delivery		Pay £10 extra for express delivery
	*When the user selects the option, the price should change		*When the user selects the option, the price should change
			*If the user unchecks the box it should go back to the original price
			*You can read the state of the check box with:
			if (document.getElementById('express').checked)
			...
			else
			...

	<pre class=test>		<pre class=test>
	{expr:[{id:'total',prop:'value'}],		{expr:[{id:'total',prop:'value'}],

Andr3w: /* Express Delivery */

2021-10-10T15:28:55Z

Express Delivery

← Older revision		Revision as of 15:28, 10 October 2021
Line 88:		Line 88:
	<pre class=test>		<pre class=test>
	{expr:[{id:'total',prop:'value'}],		{expr:[{id:'total',prop:'value'}],
	actions:[{},{id:'express',method:"click"}]}		actions:[{},{id:'express',method:"click"},{id:'express',method:"click"}]}
	</pre>		</pre>

Andr3w: /* Express Delivery */

2021-10-10T15:27:48Z

Express Delivery

← Older revision		Revision as of 15:27, 10 October 2021
Line 85:		Line 85:
	<div class=qu data-width=300>		<div class=qu data-width=300>
	Pay £10 extra for express delivery		Pay £10 extra for express delivery
			*When the user selects the option, the price should change
	<pre class=test>		<pre class=test>
	{expr:[{id:'total',prop:'value'}],		{expr:[{id:'total',prop:'value'}],

Andr3w: /* A checkbox to enable a button */

2021-10-10T15:26:35Z

A checkbox to enable a button

← Older revision		Revision as of 15:26, 10 October 2021
Line 3:		Line 3:
	<div class=qu data-width=300>		<div class=qu data-width=300>
	You must be 1.2m to to ride		You must be 1.2m to to ride
			*The submit button starts with the property '''disabled'''
			*The users action removes this property
	*Add this code to allow the user to enable the button.		*Add this code to allow the user to enable the button.
	document.getElementById('tall').onclick = ()=>{		document.getElementById('tall').onclick = ()=>{

Andr3w: /* Exclusive Options */

2021-10-03T21:09:20Z

Exclusive Options

← Older revision		Revision as of 21:09, 3 October 2021
Line 172:		Line 172:
	==Exclusive Options==		==Exclusive Options==
	<div class=qu data-width=300>		<div class=qu data-width=300>
	*~~YOu~~ can use radio buttons to present mutually exclusive options		*You can use radio buttons to present mutually exclusive options
	<pre class=test>		<pre class=test>
	{expr:[{id:'total',prop:'value'}],		{expr:[{id:'total',prop:'value'}],

Andr3w: /* Exclusive Options */

2021-10-03T21:09:04Z

Exclusive Options

← Older revision		Revision as of 21:09, 3 October 2021
Line 172:		Line 172:
	==Exclusive Options==		==Exclusive Options==
	<div class=qu data-width=300>		<div class=qu data-width=300>
	~~If the user enters discount code <code>10PC</code> then the total is £90~~		*YOu can use radio buttons to present mutually exclusive options
	<pre class=test>		<pre class=test>
	{expr:[{id:'total',prop:'value'}],		{expr:[{id:'total',prop:'value'}],

Andr3w: /* Exclusive Options */

2021-10-03T21:07:04Z

Exclusive Options

← Older revision		Revision as of 21:07, 3 October 2021
Line 175:		Line 175:
	<pre class=test>		<pre class=test>
	{expr:[{id:'total',prop:'value'}],		{expr:[{id:'total',prop:'value'}],
	actions:[{},		actions:[
			{id:'s',method:'click'},
			{id:'d',method:'click'},
			{id:'l',method:'click'},
	]}		]}
	</pre>		</pre>
Line 181:		Line 184:
	<pre class=usr>		<pre class=usr>
	document.body.innerHTML = `		document.body.innerHTML = `
	<~~div~~>~~Cost £~~<input ~~disabled size~~=2 id=~~cost value=100~~><~~div~~>		<label>Single, £100 <input name=n type=radio id=s></label><br>
	<~~div~~>		<label>Double, £150 <input name=n type=radio id=d></label><br>
	<label>~~Discount code~~		<label>Luxury, £200 <input name=n type=radio id=l></label><br>
	<input id=~~discount /~~>		Total £<input disabled id=total size=2>
	</label>
	<~~/div~~>
	<~~div~~><~~button~~ id=~~recalculate~~>~~Recalculate~~</~~button~~>
	Total £<input disabled id=total size=2 ~~value=100>~~
	~~</div~~>
	`;		`;
			document.getElementById('s').onclick=()=>{
			document.getElementById('total').value=100;
			}
	</pre>		</pre>

	<pre class=ans>		<pre class=ans>
	document.body.innerHTML = `		document.body.innerHTML = `
	<~~div~~>~~Cost £~~<input ~~disabled size~~=2 id=~~cost value=100~~><~~div~~>		<label>Single, £100 <input name=n type=radio id=s></label><br>
	<~~div~~>		<label>Double, £150 <input name=n type=radio id=d></label><br>
	<label>~~Discount code~~		<label>Luxury, £200 <input name=n type=radio id=l></label><br>
	<input id=~~discount /~~>		Total £<input disabled id=total size=2>
	</label>
	<~~/div~~>
	<~~div~~><~~button~~ id=~~recalculate~~>~~Recalculate~~</~~button~~>
	Total £<input disabled id=total size=2 ~~value=100>~~
	~~</div~~>
	`;		`;
	document.getElementById('~~recalculate~~').onclick = ()=>{		document.getElementById('s').onclick=()=>{
	~~if (~~document.getElementById('~~discount~~').value === '~~10PC~~'){		document.getElementById('total').value=100;
	document.getElementById('total').value = ~~'90'~~;		}
	}~~else~~{		document.getElementById('d').onclick=()=>{
	document.getElementById('total').value = ~~'100'~~;		document.getElementById('total').value=150;
	}		}
			document.getElementById('l').onclick=()=>{
			document.getElementById('total').value=200;
	}		}
	</pre>		</pre>
	</div>		</div>

Andr3w: /* Discount Code */

2021-10-03T20:58:57Z

Discount Code

@@ Line 130: / Line 130: @@
     {id:'discount',prop:'value',value:'10PC'},
     {id:'recalculate',method:'click'},
   ]}
 </pre>

Andr3w: /* Discount Code */

2021-10-03T20:37:19Z

Discount Code

← Older revision		Revision as of 20:37, 3 October 2021
Line 128:		Line 128:
	{id:'discount',prop:'value',value:'wrong'},		{id:'discount',prop:'value',value:'wrong'},
	{id:'recalculate',method:'click'},		{id:'recalculate',method:'click'},
	{id:'discount',prop:'value',value:'10PC'}]},		{id:'discount',prop:'value',value:'10PC'},
	{id:'recalculate',method:'click'},		{id:'recalculate',method:'click'},
			]}
	</pre>		</pre>

Andr3w: /* Discount Code */

2021-10-03T20:36:28Z

Discount Code

← Older revision		Revision as of 20:36, 3 October 2021
Line 124:		Line 124:
	<pre class=test>		<pre class=test>
	{expr:[{id:'total',prop:'value'}],		{expr:[{id:'total',prop:'value'}],
	actions:[{},{id:'discount',prop:'value',value:'wrong'},{id:'discount',prop:'value',value:'10PC'}]}		actions:[{},
			{id:'recalculate',method:'click'},
			{id:'discount',prop:'value',value:'wrong'},
			{id:'recalculate',method:'click'},
			{id:'discount',prop:'value',value:'10PC'}]},
			{id:'recalculate',method:'click'},
	</pre>		</pre>