Skip to content

Instantly share code, notes, and snippets.

@deepak-glitch
Created April 27, 2020 14:21
Show Gist options
  • Save deepak-glitch/a54dc7e547fbfb188d2998ab755e8cc0 to your computer and use it in GitHub Desktop.
Save deepak-glitch/a54dc7e547fbfb188d2998ab755e8cc0 to your computer and use it in GitHub Desktop.
cat generator-----gifs
.flex-box-container
{
padding: 10px;
display: flex;
flex-wrap: wrap;
justify-content: space-around;
border: 1px solid black;
}
.flex-box-container div
{
padding-left: 100px;
}
.container
{
width: 75%;
margin: 0 auto;
border: 2px solid black;
text-align: center;
}
.flex-box-container img
{
border: 2px solid green;
}
function generatecat()
{
var image=document.createElement('img');
var div=document.getElementById("flex-cat-div");
image.src="https://i.pinimg.com/originals/c3/2b/fa/c32bfa16bcf864e478d3ddfe32440268.gif"
div.appendChild(image);
}
function reset()
{
window.location.href = "catgenerator.html";
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css">
<link rel="stylesheet" href="cat.css">
<title>Cat Generator</title>
</head>
<body>
<div class="container">
<h2>TASK 2: CAT GENERATOR</h2>
<div class="flex-box-container"></div>
<p> </p>
<div>
<button class="btn btn-success" onclick="generatecat()">Generate cat</button>
<button class="btn btn-danger" onclick="reset()">reset</button>
</div>
</div>
<div class="flex-box-container" id="flex-cat-div">
</div>
</div>
<script src="cat.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment