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

uploaded the actual files

parent 26845884
No related branches found
No related tags found
No related merge requests found
<!DOCTYPE html>
<html lang="hu">
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="ie=edge" />
<link rel="stylesheet" href="style.css" />
<title>Schdesign Todo</title>
<meta charset="UTF-8">
<title>Todo list</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/5b66e23923.js" crossorigin="anonymous"></script>
<link href="https://fonts.googleapis.com/css2?family=Ubuntu:wght@300&display=swap" rel="stylesheet">
</head>
<body>
<h1>My first todo project</h1>
<input type="text" id="task-input" />
<button id="add-task">Click me!</button>
<div id="todo-container">
<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">
<ul id="tasks">
<li class="task">
<input type="checkbox" id="task0" />
<label for="task0">1. tennivaló</label>
<button>X</button>
</li>
<li>2. tennivaló</li>
<!-- <li class="task">
<input type="checkbox" id="task0">
<label for="task0">Lemenni tejért</label>
<button>
<i class="fas fa-trash-alt"></i>
</button>
</li> -->
</ul>
</div>
<script src="script.js"></script>
</div>
<script src="script.js">
</script>
</body>
</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() {
inputValue = document.getElementById("task-input").value;
taskInput = document.getElementById("task-input").value;
taskList = document.getElementById("tasks");
taskLi = document.createElement("li");
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);
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 {
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