diff --git a/index.html b/index.html index 61b6e04..ffd5eaf 100644 --- a/index.html +++ b/index.html @@ -1,19 +1,43 @@ + Todo List +

Todo List

-
+
- +
- + + \ No newline at end of file diff --git a/script.js b/script.js new file mode 100644 index 0000000..67dd84e --- /dev/null +++ b/script.js @@ -0,0 +1,36 @@ +let todo_item = document.getElementById('todoInput'); +let item1 = document.getElementById('item1'); +let item2 = document.getElementById('item2'); +let item3 = document.getElementById('item3'); +let item4 = document.getElementById('item4'); +let item5 = document.getElementById('item5'); + + + +function Add() { + if (todo_item.value === "") { + alert("Enter todo item") + } else { + alert(todo_item.value + " is added") + if (item1.value != "") { + if (item2 != "") { + if (item3 != "") { + if (item4 != "") { + if (item5 != "") + alert("Your ToDo List is Full") + item5.innerText = todo_item.value; + document.getElementsByClassName('checkmark:nth-child(5)').style.display = "block"; + } + item4.innerText = todo_item.value; + document.getElementsByClassName('checkmark:nth-child(4)').style.display = "block"; + } + item3.innerText = todo_item.value; + document.getElementsByClassName('checkmark:nth-child(3)').style.display = "block"; + } + item2.innerText = todo_item.value; + document.getElementsByClassName('checkmark:nth-child(2)').style.display = "block"; + } + item1.innerText = todo_item.value; + document.getElementsByClassName('checkmark:nth-child(1)').style.display = "block"; + } +} diff --git a/style.css b/style.css new file mode 100644 index 0000000..678db28 --- /dev/null +++ b/style.css @@ -0,0 +1,91 @@ +.container{ + margin: auto; + padding: 25px; + width: 40%; + text-align: center; + height: 90vh; + background-color: rgb(219, 246, 246); + border-radius: 10px; + align-items: center; + font-size: large; + font-family: 'Courier New', Courier, monospace; +} +.container #todoInput{ + width: 70%; + height: 40px; + border: none; + padding: 10px; + font-family: 'Courier New', Courier, monospace; + border-radius: 8px; + box-shadow: 1px 1px 3px #ccc; + font-size: 20px; +} +.container button{ + width: 20%; + height: 60px; + border:1px solid #4b48482a; + padding: 10px; + font-family: 'Courier New', Courier, monospace; + font-weight: bold; + color: #545353; + background-color: blanchedalmond; + border-radius: 8px; + box-shadow: 1px 1px 3px #ccc; + font-size: 20px; +} +ul { + margin-top: 30px; + padding: 0; + } + + /* Style the list items */ + ul li { + cursor: pointer; + position: relative; + padding: 12px 8px 12px 40px; + list-style-type: none; + background: #eee; + font-size: 18px; + transition: 0.2s; + } + + /* Set all odd list items to a different color (zebra-stripes) */ + ul li:nth-child(odd) { + background: #f9f9f9; + } + + /* Darker background-color on hover */ + ul li:hover { + background: #ddd; + } + + /* When clicked on, add a background color and strike out text */ + ul li.checked { + background: #888; + color: #fff; + text-decoration: line-through; + } + + /* Add a "checked" mark when clicked on */ + ul li.checked::before { + content: ''; + position: absolute; + border-color: #fff; + border-style: solid; + border-width: 0 2px 2px 0; + top: 10px; + left: 16px; + transform: rotate(45deg); + height: 15px; + width: 7px; + } + + .checkmark { + display: none; + position: absolute; + top: 10%; + left: 0; + height: 25px; + width: 25px; + background-color: #eee; + } \ No newline at end of file diff --git a/test.html b/test.html new file mode 100644 index 0000000..49999dd --- /dev/null +++ b/test.html @@ -0,0 +1,54 @@ + + + + + + How to change the text of + a label using JavaScript ? + + + + + +

+ GeeksforGeeks +

+ +

+ Click on the button to change + the text of a label +

+ +
+
+ + +
+ + + + + + + \ No newline at end of file