funky-framadate-front/public/script.js

'use strict'

const $ = selector => document.querySelector(selector)
const $$ = selector => document.querySelectorAll(selector)

const debugStorage = () => {
  for(var i = 0; i < localStorage.length; i++) {
    let key = localStorage.key(i)
    console.debug(key, " = ", localStorage[key])
  }
}

const useTextInsteadOfInputFor = (textField) => {
  let $name = $(`#${textField.name}`);
  $name.outerHTML = `<span id="${textField.name}" class="toggle-field">${$name.getAttribute('value')}</span>`;
  return textField;
}

const createUpdateModalOnClickFor = (textField) => {
  let $name = $(`#${textField.name}`);
  $name.addEventListener("click", (e) => {
    e.preventDefault();
    createModal(`<input type="text" name="${textField.name}" id="${textField.name}UpdateField" value="${e.target.textContent}"><button id="submitTextField" data-reference="${textField.name}">></button>`);
  });
}

$$(".nfl-textfield").forEach((textField) => {
  createUpdateModalOnClickFor(useTextInsteadOfInputFor(textField));
});

const removeOverlay = () => {
  $('body').removeChild($('.overlay'))
  $('body').removeChild($('.modal'))
}

const createModal = (text) => {
  const overlay = document.createElement('div')
  const popin = document.createElement('div')

  popin.innerHTML = text
  popin.className = 'modal'
  overlay.className = 'overlay'
  $('body').appendChild(overlay)
  $('body').appendChild(popin)

  overlay.addEventListener('click', removeOverlay)
  $('body').insertBefore(overlay, $('main'))

  $("#submitTextField").addEventListener("click", (e) => {
    $(`#${e.target.dataset.reference}`).innerHTML = $(`#${e.target.dataset.reference}UpdateField`).value
    removeOverlay()
  });
}

$$('input').forEach((inputElement) => {
  inputElement.addEventListener("change", () => {
    localStorage[inputElement.name] = inputElement.value
  });
});

$("#add-response-choice").addEventListener('click', (e) => {
  e.preventDefault();
  let response = document.createElement("li");
  let text = document.createTextNode("Blabla");
  response.appendChild(text);

  $("#responses").appendChild(response);
});


if(document.getElementById("type_sondage")) {
  type_sondage.addEventListener('change', function() {
    let typeSondage = this.options[this.selectedIndex].text;
    if(typeSondage == "classique") {
      localStorage.setItem('type_sondage', this.options[this.selectedIndex].text);
      $('#next').href = "responses.html";
    } else {
      localStorage.setItem('type_sondage', 'dates');
      $('#next').href = "dates.html";
    }
    debugStorage()
  })
}

if(document.getElementById("startButton")) {
  startButton.addEventListener('click', function () {
    localStorage.clear()
    localStorage.setItem('type_sondage', 'classique');
  });
}