JSFiddle - React, Tailwind, and code Playground

by gcaiq

HTML

<div id=screens_deck class="hide">
  <div id=screen_home>
    <h2>Hanna's Home Made Cakes</h2>
    <hr />
    <h3><span>Custom Cakes order now</span> <button class=btnp onclick="return neworder();">Place Order</button></h3>
    <hr />
    <h1>Welcome</h1>
    <p>Experience the taste and comfort of delicious Southern homemade cakes by Nate. Lorem ipsum enim blandit volutpat maecenas volutpat blandit aliquam etiam. Quis risus sed vulputate odio ut enim blandit. Mauris rhoncus aenean vel elit. Diam quis enim lobortis scelerisque fermentum dui faucibus. Vitae et leo duis ut diam. Vulputate odio ut enim blandit volutpat maecenas volutpat blandit aliquam. Iaculis urna id volutpat lacus.
    </p>
    <p>For over 50 years, my mom has been baking all kinds of cakes for people in our community. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
    </p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>I have added a few recipes of my own to our list of delicious homemade cakes made from scratch. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
    </p>
    <p>Nulla aliquet enim tortor at auctor urna nunc id. In vitae turpis massa sed elementum tempus egestas. Vestibulum mattis ullamcorper velit sed ullamcorper. In hac...

CSS

/* CSS */


.inlinebr {
  width: 0px;
  height: 0px;
  overflow: hidden;
}


.isnew .formitem {
  display: inline-block;
  width: 45%;
}

.formitem>* {
  display: inline-block;
  width: 45%;
}

.formitemlong>* {
  width: 100%;
}

#addinote {
  height: 150px;
  margin: 10px;
  width: calc(100% - 22px);
}

.hide {
  display: none;
}

.btnp {
  color: rgb(255, 255, 255);
  border-radius: 5px;
  background-color: #0092e6;
  border: 0;
  padding: 5px 10px;
  font-size: 1em;
}

.btns {
  color: rgb(255, 255, 255);
  border-radius: 5px;
  background-color: #737070;
  border: 0;
  padding: 5px 10px;
  font-size: 1em;
}

#env {
  color: rgb(255, 255, 255);
  border-radius: 5px;
  background: #64b448;
  border: 0;
  padding: 5px 10px;
  font-size: 1em;
}

.isnew #env {
  background-color: orange;
}

.isnew .btnp {
  background-color: #28a745;
}

#screens {
  background: rgba(255, 255, 255, 0.85);
  margin: 50px 100px;
  padding: 10px;
  border-radius: 10px;
}

fieldset {
  padding: 0;
  border: 0;
}


body {
  background: url(https://support.autonomiq.ai/test/sanity/Test_Compare_Env/img/chocolate-cake-with-white-icing-and-strawberry-on-top-with-69817.jpg) center no-repeat;
  min-height: 600px;
  background-sizex: contain;
  background-size: cover;
}

.isnew {
  background: url(https://support.autonomiq.ai/test/sanity/Test_Compare_Env/img/white-icing-cover-cake-1702373.jpg) center no-repeat;
}

.isnewx {
  background: url(https://support.autonomiq.ai/test/sanity/Test_Compare_Env/img/close-up-photography-of-cake-with-flower-decor-1070850.jpg) center no-repeat;
}

.isnew #screens {
  background: rgba(255, 255, 255, 0.6);
}

JavaScript

/* JS code */
function getvals() {
  var f = {};
  var a = arguments
  var b;
  for (b of a) {
    f[b] = ((_id(b) || {}).value || '').trim();
  }
  return f;
}

function getchks(l, o) {
  o = o || {};
  var i;
  l = l.replace(/\s/g, '').split(";");
  for (i of l) {
    chk(i, o)
  }
  return o;

  function chk(l, o) {
    l = l.split(":");
    var i, n = l[0] || '';
    if (n && !o[n]) {
      o[n] = '';
    }

    l = (l[1] || n).split(',');
    for (i of l) {
      i = _id(i) || {};
      if (i.checked) {
        o[n] = i.value;
      }
    }
  }
}


function showpage(page) {
  try {
    switchto("screen_" + page);
  } catch (e) {}
  return false;
}


function dohome() {
  showpage("home");
  return false;
}


function doconfirm() {
  showpage("final");
  _id('oordernum').innerText = getordernum();
  return false;
}

function getordernum() {
  var d = new Date;
  var n = (d.getHours() + 3) * 60 * 60;
  n = n + d.getMinutes() * 60;
  n = n + d.getSeconds();
  n = n * 3;
  return n;
}

function neworder() {
  showpage("entry");
  _css('form').reset();
  return false;
}

function nodeml(node, id, txt) {
  node = (node || '').trim();
  var nbsp = (/^nbsp$/i).test(node);
  var nline = (/^nline/i).test(node);
  nbsp && (node = '');
  nline && (node = '');
  var n = document.createElement(node || 'span');
  id && (n.id = id);
  txt && (n.innerText = txt);
  nbsp && (n.innerHTML = n.innerHTML.replace(/\s\s/gm, '&nbsp;'));
  nbsp && (n.innerHTML = n.innerHTML.replace(/\n/g, '<br />\n'));
  nline && (n.innerHTML = n.innerHTML.replace(/\n/g, '<br />\n'));

  return n.outerHTML;
}


function dosubmit() {
  var lst = "qty,flavor,fname,lname,houseno,suiteno,street,";
  lst += "city,province,postcode,country,deliverydate,phoneno,phonetype,addinote";
  lst = lst.split(",");
  f = getvals(...lst);

  lst = [
    "addrtype:addrh,addrb",
    "daydelivery;nightdelivery"
  ].join(";");

  getchks(lst, f);


  showpage("confirm");
  var l, s = [];

  l = nodeml('', 'lnumcakes',...