Added checkbox, date input, slider select, changes to the list element.

src/components/AboutMeComponents/SideScrolling.vue

@@ -1,10 +1,7 @@
 <template>
     <div id="scroll-container">
-
         <div id="scroll-text">This is scrolling text.</div>
     </div>
-
-
 </template>
 
 <script>

src/components/ListItems/CheckBox.vue

@@ -0,0 +1,44 @@
+<template>
+    <div class="checkbox-container">
+      <label for="checkbox-input">{{ label }}</label>
+      <input
+        type="checkbox"
+        id="checkbox-input"
+        v-model="isChecked"
+        @change="emitCheckboxChange"
+        @keyup.enter="toggleCheckbox"
+        tabindex="0" />
+    </div>
+  </template>
+
+  <script>
+  export default {
+    name: 'CheckboxInput',
+    props: {
+      label: {
+        type: String,
+        default: 'Checkbox' // Default label text
+      }
+    },
+    data() {
+      return {
+        isChecked: false
+      };
+    },
+    methods: {
+      emitCheckboxChange() {
+        this.$emit('checkbox-toggled', this.isChecked); // Emit the checked state to the parent
+      },
+      toggleCheckbox() {
+        // Toggle the checkbox value when Enter is pressed
+        this.isChecked = !this.isChecked;
+        this.emitCheckboxChange(); // Emit the change
+      }
+    }
+  };
+  </script>
+
+  <style scoped>
+  /* Add your styling here */
+  </style>
+

src/components/ListItems/DateInput.vue

@@ -0,0 +1,25 @@
+<template>
+  <div class="date-input-container">
+    <label for="date-input"></label>
+    <input type="date" id="date-input" v-model="selectedDate" @change="emitDateChange" />
+  </div>
+</template>
+
+<script>
+export default {
+  data() {
+    return {
+      selectedDate: null,
+    };
+  },
+  methods: {
+    emitDateChange() {
+      this.$emit('date-selected', this.selectedDate); // Emit the selected date to the parent
+    }
+  }
+};
+</script>
+
+<style scoped>
+/* Add your styling here */
+</style>

src/components/ListItems/ListElement.css

@@ -0,0 +1,165 @@
+.dropbtn {
+    margin-bottom: 10px;
+    min-width: 20px;
+    max-width: 200px;
+    width: 200px;
+  }
+
+
+  .dropdown {
+    position: relative;
+    display: inline-block;
+  }
+
+  .dropdown-content {
+    display: none;
+    position: absolute;
+    background-color: #f9f9f9;
+    min-width: 160px;
+    box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
+    z-index: 1;
+  }
+
+  .dropdown-content a {
+    color: black;
+    padding: 12px 16px;
+    text-decoration: none;
+    display: block;
+  }
+
+  .dropdown-content a:hover {
+    background-color: #f1f1f1;
+  }
+
+  .dropdown:hover .dropdown-content {
+    display: block;
+  }
+
+  .text-cursor {
+    cursor: text;
+  }
+
+  .item-text:focus {
+    outline: none;
+    /* Remove default outline for focused element */
+  }
+
+  .drag-button {
+    padding: 4px;
+    background-color: #ccc;
+    color: #333;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    margin-right: 4px;
+  }
+
+  /* Styles for dragging */
+  .ListItem li {
+    cursor: move;
+  }
+
+  .template-container {
+    background-color: black;
+    border-radius: 10px;
+    border-color: white;
+    border-width: 1px;
+    border-style: solid;
+    min-height: 400px;
+    max-height: 600px;
+    min-width: 400px;
+    max-width: 500px;
+    padding: 5px 10px;
+  }
+
+  .input-container {
+    margin-bottom: 0px;
+    display: flex;
+    align-items: center;
+  }
+
+
+
+  .input-field {
+    padding: 8px 12px;
+    border: 1px solid #ccc;
+    border-radius: 4px;
+    margin-right: 8px;
+    font-size: 14px;
+  }
+
+  .add-button,
+  .toggle-popup-button {
+    padding: 8px 16px;
+    background-color: #2d5dc7;
+    color: white;
+    border: none;
+    border-radius: 4px;
+    cursor: pointer;
+    font-size: 14px;
+    margin-right: 8px;
+  }
+
+  .remove-button {
+    padding: 4px 8px;
+    background-color: #343541;
+    color: white;
+    border: none;
+    border-radius: 50%;
+    cursor: pointer;
+    font-size: 12px;
+    margin-right: 8px;
+  }
+
+  .ListContainer {
+    display: flex;
+    flex-direction: column;
+  }
+
+  .ListItem {
+    padding: 0;
+  }
+
+  .item-container {
+    display: flex;
+    align-items: center;
+  }
+
+  .item-text {
+    margin-left: 10px;
+    outline: none;
+  }
+
+  .ListItem li {
+    position: relative;
+    padding-top: 1.45px;
+    padding-bottom: 1.45px;
+  }
+
+  .ListContainer {
+    max-height: 300px;
+    max-width: 400px;
+    overflow-y: auto;
+    display: flex;
+  }
+
+  .ListItem {
+    padding: 0;
+  }
+
+  .ListItem,
+  .RemoveButtonContainer {
+    list-style-type: none;
+    padding: 0;
+  }
+
+  li {
+    list-style-type: none;
+    padding-right: 10px;
+    spellcheck: false;
+  }
+
+  li:hover {
+    background-color: grey;
+    border-radius: 15px;
+  }