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

fixes #67

Open
wants to merge 14 commits into
base: main
Choose a base branch
from
+162 −107
Open

fixes #67

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
14 commits
Select commit Hold shift + click to select a range
5a570f7
feat: fixes according with 1.1
nakurienota Dec 7, 2024
6672896
fix: according with 1.2 General HTML & CSS rules
nakurienota Dec 7, 2024
aa44260
fix: accroding with 1.3 General HTML & CSS rules
nakurienota Dec 7, 2024
491badc
fix: according with 2.1 Formatting
nakurienota Dec 7, 2024
95fa1d0
fix: according with 2.2 Document Type
nakurienota Dec 7, 2024
95106d9
fix: according with 2.3 Named character references
nakurienota Dec 7, 2024
3525a91
fix: according with 2.4. 'type' attribute
nakurienota Dec 7, 2024
fac6f33
fix: according with 3.1. Single style for selectors naming
nakurienota Dec 7, 2024
727f378
fix: according for 3.2. Meaningful naming of identifiers and classes:
nakurienota Dec 7, 2024
595b03f
fix: according with 3.4. Tag selectors
nakurienota Dec 7, 2024
e984aa4
fix: according with 3.6. Space after property name
nakurienota Dec 7, 2024
b806ec7
fix: according with 3.8. Separate selectors and properties
nakurienota Dec 7, 2024
9a9d0ae
fix: according with 1.2. Media alternatives
nakurienota Dec 7, 2024
0d46a48
fix: according with 2.1. BEM
nakurienota Dec 7, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -10,7 +10,7 @@

var taskInput=document.getElementById("new-task");//Add a new task.
var addButton=document.getElementsByTagName("button")[0];//first button
var incompleteTaskHolder=document.getElementById("incompleteTasks");//ul of #incompleteTasks
var incompleteTaskHolder=document.getElementById("incomplete-tasks");//ul of #incompleteTasks
var completedTasksHolder=document.getElementById("completed-tasks");//completed-tasks


Expand Down Expand Up @@ -85,7 +85,7 @@ var editTask=function(){
var editInput=listItem.querySelector('input[type=text]');
var label=listItem.querySelector("label");
var editBtn=listItem.querySelector(".edit");
var containsClass=listItem.classList.contains("editMode");
var containsClass=listItem.classList.contains("edit__mode");
//If class of the parent is .editmode
if(containsClass){

Expand All @@ -99,7 +99,7 @@ var editTask=function(){
}

//toggle .editmode on the parent.
listItem.classList.toggle("editMode");
listItem.classList.toggle("edit__mode");
};


Expand Down
69 changes: 54 additions & 15 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,58 @@
<html>
<HEAD><title>Todo App</title>
<link href='https://fonts.googleapis.com/css?family=Lato:300,400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="style.css" type="text/css" MEDIA="screen" charset="utf-8">
<!DOCTYPE html>

<HEAD>
<title>Todo App</title>
<link href="https://fonts.googleapis.com/css?family=Lato:300,400,700" rel="stylesheet">
<link rel="stylesheet" href="style.css" media="screen" charset="utf-8">
</HEAD>

<body>
<div class="aaa"><img src="./eisenhower-matrix.jpg"><a class='more_inf' href="https://goal-life.com/page/method/matrix-eisenhower">Want more details&quest;</a></div>
<div class="centered-main-page-element"><p id='topSectionForAddingElementToList'><label for="new-task">Add Item</label><div class="task-row-wrapper"><input id='new-task'class="task" type="text"><button>Add</button></div>
</p><h3>Todo</h3>
<ul id='incompleteTasks'>
<li><input type='checkbox'><label class="task">Pay Bills</label><input type="text" class="task"><button class="edit">Edit</button><button class="delete"><img src="./remove.svg"></button></li>
<li class="editMode"><input type="checkbox"><label class="task">Go Shopping</label><input type="text" value="Go Shopping" class="task"><button class='edit'>Save</button><button class="delete"><img src="./remove.svg"></button></li>
</ul><h3>Completed</h3><ul id="completed-tasks"><li><input type="checkbox" checked><label class="task">See the Doctor</label><input type="text" class="task"><button class="edit">Edit</button><button class="delete"><img src="./remove.svg"></button>
</li>
</ul>
</div>
<script type="text/javascript" SRC="app.js"></script>
<div class="href-wrapper">
<img src="./eisenhower-matrix.jpg" alt="">
<a class="more-inf" href="https://goal-life.com/page/method/matrix-eisenhower">Want more details?</a>
</div>
<div class="main-container">
<p id="add-element-label"><label for="new-task">Add Item</label></p>
<div class="task-row-wrapper">
<input id="new-task" class="task" type="text">
<button>Add</button>
</div>
<h3>Todo</h3>
<ul id="incomplete-tasks">
<li>
<input type="checkbox">
<label class="task">Pay Bills</label>
<input type="text" class="task">
<button class="edit">Edit</button>
<button class="delete">
<img src="./remove.svg" alt="">
</button>
</li>
<li class="edit__mode">
<input type="checkbox">
<label class="task">Go Shopping</label>
<input type="text" value="Go Shopping" class="task">
<button class="edit">Save</button>
<button class="delete">
<img src="./remove.svg" alt="">
</button>
</li>
</ul>
<h3>Completed</h3>
<ul id="completed-tasks">
<li>
<input type="checkbox" checked>
<label class="task">See the Doctor</label>
<input type="text" class="task">
<button class="edit">Edit</button>
<button class="delete">
<img src="./remove.svg" alt="">
</button>
</li>
</ul>
</div>
</div>
<script src="app.js"></script>
</body>

</html>
194 changes: 105 additions & 89 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,148 +1,164 @@
/* Basic Style */
body {
background-color: #f8f8f8;
color: #333;
font-family: Lato, sans-serif;
background-color: #f8f8f8;
color: #333;
font-family: Lato, sans-serif;
}
.aaa {
width: 500px;
margin: 0 auto;
display: block;
text-align: right;

.href-wrapper {
width: 500px;
margin: 0 auto;
display: block;
text-align: right;
}
.aaa img {
width: 100%;

.href-wrapper img {
width: 100%;
}
.aaa .more_inf {
font-family: fantasy, cursive;

.more-inf {
font-family: fantasy, cursive;
}

@media (max-width:768px) {
.aaa { text-align: center;
.href-wrapper {
text-align: center;
}
}

.main-container {
display: block;
width: 500px;
margin: 0 auto 0;
}
.centered-main-page-element {
display: block;
width: 500px;
margin: 0 auto 0;
}

.task {
width: 56%;
display: inline-block;
flex-grow: 1
width: 56%;
display: inline-block;
flex-grow: 1;
}

.task-row-wrapper {
display: flex;
display: flex;
}

ul {
margin:0;
padding: 0px;
margin: 0;
padding: 0px;
}
li, h3 {
list-style:none;
}
input,button{
outline:none;

li,
h3 {
list-style: none;
}

button {
background: none;
border: 0px;
color: #888;
font-size: 15px;
width: 60px;
font-family: Lato, sans-serif;
cursor: pointer;
outline: none;
background: none;
border: 0px;
color: #888;
font-size: 15px;
width: 60px;
font-family: Lato, sans-serif;
cursor: pointer;
}

button:hover {
color: #3a3A3a;
color: #3a3A3a;
}
/* Heading */
h3,
label[for='new-task'] {
color: #333;
font-weight: 700;
font-size: 15px;
border-bottom: 2px solid #333;
padding: 30px 0 10px;
margin: 0;
text-transform: uppercase;
color: #333;
font-weight: 700;
font-size: 15px;
border-bottom: 2px solid #333;
padding: 30px 0 10px;
margin: 0;
text-transform: uppercase;
}

input[type="text"] {
margin: 0;
font-size: 18px;
line-height: 18px;
height: 21px;
padding: 0 9px;
border: 1px solid #dDd;
background: #FFF;
border-radius: 6px;
font-family: Lato, sans-serif;
color: #888;
margin: 0;
font-size: 18px;
line-height: 18px;
height: 21px;
padding: 0 9px;
border: 1px solid #ddd;
background: #fff;
border-radius: 6px;
font-family: Lato, sans-serif;
color: #888;
}

input[type="text"]:focus {
color: #333;
color: #333;
}

/* New Task */
label[for='new-task'] {
display: block;
margin: 0 0 20px;
display: block;
margin: 0 0 20px;
}
input#new-task {
width: 318px;

#new-task {
width: 318px;
}

/* Task list */
li {
overflow: hidden;
padding: 20px 0;
border-bottom: 1px solid #eee;

display: flex;
justify-content: space-between;
align-items: center;
overflow: hidden;
padding: 20px 0;
border-bottom: 1px solid #eee;
display: flex;
justify-content: space-between;
align-items: center;
}

li > * {
vertical-align: middle;
vertical-align: middle;
}

li > input[type="checkbox"] {
margin: 0 10px;
margin: 0 10px;
}

li > label {
padding-left: 10px;
box-sizing: border-box;
font-size: 18px;
width: 226px;
padding-left: 10px;
box-sizing: border-box;
font-size: 18px;
width: 226px;
}
li > input[type="text"] {
width: 226px

li > input[type="text"] {
width: 226px
}
button.delete img {
height: 2em;
transform: rotateZ(45deg);
transition: transform 200ms ease-in;

.delete img {
height: 2em;
transform: rotateZ(45deg);
transition: transform 200ms ease-in;
}
button.delete img:hover {
transform: rotateZ(0);
.delete img:hover {
transform: rotateZ(0);
}

/* Completed */
ul#completed-tasks label {
text-decoration: line-through
color: #888;
#completed-tasks label {
text-decoration: line-through;
color: #888;
}

/* Edit Task */
ul li input[type=text] {
display:none
display: none;
}

ul li.editMode input[type=text] {
display:inline-block;
width:224px
.edit__mode input[type=text] {
display: inline-block;
width: 224px;
}

ul li.editMode label {
display:none;
.edit__mode label {
display: none;
}