- index.html
- style.css
- script.js
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Cloning elements</title>
<link href="style.css" rel="stylesheet">
</head>
<body>
<div class="pool">
</div>
<template id="element-template">
<div class="el">
<span><!--Index of the element--></span>
</div>
</template>
<script src="script.js"></script>
</body>
</html>
CSS
.pool {
display: flex;
flex-wrap: wrap;
min-height: 330px;
margin: 20px;
padding: 10px;
background-color: #e9e9f0;
}
.el {
display: flex;
justify-content: center;
align-items: center;
width: 150px;
height: 150px;
margin-right: 10px;
margin-bottom: 10px;
box-sizing: border-box;
border: 20px solid #3366ff;
background-color: #99b2ff;
color: rgba(255, 255, 255, 0.9);
font: bold 60px "Arial", sans-serif;
text-align: center;
}
.el--green {
background-color: #a3d095;
border: 20px solid #518d3f;
}
JavaScript
// Cards container
var pool = document.querySelector('.pool');
// Get the card template
var template = document.querySelector('#element-template').content;
var element = template.querySelector('div');
// Clone and fill elements in the loop
// for (var i = 1; i <= 10; i++) {
// var clonedElement = element.cloneNode(true);
// clonedElement.children[0].textContent = i;
// }
Click inside the mini browser to put the focus in this window.
Console
Goalscompleted
0
- Uncomment the block with the loop.
- Add
clonedElementto the end ofpoolinside the loop, after all of the operations.
Comments