The additions of the new page and components started with a wireflow and a general redesign

A Wireflow was made of the interactivity of the form-page, and it was documented in the fix-the-flow-wireframe

https://github.com/christoph3r3w/fix-the-flow-wireflow

here below you can see the Form where users can add their events to the platform. after finishing the form they can submit it by clicking on the submit button which opens up a dialog that confirms the action. this happens through an eventListener on a timer setTimeout.

Progressive disclosure for the event form page

A small progression of the redesign for the event page.

for the progressive Disclosure

  fieldset:nth-of-type(1):not(:valid) ~ fieldset:nth-of-type(2), 
  fieldset:nth-of-type(2):not(:valid) ~ fieldset:nth-of-type(3),
  fieldset:nth-of-type(1):not(:valid) ~ fieldset:nth-of-type(3)
    {
  display: none;
  }

for validation of inputs (forgot to add 'regex')

       <div>
           <label for="f-event-title" >Event name</label>
           <input type="text" id="f-event-title" title="event-name" required>
       </div>
       <div>
          <label for="f-event-DateTime" >Date & time</label>
          <input type="date" id="f-event-DateTime" title="event-name" required>
          <input type="time" id="f-event-DateTime" title="event-name" required>
       </div>

    &:user-invalid{
        outline: solid rgba(255, 0, 0, 0.534);
        }
    &:user-valid,:checked {
        background:  rgba(69, 151, 69, 0.116) ;
        outline: solid  rgba(69, 151, 69, 0.322) ;

dialog

     <dialog id="dialog">
          <form action="get" method="dialog">
              <h3>you did the thing </h3> 
              <button type="submit">Close</button>
          </form>
      </dialog>

#dialog{
    position: sticky;
    translate: 0 -200px;
    top: 30rem;
    left: 30svw;
    width: 40dvw;
    height: 40dvh;
    border-radius: var(--g-c);
    border: 4px solid var(--blue2);
    box-shadow: 0px 0px 6px var(--white);
    text-align: center;

    &::backdrop{
        background-color:rgba(0, 0, 0, 0.592) ;
        background-color:#000000a6 ;
        backdrop-filter: blur(4px) ;
    }
}

declaring and showing dialog

to make the dialog appear I used the 'click ' event to trigger the showModal function

var abort = document.querySelector(".abort");
var formBtn = document.getElementById("submit");

if (formBtn) {
    var dialog = document.querySelector("dialog");
    formBtn.addEventListener('click',show);


    function show(){
        console.log('yes');
        dialog.showModal(); 
        //return(this)
    };
    console.log('Function executed on this page.');
}

Some user interface events were made with javascript. this assignment helped me learn the fundamentals of implementing interactivity for the form page.

fix-the-flow-UI-events

Video of the interactions : https://clipchamp.com/watch/AVBcFLu0PQ2

next 👉🏿 Integreren & Testen