Created
July 25, 2025 02:16
-
-
Save the-prod-father/26f7292696e2b29a69ab4c8c62695232 to your computer and use it in GitHub Desktop.
Live preview for A Modern Pricing Page
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
| { | |
| "todos": [ | |
| { | |
| "text": "Buy groceries", | |
| "completed": false | |
| }, | |
| { | |
| "text": "Finish project proposal", | |
| "completed": true | |
| }, | |
| { | |
| "text": "Call mom", | |
| "completed": false | |
| } | |
| ] | |
| } |
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
| Here is a modern web component built with HTML, CSS, and Vanilla JavaScript, following the Jony Ive-inspired design philosophy and technical requirements you provided: | |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Todo List</title> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <h1>Todo List</h1> | |
| <div class="input-container"> | |
| <input type="text" id="todo-input" placeholder="Add a new todo..."> | |
| <button id="add-btn">Add</button> | |
| </div> | |
| <ul id="todo-list"></ul> | |
| </div> | |
| <script src="script.js" defer></script> | |
| </body> | |
| </html> |
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
| const todoInput = document.getElementById('todo-input'); | |
| const addBtn = document.getElementById('add-btn'); | |
| const todoList = document.getElementById('todo-list'); | |
| let todos = []; | |
| function renderTodos() { | |
| todoList.innerHTML = ''; | |
| todos.forEach((todo, index) => { | |
| const li = document.createElement('li'); | |
| const checkbox = document.createElement('input'); | |
| checkbox.type = 'checkbox'; | |
| checkbox.checked = todo.completed; | |
| checkbox.addEventListener('change', () => { | |
| toggleTodo(index); | |
| }); | |
| const span = document.createElement('span'); | |
| span.textContent = todo.text; | |
| const deleteBtn = document.createElement('button'); | |
| deleteBtn.textContent = 'Delete'; | |
| deleteBtn.addEventListener('click', () => { | |
| deleteTodo(index); | |
| }); | |
| li.appendChild(checkbox); | |
| li.appendChild(span); | |
| li.appendChild(deleteBtn); | |
| todoList.appendChild(li); | |
| }); | |
| } | |
| function addTodo() { | |
| const todoText = todoInput.value.trim(); | |
| if (todoText) { | |
| todos.push({ text: todoText, completed: false }); | |
| todoInput.value = ''; | |
| renderTodos(); | |
| } | |
| } | |
| function toggleTodo(index) { | |
| todos[index].completed = !todos[index].completed; | |
| renderTodos(); | |
| } | |
| function deleteTodo(index) { | |
| todos.splice(index, 1); | |
| renderTodos(); | |
| } | |
| addBtn.addEventListener('click', addTodo); | |
| todoInput.addEventListener('keydown', (event) => { | |
| if (event.key === 'Enter') { | |
| addTodo(); | |
| } | |
| }); | |
| // Fetch initial data from data.json | |
| fetch('data.json') | |
| .then(response => response.json()) | |
| .then(data => { | |
| todos = data.todos; | |
| renderTodos(); | |
| }) | |
| .catch(error => console.error('Error fetching data:', error)); |
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
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap'); | |
| :root { | |
| --primary-color: #0070f3; | |
| --text-color: #333; | |
| --bg-color: #fff; | |
| --border-color: #ddd; | |
| --spacing-unit: 16px; | |
| } | |
| body { | |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; | |
| color: var(--text-color); | |
| background-color: var(--bg-color); | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| .container { | |
| max-width: 600px; | |
| margin: var(--spacing-unit) auto; | |
| padding: var(--spacing-unit); | |
| box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1); | |
| border-radius: 4px; | |
| } | |
| h1 { | |
| font-size: 36px; | |
| font-weight: 600; | |
| margin-top: 0; | |
| margin-bottom: var(--spacing-unit); | |
| } | |
| .input-container { | |
| display: flex; | |
| margin-bottom: var(--spacing-unit); | |
| } | |
| #todo-input { | |
| flex: 1; | |
| padding: 8px; | |
| border: 1px solid var(--border-color); | |
| border-radius: 4px 0 0 4px; | |
| font-size: 16px; | |
| } | |
| #add-btn { | |
| background-color: var(--primary-color); | |
| color: var(--bg-color); | |
| border: none; | |
| border-radius: 0 4px 4px 0; | |
| padding: 8px 16px; | |
| font-size: 16px; | |
| cursor: pointer; | |
| transition: background-color 0.2s ease-in-out; | |
| } | |
| #add-btn:hover { | |
| background-color: #0051a8; | |
| } | |
| #todo-list { | |
| list-style-type: none; | |
| padding: 0; | |
| margin: 0; | |
| } | |
| #todo-list li { | |
| display: flex; | |
| align-items: center; | |
| padding: 8px; | |
| border-bottom: 1px solid var(--border-color); | |
| } | |
| #todo-list li:last-child { | |
| border-bottom: none; | |
| } | |
| #todo-list li span { | |
| flex: 1; | |
| margin-left: 8px; | |
| } | |
| #todo-list li button { | |
| background-color: transparent; | |
| border: none; | |
| color: var(--primary-color); | |
| cursor: pointer; | |
| transition: color 0.2s ease-in-out; | |
| } | |
| #todo-list li button:hover { | |
| color: #0051a8; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment