Created
March 29, 2019 08:00
-
-
Save MurhafSousli/986a18bb1eccb9159cfbfd03e882f5db to your computer and use it in GitHub Desktop.
Practice on JS
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
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Javascript TODO list</title> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body> | |
| <div class="header"> | |
| <h2>My To Do List</h2> | |
| <div class="group"> | |
| <input id="taskInput" type="text" placeholder="Enter task title..."> | |
| <span id="taskBtn">Add</span> | |
| </div> | |
| </div> | |
| <ul id="myList"> | |
| </ul> | |
| <script src="main.js"></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
| body { | |
| margin: 0; | |
| } | |
| ul { | |
| padding: 0; | |
| margin: 0; | |
| } | |
| /* Style the list items */ | |
| ul li { | |
| cursor: pointer; | |
| position: relative; | |
| padding: 12px 8px 12px 40px; | |
| font-size: 18px; | |
| background: #eee; | |
| transition: 0.2s linear all; | |
| } | |
| ul li:nth-child(odd) { | |
| background: #f9f9f9; | |
| } | |
| ul li:hover { | |
| background: #ddd; | |
| } | |
| ul li.checked { | |
| background: #888; | |
| color: #fff; | |
| text-decoration: line-through; | |
| } | |
| 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; | |
| } | |
| .header { | |
| background: #f44336; | |
| padding: 30px 40px; | |
| color: white; | |
| text-align: center; | |
| } | |
| .group { | |
| display: flex; | |
| } | |
| input { | |
| flex: 1; | |
| margin: 0; | |
| border: none; | |
| border-radius: none; | |
| padding: 10px; | |
| font-size: 16px; | |
| } | |
| #taskBtn { | |
| padding: 10px; | |
| width: 60px; | |
| background: #d9d9d9; | |
| color: #555; | |
| text-align: center; | |
| cursor: pointer; | |
| transition: 0.3s; | |
| } | |
| #taskBtn:hover { | |
| background: #bbb; | |
| } | |
| .remove { | |
| position: absolute; | |
| right: 0; | |
| top: 0; | |
| padding: 12px 16px 12px 16px; | |
| } | |
| .remove:hover { | |
| background-color: #f44336; | |
| color: white; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment