webpage – Macken Design Co.

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>

Tag: webpage

Charity is the greatest of the Commandments