HTML/CSS/JS code to build a basic dynamic website
HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>DOM BASICS</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="boxes">
</div>
<script src="script.js"></script>
</body>
</html>
CSS code
*{
padding:0px;
margin:0px;
background-color:black;
color:white;
}
.box{
width:99vw;
height:10vh;
border:2px solid white;
border-radius:10px;
margin:5px 0px 5px 0px;
}
JS code
function boxcard(title, color, bgcolor) {
let div = document.createElement("div");
div.classList.add("box");
div.innerHTML = `Title = ${title}`;
div.style.color = color;
div.style.backgroundColor = bgcolor;
document.querySelector(".boxes").append(div);
}
Function calls to execute function.
boxcard("hello world", "white", "black");
boxcard("hello world 2","black","aqua");
boxcard("hello world 3","white","purple");
Result of this code:
