Pokemon - Revision history

Andr3w: /* Step Four - Add some styling */

2022-08-16T21:02:41Z

Step Four - Add some styling

← Older revision		Revision as of 21:02, 16 August 2022
Line 80:		Line 80:
	*Make the selected item show up		*Make the selected item show up

			Code changes required
	[[File:poke3.png\|border\|800px\|Changes required]]		[[File:poke3.png\|border\|800px\|Changes required]]

			How the app should look now:
			[[File:poke4.png\|border\|400px\|New Look to App]]

Andr3w: /* Step Four - Add some styling */

2022-08-16T20:59:49Z

Step Four - Add some styling

← Older revision		Revision as of 20:59, 16 August 2022
Line 80:		Line 80:
	*Make the selected item show up		*Make the selected item show up

	[[File:poke3.png\|border\|~~500px~~\|Changes required]]		[[File:poke3.png\|border\|800px\|Changes required]]

Andr3w at 20:54, 16 August 2022

2022-08-16T20:54:43Z

← Older revision		Revision as of 20:54, 16 August 2022
Line 80:		Line 80:
	*Make the selected item show up		*Make the selected item show up

	[[File:poke3.png\|border\|500px]]		[[File:poke3.png\|border\|500px\|Changes required]]

Andr3w: /* Step Three - React to user click events */

2022-08-16T20:54:09Z

Step Three - React to user click events

← Older revision		Revision as of 20:54, 16 August 2022
Line 72:		Line 72:
	}		}
	</pre>		</pre>

			==Step Four - Add some styling==
			You should create a file pokemon.css and a reference to this.
			You can:
			*Make the list scrollable
			*Change the cursor to make the click action more inviting
			*Make the selected item show up

			[[File:poke3.png\|border\|500px]]

Andr3w: /* Step Three - React to user click events */

2022-08-16T19:47:32Z

Step Three - React to user click events

← Older revision		Revision as of 19:47, 16 August 2022
Line 54:		Line 54:
	==Step Three - React to user click events==		==Step Three - React to user click events==
	You can make something happen when the user clicks on a name in the <code>pokelist</code>		You can make something happen when the user clicks on a name in the <code>pokelist</code>
	pokemon.js
			'''pokemon.js'''
	<pre>		<pre>
	document.body.onload = async ()=>{		document.body.onload = async ()=>{

Andr3w: /* Step Three - React to user click events */

2022-08-16T19:43:38Z

Step Three - React to user click events

← Older revision		Revision as of 19:43, 16 August 2022
Line 59:		Line 59:
	let resp = await fetch("https://pokeapi.co/api/v2/pokemon/?limit=30");		let resp = await fetch("https://pokeapi.co/api/v2/pokemon/?limit=30");
	let data = await resp.json();		let data = await resp.json();
	for(let i=0;i<20;i++){		for(let i=0;i<data.result.length;i++){
	let div = document.createElement('div');		let div = document.createElement('div');
	div.innerText = data.results[0].name;		div.innerText = data.results[i].name;
			div.onclick = ()=>{
			document.getElementById('detail').innerHTML = `
			<h2>${data.results[i].name}</h2>
			`;
			}
	document.getElementById('pokelist').append(div);		document.getElementById('pokelist').append(div);
	}		}
	}		}
	</pre>		</pre>

Andr3w: /* Step One - load the data */

2022-08-16T19:41:25Z

Step One - load the data

← Older revision		Revision as of 19:41, 16 August 2022
Line 13:		Line 13:
	<body>		<body>
	<h1>Welcome to the Pokemon App</h1>		<h1>Welcome to the Pokemon App</h1>
			<div id="detail"></div>
	<div id="pokelist"></div>		<div id="pokelist"></div>
	</body>		</body>
Line 30:		Line 31:

	Notice that although you have the details of many pokemon you are only showing one of them.		Notice that although you have the details of many pokemon you are only showing one of them.

	==Step Two - show a list of pokemon==		==Step Two - show a list of pokemon==
	To show the name of each pokemon you can use a loop:		To show the name of each pokemon you can use a loop:

Andr3w: /* Step Two - show a list of pokemon */

2022-08-16T19:40:43Z

Step Two - show a list of pokemon

← Older revision		Revision as of 19:40, 16 August 2022
Line 29:		Line 29:
	[[File:poke2.png\|border\|500px\|First Attempt at Pokemon App]]		[[File:poke2.png\|border\|500px\|First Attempt at Pokemon App]]

			Notice that although you have the details of many pokemon you are only showing one of them.

	==Step Two - show a list of pokemon==		==Step Two - show a list of pokemon==
	To show the name of each pokemon you can use a loop:		To show the name of each pokemon you can use a loop:
Line 37:		Line 39:
	let resp = await fetch("https://pokeapi.co/api/v2/pokemon/?limit=30");		let resp = await fetch("https://pokeapi.co/api/v2/pokemon/?limit=30");
	let data = await resp.json();		let data = await resp.json();
	for(let i=0;i<30;i++){		for(let i=0;i<20;i++){
	let div = document.createElement('div');		let div = document.createElement('div');
	div.innerText = data.results[i].name;		div.innerText = data.results[0].name;
			document.getElementById('pokelist').append(div);
			}
			}
			</pre>

			Notice that there are two errors in the above code:
			*Each time around the loop it always shows element 0 of the <code>data.results</code> array
			*Only 20 names are shown, even though the list contains more than that

			==Step Three - React to user click events==
			You can make something happen when the user clicks on a name in the <code>pokelist</code>
			pokemon.js
			<pre>
			document.body.onload = async ()=>{
			let resp = await fetch("https://pokeapi.co/api/v2/pokemon/?limit=30");
			let data = await resp.json();
			for(let i=0;i<20;i++){
			let div = document.createElement('div');
			div.innerText = data.results[0].name;
	document.getElementById('pokelist').append(div);		document.getElementById('pokelist').append(div);
	}		}
	}		}
	</pre>		</pre>

Andr3w: /* Step One - load the data */

2022-08-16T19:34:55Z

Step One - load the data

← Older revision		Revision as of 19:34, 16 August 2022
Line 4:		Line 4:
	Create a new folder with two files:		Create a new folder with two files:

	index.html		'''index.html'''
	<pre>		<pre>
	<!DOCTYPE html>		<!DOCTYPE html>
Line 17:		Line 17:
	</html>		</html>
	</pre>		</pre>
	pokemon.js		'''pokemon.js'''
	<pre>		<pre>
	document.body.onload = async ()=>{		document.body.onload = async ()=>{

Andr3w: /* Step One - load the data */

2022-08-16T19:33:37Z

Step One - load the data

← Older revision		Revision as of 19:33, 16 August 2022
Line 27:		Line 27:
	*Double click on the file index.html to open it in chrome		*Double click on the file index.html to open it in chrome
	*Open <code>Developer Tools</code> to see how the data is pulled into the JavaScript program		*Open <code>Developer Tools</code> to see how the data is pulled into the JavaScript program
	[[File:~~poke1~~.png\|border\|500px\|First Attempt at Pokemon App]]		[[File:poke2.png\|border\|500px\|First Attempt at Pokemon App]]

	==Step Two - show a list of pokemon==		==Step Two - show a list of pokemon==