javascript/attribute.html

<!-- This file is for changing CSS attributes using JavaScript -->
<html>
<head>
	<style type="text/css">
		#square {
			margin-top: 20px;
			margin-left: 100px;
			height: 200px;
			width: 200px;
			background: blue;
		}

		div {
			margin-bottom: 20px;
		}

		.round {
			border-radius: 20px;
		}

	</style>
</head>

<body>
	<div id="square" style="background:black"></div>

	<div>
		<p> Hello, this is inside a PPPPP tag. </p>
	</div>

<script>
var t = document.getElementsByTagName('p')[0]
console.log(t)
document.getElementById('square').appendChild(t)
// document.getElementById("square").setAttribute("style", "");
// document.getElementById("square").setAttribute("style", "background:red");

// document.getElementById("square").style.border = "4px solid";
// document.getElementById("square").style.borderColor = "orange";

// document.getElementById("square").setAttribute("class", "round");

/*
	Try to move the sentence inside the sentence inside the P tag so it is overlapping with the square. Change the color of the sentence so it is visible inside the box.
	Your code goes below.
*/

</script>

</body>
</html>