index.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="style.css">
		<title>
		  CHIRP
		</title>
	</head>
	<body>
		<div class="grid-container">
			<div class="left-col">
				<p>
					<input type="text" placeholder="Enter chirp" id="textInput">
				</p>
				<button class="my-button" onclick="addDiv()">Add a chirp</button>
				<p>
					<input type="text" placeholder="Image url" id="imgInput">
				</p>
				<button class="my-button" onclick="addImage()">Add an image</button>

			</div>

			<div class="right-col" id="content-area">
			</div>
		</div>


		<script>
			function addDiv() {
				//create a new P tag, save it in a variable
				let theNewDiv = document.createElement("div");
				//add a class to our new div element
				theNewDiv.classList.add("auto-div");
				//set the text inside the div
				theNewDiv.innerHTML = document.getElementById("textInput").value;
				
				//find the right tag to add the div to
				//we used an id of "content-area" for 
				//the place where we want to add the chirp
				let theContentArea = document.getElementById("content-area");

				//add the new div to that tag
				theContentArea.appendChild(theNewDiv);
			}

			function addImage() {
				//create a new P tag, save it in a variable
				let theNewDiv = document.createElement("div");
				//add a class to our new div element
				theNewDiv.classList.add("auto-div");
				
				//create image tag to put into the div
				theImgTag = "<img src='" + document.getElementById("imgInput").value + "' width = 100 height = 100>";

				//set the text inside the div
				theNewDiv.innerHTML = theImgTag;
				
				//find the right tag to add the div to
				//we used an id of "content-area" for 
				//the place where we want to add the twit
				let theContentArea = document.getElementById("content-area");

				//add the new div to that tag
				theContentArea.appendChild(theNewDiv);


			}

		</script>
		
	</body>
</html>