interface.html

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<link rel="stylesheet" type="text/css" href="style.css">
		<title>
		  CHIRP
		</title>
		<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
	</head>
	<body>
		<div class="grid-container">
			<div class="left-col">
				<div id="mode" class="mode" class="OFF">
					DARK MODE: <span class="change">OFF</span>
				</div>
				<p>
					<input type="text" placeholder="Enter chirp" id="textInput">
				</p>

				<button class="my-button" onclick="validateText(); emptyText()">Add a chirp</button>

				<p>
					<input type="text" placeholder="Image url" id="imgInput">

				</p>
				<button class="my-button" onclick="validateImage(); emptyImg()">Add an image</button>


			</div>

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

			</div>
		</div>


		<script src="script.js"></script>

	</body>
</html>