Skip to content

Clean code s1e1 #91

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

Open
wants to merge 12 commits into
base: main
Choose a base branch
from
Open

Clean code s1e1 #91

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
12 commits
Select commit Hold shift + click to select a range
b6eb6ff
init: start Task Clean Code S1E1
Dec 15, 2024
bf1181c
fix: fixed spaces in html file
Dec 15, 2024
483818b
fix: fixed spaces in css file
Dec 15, 2024
49b7965
fix: corrected capital letters in tags in html file
Dec 15, 2024
1bccea8
fix: replaced single quotes with double quotes
Dec 15, 2024
32dda7d
fix: corrected links to signs
Dec 15, 2024
7967dd1
fix: removed unnecessary type tags
Dec 15, 2024
e687d82
fix: shortened too long names
Dec 15, 2024
0ccd86d
fix: brought all the names to the same style
Dec 15, 2024
51f1e28
fix: added spaces after the colon and put a semicolon next to the tas…
Dec 16, 2024
caaccec
fix: i put the missing current supplies
Dec 16, 2024
136fbc1
fix: added alt for all img
Dec 16, 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
82 changes: 68 additions & 14 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,73 @@
<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">
</HEAD>
<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 class="aaa">
<img src="./eisenhower-matrix.jpg">
<a class="more_inf" href="https://goal-life.com/page/method/matrix-eisenhower">Want more details?
</a>
</div>
<script type="text/javascript" SRC="app.js"></script>
<div class="page-element">
<p id="ToList">
<label for="new-task">
Add Item
</label>
<div class="row-wrapper">
<input id="new-task" class="task" type="text">
<button>Add</button>
</div>
</p>
<h3>Todo</h3>
<ul id="lete-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="remove.svg">
</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="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" alt="remove.svg">
</button>
</li>
</ul>
</div>
<script src="app.js"></script>
</body>
</html>
158 changes: 78 additions & 80 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,148 +1,146 @@
/* 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;
width: 500px;
margin: 0 auto;
display: block;
text-align: right;
}
.aaa img {
width: 100%;
width: 100%;
}
.aaa .more_inf {
font-family: fantasy, cursive;
font-family: fantasy, cursive;
}

@media (max-width:768px) {
.aaa { text-align: center;
}
.aaa { text-align: center;
}
}
.centered-main-page-element {
display: block;
width: 500px;
margin: 0 auto 0;
.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;
.row-wrapper {
display: flex;
}
ul {
margin:0;
padding: 0px;
margin: 0;
padding: 0px;
}
li, h3 {
list-style:none;
list-style: none;
}
input,button{
outline:none;
outline: none;
}
button {
background: none;
border: 0px;
color: #888;
font-size: 15px;
width: 60px;
font-family: Lato, sans-serif;
cursor: pointer;
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;
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
width: 226px
}
button.delete img {
height: 2em;
transform: rotateZ(45deg);
transition: transform 200ms ease-in;
height: 2em;
transform: rotateZ(45deg);
transition: transform 200ms ease-in;
}
button.delete img:hover {
transform: rotateZ(0);
transform: rotateZ(0);
}

/* Completed */
ul#completed-tasks label {
text-decoration: line-through
color: #888;
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
ul li.edit-Mode input[type=text] {
display: inline-block;
width: 224px;
}

ul li.editMode label {
display:none;
ul li.edit-Mode label {
display: none;
}