Node0/menuAddRemove.html

## menuAddRemove.html
<!DOCTYPE html>
<html>
<!-- START OF HEAD SECTION -->

<head>
  <meta charset="utf-8" />
  <title>Menu App</title>
  <!-- START OF STYLE SECTION -->
  <style>
    * {
      border: 1px solid grey;
    }

    h1 {
      font-family: Verdana, Geneva, Tahoma, sans-serif;
      color: rgb(130, 0, 82);
    }

    div#controlsContainer {
      display: flex;
      flex-wrap: wrap;
      width: 450px;
      justify-content: center;
    }

    button.controlButton {
      margin-left: 25px;
      margin-right: 25px;
      border-radius: 8px;
      width: 155px;
      height: 30px;
    }

    button.addButton {
      background-color: rgb(172, 219, 172);
    }

    button.removeButton {
      background-color: rgb(236, 167, 167);
    }

    div#menuCreationInputContainer {
      margin-top: 20px;
      background-color: rgb(172, 219, 172)
    }

    div#menuSelectionListContainer {
      margin-top: 20px;
      background-color: rgb(236, 167, 167);
    }

    div#mainMenuContainer {
      width: 50%;
    }

    ul {
      border-style: solid;
      border-width: 1px;
      border-color: darkslateblue;
      font-family: helvetica;
      width: 30%;
      border-radius: 25px;
    }

    li {
      text-shadow: 0px 4px 7px black;
      font-family: times;
    }

    li::marker {
      color: rgb(119, 0, 255);
    }
  </style>
  <!-- END OF STYLE SECTION -->

  <!-- START OF JAVASCRIPT SECTION -->
  <script type="text/javascript">
    /* Make a shortcut to console.log() called Print() */
    const Print = console.log;

    function main() {
      /* Get refernces to important elements in our little single-page app */
      mainMenuCont = document.querySelector("#mainMenuContainer");
      addMenuButton = document.querySelector("button#addMenuListGroup");
      removeMenuButton = document.querySelector("button#removeMenuListGroup");

      addMenuButton.addEventListener("click", () => {
        var inputBoxValue = document.querySelector("input#createInputName").value;
        if (inputBoxValue.length > 0) {

          if ( Boolean( document.getElementById(inputBoxValue) ) === false ) {
            /* Create the div element that will hold our HTML fragment which is the menu item group */
            var listSegment = document.createElement(`div`);
            /* We set the id attribute of the div element to
              the value that the user typed into the text box.
              This happens AFTER our Boolean check for pre-existing menu groups of the same name
              So we're guaranteed to not collide with any identical names.
            */
            listSegment.id = inputBoxValue;
            listSegment.classList.add("menuContainer");

            /* This is just an HTML fragment which we'll use to model our initial menu item group */
            listSegment.innerHTML = `
            <p>List ${inputBoxValue}:</p>
            <ul class="menuThingList">
              <li>A</li>
              <li>B</li>
              <li>Food</li>
            </ul>
          `;
            // Here we actually ADD the html fragment called 'listSegment' to our menuContainer div
            // This makes it show up on the page.
            document.querySelector("#mainMenuContainer").appendChild(listSegment);

            // We just added the menu list fragment. Now let's keep track of it in a list so we can refer to it and remove it if we want.
            var menuSelectionList = document.querySelector("select#menuSelectionList");
            var selectListOption = document.createElement("option");
            selectListOption.value = inputBoxValue;
            selectListOption.innerText = inputBoxValue;
            menuSelectionList.appendChild(selectListOption);
          } else {
            alert("This item seems to already exist on the page, please type a new name and try again.")
          }
        }

      });

      removeMenuButton.addEventListener("click", () => {
        /* Get a reference to the "Choose a menu to remove" selection dropdown */
        var selectionList = document.querySelector("select#menuSelectionList");

        /* Get the actually selected (by the user) option */
        var selectionOption = selectionList.options[selectionList.selectedIndex].value;

        /* Get a reference to the div container that holds the menu item group */
        var listSegmentToRemove = document.querySelector(`div#${selectionOption}`);

        /* Get a reference to the option element that represents the selected option value in the list */
        var selectedOptionElement = document.querySelector(`option[value~="${selectionOption}"]`);

        /* Then we actually remove the menu item group div element from the DOM (the web page) */
        listSegmentToRemove.remove();
        /* Then we remove the option element from the select element list */
        selectedOptionElement.remove();
      })

    }

    function docReady() {
      // see if Page (DOM) is already available
      if (
        document.readyState === "complete" ||
        document.readyState === "interactive"
      ) {
        // call on next available tick
        main();
      } else {
        document.addEventListener("DOMContentLoaded", (event) => {
          main();
        });
      }
    }
    docReady();
  </script>
  <!-- END OF JAVASCRIPT SECTION -->
</head>
<!-- END OF HEAD SECTION -->
<!-- START OF BODY SECTION -->

<body>
  <div id="menuAppContainer">
    <div id="menuManagementContainer">

      <h1>Add and Remove Menus!</h1>
      <div id="controlsContainer">
        <button id="addMenuListGroup" class="controlButton addButton">
          ADD MENU LIST
        </button>

        <button id="removeMenuListGroup" class="controlButton removeButton">
          REMOVE MENU LIST
        </button>
        <div id="menuCreationInputContainer">
          <label for="createInputName">Type a menu list name: </label>
          <input id="createInputName"></input>
        </div>
        <div id="menuSelectionListContainer">
          <label for="menuSelectionList">Choose a menu to remove:</label>
          <select name="menuSelectionList" id="menuSelectionList">
            <option value="">--Please choose a menu--</option>
          </select>
        </div>
      </div>
      <div id="mainMenuContainer">
        <!-- This is an HTML comment, nothing in this comment is displayed -->
      </div>
    </div>
    <div id="menuCreationContainer">

    </div>
  </div>
</body>
<!-- END OF BODY SECTION -->

</html>
	<!DOCTYPE html>
	<html>
	<!-- START OF HEAD SECTION -->

	<head>
	<meta charset="utf-8" />
	<title>Menu App</title>
	<!-- START OF STYLE SECTION -->
	<style>
	* {
	border: 1px solid grey;
	}

	h1 {
	font-family: Verdana, Geneva, Tahoma, sans-serif;
	color: rgb(130, 0, 82);
	}

	div#controlsContainer {
	display: flex;
	flex-wrap: wrap;
	width: 450px;
	justify-content: center;
	}

	button.controlButton {
	margin-left: 25px;
	margin-right: 25px;
	border-radius: 8px;
	width: 155px;
	height: 30px;
	}

	button.addButton {
	background-color: rgb(172, 219, 172);
	}

	button.removeButton {
	background-color: rgb(236, 167, 167);
	}

	div#menuCreationInputContainer {
	margin-top: 20px;
	background-color: rgb(172, 219, 172)
	}

	div#menuSelectionListContainer {
	margin-top: 20px;
	background-color: rgb(236, 167, 167);
	}

	div#mainMenuContainer {
	width: 50%;
	}

	ul {
	border-style: solid;
	border-width: 1px;
	border-color: darkslateblue;
	font-family: helvetica;
	width: 30%;
	border-radius: 25px;
	}

	li {
	text-shadow: 0px 4px 7px black;
	font-family: times;
	}

	li::marker {
	color: rgb(119, 0, 255);
	}
	</style>
	<!-- END OF STYLE SECTION -->

	<!-- START OF JAVASCRIPT SECTION -->
	<script type="text/javascript">
	/* Make a shortcut to console.log() called Print() */
	const Print = console.log;

	function main() {
	/* Get refernces to important elements in our little single-page app */
	mainMenuCont = document.querySelector("#mainMenuContainer");
	addMenuButton = document.querySelector("button#addMenuListGroup");
	removeMenuButton = document.querySelector("button#removeMenuListGroup");

	addMenuButton.addEventListener("click", () => {
	var inputBoxValue = document.querySelector("input#createInputName").value;
	if (inputBoxValue.length > 0) {

	if ( Boolean( document.getElementById(inputBoxValue) ) === false ) {
	/* Create the div element that will hold our HTML fragment which is the menu item group */
	var listSegment = document.createElement(`div`);
	/* We set the id attribute of the div element to
	the value that the user typed into the text box.
	This happens AFTER our Boolean check for pre-existing menu groups of the same name
	So we're guaranteed to not collide with any identical names.
	*/
	listSegment.id = inputBoxValue;
	listSegment.classList.add("menuContainer");

	/* This is just an HTML fragment which we'll use to model our initial menu item group */
	listSegment.innerHTML = `
	<p>List ${inputBoxValue}:</p>
	<ul class="menuThingList">
	<li>A</li>
	<li>B</li>
	<li>Food</li>
	</ul>
	`;
	// Here we actually ADD the html fragment called 'listSegment' to our menuContainer div
	// This makes it show up on the page.
	document.querySelector("#mainMenuContainer").appendChild(listSegment);

	// We just added the menu list fragment. Now let's keep track of it in a list so we can refer to it and remove it if we want.
	var menuSelectionList = document.querySelector("select#menuSelectionList");
	var selectListOption = document.createElement("option");
	selectListOption.value = inputBoxValue;
	selectListOption.innerText = inputBoxValue;
	menuSelectionList.appendChild(selectListOption);
	} else {
	alert("This item seems to already exist on the page, please type a new name and try again.")
	}
	}

	});

	removeMenuButton.addEventListener("click", () => {
	/* Get a reference to the "Choose a menu to remove" selection dropdown */
	var selectionList = document.querySelector("select#menuSelectionList");

	/* Get the actually selected (by the user) option */
	var selectionOption = selectionList.options[selectionList.selectedIndex].value;

	/* Get a reference to the div container that holds the menu item group */
	var listSegmentToRemove = document.querySelector(`div#${selectionOption}`);

	/* Get a reference to the option element that represents the selected option value in the list */
	var selectedOptionElement = document.querySelector(`option[value~="${selectionOption}"]`);

	/* Then we actually remove the menu item group div element from the DOM (the web page) */
	listSegmentToRemove.remove();
	/* Then we remove the option element from the select element list */
	selectedOptionElement.remove();
	})

	}

	function docReady() {
	// see if Page (DOM) is already available
	if (
	document.readyState === "complete" \|\|
	document.readyState === "interactive"
	) {
	// call on next available tick
	main();
	} else {
	document.addEventListener("DOMContentLoaded", (event) => {
	main();
	});
	}
	}
	docReady();
	</script>
	<!-- END OF JAVASCRIPT SECTION -->
	</head>
	<!-- END OF HEAD SECTION -->
	<!-- START OF BODY SECTION -->

	<body>
	<div id="menuAppContainer">
	<div id="menuManagementContainer">

	<h1>Add and Remove Menus!</h1>
	<div id="controlsContainer">
	<button id="addMenuListGroup" class="controlButton addButton">
	ADD MENU LIST
	</button>

	<button id="removeMenuListGroup" class="controlButton removeButton">
	REMOVE MENU LIST
	</button>
	<div id="menuCreationInputContainer">
	<label for="createInputName">Type a menu list name: </label>
	<input id="createInputName"></input>
	</div>
	<div id="menuSelectionListContainer">
	<label for="menuSelectionList">Choose a menu to remove:</label>
	<select name="menuSelectionList" id="menuSelectionList">
	<option value="">--Please choose a menu--</option>
	</select>
	</div>
	</div>
	<div id="mainMenuContainer">
	<!-- This is an HTML comment, nothing in this comment is displayed -->
	</div>
	</div>
	<div id="menuCreationContainer">

	</div>
	</div>
	</body>
	<!-- END OF BODY SECTION -->

	</html>