flex-stage

flex-stage.markdown

flex-stage

A Pen by Alex Jacobs on CodePen.

License.

index.html

<div class="nav-container">
  <button id="showDialog" class="nav">add puppy</button>
  <button type="image" class="logo">logo</button>
</div>

<div class="stage-container">
  <div class="stage stage1">stage 1 </div>
  <div class="stage stage2">stage 2 </div>
  <div class="stage stage3">stage 3 </div>
  <div class="stage stage4">stage 4 <span class="actor"></span></div>
</div>

<!-- A modal dialog containing a form -->
<dialog id="formDialog">
  <form>
    <p>
      <label>Pick Stage:
        <select>
          <option>1</option>
          <option>2</option>
          <option>3</option>
          <option>4</option>
        </select>
      </label>
    </p>
    <div>
      <button value="cancel" formmethod="dialog">Cancel</button>
      <button id="confirmBtn" value="default">Submit</button>
    </div>
  </form>
</dialog>

script.js

console.clear();

const showButton = document.getElementById("showDialog");
const formDialog = document.getElementById("formDialog");
const selectEl = formDialog.querySelector("select");
const confirmBtn = formDialog.querySelector("#confirmBtn");
const form = formDialog.querySelector('form');
// "Show the dialog" button opens the <dialog> modally
showButton.addEventListener("click", () => {
  formDialog.showModal();
});
// "Confirm" button triggers "close" on dialog because of [formmethod="dialog"]
// formDialog.addEventListener("close", (e) => {
//   console.log(formDialog.returnValue);
// });
confirmBtn.addEventListener("click", (event) => {
  event.preventDefault(); // We don't want to submit this form
  // formDialog.close(selectEl.value); // Have to send the select box value here.
  addActor(parseInt(selectEl.value, 10));
  formDialog.close();
  form.reset()
});

function addActor(stageVal){
  const actor = document.createElement('span');
  actor.classList.add('actor');
  const stage = document.getElementsByClassName('stage' + stageVal)[0];
  stage.append(actor);
}
// <span class="actor"></span>

style.css

html {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
}

*,
*:before,
*:after {
  box-sizing: inherit;
}

body {
  margin: 0;
  width: 100%;
  height: 100%;
}

.nav-container {
  height: 30px;
  display: flex;
  justify-content: flex-end;
}

.logo {
}

.actor {
  background-image: url("https://place-puppy.com/80x80");
  border-radius: 30px;
  border: 2px solid red;
  height: 80px;
  width: 80px;
  top: 80px;
  left: 30px;
  position: absolute;
}

.stage-container {
  display: flex;
  height: 100%;
  width: 100%;
  flex-wrap: wrap;
}

.stage {
  width: 50%;
  height: 50%;
  background-color: #abc;
  border: 2px solid gray;
  display: flex;
  justify-content: center;
  position: relative;
}