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

Clean code s1e1 #124

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

Clean code s1e1 #124

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
10 commits
Select commit Hold shift + click to select a range
8445777
refactor: update HTML to rule 2.1
heresyhawkins Dec 16, 2024
0abc6d5
refactor: update CSS to rule 3.6, 3.7, 3.8, 1.1 in html-and-css.md
heresyhawkins Dec 16, 2024
755a35e
refactor: replace named character to rule 2.3
heresyhawkins Dec 16, 2024
a019a7a
refactor: replace named character to rule 2.3 html-and-css.md
heresyhawkins Dec 16, 2024
d3aa716
refactor: replace named character to rule 2.3 in html-and-css.md
heresyhawkins Dec 16, 2024
7549a2a
refactor: update HTML to rule BEM in html-and-css-extended.md
heresyhawkins Dec 16, 2024
b77de99
refactor: update CSS to rule BEM in html-and-css-extended.md
heresyhawkins Dec 16, 2024
3bad58b
refactor: update HTML and CSS and JS to rule BEM in htlm-and-css-exte…
heresyhawkins Dec 16, 2024
723c816
refactor: update JS HTML and CSS to rule BEM
heresyhawkins Dec 16, 2024
f55a073
refactor: update JS button
heresyhawkins 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
25 changes: 14 additions & 11 deletions app.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -3,14 +3,14 @@

//Problem: User interaction does not provide the correct results.
//Solution: Add interactivity so the user can manage daily tasks.
//Break things down into smaller steps and take each step at a time.
//Break things down into smaller step s and take each step at a time.


// Event handling, user interaction is what starts the code execution.

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 All @@ -32,19 +32,22 @@ var createNewTaskElement=function(taskString){
var deleteButton=document.createElement("button");//delete button
var deleteButtonImg=document.createElement("img");//delete button image

listItem.className = "list-item"

label.innerText=taskString;
label.className='task';
label.className="list-item__task-label";

//Each elements, needs appending
checkBox.type="checkbox";
editInput.type="text";
editInput.className="task";
editInput.className="list-item__edit-task";

editButton.innerText="Edit"; //innerText encodes special characters, HTML does not.
editButton.className="edit";
editButton.className="button list-item__edit-button";

deleteButton.className="delete";
deleteButton.className = "button list-item__delete-button";
deleteButtonImg.src='./remove.svg';
deleteButtonImg.className = "img img-delete-btn"
deleteButton.appendChild(deleteButtonImg);


Expand Down Expand Up @@ -84,8 +87,8 @@ 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 editBtn=listItem.querySelector(".list-item__edit-button");
var containsClass=listItem.classList.contains("list-item--edit-mode");
//If class of the parent is .editmode
if(containsClass){

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

//toggle .editmode on the parent.
listItem.classList.toggle("editMode");
listItem.classList.toggle("list-item--edit-mode");
};


Expand Down Expand Up @@ -156,8 +159,8 @@ var bindTaskEvents=function(taskListItem,checkBoxEventHandler){
console.log("bind list item events");
//select ListItems children
var checkBox=taskListItem.querySelector("input[type=checkbox]");
var editButton=taskListItem.querySelector("button.edit");
var deleteButton=taskListItem.querySelector("button.delete");
var editButton=taskListItem.querySelector(".list-item__edit-button");
var deleteButton=taskListItem.querySelector(".list-item__delete-button");


//Bind editTask to edit button.
Expand Down
75 changes: 56 additions & 19 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,19 +1,56 @@
<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>
<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>
</body>
</html>
<!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>
<header class="info__section">
<img src="./eisenhower-matrix.jpg" class="img">
<a class="info__link" href="https://goal-life.com/page/method/matrix-eisenhower">Want more details?</a>
</header>
<div class="centered-main-page-element">
<section id="task-section">
<label for="new-task" class = "label-add-items">Add Item</label>
<div class="input__wrapper">
<input id="new-task" class="list-item__edit-task" type="text" >
<button class = "button task-section__add-btn">Add</button>
</div>
</section>
<h3 class = "todo-text">Todo</h3>
<ul id="incomplete-tasks" class = "list">
<li class = "list-item">
<input type="checkbox" class = "list-item__check-input">
<label class="list-item__task-label">Pay Bills</label>
<input type="text" class="list-item__edit-task">
<button class="button list-item__edit-button">Edit</button>
<button class="button list-item__delete-button">
<img src="./remove.svg" class="img img-delete-btn">
</button>
</li>
<li class = "list-item list-item--edit-mode">
<input type="checkbox" class = "list-item__check-input">
<label class="list-item__task-label">Go Shopping</label>
<input type="text" value="Go Shopping" class="list-item__edit-task">
<button class="button list-item__edit-button">Save</button>
<button class="button list-item__delete-button">
<img src="./remove.svg" class="img img-delete-btn">
</button>
</li>
</ul>
<h3 class = "todo-text">Completed</h3>
<ul id="completed-tasks" class = "list">
<li class = "list-item">>
<input type="checkbox" checked class = "list-item__check-input">
<label class="list-item__task-label">See the Doctor</label>
<input type="text" class="list-item__edit-task">
<button class="button list-item__edit-button">Edit</button>
<button class="button list-item__delete-button">
<img src="./remove.svg" class="img img-delete-btn">
</button>
</li>
</ul>
</div>
<script src="app.js"></script>
</body>
</html>
Loading