
previous

page 8
next
my squares.js
function squares() {
var id=0;
var s1="<div class='square' onClick='square_clicked(this);' a=' ' id='";
var s2="<div class='square' id='";
var s3="'></div>";
for (var r=0;r<10;r++) {
document.write("<div class='row'>");
for (var c=0;c<10;c+=2) {
document.write(s1+id+s3); id++;
document.write(s2+id+s3); id++;
}
document.write('</div>');
}
}
var id=0;
var s1="<div class='square' onClick='square_clicked(this);' a=' ' id='";
var s2="<div class='square' id='";
var s3="'></div>";
for (var r=0;r<10;r++) {
document.write("<div class='row'>");
for (var c=0;c<10;c+=2) {
document.write(s1+id+s3); id++;
document.write(s2+id+s3); id++;
}
document.write('</div>');
}
}
my styles.css
The border is just temporary for checking.
.row {
display:flex;
}
.square {
width:5vmin;
height:5vmin;
border:1px solid red;
}
display:flex;
}
.square {
width:5vmin;
height:5vmin;
border:1px solid red;
}
my index.html → next page
previous
next