diff --git a/README.md b/README.md index e6fe0da..434adaf 100644 --- a/README.md +++ b/README.md @@ -171,12 +171,15 @@ please make sure to add a `README.md` file that follow the same construction as [README Template](https://github.com/pratham2402/mini-javascript-projects/blob/main/README_TEMPLATE.md) ## ![image](https://github.com/ndleah/python-mini-project/blob/main/IMG/like.svg) Projects - | Sr No | Project | Description | Author | | ----- | --------------------------------------------------------------------------------------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------- | | 1 | [Counter](https://github.com/pratham2402/mini-javascript-projects/tree/main/Counter) | This is a simple counter made using Javascript. | [Pratham Bhosale](https://github.com/pratham2402) | | 2 | [Color Flipper](https://github.com/pratham2402/mini-javascript-projects/tree/main/Color%20Flipper) | This is a simple color flipper made using Javascript. Get random colors and respective hex codes by clicking the button | [Pratham Bhosale](https://github.com/pratham2402) | | 3 | [Review Project](https://github.com/pratham2402/mini-javascript-projects/tree/main/Review%20Project) | This is a simple review project made using Javascript. Get review boxes. | [Pratham Bhosale](https://github.com/pratham2402) | +| 4 | [To-Do List](https://github.com/pratham2402/mini-javascript-projects/tree/main/Todo_list) | This is a simple to-do list made using Javascript. Complete your tasks today! | [saprameya](https://github.com/saprameya) | + + + ## ![image](https://github.com/ndleah/python-mini-project/blob/main/IMG/like.svg) Our Contributors diff --git a/Review Project/app.js b/Review Project/app.js index 4f608fc..b7aacba 100644 --- a/Review Project/app.js +++ b/Review Project/app.js @@ -3,7 +3,7 @@ const reviews = [ { id: 1, name: 'susan smith', - job: '', + job: 'web developer', img: 'https://www.course-api.com/images/people/person-1.jpeg', text: "I'm baby meggings twee health goth +1. Bicycle rights tumeric chartreuse before they sold out chambray pop-up. Shaman humblebrag pickled coloring book salvia hoodie, cold-pressed four dollar toast everyday carry", }, diff --git a/Todo_list/README.md b/Todo_list/README.md new file mode 100644 index 0000000..f67f876 --- /dev/null +++ b/Todo_list/README.md @@ -0,0 +1,20 @@ + +![Star Badge](https://img.shields.io/static/v1?label=%F0%9F%8C%9F&message=If%20Useful&style=style=flat&color=BC4E99) +![Open Source Love](https://badges.frapsoft.com/os/v1/open-source.svg?v=103) + +# Todo List +

+ + +## 🛠️ Description + +A todo list where you can add and remove items. + +## ⚙️ Languages or Frameworks Used +- JavaScript +- HTML +- CSS + +## 🤖 Author + +![Sheela Aprameya](https://github.com/saprameya) diff --git a/Todo_list/images/checked.png b/Todo_list/images/checked.png new file mode 100644 index 0000000..d26596a Binary files /dev/null and b/Todo_list/images/checked.png differ diff --git a/Todo_list/images/icon.png b/Todo_list/images/icon.png new file mode 100644 index 0000000..5655235 Binary files /dev/null and b/Todo_list/images/icon.png differ diff --git a/Todo_list/images/todolist.png b/Todo_list/images/todolist.png new file mode 100644 index 0000000..317c917 Binary files /dev/null and b/Todo_list/images/todolist.png differ diff --git a/Todo_list/images/unchecked.png b/Todo_list/images/unchecked.png new file mode 100644 index 0000000..04a5c5f Binary files /dev/null and b/Todo_list/images/unchecked.png differ diff --git a/Todo_list/index.html b/Todo_list/index.html new file mode 100644 index 0000000..e8ff3a5 --- /dev/null +++ b/Todo_list/index.html @@ -0,0 +1,27 @@ + + + + + + To Do List + + + +

+
+

To-Do List

+
+ + +
+ +
+
+ + + + + \ No newline at end of file diff --git a/Todo_list/script.js b/Todo_list/script.js new file mode 100644 index 0000000..f4cd99c --- /dev/null +++ b/Todo_list/script.js @@ -0,0 +1,39 @@ +const inputBox = document.getElementById("input box"); +const listContainer = document.getElementById("list-container"); + +function addTask(){ + if(inputBox.value ===''){ + alert("You must write something!") + } + else{ + let li = document.createElement("li"); + li.innerHTML = inputBox.value; + listContainer.appendChild(li); + let span = document.createElement("span") + span.innerHTML = "\u00d7"; + li.appendChild(span); + } + inputBox.value = ''; + saveData(); +} + +listContainer.addEventListener("click", function(e){ + if(e.target.tagName === "LI"){ + e.target.classList.toggle("checked"); + saveData(); + } + else if(e.target.tagName === "SPAN"){ + e.target.parentElement.remove(); + saveData(); + } +}, false); + +function saveData(){ + localStorage.setItem("data", listContainer.innerHTML); +} + +function showTask(){ + listContainer.innerHTML = localStorage.getItem("data"); +} + +showTask(); \ No newline at end of file diff --git a/Todo_list/styles.css b/Todo_list/styles.css new file mode 100644 index 0000000..f42b96d --- /dev/null +++ b/Todo_list/styles.css @@ -0,0 +1,114 @@ +*{ + margin: 0; + padding: 0; + font-family:Arial, Helvetica, sans-serif ; + box-sizing: border-box; +} +.container{ + width: 100%; + min-height: 100vh; + background: linear-gradient(135deg, #153677, #4e085f); + padding: 10px; +} + +.todo-app{ + width: 100%; + max-width:540px; + background: #fff; + margin: 100px auto 20px; + padding: 40px 30px 70px; + border-radius: 10px; +} + +.todo-app h2{ + color: #002765; + display: flex; + align-items: center; + margin-bottom: 20px; + +} + +.todo-app h2 img{ + width: 30px; + margin-left: 10px; +} + +.row{ + display: flex; + align-items: center; + justify-content: space-between; + background: #edeef0; + border-radius: 30px; + padding-left: 20px; + margin-bottom: 25px; +} + +input{ + flex: 1; + border: none; + outline: none; + background: transparent; + padding: 10px; + +} + +button{ + border: none; + outline: none; + padding: 16px 50px; + background: #ff5945; + color: #fff; + font-size: 16px; + cursor: pointer; + border-radius: 40px; +} + +ul li{ + list-style: none; + font-size: 17px; + padding: 12px 8px 12px 50px; + user-select: none; + cursor: pointer; + position: relative; +} + +ul li::before{ + content: ' '; + position: absolute; + height: 28px; + width: 28px; + border-radius: 50%; + background-image: url(images/unchecked.png); + background-size: cover; + background-position: center; + top: 12px; + left: 8px; + +} + +ul li.checked{ + color:#555; + text-decoration: line-through; +} + +ul li.checked::before{ + background-image: url(images/checked.png); + +} + +ul li span{ + position: absolute; + right: 0; + top: 5px; + width: 40px; + height: 40px; + font-size: 22px; + color:#555; + line-height: 40px; + text-align: center; + border-radius: 50%; +} + +ul li span:hover{ + background: #edeef0; +}