Skip to content
GitLab
Explore
Sign in
Primary navigation
Search or go to…
Project
S
schdesign-to-do-list
Manage
Activity
Members
Labels
Plan
Issues
Issue boards
Milestones
Wiki
Code
Merge requests
Repository
Branches
Commits
Tags
Repository graph
Compare revisions
Snippets
Build
Pipelines
Jobs
Pipeline schedules
Artifacts
Deploy
Releases
Package registry
Model registry
Operate
Environments
Terraform modules
Monitor
Incidents
Analyze
Value stream analytics
Contributor analytics
CI/CD analytics
Repository analytics
Model experiments
Help
Help
Support
GitLab documentation
Compare GitLab plans
GitLab community forum
Contribute to GitLab
Provide feedback
Keyboard shortcuts
?
Snippets
Groups
Projects
Show more breadcrumbs
dseben
schdesign-to-do-list
Commits
50cf2bab
Commit
50cf2bab
authored
4 years ago
by
dseben
Browse files
Options
Downloads
Patches
Plain Diff
uploaded the actual files
parent
26845884
No related branches found
No related tags found
No related merge requests found
Changes
4
Show whitespace changes
Inline
Side-by-side
Showing
4 changed files
index.html
+35
-24
35 additions, 24 deletions
index.html
notes.txt
+0
-8
0 additions, 8 deletions
notes.txt
script.js
+49
-9
49 additions, 9 deletions
script.js
style.css
+100
-1
100 additions, 1 deletion
style.css
with
184 additions
and
42 deletions
index.html
+
35
−
24
View file @
50cf2bab
<!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
This diff is collapsed.
Click to expand it.
notes.txt
deleted
100644 → 0
+
0
−
8
View file @
26845884
Font-awesome
#DDD
placeholder (input type = "text"-re)
///////
To look up later:
• position:relative; position:absolute;
This diff is collapsed.
Click to expand it.
script.js
+
49
−
9
View file @
50cf2bab
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
This diff is collapsed.
Click to expand it.
style.css
+
100
−
1
View file @
50cf2bab
*
{
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
This diff is collapsed.
Click to expand it.
Preview
0%
Loading
Try again
or
attach a new file
.
Cancel
You are about to add
0
people
to the discussion. Proceed with caution.
Finish editing this message first!
Save comment
Cancel
Please
register
or
sign in
to comment