Imagine a store that gives and gives and gives.
First some JS
class jobFunctions {
constructor(){
}
cashRegister(){
//charity
alert("Charity is a great action! Give, give, and give some more!");
}
organizeClothes(){
//charity
alert("Charity is a great action! Give, give, and give some more!");
}
clean(){
//charity
alert("Charity is a great action! Give, give, and give some more!");
}
security(){
//charity
alert("Charity is a great action! Give, give, and give some more!");
}
}
let job = new jobFunctions();
const regi = document.getElementById('cashRegister');
regi.addEventListener('submit', function(event) {
event.preventDefault();
job.cashRegister();
});
const organizeClothes = document.getElementById('organizeClothes');
organizeClothes.addEventListener('submit', function(event) {
event.preventDefault();
job.organizeClothes();
});
const clean = document.getElementById('clean');
clean.addEventListener('submit', function(event) {
event.preventDefault();
job.clean();
});
const secu = document.getElementById('security');
secu.addEventListener('submit', function(event) {
event.preventDefault();
job.security();
});And then some HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Retail</title>
<style>
@font-face {
font-family: 'Medium'; src: url('medium.ttf');
}
h1 {font-size: 8em; max-width: 80%; margin: 0; }
h2 {font-size: 6em; max-width: 80%; margin: 0;}
h3 {font-size: 4em; max-width: 80%; margin: 0;}
p {font-size: 2em;}
body { font-family: 'Medium'; color: pink; margin: 20px; background-color: hotpink;}
button { font-family: 'Medium'; font-size: 4em; background-color: lightsalmon; padding: 10px; margin: 10px; box-shadow: 20px 10px 3px darksalmon; color: pink; border-color: salmon; border-radius: 5px; cursor: grab; }
button:hover { background-color: coral; }
form {float:left; margin: 0 auto; width: 300px; max-width: 80%; border-style: dashed; border-spacing: 10px; color: lightpink; padding: 10px;}
</style>
</head>
<body>
<h1>Retail Job Functions</h1>
<h2>Charity</h2>
<form id="cashRegister">
<!--<h3>Check Out</h3>-->
<button type="submit">Check Out Cash Register</button>
</form>
</form>
<form id="organizeClothes">
<!--<h3>Organize Clothes</h3>-->
<button type="submit">Organize Clothes</button>
</form>
<form id="clean">
<!--<h3>Clean</h3>-->
<button type="submit">Clean</button>
</form>
<form id="security">
<!--<h3>Security Sweep</h3>-->
<button type="submit">Security Sweep</button>
</form>
<script src="retail.js"></script>
</body>
</html>