ProgZoo - User contributions [en-gb]

DOM Working with data

2022-01-18T08:58:04Z

Carlos: /* Format numbers */

<pre id='shellbody' data-qtp='fetch'></pre>
== Get the name from the number ==
*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
<div class=qu>
* The program snippet shows the name of country 42.
* Change it so it shows the name of country 50.
* See if you can find your country.
<pre class=usr>
fetch('/worldl.json')
.then((r)=>r.json())
.then((r)=>{
let tgt = r[42];
document.body.innerHTML = tgt.name;
});
</pre>
<pre class=ans>
fetch('/worldl.json')
.then((r)=>r.json())
.then((r)=>{
let tgt = r[50];
document.body.innerHTML = tgt.name;
});
</pre>
</div>

Each country has a bunch of data associated, for example:
area: 330803
capital: "Kuala Lumpur"
continent: "Asia"
flag: "//upload.wikimedia.org/wikipedia/commons/6/66/Flag_of_Malaysia.svg"
gdp: 304726000000
id: 102
name: "Malaysia"
population: 30177000
tld: ".my"

== Show the population ==
<div class=qu>

<div class=imper>Alter your code so that the output matches the model answer.</div>
<pre class=usr>
fetch('/worldl.json')
.then((r)=>r.json())
.then((r)=>{
let tgt = r[102];
document.body.innerHTML =
`<div>${tgt.name}</div>`;
});
</pre>
<pre class=ans>
fetch('/worldl.json')
.then((r)=>r.json())
.then((r)=>{
let tgt = r[102];
document.body.innerHTML =
`<div>${tgt.name}, ${tgt.population}</div>`;
});
</pre>
</div>

== Include image ==
<div class=qu>
<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>
fetch('/worldl.json')
.then((r)=>r.json())
.then((r)=>{
let tgt = r[151];
document.body.innerHTML =
`<div>${tgt.name}, ${tgt.capital}</div>`;
});
</pre>
<pre class=ans>
fetch('/worldl.json')
.then((r)=>r.json())
.then((r)=>{
let tgt = r[151];
document.body.innerHTML = `
<div>Name: ${tgt.name}</div>
<div>Capital: ${tgt.capital}</div>
<div>Population: ${tgt.population}</div>
<img src='${tgt.flag}' style='width:100px'/>
`;
});
</pre>
</div>

== Output in a table ==
<div class=qu>
<pre class=usr>
fetch('/worldl.json')
.then((r)=>r.json())
.then((r)=>{
let tgt = r[172];
document.body.innerHTML =
`<div>${tgt.name}, ${tgt.capital}</div>`;
});
</pre>
<pre class=ans>
fetch('/worldl.json')
.then((r)=>r.json())
.then((r)=>{
let tgt = r[172];
document.body.innerHTML = `
<table>
<tr><th>Name</th><td>${tgt.name}</td</tr>
<tr><th>Continent</th><td>${tgt.continent}</td</tr>
<tr><th>Capital</th><td>${tgt.capital}</td</tr>
<tr><th>Population</th><td>${tgt.population}</td</tr>
</table>
`;
});
</pre>
</div>

== Format numbers ==
<div class=qu>
<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>
fetch('/worldl.json')
.then((r)=>r.json())
.then((r)=>{
let tgt = r[184];
document.body.innerHTML =
`<div>${tgt.population.toLocaleString()}</div>`;
});
</pre>
<pre class=ans>
fetch('/worldl.json')
.then((r)=>r.json())
.then((r)=>{
let tgt = r[184];
document.body.innerHTML = `
<table>
<tr><th>Name</th><td>${tgt.name}</td></tr>
<tr><th>Continent</th><td>${tgt.continent}</td></tr>
<tr><th>Capital</th><td>${tgt.capital}</td></tr>
<tr><th>Population</th><td>${tgt.population.toLocaleString('en')}</td></tr>
<tr><th>GDP</th><td>${tgt.gdp.toLocaleString('en')} billion</td></tr>
</table>
`;
});
</pre>
</div>

== Working with lists ==
In the following questions you must look at the list of the countries to work out the answer.
== Biggest Country in the World ==
<div class=qu>
<div class='imper'>Show the name of the country with the largest population.</div>
<pre class=usr>
fetch('/worldl.json')
.then((r)=>r.json())
.then((r)=>{
let biggest = 0;
for(let i = 0; i<r.length; i++){
if (r[i].area > r[biggest].area){
biggest = i;
}
}
document.body.innerHTML =
`<div>${r[biggest].name}</div>`;
});
</pre>
<pre class=ans>
fetch('/worldl.json')
.then((r)=>r.json())
.then((r)=>{
let biggest = 0;
for(let i = 0; i<r.length; i++){
if (r[i].population > r[biggest].population){
biggest = i;
}
}
document.body.innerHTML =
`<div>${r[biggest].name}</div>`;
});
</pre>
</div>

== Total population ==
<div class=qu>
<div class='imper'>Show the total population of the world.</div>
<pre class=usr>
</pre>
<pre class=ans>
fetch('/worldl.json')
.then((r)=>r.json())
.then((r)=>{
let acc = 0;
for(let i = 0; i<r.length; i++){
acc += r[i].population
}
document.body.innerHTML =
`<div>${acc}</div>`;
});
</pre>
</div>
== Countries bigger than 1000000 ==
<div class=qu>
<div class='imper'>Show list of countries with an area of more than 1 million square kilometers.</div>
<pre class=usr>
</pre>
<pre class=ans>
fetch('/worldl.json')
.then((r)=>r.json())
.then((r)=>{
document.body.innerHTML =
r.filter(r=>r.area>1000000)
.map(r=>`<div>${r.name}</div>`)
.join('');
});
</pre>
</div>

== Countries in Europe ==
<div class=qu>
<div class='imper'>Show list of countries where the continent is Europe.</div>
<pre class=usr>
</pre>
<pre class=ans>
fetch('/worldl.json')
.then((r)=>r.json())
.then((r)=>{
document.body.innerHTML =
r.filter(r=>r.continent === 'Europe')
.map(r=>`<div>${r.name}</div>`)
.join('');
});
</pre>
</div>

DOM Working with data

2022-01-18T08:56:17Z

Carlos: /* Format numbers */

<pre id='shellbody' data-qtp='fetch'></pre>
== Get the name from the number ==
*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
<div class=qu>
* The program snippet shows the name of country 42.
* Change it so it shows the name of country 50.
* See if you can find your country.
<pre class=usr>
fetch('/worldl.json')
.then((r)=>r.json())
.then((r)=>{
let tgt = r[42];
document.body.innerHTML = tgt.name;
});
</pre>
<pre class=ans>
fetch('/worldl.json')
.then((r)=>r.json())
.then((r)=>{
let tgt = r[50];
document.body.innerHTML = tgt.name;
});
</pre>
</div>

Each country has a bunch of data associated, for example:
area: 330803
capital: "Kuala Lumpur"
continent: "Asia"
flag: "//upload.wikimedia.org/wikipedia/commons/6/66/Flag_of_Malaysia.svg"
gdp: 304726000000
id: 102
name: "Malaysia"
population: 30177000
tld: ".my"

== Show the population ==
<div class=qu>

<div class=imper>Alter your code so that the output matches the model answer.</div>
<pre class=usr>
fetch('/worldl.json')
.then((r)=>r.json())
.then((r)=>{
let tgt = r[102];
document.body.innerHTML =
`<div>${tgt.name}</div>`;
});
</pre>
<pre class=ans>
fetch('/worldl.json')
.then((r)=>r.json())
.then((r)=>{
let tgt = r[102];
document.body.innerHTML =
`<div>${tgt.name}, ${tgt.population}</div>`;
});
</pre>
</div>

== Include image ==
<div class=qu>
<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>
fetch('/worldl.json')
.then((r)=>r.json())
.then((r)=>{
let tgt = r[151];
document.body.innerHTML =
`<div>${tgt.name}, ${tgt.capital}</div>`;
});
</pre>
<pre class=ans>
fetch('/worldl.json')
.then((r)=>r.json())
.then((r)=>{
let tgt = r[151];
document.body.innerHTML = `
<div>Name: ${tgt.name}</div>
<div>Capital: ${tgt.capital}</div>
<div>Population: ${tgt.population}</div>
<img src='${tgt.flag}' style='width:100px'/>
`;
});
</pre>
</div>

== Output in a table ==
<div class=qu>
<pre class=usr>
fetch('/worldl.json')
.then((r)=>r.json())
.then((r)=>{
let tgt = r[172];
document.body.innerHTML =
`<div>${tgt.name}, ${tgt.capital}</div>`;
});
</pre>
<pre class=ans>
fetch('/worldl.json')
.then((r)=>r.json())
.then((r)=>{
let tgt = r[172];
document.body.innerHTML = `
<table>
<tr><th>Name</th><td>${tgt.name}</td</tr>
<tr><th>Continent</th><td>${tgt.continent}</td</tr>
<tr><th>Capital</th><td>${tgt.capital}</td</tr>
<tr><th>Population</th><td>${tgt.population}</td</tr>
</table>
`;
});
</pre>
</div>

== Format numbers ==
<div class=qu>
<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>
fetch('/worldl.json')
.then((r)=>r.json())
.then((r)=>{
let tgt = r[184];
document.body.innerHTML =
`<div>${tgt.population.toLocaleString()}</div>`;
});
</pre>
<pre class=ans>
fetch('/worldl.json')
.then((r)=>r.json())
.then((r)=>{
let tgt = r[184];
document.body.innerHTML = `
<table>
<tr><th>Name</th><td>${tgt.name}</td></tr>
<tr><th>Continent</th><td>${tgt.continent}</td></tr>
<tr><th>Capital</th><td>${tgt.capital}</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>
</table>
`;
});
</pre>
</div>

== Working with lists ==
In the following questions you must look at the list of the countries to work out the answer.
== Biggest Country in the World ==
<div class=qu>
<div class='imper'>Show the name of the country with the largest population.</div>
<pre class=usr>
fetch('/worldl.json')
.then((r)=>r.json())
.then((r)=>{
let biggest = 0;
for(let i = 0; i<r.length; i++){
if (r[i].area > r[biggest].area){
biggest = i;
}
}
document.body.innerHTML =
`<div>${r[biggest].name}</div>`;
});
</pre>
<pre class=ans>
fetch('/worldl.json')
.then((r)=>r.json())
.then((r)=>{
let biggest = 0;
for(let i = 0; i<r.length; i++){
if (r[i].population > r[biggest].population){
biggest = i;
}
}
document.body.innerHTML =
`<div>${r[biggest].name}</div>`;
});
</pre>
</div>

== Total population ==
<div class=qu>
<div class='imper'>Show the total population of the world.</div>
<pre class=usr>
</pre>
<pre class=ans>
fetch('/worldl.json')
.then((r)=>r.json())
.then((r)=>{
let acc = 0;
for(let i = 0; i<r.length; i++){
acc += r[i].population
}
document.body.innerHTML =
`<div>${acc}</div>`;
});
</pre>
</div>
== Countries bigger than 1000000 ==
<div class=qu>
<div class='imper'>Show list of countries with an area of more than 1 million square kilometers.</div>
<pre class=usr>
</pre>
<pre class=ans>
fetch('/worldl.json')
.then((r)=>r.json())
.then((r)=>{
document.body.innerHTML =
r.filter(r=>r.area>1000000)
.map(r=>`<div>${r.name}</div>`)
.join('');
});
</pre>
</div>

== Countries in Europe ==
<div class=qu>
<div class='imper'>Show list of countries where the continent is Europe.</div>
<pre class=usr>
</pre>
<pre class=ans>
fetch('/worldl.json')
.then((r)=>r.json())
.then((r)=>{
document.body.innerHTML =
r.filter(r=>r.continent === 'Europe')
.map(r=>`<div>${r.name}</div>`)
.join('');
});
</pre>
</div>

DOM Working with data

2021-09-14T06:26:10Z

Carlos:

Flags with Lines

2021-09-13T08:20:18Z

Carlos:

<pre id='shellbody' data-qtp='canvas'></pre>
Get on with the programming, don't pause to look at this worked example: [[Road Sign Square]]
==England==

<div class=qu data-height="90" data-width="150">
The English flag is the cross of St. George. This is a red cross on a white
background .
*The line thickness should be 18.
[[Image:flagengland.png]]
<pre class=usr>
function drawFlag(ctx)
{
ctx.fillStyle = 'white';
ctx.fillRect(0,0,150,90);
ctx.strokeStyle = 'red';
ctx.lineWidth = 18;
ctx.moveTo(0,45);
ctx.lineTo(150,45);
ctx.stroke();
}
</pre>
<pre class=ans>
function drawFlag(ctx)
{
ctx.fillStyle = 'white';
ctx.fillRect(0,0,150,90);
ctx.strokeStyle = 'red';
ctx.lineWidth = 18;
ctx.moveTo(0,45);
ctx.lineTo(150,45);
ctx.moveTo(75,0);
ctx.lineTo(75,90);
ctx.stroke();
}
</pre>
</div>

==Scotland==
<div class=qu data-height="90" data-width="150" data-cols='40'>
The cross of St. Andrew shows diagonal lines on a blue background.<br/>
*Complete the flag by drawing the other diagonal line.
*The white lines should be slightly thicker - try 18.
[[Image:flagscotland.png]]
<pre class=usr lang="java">
function drawFlag(ctx)
{
ctx.fillStyle = 'white';
ctx.fillRect(0,0,150,90);
ctx.strokeStyle = 'red';
ctx.lineWidth = 18;
ctx.moveTo(0,0);
ctx.lineTo(150,90);
ctx.stroke();
}
</pre>
<pre class=ans lang="java">
function drawFlag(ctx)
{
ctx.fillStyle = 'blue';
ctx.fillRect(0,0,150,90);
ctx.strokeStyle = 'white';
ctx.lineWidth = 18;
ctx.moveTo(0,0);
ctx.lineTo(150,90);
ctx.moveTo(0,90);
ctx.lineTo(150,0);
ctx.stroke();
}
</pre>
</div>

==Botswana==
<div class=qu data-width="150" data-height="100">
The flag of Botswana has a black stripe on a white stripe on a blue background.

[[Image:flagbotswana.png|border]]
*The flag is 150 by 100
*The white stripe behind the black one has width 30
*The black stripe has width 20
*The pale blue has rgb: '#6EB6ED'

<pre class=usr>
function drawFlag(ctx)
{
ctx.fillStyle = '#6EB6ED';
ctx.fillRect(0,0,150,100);
}
</pre>
<pre class=ans>
function drawFlag(ctx)
{
ctx.fillStyle = '#6EB6ED';
ctx.fillRect(0,0,150,100);
ctx.strokeStyle = 'white';
ctx.lineWidth = 30;
ctx.moveTo(0,50);
ctx.lineTo(150,50);
ctx.stroke();
ctx.strokeStyle = 'black';
ctx.lineWidth = 20;
ctx.moveTo(0,50);
ctx.lineTo(150,50);
ctx.stroke();
}
</pre>
</div>

==Iceland==
<div class=qu data-width="125" data-height="90">

[[Image:flagiceland.png|border]]
* 125 by 90
* The white cross is 20 wide
* The red cross is 10 wide
* The cross line intersect at (45, 45)

<pre class=usr>
function drawFlag(ctx)
{
}
</pre>
<pre class=ans>
function drawFlag(ctx)
{
ctx.fillStyle = 'blue';
ctx.fillRect(0,0,125,90);
ctx.strokeStyle = 'white';
ctx.lineWidth = 20;
ctx.moveTo(45,0);
ctx.lineTo(45,90);
ctx.moveTo(0,45);
ctx.lineTo(125,45);
ctx.stroke();
ctx.strokeStyle = 'red';
ctx.lineWidth = 10;
ctx.moveTo(45,0);
ctx.lineTo(45,90);
ctx.moveTo(0,45);
ctx.lineTo(125,45);
ctx.stroke();
}
</pre>
</div>

==Trinidad and Tobago==
<div class=qu height="100" width="150">
We can start and end lines outside the confines of the surface.
*The white line has width 35
*The black line has width 25
[[Image:flagtrinidad.png]]

<pre class=usr lang="java">
function drawFlag(ctx)
{
ctx.fillStyle = 'red';
ctx.fillRect(0,0,150,100);
ctx.lineWidth = 35;
ctx.strokeStyle = 'white';
ctx.moveTo(0,-25);
ctx.lineTo(75,50);
ctx.stroke();
}
</pre>
<pre class=ans lang="java">
function drawFlag(ctx)
{
ctx.fillStyle = 'red';
ctx.fillRect(0,0,150,100);
ctx.lineWidth = 35;
ctx.strokeStyle = 'white';
ctx.moveTo(0,-25);
ctx.lineTo(150,125);
ctx.stroke();
ctx.lineWidth = 25;
ctx.strokeStyle = 'black';
ctx.moveTo(0,-25);
ctx.lineTo(150,125);
ctx.stroke();
}
</pre>
</div>

Flags with Repeats

2021-09-13T07:22:26Z

Carlos:

<pre id='shellbody' data-qtp='canvas'></pre>

We can repeat a statement or block of statements with a for loop. The classic '''for''' loop takes the following form:

for(let i = 0; i< 10; i++){
console.log(i);
}

The body of the loop runs 10 times, control variable i takes every value 0,1,2..9 in turn. We can use the value of i inside the loop if required.

You can dive right in or view the instructive example at [[Flag EU]]
==Bahrain==
<div class=qu data-width="250" data-height="155">
The flag of Bahrain has a five irregular pentagons on a red background.

Each pentagon can be represented by five points such as (0,0), (64,0) (100,15) (64,31) and (0,31).

[[Image:flagbahrain.png|left|frame|Flag of Bahrain]]
<pre class=usr>
function drawFlag(ctx)
{
ctx.fillStyle = 'red';
ctx.fillRect(0,0,250,155);
for(let i=0;i<3;i++){
ctx.fillStyle='white';
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(64,0);
ctx.lineTo(100,15);
ctx.lineTo(64,31);
ctx.lineTo(0,31);
ctx.fill();
ctx.translate(0,31);
}
}
</pre>
<pre class=ans>
function drawFlag(ctx)
{
ctx.fillStyle = 'red';
ctx.fillRect(0,0,250,155);
for(let i=0;i<5;i++){
ctx.fillStyle='white';
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(64,0);
ctx.lineTo(100,15);
ctx.lineTo(64,31);
ctx.lineTo(0,31);
ctx.fill();
ctx.translate(0,31);
}
}
</pre>
</div>

==Qatar==
<div class=qu data-width="300" data-height="153">
Consider the neighbouring state Qatar.

* 9 pillars, each pillar is 17 pixels below the previous.
* The five coordinates of the top pillar are (0,0) (84,0) (125,9) (84,17), (0,17)
* '''rgb(128,0,0)''' is a less jaunty red.

The need for a loop becomes even more obvious for this flag.
[[Image:flagqatar.png|left|frame|Flag of Qatar]]
<pre class=usr>
function drawFlag(ctx)
{
ctx.fillStyle = 'rgb(128,0,0)';
ctx.fillRect(0,0,250,155);
}
</pre>
<pre class=ans>
function drawFlag(ctx)
{
ctx.fillStyle = 'rgb(128,0,0)';
ctx.fillRect(0,0,250,155);
for(let i=0;i<9;i++){
ctx.fillStyle='white';
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(84,0);
ctx.lineTo(125,9);
ctx.lineTo(84,17);
ctx.lineTo(0,17);
ctx.fill();
ctx.translate(0,17);
}
}
</pre>
</div>

==India==
<div class=qu data-width="306" data-height="204">
* The flag of India is 306 by 204
* The orange, white and green stripes are equal sizes.
* The wheel has radius 30.
* The wheel has 24 spokes, the spokes are π/12 radians apart.

Whoever wrote the sample code used copy and paste three times, then got bored and gave up. A better programmer would have used a loop.
This is the phrase that gets repeated:
ctx.moveTo(0,0);
ctx.lineTo(0,30);
ctx.rotate(Math.PI/12);

We have not really done India justice here - the actual flag is much more elegant, the spokes taper and the rim includes decoration. Nevertheless - we apologize to the sub-continent and move on.

[[Image:flagindia.png|left|frame|Flag of India]]
<pre class=usr>
function drawFlag(ctx)
{
ctx.fillStyle = 'orange';
ctx.fillRect(0,0,306,204/3);
ctx.fillStyle = 'lime';
ctx.fillRect(0,2*204/3,306,204/3);
ctx.strokeStyle = 'blue';
ctx.lineWidth = 1.5;
ctx.translate(153,102);
ctx.arc(0,0,30,0,2*Math.PI,true);
ctx.moveTo(0,0);
ctx.lineTo(0,30);
ctx.rotate(Math.PI/12);
ctx.moveTo(0,0);
ctx.lineTo(0,30);
ctx.rotate(Math.PI/12);
ctx.moveTo(0,0);
ctx.lineTo(0,30);
ctx.rotate(Math.PI/12);
ctx.stroke();
}
</pre>
<pre class=ans>
function drawFlag(ctx)
{
ctx.fillStyle = 'orange';
ctx.fillRect(0,0,306,204/3);
ctx.fillStyle = 'white';
ctx.fillRect(0,204/3,306,204/3);
ctx.fillStyle = 'lime';
ctx.fillRect(0,2*204/3,306,204/3);
ctx.strokeStyle = 'blue';
ctx.lineWidth = 1.5;
ctx.translate(153,102);
ctx.arc(0,0,30,0,2*Math.PI,true);
for(let i=0;i<24;i++){
ctx.moveTo(0,0);
ctx.lineTo(0,30);
ctx.rotate(Math.PI/12);
}
ctx.stroke();
}
</pre>
</div>

==Namibia==
<div class=qu data-width="300" data-height="200">
* The joyous flag of Namibia is 300 by 200
* Each the rightmost triangle has coordinates (19,5) (29,0) (19,-5) relative to the centre of the star burst
* The star burst is centred at (60,60)
* The yellow circle has radius 16
* The small triangles are partially covered by a blue circle of radius 20
* The right angled triangles are 240 by 160
* The red stripe is 42 wide

That lazy default programmer has done it again. Copied and pasted the same phrase three times then given up. Thank goodness you are here to fix things up!
ctx.beginPath();
ctx.moveTo(19,5);
ctx.lineTo(29,0);
ctx.lineTo(19,-5);
ctx.fill();
ctx.rotate(Math.PI/6);

[[Image:flagnamibia.png|left|frame|Flag of Namibia]]
<pre class=usr>
function drawFlag(ctx)
{
ctx.fillStyle = 'yellow';
ctx.translate(60,60);

ctx.beginPath();
ctx.moveTo(19,5);
ctx.lineTo(29,0);
ctx.lineTo(19,-5);
ctx.fill();
ctx.rotate(Math.PI/6);

ctx.beginPath();
ctx.moveTo(19,5);
ctx.lineTo(29,0);
ctx.lineTo(19,-5);
ctx.fill();
ctx.rotate(Math.PI/6);

ctx.beginPath();
ctx.moveTo(19,5);
ctx.lineTo(29,0);
ctx.lineTo(19,-5);
ctx.fill();
ctx.rotate(Math.PI/6);
}
</pre>
<pre class=ans>
function drawFlag(ctx)
{
ctx.fillStyle = 'white';
ctx.fillRect(0,0,300,200);
ctx.strokeStyle = 'red';
ctx.lineWidth = 42;
ctx.moveTo(0,200);
ctx.lineTo(300,0);
ctx.stroke();
ctx.fillStyle = 'blue';
ctx.moveTo(0,0);
ctx.lineTo(240,0);
ctx.lineTo(0,160);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = 'lime';
ctx.moveTo(300,200);
ctx.lineTo(60,200);
ctx.lineTo(300,40);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = 'yellow';
ctx.translate(60,60);
ctx.arc(0,0,16,0,2*Math.PI);
for(let i=0;i<12;i++){
ctx.fill();
ctx.beginPath();
ctx.moveTo(19,5);
ctx.lineTo(29,0);
ctx.lineTo(19,-5);
ctx.fill();
ctx.rotate(Math.PI/6);
}
ctx.fillStyle = 'blue';
ctx.arc(0,0,20,0,2*Math.PI);
ctx.fillStyle = 'yellow';
ctx.arc(0,0,16,0,2*Math.PI);
}
</pre>
</div>

==Venezuela==
<div class=qu data-width="180" data-height="120">
* There are eight stars arranged around circle centre (90,86) radius 36
* The angle between stars is 20°
* Each star has radius 5
[http://www.vexilla-mundi.com/venezuela_flag.html construction sheet for Venezuela]
[[Image:flagvenezuala.png|left|frame|Flag of Venezuela]]
<pre class=usr>
function drawFlag(ctx)
{
ctx.fillStyle = 'yellow';
ctx.translate(60,60);

}
</pre>
<pre class=ans>
function drawFlag(ctx)
{
ctx.fillStyle = 'yellow';
ctx.fillRect(0,0,180,40);
ctx.fillStyle = 'blue';
ctx.fillRect(0,40,180,40);
ctx.fillStyle = 'red';
ctx.fillRect(0,80,180,40);
ctx.translate(90,84);
ctx.fillStyle = 'white';
let n = 8;
ctx.rotate(-20*(n-1)/2*Math.PI/180);
for(let i = 0;i<n;i++){
ctx.translate(0,-36);
star(ctx);
ctx.translate(0,36);
ctx.rotate(20*Math.PI/180);
}
}

function star(ctx){
ctx.beginPath();
ctx.scale(5.0/100,5.0/100);
[[0,-100],[22,-31],[95,-31],[36,12],[59,81],
[0,38],[-59,81],[-36,12],[-95,-31],[-22,-31]]
.forEach(xy=>ctx.lineTo(xy[0],xy[1]));
ctx.fill();
ctx.scale(100/5,100/5);
}

</pre>
</div>

Flags with Repeats

2021-09-13T06:49:50Z

Carlos:

<pre id='shellbody' data-qtp='canvas'></pre>

We can repeat a statement or block of statements with a for loop. The classic '''for''' loop takes the following form:

for(let i = 0; i< 10; i++){
console.log(i);
}

The body of the loop runs 10 times, control variable i takes every value 0,1,2..9 in turn. We can use the value of i inside the loop if required.

You can dive right in or view the instructive example at [[Flag EU]]
==Bahrain==
<div class=qu data-width="250" data-height="155">
The flag of Bahrain has a five irregular pentagons on a red background.

Each pentagon can be represented by five points such as (0,0), (64,0) (100,15) (64,31) and (0,31).

[[Image:flagbahrain.png|left|frame|Flag of Bahrain]]
<pre class=usr>
function drawFlag(ctx)
{
ctx.fillStyle = 'red';
ctx.fillRect(0,0,250,155);
for(let i=0;i<3;i++){
ctx.fillStyle='white';
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(64,0);
ctx.lineTo(100,15);
ctx.lineTo(64,31);
ctx.lineTo(0,31);
ctx.fill();
ctx.translate(0,31);
}
}
</pre>
<pre class=ans>
function drawFlag(ctx)
{
ctx.fillStyle = 'red';
ctx.fillRect(0,0,250,155);
for(let i=0;i<5;i++){
ctx.fillStyle='white';
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(64,0);
ctx.lineTo(100,15);
ctx.lineTo(64,31);
ctx.lineTo(0,31);
ctx.fill();
ctx.translate(0,31);
}
}
</pre>
</div>

==Qatar==
<div class=qu data-width="300" data-height="153">
Consider the neighbouring state Qatar.

* 9 pillars, each pillar is 17 pixels below the previous.
* The five coordinates of the top pillar are (0,0) (84,0) (125,9) (84,17), (0,17)
* '''rgb(128,0,0)''' is a less jaunty red.

The need for a loop becomes even more obvious for this flag.
[[Image:flagqatar.png|left|frame|Flag of Qatar]]
<pre class=usr>
function drawFlag(ctx)
{
ctx.fillStyle = 'rgb(128,0,0)';
ctx.fillRect(0,0,250,155);
}
</pre>
<pre class=ans>
function drawFlag(ctx)
{
ctx.fillStyle = 'rgb(128,0,0)';
ctx.fillRect(0,0,250,155);
for(let i=0;i<9;i++){
ctx.fillStyle='white';
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(84,0);
ctx.lineTo(125,9);
ctx.lineTo(84,17);
ctx.lineTo(0,17);
ctx.fill();
ctx.translate(0,17);
}
}
</pre>
</div>

==India==
<div class=qu data-width="306" data-height="204">
* The flag of India is 306 by 204
* The orange, white and green stripes are equal sizes.
* The wheel has radius 30.
* The wheel has 24 spokes, the spokes are π/12 radians apart.

Whoever wrote the sample code used copy and paste three times, then got bored and gave up. A better programmer would have used a loop.
This is the phrase that gets repeated:
ctx.moveTo(0,0);
ctx.lineTo(0,30);
ctx.rotate(Math.PI/12);

We have not really done India justice here - the actual flag is much more elegant, the spokes taper and the rim includes decoration. Nevertheless - we apologize to the sub-continent and move on.

[[Image:flagindia.png|left|frame|Flag of India]]
<pre class=usr>
function drawFlag(ctx)
{
ctx.fillStyle = 'orange';
ctx.fillRect(0,0,306,204/3);
ctx.fillStyle = 'lime';
ctx.fillRect(0,2*204/3,306,204/3);
ctx.strokeStyle = 'blue';
ctx.lineWidth = 1.5;
ctx.translate(153,102);
ctx.arc(0,0,30,0,2*Math.PI,true);
ctx.moveTo(0,0);
ctx.lineTo(0,30);
ctx.rotate(Math.PI/12);
ctx.moveTo(0,0);
ctx.lineTo(0,30);
ctx.rotate(Math.PI/12);
ctx.moveTo(0,0);
ctx.lineTo(0,30);
ctx.rotate(Math.PI/12);
ctx.stroke();
}
</pre>
<pre class=ans>
function drawFlag(ctx)
{
ctx.fillStyle = 'orange';
ctx.fillRect(0,0,306,204/3);
ctx.fillStyle = 'white';
ctx.fillRect(0,204/3,306,204/3);
ctx.fillStyle = 'lime';
ctx.fillRect(0,2*204/3,306,204/3);
ctx.strokeStyle = 'blue';
ctx.lineWidth = 1.5;
ctx.translate(153,102);
ctx.arc(0,0,30,0,2*Math.PI,true);
for(let i=0;i<24;i++){
ctx.moveTo(0,0);
ctx.lineTo(0,30);
ctx.rotate(Math.PI/12);
}
ctx.stroke();
}
</pre>
</div>

==Namibia==
<div class=qu data-width="300" data-height="200">
* The joyous flag of Namibia is 300 by 200
* Each the rightmost triangle has coordinates (19,5) (29,0) (19,-5) relative to the centre of the star burst
* The star burst is centred at (60,60)
* The yellow circle has radius 16
* The small triangles are partially covered by a blue circle of radius 20
* The right angled triangles are 240 by 160
* The red stripe is 42 wide

That lazy default programmer has done it again. Copied and pasted the same phrase three times then given up. Thank goodness you are here to fix things up!
ctx.beginPath();
ctx.moveTo(19,5);
ctx.lineTo(29,0);
ctx.lineTo(19,-5);
ctx.fill();
ctx.rotate(Math.PI/6);

[[Image:flagnamibia.png|left|frame|Flag of Namibia]]
<pre class=usr>
function drawFlag(ctx)
{
ctx.fillStyle = 'yellow';
ctx.translate(60,60);

ctx.beginPath();
ctx.moveTo(19,5);
ctx.lineTo(29,0);
ctx.lineTo(19,-5);
ctx.fill();
ctx.rotate(Math.PI/6);

ctx.beginPath();
ctx.moveTo(19,5);
ctx.lineTo(29,0);
ctx.lineTo(19,-5);
ctx.fill();
ctx.rotate(Math.PI/6);

ctx.beginPath();
ctx.moveTo(19,5);
ctx.lineTo(29,0);
ctx.lineTo(19,-5);
ctx.fill();
ctx.rotate(Math.PI/6);
}
</pre>
<pre class=ans>
function drawFlag(ctx)
{
ctx.fillStyle = 'white';
ctx.fillRect(0,0,300,200);
ctx.strokeStyle = 'red';
ctx.lineWidth = 42;
ctx.moveTo(0,200);
ctx.lineTo(300,0);
ctx.stroke();
ctx.fillStyle = 'blue';
ctx.moveTo(0,0);
ctx.lineTo(240,0);
ctx.lineTo(0,160);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = 'lime';
ctx.moveTo(300,200);
ctx.lineTo(60,200);
ctx.lineTo(300,40);
ctx.fill();
ctx.beginPath();
ctx.fillStyle = 'yellow';
ctx.translate(60,60);
ctx.arc(0,0,16,0,2*Math.PI);
for(let i=0;i<12;i++){
ctx.fill();
ctx.beginPath();
ctx.moveTo(19,5);
ctx.lineTo(29,0);
ctx.lineTo(19,-5);
ctx.fill();
ctx.rotate(Math.PI/6);
}
ctx.fillStyle = 'blue';
ctx.arc(0,0,20,0,2*Math.PI);
ctx.fillStyle = 'yellow';
ctx.arc(0,0,16,0,2*Math.PI);
}
</pre>
</div>

==Venezuela==
<div class=qu data-width="180" data-height="120">
* There are eight stars arranged around circle centre (90,86) radius 36
* The angle between stars is 20°
* Each star has radius 5
[http://www.vexilla-mundi.com/venezuela_flag.html construction sheet for Venezuela]
[[Image:flagvenezuela.png|left|frame|Flag of Venezuela]]
<pre class=usr>
function drawFlag(ctx)
{
ctx.fillStyle = 'yellow';
ctx.translate(60,60);

}
</pre>
<pre class=ans>
function drawFlag(ctx)
{
ctx.fillStyle = 'yellow';
ctx.fillRect(0,0,180,40);
ctx.fillStyle = 'blue';
ctx.fillRect(0,40,180,40);
ctx.fillStyle = 'red';
ctx.fillRect(0,80,180,40);
ctx.translate(90,84);
ctx.fillStyle = 'white';
let n = 8;
ctx.rotate(-20*(n-1)/2*Math.PI/180);
for(let i = 0;i<n;i++){
ctx.translate(0,-36);
star(ctx);
ctx.translate(0,36);
ctx.rotate(20*Math.PI/180);
}
}

function star(ctx){
ctx.beginPath();
ctx.scale(5.0/100,5.0/100);
[[0,-100],[22,-31],[95,-31],[36,12],[59,81],
[0,38],[-59,81],[-36,12],[-95,-31],[-22,-31]]
.forEach(xy=>ctx.lineTo(xy[0],xy[1]));
ctx.fill();
ctx.scale(100/5,100/5);
}

</pre>
</div>