Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

Add/Remove Functionality #2

Merged
merged 8 commits into from
Apr 28, 2022
Merged

Add/Remove Functionality #2

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
8 commits
Select commit Hold shift + click to select a range
a5fe5a4
Add CSS variables
Trictonicmp Apr 27, 2022
1bd8b87
Html list structure refactor and css improvements to make list elemen…
Trictonicmp Apr 27, 2022
bd3c745
Add functionality to add list items, save it to localStorage and retr…
Trictonicmp Apr 27, 2022
f7da415
Add favicon icon
Trictonicmp Apr 27, 2022
f0ca7e5
Change list item structure
Trictonicmp Apr 27, 2022
2bf6454
Add Add/Remove functionality
Trictonicmp Apr 28, 2022
17d86d5
Fix Linters Errors
Trictonicmp Apr 28, 2022
b563684
Fix stylelint errors
Trictonicmp Apr 28, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Jump to
Jump to file
Failed to load files.
Diff view
Diff view
4 changes: 3 additions & 1 deletion dist/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,20 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To-do list</title>
<link rel="shortcut icon" href="images/959838aa48629bf2b957.svg">
<script defer src="main.js"></script></head>
<body>
<main>
<div class="header">
<h1>Today's list</h1>
<button type="button" title="Refresh" class="list-button"><img src="images/04fbf9164fdce37c4132.svg" alt="refresh"></button>
</div>
<form class="form">
<form class="form" id="main-form">
<input type="text" placeholder="Add to your list...">
<button type="submit" class="list-button"><img src="images/fa544f635765db738d2e.png" alt="add"></button>
</form>
<ul class="list-container" id="items-container">
<!-----------List container----------->
</ul>
<div class="footer">
<button type="button">Clear all completed</button>
Expand Down
26 changes: 18 additions & 8 deletions dist/main.js
View file
Open in desktop

Large diffs are not rendered by default.

4 changes: 3 additions & 1 deletion public/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -5,18 +5,20 @@
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>To-do list</title>
<link rel="shortcut icon" href="../src/images/favicon.svg">
</head>
<body>
<main>
<div class="header">
<h1>Today's list</h1>
<button type="button" title="Refresh" class="list-button"><img src="../src/images/refresh.svg" alt="refresh"></button>
</div>
<form class="form">
<form class="form" id="main-form">
<input type="text" placeholder="Add to your list...">
<button type="submit" class="list-button"><img src="../src/images/intro.png" alt="add"></button>
</form>
<ul class="list-container" id="items-container">
<!-----------List container----------->
</ul>
<div class="footer">
<button type="button">Clear all completed</button>
Expand Down
77 changes: 53 additions & 24 deletions src/css/main.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,12 +1,27 @@
@import url('reset.css');
@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:wght@200;600&display=swap');

/* ---------- CSS variables ---------- */
:root {
--body-color: #fefefe;
--main-color: #fff;
--text-color: #555;
--text-input-color: #777;
--text-disabled-color: #aaa;
--border-color: #eee;
--accent-color: #f2f2f2;
--editing-color: #fffeca;
--icon-opacity: 0.2;
--icon-opacity-hover: 0.5;
}

body {
display: flex;
align-items: center;
justify-content: center;
height: 100vh;
font-family: 'Nunito Sans', sans-serif;
background-color: var(--body-color);
}

main {
Expand All @@ -16,12 +31,13 @@ main {
flex-direction: column;
justify-content: center;
align-items: center;
background-color: white;
background-color: var(--main-color);
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

main > * {
border-bottom: 1px solid #eee;
main > *,
.list-container > * {
border-bottom: 1px solid var(--border-color);
}

.list-button {
Expand All @@ -31,11 +47,12 @@ main > * {
background-color: transparent;
border: none;
width: 3em;
min-width: 3em;
}

.list-button img {
width: 60%;
opacity: 0.2;
opacity: var(--icon-opacity);
transition-property: opacity;
transition-duration: 0.2s;
transition-timing-function: ease-in;
Expand All @@ -46,7 +63,7 @@ main > * {
}

.list-button:hover img {
opacity: 0.5;
opacity: var(--icon-opacity-hover);
}

.header {
Expand All @@ -59,7 +76,7 @@ main > * {
font-size: 1.1em;
padding: 0.8em;
flex-grow: 1;
color: #666;
color: var(--text-color);
}

.footer button {
Expand All @@ -79,7 +96,7 @@ main > * {

.form input {
font-size: 0.9em;
color: #777;
color: var(--text-color);
padding: 0.8em;
font-style: italic;
border: none;
Expand Down Expand Up @@ -109,47 +126,59 @@ main > * {
}

.list-container .checkbox {
padding: 0.8em;
margin-left: 0.8em;
}

.list-container li input[type=text] {
.list-container li .description-input {
border: none;
font-family: 'Nunito Sans', sans-serif;
font-size: 1em;
background-color: transparent;
color: #555;
color: var(--text-color);
}

.list-container li input[type=text]:focus,
.list-container li input[type=text]:active {
border: none;
box-shadow: none;
outline: none;
}

.list-container li .description {
color: #555;
.list-container li .description,
.list-container li .description-input {
color: var(--text-color);
font-size: 1em;
padding: 0.8em;
flex-grow: 1;
display: flex;
}

/* ----------styles when NOT editing---------- */
.list-container :not(.editing) .description input {
.list-container :not(.editing) .description-input {
display: none;
}

.list-container :not(.editing) .trash {
display: none;
}

/* ----------styles when editing---------- */
.list-container li .description-input:focus,
.list-container li .description-input:active {
border: none;
box-shadow: none;
outline: none;
}

.list-container li .description span,
.list-container li .description input[type=text] {
flex-grow: 1;
}

.list-container .checkbox:checked + span {
text-decoration: line-through;
font-style: italic;
color: var(--text-disabled-color);
}

/* ----------styles when editing---------- */
.list-container .editing {
background-color: #fffeca;
background-color: var(--editing-color);
}

.list-container .editing .description span {
.list-container .editing .description {
display: none;
}

Expand All @@ -162,7 +191,7 @@ main > * {
padding: 1em;
display: flex;
justify-content: center;
background-color: #f2f2f2;
background-color: var(--accent-color);
}

.footer button:hover {
Expand Down
21 changes: 21 additions & 0 deletions src/images/favicon.svg
View file
Open in desktop
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
35 changes: 35 additions & 0 deletions src/js/DataHandler.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,35 @@
import ListHandler from './ListHandler.js';

export default class DataHandler {
constructor() {
this.listHandler = new ListHandler();
if (localStorage.getItem('list-data')) {
const storedData = JSON.parse(localStorage.getItem('list-data'));
storedData.forEach((item) => {
this.listHandler.addItem(item.description, item.completed);
});
}

this.form = document.getElementById('main-form');
this.form.onsubmit = (event) => {
event.preventDefault();
this.addItem();
};

this.listHandler.saveData = () => {
this.saveData();
};
}

addItem() {
const inputValue = this.form[0].value;
this.listHandler.addItem(inputValue);
this.form.reset();
this.form.focus();
this.saveData();
}

saveData() {
localStorage.setItem('list-data', JSON.stringify(this.listHandler.items));
}
}
80 changes: 55 additions & 25 deletions src/js/Item.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,28 +6,48 @@ export default class Item {
this.description = description;
this.index = index;
this.completed = completed;

this.htmlElement = document.createElement('li');
this.descriptionSpan = document.createElement('span');
this.descriptionInput = document.createElement('input');
this.deleteButton = document.createElement('button');

this.descriptionInput.oninput = () => {
this.updateDescription();
};

this.deleteButton.onclick = () => {
this.deleteElement();
};

this.createHtml();
}

createHtml() {
const li = document.createElement('li');
setIndex(index) {
this.index = index;
}

/* Overriden by arrow function in ListHandler */
deleteElement = () => {}

const checkLabel = document.createElement('label');
checkLabel.classList.add('checkbox');
updateDescription() {
this.description = this.descriptionInput.value;
this.descriptionSpan.innerText = this.description;
}

createHtml() {
const checkbox = document.createElement('input');
checkbox.classList.add('checkbox');
checkbox.type = 'checkbox';
checkLabel.append(checkbox);
li.append(checkLabel);

const labelDesc = document.createElement('label');
labelDesc.classList.add('description');
const description = document.createElement('span');
description.innerText = this.description;
labelDesc.append(description);
const inputDesc = document.createElement('input');
inputDesc.type = 'text';
inputDesc.value = this.description;
labelDesc.append(inputDesc);
li.append(labelDesc);
this.htmlElement.append(checkbox);

this.descriptionSpan.innerText = this.description;
this.descriptionSpan.classList.add('description');
this.descriptionInput.type = 'text';
this.descriptionInput.value = this.description;
this.descriptionInput.classList.add('description-input');
this.htmlElement.append(this.descriptionSpan);
this.htmlElement.append(this.descriptionInput);

const move = document.createElement('button');
move.type = 'button';
Expand All @@ -37,18 +57,28 @@ export default class Item {
dotsImg.src = dotsSvg;
dotsImg.alt = ':';
move.append(dotsImg);
li.append(move);
this.htmlElement.append(move);

const trash = document.createElement('button');
trash.type = 'button';
trash.classList.add('list-button');
trash.classList.add('trash');
this.deleteButton.type = 'button';
this.deleteButton.classList.add('list-button');
this.deleteButton.classList.add('trash');
const trashImg = new Image();
trashImg.src = trashSvg;
trashImg.alt = 'delete';
trash.append(trashImg);
li.append(trash);
this.deleteButton.append(trashImg);
this.htmlElement.append(this.deleteButton);
}

getHtml() {
return this.htmlElement;
}

return li;
makeEditable(editable) {
if (editable) {
this.htmlElement.classList.add('editing');
this.descriptionInput.focus();
} else {
this.htmlElement.classList.remove('editing');
}
}
}