DOM working with data - Revision history

Andr3w at 21:51, 23 August 2021

2021-08-23T21:51:33Z

← Older revision		Revision as of 21:51, 23 August 2021
Line 2:		Line 2:
	== Get the name from the number ==		== Get the name from the number ==
	*You can obtain data from the server using a fetch call.		*You can obtain data from the server using a fetch call.
	*In these examples you will be getting data from [[https://progzoo.net/worldl.json]] this is a list of 195 countries in json format		*In these examples you will be getting data from https://progzoo.net/worldl.json this is a list of 195 countries in json format
	<div class=qu>		<div class=qu>
	* The program snippet shows the name of country 42.		* The program snippet shows the name of country 42.

2021-08-23T21:51:17Z

← Older revision		Revision as of 21:51, 23 August 2021
Line 2:		Line 2:
	== Get the name from the number ==		== Get the name from the number ==
	*You can obtain data from the server using a fetch call.		*You can obtain data from the server using a fetch call.
	*In these examples you will be getting data from /worldl.json this is a list of 195 countries in json format		*In these examples you will be getting data from [[https://progzoo.net/worldl.json]] this is a list of 195 countries in json format
	<div class=qu>		<div class=qu>
	* The program snippet shows the name of country 42.		* The program snippet shows the name of country 42.

2021-08-23T17:34:31Z

Format numbers

← Older revision		Revision as of 17:34, 23 August 2021
Line 136:		Line 136:
	document.body.innerHTML = `		document.body.innerHTML = `
	<table>		<table>
	<tr><th>Name</th><td>${tgt.name}</td</tr>		<tr><th>Name</th><td>${tgt.name}</td></tr>
	<tr><th>Continent</th><td>${tgt.continent}</td</tr>		<tr><th>Continent</th><td>${tgt.continent}</td></tr>
	<tr><th>Capital</th><td>${tgt.capital}</td</tr>		<tr><th>Capital</th><td>${tgt.capital}</td></tr>
	<tr><th>Population</th><td>${tgt.population.toLocaleString('en')}</td</tr>		<tr><th>Population</th><td>${tgt.population.toLocaleString('en')}</td></tr>
	<tr><th>GDP</th><td>$${(tgt.gdp/1e9).toLocaleString('en')} billion</td</tr>		<tr><th>GDP</th><td>$${(tgt.gdp/1e9).toLocaleString('en')} billion</td></tr>
	</table>		</table>
	`;		`;

2021-08-23T17:30:10Z

Format numbers

← Older revision		Revision as of 17:30, 23 August 2021
Line 119:		Line 119:
	== Format numbers ==		== Format numbers ==
	<div class=qu>		<div class=qu>
	<div class='imper'>Use .toLocaleString() to format numbers better. Show the GDP in billions, include $ symbol as GDP is given in US dollars</div>		<div class='imper'>For country 184. Use .toLocaleString() to format numbers better. Show the GDP in billions, include $ symbol as GDP is given in US dollars</div>
	<pre class=usr>		<pre class=usr>
	fetch('/worldl.json')		fetch('/worldl.json')
	.then((r)=>r.json())		.then((r)=>r.json())
	.then((r)=>{		.then((r)=>{
	let tgt = r[~~172~~];		let tgt = r[184];
	document.body.innerHTML =		document.body.innerHTML =
	`<div>${tgt.population.toLocaleString()}</div>`;		`<div>${tgt.population.toLocaleString()}</div>`;
Line 133:		Line 133:
	.then((r)=>r.json())		.then((r)=>r.json())
	.then((r)=>{		.then((r)=>{
	let tgt = r[~~172~~];		let tgt = r[184];
	document.body.innerHTML = `		document.body.innerHTML = `
	<table>		<table>

2021-08-23T17:29:00Z

Output in a table

@@ Line 110: / Line 110: @@
 <tr><th>Capital</th><td>${tgt.capital}</td</tr>
 <tr><th>Population</th><td>${tgt.population}</td</tr>
 </table>
 `;

2021-08-23T17:20:59Z

Include image

@@ Line 82: / Line 82: @@
 <div>Population: ${tgt.population}</div>
 <img src='${tgt.flag}' style='width:100px'/>
 `;
       });
 </pre>
 </div>

2021-08-22T18:36:05Z

Include image

← Older revision		Revision as of 18:36, 22 August 2021
Line 62:		Line 62:
	== Include image ==		== Include image ==
	<div class=qu>		<div class=qu>
	<div class=imper>Include three div elements and an img for country 151. Use ~~'''~~style='width:100px;' ~~'''~~ for the img</div>		<div class=imper>Include three div elements and an img for country 151. Use <code>style='width:100px;'</code> for the img</div>
	<pre class=usr>		<pre class=usr>
	fetch('/worldl.json')		fetch('/worldl.json')

2021-08-22T18:35:42Z

Include image

← Older revision		Revision as of 18:35, 22 August 2021
Line 62:		Line 62:
	== Include image ==		== Include image ==
	<div class=qu>		<div class=qu>
	<div class=imper>Include three div elements and an img for country 151</div>		<div class=imper>Include three div elements and an img for country 151. Use '''style='width:100px;' ''' for the img</div>
	<pre class=usr>		<pre class=usr>
	fetch('/worldl.json')		fetch('/worldl.json')

2021-08-22T18:31:39Z

Include image

← Older revision		Revision as of 18:31, 22 August 2021
Line 62:		Line 62:
	== Include image ==		== Include image ==
	<div class=qu>		<div class=qu>
	<div class=imper>Include div elements and an img for country 151</div>		<div class=imper>Include three div elements and an img for country 151</div>
	<pre class=usr>		<pre class=usr>
	fetch('/worldl.json')		fetch('/worldl.json')

2021-08-22T11:03:00Z

Include image

← Older revision		Revision as of 11:03, 22 August 2021
Line 62:		Line 62:
	== Include image ==		== Include image ==
	<div class=qu>		<div class=qu>
	<div class=imper>Include div elements and an img for country ~~150~~</div>		<div class=imper>Include div elements and an img for country 151</div>
	<pre class=usr>		<pre class=usr>
	fetch('/worldl.json')		fetch('/worldl.json')
Line 76:		Line 76:
	.then((r)=>r.json())		.then((r)=>r.json())
	.then((r)=>{		.then((r)=>{
	let tgt = r[~~150~~];		let tgt = r[151];
	document.body.innerHTML = `		document.body.innerHTML = `
	<div>Name: ${tgt.name}</div>		<div>Name: ${tgt.name}</div>