I ran into a problem on an old college exam. Basically it asks for:
Get this json file
[
{"colore": "#FF0080", "pos_orizz": 10, "pos_vert": 30},
{"colore": "#800080", "pos_orizz": 30, "pos_vert": 40},
{"colore": "#808000", "pos_orizz": 50, "pos_vert": 50},
{"colore": "#408080", "pos_orizz": 60, "pos_vert": 60},
{"colore": "#C0C0C0", "pos_orizz": 30, "pos_vert": 50}
]
Create a function that draws a square div in "main" (parent element) using the data contained in the json file.
The size of the div is: 10% x 10% of the viewport; The position and background color are specified in the json file (position is a percentage relative to the size of main)
I've done everything, but when I apply a style spec to my div, the margin-top is in percentage relative to the parent element's width... which causes all kinds of overflow issues
async function crea(){
const response = await MyFetch();
const main = document.querySelector("main");
response.forEach(element => {
let div = document.createElement("div");
div.style.width = "10vh";
div.style.height = "10vh";
div.style.backgroundColor = element.colore;
**div.style.marginTop = element.pos_vert+"%";**
div.style.marginLeft = element.pos_orizz+"%";
main.appendChild(div);
});
}
This is my function, I'm sure there are things I can do to make it work, I hope I've been clear in my formulation of the question
![[Web front-end] Node.js quick start](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
This is a sample snippet showing the CSS used to draw a square div on a parent element. In this demo, I've set the position in CSS, but you'll need to set it in JavaScript.
div { height: 300px; width: 300px; background: gray; } div div { position: absolute; left: 50px; top: 50px; width: 100px; height: 100px; background: orange; }