API tools faq
paste
Advertisement
Python253

todo_list_with_notes

Python253
Mar 24th, 2024
901
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
HTML 4.29 KB | None | 0 0
raw download clone embed print report
  1. <!--
  2. This script defines a Vue.js application for creating a to-do list with notes.
  3. Users can input new tasks and corresponding notes, view the list of tasks with notes, and delete tasks as needed.
  4. The application is styled using CSS to provide a visually appealing and user-friendly interface.
  5. The Vue.js framework is utilized for data binding and DOM manipulation, enabling dynamic updates to the task list without page reloads.
  6. -->
  7. <!DOCTYPE html>
  8. <html lang="en">
  9.  
  10. <head>
  11.     <meta charset="UTF-8">
  12.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
  13.     <title>TO-DO LIST WITH NOTES</title>
  14.     <!-- Importing Vue.js library -->
  15.     <script src="https://cdn.jsdelivr.net/npm/vue@2"></script>
  16.     <style>
  17.     /* Styling for the entire document */
  18.    
  19.     body {
  20.         font-family: Arial, sans-serif;
  21.         margin: 0;
  22.         padding: 0;
  23.         display: flex;
  24.         justify-content: center;
  25.         align-items: center;
  26.         height: 100vh;
  27.         /* Background gradient */
  28.         background: linear-gradient(-45deg, #000, #000, #191970, #4B0082, #191970, #000, #000);
  29.     }
  30.     /* Styling for the main application container */
  31.    
  32.     #app {
  33.         background-color: #fff;
  34.         padding: 20px;
  35.         border-radius: 8px;
  36.         box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  37.         position: absolute;
  38.         top: 10%;
  39.         left: 10%;
  40.         right: 10%;
  41.         border: 4px solid #000;
  42.         word-wrap: break-word;
  43.         display: flex;
  44.         flex-direction: column;
  45.     }
  46.     /* Styling for headers */
  47.    
  48.     h1,
  49.     strong,
  50.     span {
  51.         text-align: left;
  52.         margin-bottom: 20px;
  53.         font-weight: bold;
  54.     }
  55.     /* Styling for input fields */
  56.    
  57.     input[type="text"],
  58.     textarea {
  59.         width: calc(100% - 40px);
  60.         padding: 8px;
  61.         border-radius: 4px;
  62.         border: 1px solid #ccc;
  63.         margin-bottom: 10px;
  64.         resize: vertical;
  65.     }
  66.     /* Styling for the to-do list */
  67.    
  68.     ul {
  69.         list-style-type: none;
  70.         padding: 0;
  71.         flex-grow: 1;
  72.         overflow-y: auto;
  73.     }
  74.    
  75.     li {
  76.         display: flex;
  77.         flex-direction: column;
  78.         padding: 8px;
  79.         border-bottom: 1px solid #ccc;
  80.     }
  81.    
  82.     .task {
  83.         margin-bottom: 5px;
  84.         flex-grow: 1;
  85.     }
  86.     /* Styling for buttons */
  87.    
  88.     button {
  89.         background-color: #ff6347;
  90.         color: #fff;
  91.         border: none;
  92.         border-radius: 4px;
  93.         padding: 4px 8px;
  94.         cursor: pointer;
  95.     }
  96.    
  97.     button:hover {
  98.         background-color: #ff473d;
  99.     }
  100.     /* Styling for the submit button */
  101.    
  102.     .submit-btn {
  103.         align-self: flex-end;
  104.     }
  105.     </style>
  106. </head>
  107.  
  108. <body>
  109.     <!-- Main application container -->
  110.     <div id="app">
  111.         <!-- Header -->
  112.         <h1><strong>TO-DO LIST</strong></h1>
  113.         <!-- Input field for adding a new task -->
  114.         <input type="text" v-model="newTodo.task" placeholder="ADD A NEW TASK & PRESS [ENTER]..." @keyup.enter="focusNotesInput" ref="taskInput">
  115.         <!-- Text area for adding notes -->
  116.         <textarea v-model="newTodo.note" placeholder="ADD NOTES & SELECT [SUBMIT]..." ref="notesInput"></textarea>
  117.         <!-- Displaying the list of to-do items -->
  118.         <ul>
  119.             <li v-for="(todo, index) in todos" :key="index">
  120.                 <!-- Displaying the task and a delete button -->
  121.                 <div style="display: flex; align-items: center;"> <strong class="task">{{ todo.task }}</strong>
  122.                     <button style="margin-left: 10px;" @click="removeTodo(index)">X</button>
  123.                 </div>
  124.                 <!-- Displaying notes for the task --><strong>Notes:</strong>
  125.                 <br>{{ todo.note }} </li>
  126.         </ul>
  127.         <!-- Submit button -->
  128.         <button class="submit-btn" @click="addTodo">[SUBMIT]</button>
  129.     </div>
  130.     <!-- Vue.js script -->
  131.     <script>
  132.     // Vue.js instance
  133.     var app = new Vue({
  134.         el: '#app', // Mounting point
  135.         data: {
  136.             // Data for managing to-do items
  137.             newTodo: {
  138.                 task: '',
  139.                 note: ''
  140.             }, // New to-do item
  141.             todos: [] // List of to-do items
  142.         },
  143.         methods: {
  144.             // Method to add a new to-do item
  145.             addTodo: function() {
  146.                 if(this.newTodo.task !== '') {
  147.                     this.todos.push({
  148.                         task: this.newTodo.task,
  149.                         note: this.newTodo.note
  150.                     }); // Add new item to the list
  151.                     this.newTodo.task = ''; // Clear task input
  152.                     this.newTodo.note = ''; // Clear note input
  153.                     this.$refs.taskInput.focus(); // Focus on task input
  154.                 }
  155.             },
  156.             // Method to remove a to-do item
  157.             removeTodo: function(index) {
  158.                 this.todos.splice(index, 1); // Remove item from the list
  159.             },
  160.             // Method to focus on notes input
  161.             focusNotesInput: function() {
  162.                 this.$refs.notesInput.focus(); // Focus on notes input
  163.             }
  164.         }
  165.     })
  166.     </script>
  167. </body>
  168.  
  169. </html>
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!