Skip to content

T
todo-app
Commit ee8dd23e by Syed Abdul Rahman
Options

todo responsive design implemented

parent 3cf242ab
Showing with 78 additions and 53 deletions
db.json
{ {
"todos": [ "todos": [
{ {
"id": "a904", "id": "c31b",
"title": "Buy groceries tomorrow", "title": "Lorem ipsum dolor sit amet, consectetur adipiscing elit. In volutpat, felis sollicitudin pulvinar cursus, urna mi dapibus ligula, et cursus eros risus id mi. Quisque tortor dolor, egestas vitae gravida pretium, viverra non libero. Duis tincidunt dignissim eros, quis luctus velit fermentum eu. In ut blandit velit. Cras pellentesque est sed lectus blandit, eget sollicitudin justo iaculis. Donec maximus congue sapien eu sodales. Praesent sit amet neque vitae neque tempus porta vel a risus. Donec vitae ante sit amet arcu euismod sodales pharetra quis nibh. Curabitur pretium quam nec lectus ornare faucibus eu euismod felis. Proin magna nulla, condimentum quis sem id, molestie malesuada turpis. Sed sagittis sapien sit amet purus auctor, vitae efficitur nulla aliquam. Praesent gravida augue non dapibus interdum. Curabitur ornare sagittis dui, id viverra ante tristique at.",
"completed": false
},
{
"id": "a175",
"title": "Travel to head office",
"completed": false
},
{
"id": "2753",
"title": "Get phone from head office",
"completed": false "completed": false
} }
] ]
......
src/App.css
...@@ -6,18 +6,20 @@ ...@@ -6,18 +6,20 @@
width: 100%; width: 100%;
display: grid; display: grid;
place-items: center; place-items: center;
grid-template-columns: 1fr; box-sizing: border-box;
} }
.todo-container { .todo-container {
box-shadow: rgba(167, 164, 164, 0.226) 1px 1px 10px 2px; box-shadow: rgba(167, 164, 164, 0.226) 1px 1px 10px 2px;
justify-content: center;
background-color: white; background-color: white;
min-height: max(fit-content, 300px);
/* max-width: 70%; */
width: 50%;
overflow-y: auto; overflow-y: auto;
scroll-behavior: smooth; scroll-behavior: smooth;
max-width: 90%;
min-width: 80%;
margin-right: 4%;
margin-left: 4%;
max-height: 90%;
position: relative;
} }
.header-section { .header-section {
...@@ -25,7 +27,13 @@ ...@@ -25,7 +27,13 @@
padding: 1.5rem 0; padding: 1.5rem 0;
box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 5px 0px; box-shadow: rgba(0, 0, 0, 0.09) 0px 3px 5px 0px;
font-family: 'Roboto-Bold'; font-family: 'Roboto-Bold';
font-size: clamp(1rem,2vw,2rem); font-size: clamp(1rem, 2vw, 2rem);
position: sticky;
top: 0;
background-color: white;
padding: 30px 0;
z-index: 10;
border-bottom: 1px solid #ddd;
} }
.checklist-item { .checklist-item {
...@@ -50,18 +58,23 @@ ...@@ -50,18 +58,23 @@
padding: 1.5rem 0; padding: 1.5rem 0;
color: rgb(141, 141, 141); color: rgb(141, 141, 141);
max-width: 90%; max-width: 90%;
width: 90%;
} }
.checklist-item__editable-input { .checklist-item__editable-input {
font-family: 'Roboto-Medium'; font-family: 'Roboto-Medium';
font-size: 16px; font-size: 16px;
padding: 0.5rem 1rem; padding: 0.5rem 0.5rem;
color: rgb(141, 141, 141); color: rgb(141, 141, 141);
border: 1px solid rgba(128, 128, 128, 0.425); border: 1px solid rgba(128, 128, 128, 0.425);
max-width: 95%; max-width: 95%;
align-self: center; align-self: center;
border-radius: 5px; border-radius: 5px;
width: 90%; width: 88%;
resize: none;
max-height: 300px;
min-height: fit-content;
} }
.strike { .strike {
...@@ -90,7 +103,7 @@ ...@@ -90,7 +103,7 @@
} }
.custom-checkbox { .custom-checkbox {
width: clamp(0.3rem, 3vw, 1.5rem); width: 15px;
height: 20px; height: 20px;
margin: 1.5rem 0; margin: 1.5rem 0;
} }
...@@ -109,10 +122,10 @@ ...@@ -109,10 +122,10 @@
gap: 10px; gap: 10px;
padding: 15px 1rem; padding: 15px 1rem;
justify-content: space-between; justify-content: space-between;
flex-direction: column;
} }
.form__input { .form__input {
flex: 3;
height: 2.5rem; height: 2.5rem;
outline: none; outline: none;
border: 2px solid #cccccca7; border: 2px solid #cccccca7;
...@@ -122,11 +135,9 @@ ...@@ -122,11 +135,9 @@
color: rgb(31, 30, 30); color: rgb(31, 30, 30);
border-radius: 5px; border-radius: 5px;
box-shadow: #2b2b2b21 0 2px 1.5px 0px inset; box-shadow: #2b2b2b21 0 2px 1.5px 0px inset;
max-width: 80%;
} }
.form__submit { .form__submit {
flex: 1;
font-size: 16px; font-size: 16px;
font-family: 'Roboto-Regular'; font-family: 'Roboto-Regular';
background-color: white; background-color: white;
...@@ -134,4 +145,41 @@ ...@@ -134,4 +145,41 @@
border-radius: 5px; border-radius: 5px;
padding: 0.3rem 0.5rem; padding: 0.3rem 0.5rem;
cursor: pointer; cursor: pointer;
height: 2.5rem;
}
@media screen and (min-width: 768px) {
.todo-container {
max-width: 60%;
min-width: 50%;
}
.form-group {
flex-direction: row;
}
.form__input {
flex: 3 !important;
}
.form__submit {
flex: 1 !important;
height: unset;
}
.checklist-item__editable-input {
width: 92%;
}
}
::-webkit-scrollbar {
width: 4px;
}
::-webkit-scrollbar-thumb {
background-color: #888;
border-radius: 10px;
} }
\ No newline at end of file
src/App.tsx
...@@ -17,7 +17,7 @@ function App() { ...@@ -17,7 +17,7 @@ function App() {
}, []) }, [])
const fetchTodos = async () => { const fetchTodos = async () => {
const response = await fetch('http://localhost:3000/todos', { const response = await fetch('http://192.168.1.101:3000/todos', {
headers: { headers: {
'Content-Type': 'application/json', 'Content-Type': 'application/json',
}, },
...@@ -31,7 +31,7 @@ function App() { ...@@ -31,7 +31,7 @@ function App() {
const saveTodo = async () => { const saveTodo = async () => {
try { try {
if (newTodo !== '' && newTodo) { if (newTodo !== '' && newTodo) {
await fetch('http://localhost:3000/todos', { await fetch('http://192.168.1.101:3000/todos', {
method: 'POST', method: 'POST',
body: JSON.stringify({ body: JSON.stringify({
title: newTodo, title: newTodo,
...@@ -39,7 +39,6 @@ function App() { ...@@ -39,7 +39,6 @@ function App() {
}) })
}) })
fetchTodos(); fetchTodos();
} }
setNewTodo("") setNewTodo("")
} catch (error) { } catch (error) {
...@@ -49,8 +48,7 @@ function App() { ...@@ -49,8 +48,7 @@ function App() {
const toggleTodo = async (todoItem: any, e: any) => { const toggleTodo = async (todoItem: any, e: any) => {
e.stopPropagation() e.stopPropagation()
console.log(todoItem, "todoItem.completed") await fetch(`http://192.168.1.101:3000/todos/${todoItem.id}`, {
await fetch(`http://localhost:3000/todos/${todoItem.id}`, {
method: 'PATCH', method: 'PATCH',
body: JSON.stringify({ completed: !todoItem.completed }) body: JSON.stringify({ completed: !todoItem.completed })
}) })
...@@ -67,7 +65,7 @@ function App() { ...@@ -67,7 +65,7 @@ function App() {
const deleteTodo = async () => { const deleteTodo = async () => {
if (selectedTodo) { if (selectedTodo) {
await fetch(`http://localhost:3000/todos/${selectedTodo?.id}`, { await fetch(`http://192.168.1.101:3000/todos/${selectedTodo?.id}`, {
method: "DELETE" method: "DELETE"
}) })
...@@ -82,15 +80,9 @@ function App() { ...@@ -82,15 +80,9 @@ function App() {
setEditableTitle(editableTodo?.title) setEditableTitle(editableTodo?.title)
} }
const onEditCancel = (e: any) => {
setEditingTodoId(null);
setEditableTitle('');
e.stopPropagation()
}
const onSaveEdit = async (e: any, todoId: any) => { const onSaveEdit = async (e: any, todoId: any) => {
e.stopPropagation(); e.stopPropagation();
await fetch(`http://localhost:3000/todos/${todoId}`, { await fetch(`http://192.168.1.101:3000/todos/${todoId}`, {
method: 'PATCH', method: 'PATCH',
body: JSON.stringify({ body: JSON.stringify({
title: editableTitle title: editableTitle
...@@ -108,7 +100,6 @@ function App() { ...@@ -108,7 +100,6 @@ function App() {
<div className="header-section"> <div className="header-section">
{todoList?.length > 0 ? <>You have {todoList?.length} Todos </> : <>No Tasks</>} {todoList?.length > 0 ? <>You have {todoList?.length} Todos </> : <>No Tasks</>}
</div> </div>
{todoList?.map((ele: any, index: number) => ( {todoList?.map((ele: any, index: number) => (
<Fragment key={ele.id}> <Fragment key={ele.id}>
<div className='checklist-item'> <div className='checklist-item'>
...@@ -116,15 +107,13 @@ function App() { ...@@ -116,15 +107,13 @@ function App() {
<input type='checkbox' checked={ele.completed} className='custom-checkbox' onClick={(e) => e.stopPropagation()} onChange={(e) => toggleTodo(ele, e)} /> <input type='checkbox' checked={ele.completed} className='custom-checkbox' onClick={(e) => e.stopPropagation()} onChange={(e) => toggleTodo(ele, e)} />
{editingTodoId === ele.id ? ( {editingTodoId === ele.id ? (
<input type='text' value={editableTitle} className='checklist-item__editable-input' onChange={(e) => setEditableTitle(e.target.value)} /> <textarea value={editableTitle} className='checklist-item__editable-input' onChange={(e) => setEditableTitle(e.target.value)} />
) : ( ) : (
<h3 className={`checklist-item__title ${ele.completed ? 'strike' : ''}`} >{ele.title}</h3> <h3 className={`checklist-item__title ${ele.completed ? 'strike' : ''}`} >{ele.title}</h3>
)} )}
{editingTodoId === ele.id && <span className='edit-action-btn' onClick={(e) => onEditCancel(e)}><img src='../src/assets/images/cancel-svgrepo-com.svg' width={30} /></span>}
{editingTodoId === ele.id && <span className='edit-action-btn' onClick={(e) => onSaveEdit(e, ele.id)}><img src='../src/assets/images/ok-svgrepo-com.svg' width={30} /></span>}
</div> </div>
<div className=''> <div className=''>
<img className='checklist-item__remove-btn' width={40} src='../src/assets/images/close-round-svgrepo-com.svg' onClick={() => onDeleteTodo(ele)} /> {editingTodoId === ele.id ? <img onClick={(e) => onSaveEdit(e, ele.id)} src='../src/assets/images/tick-circle-svgrepo-com.svg' width={25} /> : <img className='checklist-item__remove-btn' width={30} src='../src/assets/images/close-round-svgrepo-com.svg' onClick={() => onDeleteTodo(ele)} />}
</div> </div>
</div> </div>
{index + 1 !== todoList.length && <hr className='divider' />} {index + 1 !== todoList.length && <hr className='divider' />}
......
src/assets/images/ok-svgrepo-com.svg deleted 100644 → 0
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
<svg width="81px" height="81px" viewBox="0 0 1024 1024" class="icon" version="1.1" xmlns="http://www.w3.org/2000/svg" fill="#000000">
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
<g id="SVGRepo_iconCarrier">
<path d="M512 512m-448 0a448 448 0 1 0 896 0 448 448 0 1 0-896 0Z" fill="#4CAF50"/>
<path d="M738.133333 311.466667L448 601.6l-119.466667-119.466667-59.733333 59.733334 179.2 179.2 349.866667-349.866667z" fill="#CCFF90"/>
</g>
</svg>
\ No newline at end of file
src/assets/images/tick-circle-svgrepo-com.svg 0 → 100644
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<!-- Uploaded to: SVG Repo, www.svgrepo.com, Transformed by: SVG Repo Mixer Tools -->
<svg width="95px" height="95px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<g id="SVGRepo_bgCarrier" stroke-width="0"/>
<g id="SVGRepo_tracerCarrier" stroke-linecap="round" stroke-linejoin="round"/>
<g id="SVGRepo_iconCarrier"> <path opacity="0.4" d="M12 22C17.5228 22 22 17.5228 22 12C22 6.47715 17.5228 2 12 2C6.47715 2 2 6.47715 2 12C2 17.5228 6.47715 22 12 22Z" fill="#292D32"/> <path d="M10.5795 15.5801C10.3795 15.5801 10.1895 15.5001 10.0495 15.3601L7.21945 12.5301C6.92945 12.2401 6.92945 11.7601 7.21945 11.4701C7.50945 11.1801 7.98945 11.1801 8.27945 11.4701L10.5795 13.7701L15.7195 8.6301C16.0095 8.3401 16.4895 8.3401 16.7795 8.6301C17.0695 8.9201 17.0695 9.4001 16.7795 9.6901L11.1095 15.3601C10.9695 15.5001 10.7795 15.5801 10.5795 15.5801Z" fill="#292D32"/> </g>
</svg>
\ No newline at end of file
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment