diff --git a/index.html b/index.html new file mode 100644 index 00000000..657dbb36 --- /dev/null +++ b/index.html @@ -0,0 +1,18 @@ + + + + + + To-Do List + + + +
+

To-Do List

+ + + +
+ + + \ No newline at end of file diff --git a/index2.html b/index2.html new file mode 100644 index 00000000..9e244421 --- /dev/null +++ b/index2.html @@ -0,0 +1,36 @@ + + + + + + Simple Calculator + + + +
+ +
+ + + + + + + + + + + + + + + + + + + +
+
+ + + diff --git a/project report.docx b/project report.docx new file mode 100644 index 00000000..31ea0df1 Binary files /dev/null and b/project report.docx differ diff --git a/script.js b/script.js new file mode 100644 index 00000000..c3fca491 --- /dev/null +++ b/script.js @@ -0,0 +1,29 @@ +document.addEventListener('DOMContentLoaded', () => { + const taskInput = document.getElementById('taskInput'); + const addButton = document.getElementById('addButton'); + const taskList = document.getElementById('taskList'); + + addButton.addEventListener('click', () => { + const taskText = taskInput.value.trim(); + if (taskText === '') return; + + const listItem = document.createElement('li'); + listItem.textContent = taskText; + + const removeButton = document.createElement('button'); + removeButton.textContent = 'Remove'; + removeButton.addEventListener('click', () => { + taskList.removeChild(listItem); + }); + + listItem.appendChild(removeButton); + taskList.appendChild(listItem); + taskInput.value = ''; + }); + + taskInput.addEventListener('keypress', (event) => { + if (event.key === 'Enter') { + addButton.click(); + } + }); +}); \ No newline at end of file diff --git a/script2.js b/script2.js new file mode 100644 index 00000000..f66349f0 --- /dev/null +++ b/script2.js @@ -0,0 +1,18 @@ +function appendToDisplay(value) { + const display = document.getElementById('display'); + display.value += value; +} + +function clearDisplay() { + const display = document.getElementById('display'); + display.value = ''; +} + +function calculateResult() { + const display = document.getElementById('display'); + try { + display.value = eval(display.value); + } catch (error) { + display.value = 'Error'; + } +} diff --git a/styles.css b/styles.css new file mode 100644 index 00000000..73fa55a7 --- /dev/null +++ b/styles.css @@ -0,0 +1,64 @@ +body { + font-family: Arial, sans-serif; + background-color: #f4f4f4; + margin: 0; + padding: 20px; +} + +.container { + max-width: 400px; + margin: auto; + background: white; + padding: 20px; + border-radius: 8px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); +} + +h1 { + text-align: center; +} + +input { + width: 70%; + padding: 10px; + margin-right: 10px; + border: 1px solid #ccc; + border-radius: 4px; +} + +button { + padding: 10px; + background: #28a745; + color: white; + border: none; + border-radius: 4px; + cursor: pointer; +} + +button:hover { + background: #218838; +} + +ul { + list-style-type: none; + padding: 0; +} + +li { + display: flex; + justify-content: space-between; + padding: 10px; + border-bottom: 1px solid #ccc; +} + +li button { + background: #dc3545; + border: none; + color: white; + border-radius: 4px; + cursor: pointer; +} + +li button:hover { + background: #c82333; +} \ No newline at end of file diff --git a/styles2.css b/styles2.css new file mode 100644 index 00000000..79e014f0 --- /dev/null +++ b/styles2.css @@ -0,0 +1,52 @@ +body { + font-family: Arial, sans-serif; + background-color: #f4f4f4; + display: flex; + justify-content: center; + align-items: center; + height: 100vh; + margin: 0; +} + +.calculator { + background: white; + border-radius: 8px; + padding: 20px; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); + width: 250px; +} + +#display { + width: 100%; + padding: 10px; + font-size: 24px; + margin-bottom: 10px; + border: 1px solid #ccc; + border-radius: 4px; + text-align: right; +} + +.buttons { + display: grid; + grid-template-columns: repeat(4, 1fr); + gap: 10px; +} + +button { + padding: 20px; + font-size: 18px; + border: none; + border-radius: 4px; + background: #007bff; + color: white; + cursor: pointer; + transition: background 0.3s; +} + +button:hover { + background: #0056b3; +} + +button:active { + background: #004494; +}