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

Add Core Functionality With Some Extras #8

Open
wants to merge 6 commits into
base: master
Choose a base branch
from
Open

Add Core Functionality With Some Extras #8

Show file tree
Hide file tree
Changes from 3 commits
Commits
Show all changes
6 commits
Select commit Hold shift + click to select a range
a4be9fc
Add create/delete functionality
yuriyivanenko May 14, 2024
85cbad9
Refactor code
yuriyivanenko May 14, 2024
db0b87f
ALOT of changes
yuriyivanenko May 15, 2024
b30d60b
Full CRUD capability added
yuriyivanenko May 16, 2024
7b1ba6d
Move table-row creation into seperate function
yuriyivanenko May 16, 2024
84b0a5f
Move reset of App after PATCH into seperate function
yuriyivanenko May 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
14 changes: 12 additions & 2 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,24 +4,34 @@
<meta charset="UTF-8">
<title>Flatiron Task Lister</title>
<link rel="stylesheet" href="./style.css">
<script defer src="./src/index.js"></script>
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

What does the defer attribute do?

Copy link
Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

It defers loading the script to after the DOM has loaded. I like placing the script tag up top.

</head>
<body>
<div id="main-content">
<h1>Task Lister Lite™️</h1>

<form id="create-task-form" action="" method="POST">
<form id="create-task-form" action="#" method="POST">
<label for="new-task-description">Task description:</label>
<input type="text" id="new-task-description" name="new-task-description" placeholder="description">
<label for="new-task-priority">Priority:</label>
<select name="new-task-priority" id="task-priority">
<option value="" disabled>Please select...</option>
<option value="low" >Low</option>
<option value="medium" >Medium</option>
<option value="high">High</option>
</select>
<input type="submit" value="Create New Task">
</form>

<div id="list">
<h2>My Todos:</h2>
<ul id="tasks">
</ul>
<table id="task-table">
</table>
</div>

<script src="./src/index.js"></script>

</div>

</body>
Expand Down
113 changes: 110 additions & 3 deletions src/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,110 @@
document.addEventListener("DOMContentLoaded", () => {
// your code here
});
const form = document.querySelector('#create-task-form')
const submitButton = document.querySelector("#create-task-form input[type='Submit']")

const createNewTask = (e) => {
e.preventDefault()
const taskText = e.target['new-task-description'].value
const taskPriority = e.target['new-task-priority'].value
if(taskText !== '' && taskPriority !== ''){
const tr = document.createElement('tr')
const td1 = document.createElement('td')
const td2 = document.createElement('td')
const td3 = document.createElement('td')
const btn = document.createElement('button')
const editBtn = document.createElement('button')
editBtn.style.marginLeft = '20px'
editBtn.textContent = 'Edit'
editBtn.addEventListener('click', ()=>console.log('edit clicked'))
btn.style.marginLeft = '20px'
btn.textContent = 'Delete'
btn.addEventListener('click', handleTaskDELETE)
tr.className = taskPriority
td1.textContent = taskText
td2.appendChild(btn)
td3.appendChild(editBtn)
tr.appendChild(td1)
tr.appendChild(td2)
tr.appendChild(td3)
document.querySelector('#task-table').appendChild(tr)
handleTaskPOST(taskText, taskPriority).then(data => {
tr.id = data.id
})
form.reset()
}
}

const handleTaskPOST = (taskText, taskPriority) => {
return fetch('http://localhost:3000/tasks',{
method: "POST",
headers: {
'Content-Type' : 'application/json'
},
body: JSON.stringify({
task: taskText,
priority: taskPriority
})
})
.then(res => res.json())
.then(data => data)
.catch(error => {
alert('Ooops, something went wrong when trying to write data to the server')
console.log(error)
})
}

const handleTaskDELETE = (e) => {
const id = e.target.closest('tr').id
const task = e.target.closest('tr').firstChild.textContent
fetch(`http://localhost:3000/tasks/${id}`,{
method: 'DELETE',
})
.then(res => res.json())
.then(data => {
e.target.closest('tr').remove()
})
.catch(error => {
alert(`Ooops, something went wrong when trying to delete task: ${task}`)
console.log(error)
})
}

const handleDeleteTask = (e) => e.target.parentNode.remove()

const renderTasks = (body) => {
body.forEach(item => {
const tr = document.createElement('tr')
const td1 = document.createElement('td')
const td2 = document.createElement('td')
const td3 = document.createElement('td')
const btn = document.createElement('button')
const editBtn = document.createElement('button')
editBtn.style.marginLeft = '20px'
editBtn.textContent = 'Edit'
editBtn.addEventListener('click', () => console.log('edit clicked'))
btn.style.marginLeft = '20px'
btn.textContent = 'Delete'
btn.addEventListener('click', handleTaskDELETE)
tr.id = item.id
tr.className = item.priority
td1.textContent = item.task
td2.appendChild(btn)
td3.appendChild(editBtn)
tr.appendChild(td1)
tr.appendChild(td2)
tr.appendChild(td3)
document.querySelector('#task-table').appendChild(tr)
})
}

const initApp = () => {
fetch('http://localhost:3000/tasks')
.then(res => res.json())
.then(body => renderTasks(body))
.catch(error => {
alert('Ooops, looks like something went wrong when trying to retrieve tasks from db.json')
console.log(error)
})
}

form.addEventListener('submit', createNewTask)
document.addEventListener('DOMContentLoaded', initApp)
68 changes: 55 additions & 13 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,11 +7,53 @@ html {
body {
min-height: 100%;
min-width: 100%;
background: linear-gradient(pink, violet);
background: linear-gradient(#f7d9d9, #f1c0c0);
display: flex;
justify-content: center;
align-items: center;
margin: 0;
padding: 0;
}

select {
font-size: 16px;
padding: 8px;
border-radius: 4px;
border: 1px solid #ccc;
/* background-color: #fff; */
color: #333;
}

.high {
font-size: 16px;
padding: 8px;
color: #f90404;
}

.medium {
font-size: 16px;
padding: 8px;
color: #eeb60e;
}

.low {
font-size: 16px;
padding: 8px;
color: #01b82f;
}

button {
font-size: 7px;
font-size: 14px;
padding: 8px 12px;
border: none;
background-color: #4a4a4a;
color: white;
border-radius: 4px;
cursor: pointer;
}

button:hover {
background-color: #333;
}

#main-content {
Expand All @@ -20,18 +62,18 @@ button {
justify-content: center;
align-items: center;
flex-direction: column;
border: 1px solid #333;
background: rgba(255, 255, 255, 0.3);
padding: 15px 20px 18px 18px;
border-radius: 5px;
box-shadow: 2px 5px 5px #333;
border: 1px solid #ccc;
background: rgba(255, 255, 255, 0.9);
padding: 20px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}

#list {
margin: 10px;
border: 1px solid #333;
background: rgba(255, 255, 255, 0.75);
padding: 15px 20px 18px 18px;
border-radius: 5px;
box-shadow: 2px 5px 5px #333;
margin: 10px 0;
border: 1px solid #ccc;
background: rgba(255, 255, 255, 0.9);
padding: 15px;
border-radius: 8px;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}