Skip to content
Snippets Groups Projects
Commit 50cf2bab authored by dseben's avatar dseben
Browse files

uploaded the actual files

parent 26845884
Branches master
No related tags found
No related merge requests found
<!DOCTYPE html> <!DOCTYPE html>
<html lang="hu"> <html lang="en">
<head> <head>
<meta charset="UTF-8" /> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> <title>Todo list</title>
<meta http-equiv="X-UA-Compatible" content="ie=edge" /> <link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="style.css" /> <script src="https://kit.fontawesome.com/5b66e23923.js" crossorigin="anonymous"></script>
<title>Schdesign Todo</title> <link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap" rel="stylesheet">
</head> </head>
<body> <body>
<h1>My first todo project</h1>
<input type="text" id="task-input" /> <div id="todo-container">
<button id="add-task">Click me!</button> <span>
<img src="data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjU5LjUxIDM3OC44NSI+PGRlZnM+PHN0eWxlPi5he2ZpbGw6I2Y4NDg1ZX08L3N0eWxlPjwvZGVmcz48cGF0aCBjbGFzcz0iYSIgZD0iTTU2MyA0MS40NHY5My4yM2wtLjA4LS4wN2E3MCA3MCAwIDAgMC0xMTMuMzUgNTIuNTV2NC43N2E3MCA3MCAwIDAgMCAxMTMuMzUgNTIuNTVsLjA4LS4wN2E3MCA3MCAwIDAgMCAyNi41OS01NC4yMVYxMTkuNGguMTR2LTc4em0tNDMuNDkgMTkxLjQyQTQzLjM5IDQzLjM5IDAgMSAxIDU2Mi44NyAxODh2Mi45OGE0My4zOSA0My4zOSAwIDAgMS00My4zNiA0MS44OXptNDAwLjE1LTExMi44OWgyNi40OXYxMzkuNTdoLTI2LjQ5em0zMjkuNDIgMzIuNjFhNzAgNzAgMCAwIDAtMTI5LjU5IDM0LjM1djVhNzAuMDcgNzAuMDcgMCAwIDAgMjYuNjcgNTIuNTh2LTUyLjg1cS0uMDYtMS4xMy0uMDYtMi4yOHQuMDYtMi4yOGE0My4xMyA0My4xMyAwIDAgMSA2LjQxLTIwLjUyIDQzLjQxIDQzLjQxIDAgMCAxIDczLjg0IDAgNDMuMTMgNDMuMTMgMCAwIDEgNi40MyAyMS4yOXY3MS41NWgyNi42N3YtNzAuNzZhNjkuNjggNjkuNjggMCAwIDAtMTAuNDMtMzYuMDh6TTc0NSAxNzYuMDdhNzAgNzAgMCAwIDAtMTM4LjczIDExVjE5MmE3MCA3MCAwIDAgMCAxMTkuNDcgNDcuMTFsLTE4LjgzLTE4Ljg1QTQzLjM5IDQzLjM5IDAgMCAxIDYzNSAyMDIuOTNoMTEwYTcwLjIzIDcwLjIzIDAgMCAwIDEuMjgtMTIuN3YtMS40NWE3MC4yMSA3MC4yMSAwIDAgMC0xLjI4LTEyLjcxem0tMTEwIDBhNDMuNCA0My40IDAgMCAxIDgyLjUyIDB6bTQ1Ny40LTIzLjUzYTcwLjA3IDcwLjA3IDAgMCAwLTExOS4xNyAwIDY5LjYgNjkuNiAwIDAgMC0xMCAyOXEtLjMgMi42OS0uNCA1LjQ0djQuODlhNzAgNzAgMCAwIDAgMTQwLTEuNzJ2LTEuNDVhNjkuNjkgNjkuNjkgMCAwIDAtMTAuNDMtMzYuMTZ6bS01OS42IDgwLjE4YTQzLjM3IDQzLjM3IDAgMCAxLTQzLjMyLTQxLjFxLS4wNi0xLjEzLS4wNi0yLjI4dC4wNi0yLjI4YTQzLjEzIDQzLjEzIDAgMCAxIDYuNDEtMjAuNTIgNDMuNDEgNDMuNDEgMCAwIDEgNzMuODQgMCA0My4xMyA0My4xMyAwIDAgMSA2LjQzIDIxLjI5djIuOThhNDMuMzggNDMuMzggMCAwIDEtNDMuMzYgNDEuODl6bTcwLjAzIDc2LjA5YTcwIDcwIDAgMCAxLTExOS41IDQ5LjU3bDYuMTUtNi4xNiAxMi42OC0xMi43YTQzLjM4IDQzLjM4IDAgMCAwIDc0LTI5LjIydi0yLjk4YTQzLjMgNDMuMyAwIDAgMC0xMi43MS0yOS4yMWwxMi43MS0xMi43MyA2LjEyLTYuMTNhNjkuODcgNjkuODcgMCAwIDEgMjAuNTUgNDkuNTZ6Ii8+PHBhdGggZD0iTTI3Ni4xNSAyMzkuMDdBNzAgNzAgMCAwIDEgMTU2LjY4IDE5MnYtNC44OUE3MCA3MCAwIDAgMSAyNzYuMTUgMTQwbC0xOC44MyAxOC44NmE0My4zOCA0My4zOCAwIDEgMCAwIDYxLjR6bTEzNi4xNi05OS4xNmE3MCA3MCAwIDAgMC05Mi44LTUuNDd2LTkzaC0yNi43VjE5MS45YTcwLjA4IDcwLjA4IDAgMCAwIDI2LjY5IDUyLjZ2LTUyLjc0cS0uMDYtMS4xMy0uMDYtMi4yOHQuMDYtMi4yOGE0My4xMyA0My4xMyAwIDAgMSA2LjQxLTIwLjUyIDQzLjM5IDQzLjM5IDAgMCAxIDgwLjI1IDIwLjg3djcxLjk5aDI2LjY5di03MC4wNmE2OS44MSA2OS44MSAwIDAgMC0yMC41NC00OS41N3ptLTI3My41OCAzNi4xNmgtMTEwYTQzLjEzIDQzLjEzIDAgMCAxIDQuMzUtOS4zNyA0My4zOSA0My4zOSAwIDAgMSA2Ny41Ni03Ljg5bDE4LjgzLTE4Ljg2QTcwIDcwIDAgMCAwIDAgMTg3LjA2VjE5MmE3MC4wOSA3MC4wOSAwIDAgMCAxLjI0IDExaDExMGE0My4zOSA0My4zOSAwIDAgMS03MS45MSAxNy4yOWwtMTIuNjggMTIuNy02LjE1IDYuMTZBNzAgNzAgMCAwIDAgMTQwIDE5MC4yM3YtMS40NWE3MC4yMiA3MC4yMiAwIDAgMC0xLjI3LTEyLjcxek03MCAxODkuNTdsLS4xNi4xLjEyLS4xMi4wNy4wN3oiIGZpbGw9IiNmZmYiLz48Y2lyY2xlIGNsYXNzPSJhIiBjeD0iOTMyLjM1IiBjeT0iNTQuNzciIHI9IjEzLjMzIi8+PHBhdGggY2xhc3M9ImEiIGQ9Ik05MDEuNzIgMTc2LjA3aC0xMTBhNDMuMTMgNDMuMTMgMCAwIDEgNC4zNS05LjM3IDQzLjM5IDQzLjM5IDAgMCAxIDY3LjU2LTcuODlsMTguODMtMTguODZBNzAgNzAgMCAwIDAgNzYzIDE4Ny4wNlYxOTJhNzAuMDkgNzAuMDkgMCAwIDAgMS4yNCAxMWgxMTBhNDMuMzkgNDMuMzkgMCAwIDEtNzEuOTEgMTcuMjlsLTEyLjY4IDEyLjctNi4xNSA2LjE2QTcwIDcwIDAgMCAwIDkwMyAxOTAuMjN2LTEuNDVhNzAuMjIgNzAuMjIgMCAwIDAtMS4yOC0xMi43MXpNODMzIDE4OS41N2wtLjE2LjEuMTItLjEyLjA3LjA3eiIvPjwvc3ZnPg==" alt="schdesign logo">
</span>
<div id="todo-header">
<input type="text" id="task-input" placeholder="Írd ide a tennivalód">
<button id="add-task">+</button>
</div>
<div id="todo-list"> <div id="todo-list">
<ul id="tasks"> <ul id="tasks">
<li class="task"> <!-- <li class="task">
<input type="checkbox" id="task0" /> <input type="checkbox" id="task0">
<label for="task0">1. tennivaló</label> <label for="task0">Lemenni tejért</label>
<button>X</button> <button>
</li> <i class="fas fa-trash-alt"></i>
<li>2. tennivaló</li> </button>
</li> -->
</ul> </ul>
</div> </div>
<script src="script.js"></script> </div>
<script src="script.js">
</script>
</body> </body>
</html> </html>
\ No newline at end of file
Font-awesome
#DDD
placeholder (input type = "text"-re)
///////
To look up later:
• position:relative; position:absolute;
addBttn = document.getElementById("add-task");
addBttn.onclick = addTask;
indexNum = 0;
addBtn = document.getElementById("add-task");
addBtn.onclick = addTask;
taskInp = document.getElementById("task-input");
taskInp.addEventListener("keyup",function(event){
// If enter is pressed
if (event.keyCode == 13) {
addTask();
}
});
function addTask() { function addTask() {
inputValue = document.getElementById("task-input").value; taskInput = document.getElementById("task-input").value;
taskList = document.getElementById("tasks"); taskList = document.getElementById("tasks");
taskLi = document.createElement("li"); taskLi = document.createElement("li");
taskLi.setAttribute("class", "task"); taskLi.setAttribute("class", "task");
taskLi.innerText = inputValue; taskCheckbox = document.createElement("input");
taskCheckbox.setAttribute("type", "checkbox");
taskCheckbox.setAttribute("id", "task" + indexNum);
taskVal = document.createElement("label");
taskVal.setAttribute("for", "task" + indexNum);
taskVal.innerText = taskInput;
taskBtn = document.createElement("button");
taskBtn.setAttribute("id","bin" + indexNum);
taskBtn.onclick = function(){
removeTask(this.id);
}
trashIcon = document.createElement("i");
trashIcon.setAttribute("class", "fas fa-trash-alt");
taskBtn.appendChild(trashIcon);
taskLi.appendChild(taskCheckbox);
taskLi.appendChild(taskVal);
taskLi.appendChild(taskBtn);
taskList.appendChild(taskLi); taskList.appendChild(taskLi);
document.getElementById("task-input").value = "";
indexNum++;
}
function removeTask(id){
taskList.removeChild(document.getElementById(id).parentElement);
} }
\ No newline at end of file
* {
margin: 0;
padding: 0;
border: none;
outline: none;
background: transparent;
font-family: 'Ubuntu', sans-serif;
font-size: 19px;
}
body {
background: #3d3d3d;
margin-top: 20px;
}
#todo-container {
max-width: 400px;
margin: 0 auto;
}
#todo-container ul {
background: #2d2d2d;
color: #DDD;
list-style-type:none;
}
#todo-header button {
background: #f8485e;
position: absolute;
right: 0;
}
#todo-header button:hover {
filter: brightness(1.15);
}
#todo-header {
position: relative;
background: #212121;
width: 100%;
margin-bottom: 20px;
margin-top: 20px;
}
#todo-header {
border-radius: 18px 18px 18px 18px;
}
#todo-header button {
border-radius: 0 18px 18px 0;
}
#todo-header button,
#todo-header input {
color: #ddd;
padding: 12px;
}
#todo-list,
#tasks { #tasks {
color: red; border-radius: 18px;
}
#todo-list .task {
position: relative;
border-bottom: 2px solid rgba(0,0,0,0.1);
}
#todo-list .task:last-child {
border-bottom: none;
}
#todo-list input{
display: none;
}
#todo-list input:checked + label {
text-decoration: line-through;
color: #a2a2a2;
}
#todo-list .task label {
display: block;
width: 100%;
padding: 14px 40px 14px 14px;
}
#todo-list .task button {
color: #cdcdcd;
padding: 14px;
position: absolute;
top: 0;
right: 0;
}
#todo-list .task button:hover {
color: #fff;
}
#todo-list .task i {
font-size: 14px;
} }
\ No newline at end of file
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment