61 lines
1.5 KiB
HTML
Executable File
61 lines
1.5 KiB
HTML
Executable File
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>Prep 7</title>
|
|
<meta author="Nicholas Tamassia">
|
|
|
|
<style>
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<form action="" id="number-form">
|
|
<label for="number-input">Number of images:</label>
|
|
<input id="number-input" name="image-number" type="number">
|
|
<button type="submit">Generate</button>
|
|
</form>
|
|
|
|
<form action="" id="color-form">
|
|
<label for="color-input">Background color</label>
|
|
<input id="color-input" name="background-color" type="color" />
|
|
<button type="submit">Change background</button>
|
|
</form>
|
|
|
|
<div id="wrapper"></div>
|
|
|
|
<script>
|
|
const wrapper = document.getElementById('wrapper')
|
|
const numberForm = document.getElementById('number-form')
|
|
const colorForm = document.getElementById('color-form')
|
|
|
|
numberForm.onsubmit = (event) => {
|
|
event.preventDefault()
|
|
const imageCount = Number(new FormData(numberForm).get('image-number'))
|
|
if (imageCount < 0) return
|
|
|
|
while (wrapper.firstChild) {
|
|
wrapper.removeChild(wrapper.lastChild)
|
|
}
|
|
|
|
for (let i = 0; i < imageCount; i++) {
|
|
const img = new Image(200, 200)
|
|
img.src = `https://picsum.photos/200/200?random=${Math.ceil(Math.random() * 100)}`
|
|
wrapper.appendChild(img)
|
|
}
|
|
}
|
|
|
|
colorForm.onsubmit = (event) => {
|
|
event.preventDefault()
|
|
const formData = new FormData(colorForm)
|
|
document.body.style.backgroundColor = formData.get('background-color')
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html> |