index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="description" content="Random Cute Dogs">
    <meta name="keywords" content="Dogs, Cute, Images">
    <meta name="author" content="Padmashree Jha">
    <meta name="viewport" conent="width=device-width, initial-scale=1.0">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Random Dog Images</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384-JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
    <link rel="stylesheet" href="style.css" />
</head>
<body>
    <div class="container">
	<br />

	<div class="text-center">
		<img class="img-fuild" id="image" style="max-width: 100%"/>
		<div class="spinner-border invisible" role="status" id="loader">
			<span class="sr-only">
				Loading a new cute dog.......
			</span>
		</div>
		
		<br>
		<br>
		<button class="btn btn-primary" id="button">
			Bring New
		</button>

	</div>
	

        <h1 class="text-center" id="heading">
            Loading Image
        </h1>
	<br>
	<br>
    </div>
</body>

<script src="script.js"></script>

</html>