Created
January 9, 2026 16:36
-
-
Save dannysmc95/258db8c28f3ac1573eba56f9e3f8ef11 to your computer and use it in GitHub Desktop.
Idk
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <html> | |
| <head> | |
| <title>Penguins Test</title> | |
| <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script> | |
| <style> | |
| body { | |
| background-color: #111111; | |
| } | |
| body * { | |
| font-family: Arial, Helvetica, sans-serif; | |
| } | |
| h1, h2, li, label, button { | |
| color: white; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| li { | |
| margin-bottom: 10px; | |
| } | |
| section { | |
| max-width: 600px; | |
| margin: auto; | |
| margin-bottom: 20px; | |
| padding: 20px; | |
| border-radius: 10px; | |
| background-color: #242424; | |
| } | |
| fieldset { | |
| border: none; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| h2 { | |
| margin-bottom: 10px; | |
| } | |
| label { | |
| display: block; | |
| margin-bottom: 10px; | |
| } | |
| textarea { | |
| width: 100%; | |
| height: 100px; | |
| resize: vertical; | |
| margin-bottom: 10px; | |
| min-height: 50px; | |
| max-height: 100px; | |
| border-radius: 8px; | |
| background-color: #313131; | |
| font-size: 15px; | |
| color: white; | |
| padding: 10px; | |
| border: none; | |
| } | |
| button { | |
| background-color: #444444; | |
| color: white; | |
| border: none; | |
| padding: 10px 15px; | |
| border-radius: 5px; | |
| cursor: pointer; | |
| font-size: 14px; | |
| margin-right: 5px; | |
| } | |
| button.delete { | |
| background-color: #aa4444; | |
| } | |
| button.delete:hover { | |
| background-color: #cc5555; | |
| } | |
| button:hover { | |
| background-color: #555555; | |
| } | |
| ul { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| li { | |
| list-style-type: none; | |
| display: flex; | |
| align-items: center; | |
| } | |
| li p { | |
| flex-grow: 1; | |
| margin: 0; | |
| padding: 0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="app"> | |
| <h1>To-Do</h1> | |
| <section> | |
| <h2>Add Task</h2> | |
| <form @submit.prevent> | |
| <fieldset> | |
| <label for="new-task-name">Task</label> | |
| <textarea v-model="newTask" id="new-task-name"></textarea> | |
| </fieldset> | |
| <fieldset> | |
| <button type="submit" @click="addTask">Submit</button> | |
| </fieldset> | |
| </form> | |
| </section> | |
| <section> | |
| <div> | |
| <h2>Tasks</h2> | |
| <ul id="tasks"> | |
| <li v-for="task in tasks"> | |
| <p> | |
| <span :style="{ textDecoration: task.completed ? 'line-through' : 'none' }"> | |
| {{ task.text }} | |
| </span> | |
| </p> | |
| <button type="button" @click="task.completed = !task.completed" @click="toggleCompleted"> | |
| Complete | |
| </button> | |
| <button type="button" class="delete"> | |
| Delete | |
| </button> | |
| </li> | |
| </ul> | |
| </div> | |
| </section> | |
| </div> | |
| <script> | |
| const { createApp } = Vue; | |
| const app = createApp({ | |
| data() { | |
| return { | |
| newTask: '', | |
| tasks: [ | |
| { text: 'Hello, World', completed: false }, | |
| { text: 'Sample Task 2', completed: false }, | |
| ] | |
| }; | |
| }, | |
| methods: { | |
| addTask() { | |
| if (this.newTask.trim() !== '') { | |
| this.tasks.push({ text: this.newTask.trim(), completed: false }); | |
| this.newTask = ''; | |
| } | |
| }, | |
| toggleCompleted(task) { | |
| task.completed = !task.completed; | |
| }, | |
| }, | |
| }).mount('#app'); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment