Create Static CSS and Javascript files

Create another folder named 'static', then create 3 files: css_reset.css, script.js and style.css inside the static folder. Your file structure should look like this:

 |--static
 | |--css_reset.css
 | |--script.js
 | |--style.css

css_reset

This code removes all of the default styling of your browser's CSS engine, so you can start fresh making your own. If you would like more information, please visit the website in the code.

/* http://meyerweb.com/eric/tools/css/reset/
   v2.0 | 20110126
   License: none (public domain)
*/

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn,
em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var,
b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas,
details, embed, figure, figcaption, footer, header, hgroup, menu, nav,
output, ruby, section, summary, time, mark, audio, video
{
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}
/* HTML5 display-role reset for older browsers */
article, aside, details, figcaption, figure, footer, header, hgroup,
menu, nav, section
{
  display: block;
}
body {
  line-height: 1;
}
ol,
ul {
  list-style: none;
}
blockquote,
q {
  quotes: none;
}
blockquote:before,
blockquote:after,
q:before,
q:after {
  content: "";
  content: none;
}
table {
  border-collapse: collapse;
  border-spacing: 0;
}

style

This file stores all of the CSS styles applied to the app interface.

body {
  font-family: Arial, Helvetica, sans-serif;
  background-color: #daebf2;
}

h1 {
  text-align: center;
  font-size: 40px;
  font-weight: bold;
}

.add-item-button,
.add-list-button,
.introspect-button {
  display: flex;
  flex-direction: row;
  justify-content: center;
}

/* Modal styles */

.modal-heading {
  font-size: 30px;
  font-weight: bold;
}

.modal {
  display: none;
  position: fixed;
  z-index: 1;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  overflow: auto;
  background-color: rgba(0, 0, 0, 0.4);
}

.modal-content {
  background-color: #fefefe;
  margin: 10% auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
  text-align: center;
}

/* Close button styles */
.close {
  position: absolute;
  top: 10px;
  right: 20px;
  font-size: 24px;
  text-decoration: none;
  color: #000;
}

/* List styles */

input[type=text] {
  width: 300px;
}

.welcome-container {
  display: flex;
  flex-direction: column;
  background: #63adca;
  max-width: 560px;
  margin: 30px auto;
  line-height: 1.8;
}

.welcome-box{
  display: flex;
  justify-content: center;
  text-align: center;
  flex-direction: column;
  background: #63adca;
  max-width: 560px;
  margin: 30px auto;
  line-height: 1.8;
}

.login-container {
  display: flex;
  flex-direction: column;
  background: #63adca;
  max-width: 560px;
  margin: 30px auto;
  line-height: 1.8;
}

.list-container {
  display: flex;
  flex-direction: column;
  background: #63adca;
  max-width: 560px;
  margin: 20px auto;
}

.list-header {
  border-bottom: 1px solid black;
  font-weight: bold;
}

.list-header,
.item {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.list-id,
.item-id {
  width: 60px;
  border-right: 1px solid black;
}

.list-name,
.item-name,
.item-status,
.list-status {
  width: calc(100% - 260px);
}

.list-buttons,
.item-buttons {
  display: flex;
  flex-direction: row;
  width: 200px;
  border-left: 1px solid black;
}

.btn {
  background: #327893;
  border: none;
  color: white;
  padding: 5px 10px;
  text-align: center;
  font-size: 14px;
  margin: 2px;
  cursor: pointer;
  border-radius: 8px;
}

.l_btn,
.signup_btn {
  background: #327893;
  border: none;
  color: white;
  padding: 5px 10px;
  text-align: center;
  font-size: 14px;
  margin: 10px;
  cursor: pointer;
  border-radius: 8px;
}

script

Our last file will be the JavaScript file.

document.addEventListener("DOMContentLoaded", () => {
  const openAddItemModalBtn = document.getElementById("openAddItemModalBtn");
  const openNewListModalBtn = document.getElementById("openNewListModalBtn");
  const openEditItemModalBtns = document.querySelectorAll(".openEditItemModalBtn");
  const openEditListModalBtns = document.querySelectorAll(".openEditListModalBtn");
  const addItemModal = document.getElementById("addItemModal");
  const newListModal = document.getElementById("newListModal");
  const closeModalBtns = document.querySelectorAll(".modal .close");
  const cancelBtns = document.querySelectorAll(".modal .cancel-btn");
  const itemDeleteButton = document.querySelectorAll(".item-delete-btn");
  const listDeleteButton = document.querySelectorAll(".list-delete-btn");
  const introspectionBtn = document.getElementById("introspectionBtn");
  const loginBtn = document.getElementById("loginBtn");
  const signupBtn = document.getElementById("signupBtn");

  if (loginBtn) {
    loginBtn.addEventListener('click', () => {
      window.location.href = '/login'; // Redirect to the login page
    });
  }

  if (signupBtn) {
    signupBtn.addEventListener('click', () => {
      window.location.href = '/signup'; // Redirect to the signup page
    });
  }


  openAddItemModalBtn.addEventListener("click", () => {
    addItemModal.style.display = "block";
  });

  openNewListModalBtn.addEventListener("click", () => {
    newListModal.style.display = "block";
  });

  openEditItemModalBtns.forEach((btn) => {
    btn.addEventListener("click", () => {
      let itemId = btn.getAttribute("data-itemid");
      let itemName = btn.getAttribute("data-itemname");
      let currentListId = btn.getAttribute("data-listid");
      let currentStatusId = btn.getAttribute("data-itemstatusid");

      let listDropdown = '<select id="editListId" name="listid" required>'; //resets list
      let statusDropdown = '<select id="editStatusID" name="statusid" required>';
      

      listData.forEach( (list_item) => {
        listDropdown += '<option value="' + list_item.listid + '"';
        if (list_item.listid === currentListId) {
          listDropdown += " selected";
        }
        listDropdown += ">" + list_item.listname + "</option>";
      });

      listDropdown += "</select>";

      

      statusData.forEach( ( status_item) => {
        statusDropdown += '<option value="' + status_item.statusid + '"';
        if (status_item.statusid === currentStatusId) {
          statusDropdown += " selected";
        }
        statusDropdown += ">" + status_item.statusname + "</option>"
      });

      statusDropdown += "</select>";

      let editItemModalHtml = ` 
      <div id="editItemModal-${itemId}" class="method modal">
        <div class="modal-content">
          <a href="#close" class="close">&times;</a>
          <h2 class="modal-heading">Edit Item</h2>
          <form action="/edit_item" method="post">
            <input type="hidden" name="itemid" value="${itemId}">
            <label for="itemname">New Item Name:</label>
            <input type="text" id="itemname" name="itemname" value="${itemName}" required /><br />
            <label for="listid">Select List:</label>
            ${listDropdown}<br />
            <label for="statusid">Select Status:</label>
            ${statusDropdown}<br />
            <input type="submit" class="btn" value="Save Changes" />
            <button type="button" class="cancel-btn btn">Cancel</button>
          </form>
        </div>
      </div>
    `;

      let editItemModalContainer = document.createElement("div");
      editItemModalContainer.innerHTML = editItemModalHtml;
      document.body.appendChild(editItemModalContainer);

      // Get the dynamically created edit item modal
      let editItemModal = document.getElementById("editItemModal-" + itemId);

      // Close modal functionality
      let closeModalBtn = editItemModal.querySelector(".close");
      let cancelBtn = editItemModal.querySelector(".cancel-btn");

      closeModalBtn.addEventListener("click", (event) => {
        event.preventDefault();
        editItemModal.style.display = "none";
        editItemModal.remove(); // Remove the modal from the DOM
      });

      cancelBtn.addEventListener("click", (event) => {
        event.preventDefault();
        editItemModal.style.display = "none";
        editItemModal.remove(); // Remove the modal from the DOM
      });

      // Display the dynamically created edit item modal
      editItemModal.style.display = "block";
    });
  });

  openEditListModalBtns.forEach((btn) => {
    btn.addEventListener("click", () => {
      let listId = btn.getAttribute("data-listid");
      let listName = btn.getAttribute("data-listname");
      let currentStatusId = btn.getAttribute("data-statusid");

      let statusDropdown = '<select id="editStatusID" name="statusid" required>';

      statusData.forEach( (status_item) => {
        statusDropdown += '<option value="' + status_item.statusid + '"';
        if (status_item.statusid === currentStatusId) {
          statusDropdown += " selected";
        }
        statusDropdown += ">" + status_item.statusname + "</option>"
      });

      statusDropdown += "</select>";

      let editListModalHTML = `
      <div id="editListModal-${listId}" class="method modal">
        <div class="modal-content">
          <a href="#close" class="close">&times;</a>
          <h2 class="modal-heading">Edit List</h2>
          <form action="/edit_list" method="post">
            <input type="hidden" name="listid" value="${listId}">
            <label for="listname">New List Name:</label>
            <input type="text" id="listname" name="listname" value="${listName}" required /><br />
            <!-- Add hidden input for listId and updated listName -->
            <input type="hidden" name="original_listid" value="${listId}">
            <input type="hidden" name="updated_listname" value="${listName}">
            <label for="statusid">Select Status:</label>
            ${statusDropdown}<br />
            <input type="submit" class="btn" value="Save Changes" />
            <button type="button" class="cancel-btn btn">Cancel</button>
          </form>
        </div>
      </div>
      `;

      let listEditModalContainer = document.createElement("div");
      listEditModalContainer.innerHTML = editListModalHTML;
      document.body.appendChild(listEditModalContainer);

      let editListModal = document.getElementById("editListModal-" + listId);

      let listNameInput = editListModal.querySelector("#listname");
      listNameInput.value = listName;

      let closeModalBtn = editListModal.querySelector(".close");
      let cancelBtn = editListModal.querySelector(".cancel-btn");

      closeModalBtn.addEventListener("click", (event) => {
        event.preventDefault();
        editListModal.style.display = "none";
        editListModal.remove(); // Remove the modal from the DOM
      });

      cancelBtn.addEventListener("click", (event) => {
        event.preventDefault();
        editListModal.style.display = "none";
        editListModal.remove(); // Remove the modal from the DOM
      });

      editListModal.style.display = "block";
    });
  });

  closeModalBtns.forEach( (btn) => {
    btn.addEventListener("click", (event) => {
      event.preventDefault(); // Prevent the default anchor behavior
      btn.closest(".modal").style.display = "none";
    });
  });

  cancelBtns.forEach((btn) => {
    btn.addEventListener("click", () => {
      btn.closest(".modal").style.display = "none";
    });
  });

  itemDeleteButton.forEach( (button) => {
    button.addEventListener("click", (event) => {
      event.preventDefault(); // Prevent the form submission

      let confirmDelete = confirm("Are you sure you want to delete this item?");
      if (confirmDelete) {
        // If user confirms, submit the form
        button.closest("form").submit();
      }
    });
  });

  listDeleteButton.forEach((button) => {
    button.addEventListener("click", (event) => {
      event.preventDefault(); // Prevent the form submission

      let confirmDelete = confirm(
        "Are you sure you want to delete this list? \n All items associated with this list will also be deleted!"
      );
      if (confirmDelete) {
        // If user confirms, submit the form
        button.closest("form").submit();
      }
    });
  });

  introspectionBtn.addEventListener("click", () => {
    fetch("/introspection")
      .then(response => response.json())
      .then(data =>{alert(data.messages);
        window.location.href = "/home";
      })
  });
});