From 12b2b1aacfa71efffac1dc4b177b8abd6201cd20 Mon Sep 17 00:00:00 2001 From: Mohim Khan Date: Sun, 12 Nov 2023 18:43:49 +0600 Subject: [PATCH 1/7] Create Modal.jsx --- src/Modal.jsx | 37 +++++++++++++++++++++++++++++++++++++ 1 file changed, 37 insertions(+) create mode 100644 src/Modal.jsx diff --git a/src/Modal.jsx b/src/Modal.jsx new file mode 100644 index 0000000..2c62702 --- /dev/null +++ b/src/Modal.jsx @@ -0,0 +1,37 @@ +export function Modal(props) { + return ( +
+
+
+
+
Modal title
+ +
+
+

{props.text}

+
+
+
+ + +
+
+
+
+
+ ); +} From 5aecb187080a93dda9ff5ec1707f35dc962312e5 Mon Sep 17 00:00:00 2001 From: Mohim Khan Date: Sun, 12 Nov 2023 18:59:19 +0600 Subject: [PATCH 2/7] (feat): Added Modal styles --- src/index.css | 63 +++++++++++++++++++++++++++++++++++++++++++++++++++ 1 file changed, 63 insertions(+) diff --git a/src/index.css b/src/index.css index 97f0e74..e4020cc 100644 --- a/src/index.css +++ b/src/index.css @@ -20,6 +20,12 @@ li{ list-style: none; } +button { + outline: none; + border: none; + cursor: pointer; +} + .container { display: flex; flex-direction: column; @@ -55,5 +61,62 @@ li{ vertical-align: middle; } +/* Modal */ +.modal { + width: 100%; + max-width: 400px; + position: absolute; + padding: 2rem 1.5rem; + display: flex; + justify-content: center; + align-items: center; + top: 50%; + left: 50%; + transform: translate(-50%,-50%); + background-color: white; + height: 200px; + border: 2px dashed black; +} + +.modal-header { + display: flex; + align-items: center; + justify-content: space-between; + height: 50px; +} + +.btn-close { + padding: .5rem 1rem; +} +.modal-footer { + display: flex; + align-items: center; + justify-content: flex-end; +} + +.btn-group { + display: flex; + justify-content: center; + align-items: center; + gap: 1rem; +} + +.btn-confirm { + background-color: limegreen; + font-weight: bold; + padding: .5rem 1rem; + color: white; +} + +.btn-reject { + background-color: crimson; + font-weight: bold; + padding: .5rem 1rem; + color: white; +} +:is(.btn-confirm, .btn-reject):hover, +:is(.btn-confirm, .btn-reject):focus { + transform: scale(1.1); +} \ No newline at end of file From e83a1690a872be168e4463bd55586d7b886fd37b Mon Sep 17 00:00:00 2001 From: Mohim Khan Date: Sun, 12 Nov 2023 20:59:20 +0600 Subject: [PATCH 3/7] Added some extra styles to make modal responsive and more attractive --- src/index.css | 61 +++++++++++++++++++++++++++++++++++++++++++++------ 1 file changed, 54 insertions(+), 7 deletions(-) diff --git a/src/index.css b/src/index.css index e4020cc..c080ae9 100644 --- a/src/index.css +++ b/src/index.css @@ -1,5 +1,6 @@ body { margin: 0; + padding: 0; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; @@ -61,21 +62,62 @@ button { vertical-align: middle; } +.list-item { + display: flex; + justify-content: center; + align-items: center; +} + +.list-item button { + margin-left: 1rem; + padding: .5rem 1rem; + transform: scale(.9); + background-color: crimson; + color: white; + font-weight: bold; + transition: all 100ms ease-in; +} + +.list-item button:hover { + opacity: .8; + transform: scale(1.1); +} + /* Modal */ .modal { width: 100%; - max-width: 400px; + height: 100%; position: absolute; - padding: 2rem 1.5rem; display: flex; justify-content: center; align-items: center; - top: 50%; - left: 50%; - transform: translate(-50%,-50%); + inset: 0; + background-color: rgba(1,1,1,.5); + backdrop-filter: blur(3px); + z-index: 100; +} + +.modal-dialog { + max-width: 400px; + min-width: 190px; + padding: 1rem; background-color: white; - height: 200px; - border: 2px dashed black; + height: auto; +} + +.modal-body p { + font-size: .8rem; +} + +@media only screen and (min-width: 500px) { + .modal-dialog { + padding: 2rem 1.5rem; + height: 205px; + } + + .modal-body p { + font-size: 1.5rem; + } } .modal-header { @@ -116,6 +158,11 @@ button { color: white; } +.btn-confirm, +.btn-reject { + transition: all 50ms ease-out; +} + :is(.btn-confirm, .btn-reject):hover, :is(.btn-confirm, .btn-reject):focus { transform: scale(1.1); From b55fa914e25218ebed3f9613888c0912e822673f Mon Sep 17 00:00:00 2001 From: Mohim Khan Date: Sun, 12 Nov 2023 21:03:44 +0600 Subject: [PATCH 4/7] (feat): Added functionality to delete wish with confirmation (#2) --- src/BucketListItem.jsx | 26 ++++++++++++++++++++++++++ src/Modal.jsx | 4 ++-- 2 files changed, 28 insertions(+), 2 deletions(-) diff --git a/src/BucketListItem.jsx b/src/BucketListItem.jsx index aa76c22..dbfea80 100644 --- a/src/BucketListItem.jsx +++ b/src/BucketListItem.jsx @@ -1,5 +1,27 @@ +import { createEffect, createSignal } from 'solid-js'; +import {Modal} from './Modal'; + export function BucketListItem(props) { + const [isOpen, setIsOpen] = createSignal(false); + + createEffect(()=>{ + console.log(isOpen()); + }) + + const handleDeleteItem = ()=>{ + props.setItems((items) => { + const itemsWithoutTheDeletedOne = items.filter((item) => + props.item !== item + ); + return itemsWithoutTheDeletedOne; + }); + setIsOpen(false); + } + return ( + <> + {isOpen() && } +
  • {props.item.text} +
    • + ); } diff --git a/src/Modal.jsx b/src/Modal.jsx index 2c62702..b0f4f34 100644 --- a/src/Modal.jsx +++ b/src/Modal.jsx @@ -19,13 +19,13 @@ export function Modal(props) { From f3caa1413d464c9d0b4e35a0229f7fbcbf5f9321 Mon Sep 17 00:00:00 2001 From: Mohim Khan <84084280+Mohimkhan@users.noreply.github.com> Date: Sun, 12 Nov 2023 22:52:56 +0600 Subject: [PATCH 5/7] Remove unnecessary logs --- src/BucketListItem.jsx | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/BucketListItem.jsx b/src/BucketListItem.jsx index dbfea80..4dcecc2 100644 --- a/src/BucketListItem.jsx +++ b/src/BucketListItem.jsx @@ -3,11 +3,7 @@ import {Modal} from './Modal'; export function BucketListItem(props) { const [isOpen, setIsOpen] = createSignal(false); - - createEffect(()=>{ - console.log(isOpen()); - }) - + const handleDeleteItem = ()=>{ props.setItems((items) => { const itemsWithoutTheDeletedOne = items.filter((item) => From b82794496e8f6e67c92815bd2cd8086cb9807b8b Mon Sep 17 00:00:00 2001 From: Mohim Khan Date: Thu, 16 Nov 2023 22:28:43 +0600 Subject: [PATCH 6/7] Added styles for the delete section --- src/index.css | 61 ++++++++++++++++++++++++++++++++++++++++++++------- 1 file changed, 53 insertions(+), 8 deletions(-) diff --git a/src/index.css b/src/index.css index c080ae9..4cd3ff0 100644 --- a/src/index.css +++ b/src/index.css @@ -36,6 +36,10 @@ button { .container .list{ font-size: 30px; + display: flex; + justify-content: center; + flex-direction: column; + gap: 1rem; } .container form input[type="text"] { @@ -64,25 +68,67 @@ button { .list-item { display: flex; - justify-content: center; + justify-content: space-between; align-items: center; } .list-item button { margin-left: 1rem; - padding: .5rem 1rem; - transform: scale(.9); + outline: 2px solid crimson; + background-color: transparent; + width: 25px; + aspect-ratio: 1/ 1; + display: flex; + justify-content: center; + align-items: center; +} + +.list-item button span { + color: crimson; + font-weight: bolder; + transition: all 100ms ease-in; + width: 22px; + display: flex; + justify-content: center; + align-items: center; + aspect-ratio: 1 / 1; + font-size: 1.2rem; +} + +/* delete-items-wrapper */ +.delete-items-wrapper { + display: flex; + justify-content: space-between; + align-items: center; + column-gap: 1.5rem; + flex-wrap: wrap; +} + +.delete-item-count { + display: flex; + justify-content: center; + align-items: center; + flex-direction: column; +} + +.item-text, +.item-count-number { + font-weight: bold; +} + +.btn-delete { background-color: crimson; color: white; font-weight: bold; - transition: all 100ms ease-in; + padding: .5rem 1rem; + border-radius: 8px; } -.list-item button:hover { - opacity: .8; - transform: scale(1.1); +.btn-delete:hover { + background-color: red; } + /* Modal */ .modal { width: 100%; @@ -112,7 +158,6 @@ button { @media only screen and (min-width: 500px) { .modal-dialog { padding: 2rem 1.5rem; - height: 205px; } .modal-body p { From 8f7698c6632b5265b7c536c79ef82ae6e8f1b129 Mon Sep 17 00:00:00 2001 From: Mohim Khan Date: Thu, 16 Nov 2023 22:29:47 +0600 Subject: [PATCH 7/7] (feat): Added functionality to delete one or more items --- src/AddToBucket.jsx | 2 +- src/App.jsx | 81 +++++++++++++++++++++++++++++++++--------- src/BucketListItem.jsx | 27 +++++--------- src/Modal.jsx | 15 ++++---- 4 files changed, 83 insertions(+), 42 deletions(-) diff --git a/src/AddToBucket.jsx b/src/AddToBucket.jsx index d2d1e3e..9c88854 100644 --- a/src/AddToBucket.jsx +++ b/src/AddToBucket.jsx @@ -18,7 +18,7 @@ export function AddToBucket(props) { onClick={(e) => { e.preventDefault(); props.setItems((items) => { - return [...items, { text: newItem(), complete: false }].reverse(); + return [...items, { text: newItem(), complete: false, delete: false }].reverse(); }); setNewItem(''); }} diff --git a/src/App.jsx b/src/App.jsx index 19f2ba4..9d35a2e 100644 --- a/src/App.jsx +++ b/src/App.jsx @@ -1,25 +1,72 @@ import { createSignal } from 'solid-js'; import { BucketListItem } from './BucketListItem'; import { AddToBucket } from './AddToBucket'; +import Modal from './Modal'; function App() { - const [items, setItems] = createSignal([ - { text: 'Walk the dog', complete: false }, - { text: 'Do homework', complete: true }, - ]); + const [items, setItems] = createSignal([ + { text: 'Walk the dog', complete: false, delete: false }, + { text: 'Do homework', complete: true, delete: false }, + ]); - return ( -
    -

    Solid Bucket List

    - -
      - - {(item) => } - -
    - -
    - ); + const [isOpen, setIsOpen] = createSignal(false); + + const handleOneOrMoreDeleteItem = () => { + console.log(`working`); + setItems((items) => { + const ItemsWithoutTheDeletedOnes = items.filter( + (item) => item.delete === false + ); + console.log(ItemsWithoutTheDeletedOnes); + return ItemsWithoutTheDeletedOnes; + }); + }; + + const noOfItemToBeDeleted = () => { + const itemsToBeDeleted = items().filter((item) => item.delete); + return itemsToBeDeleted.length; + }; + + return ( +
    +

    Solid Bucket List

    + +
    +

    + No of items to be deleted + {noOfItemToBeDeleted()} +

    + +
    + + {isOpen() && ( + 1 ? 'those' : 'this' + }! 😕` + } + setIsOpen={setIsOpen} + handleOneOrMoreDeleteItem={handleOneOrMoreDeleteItem} + noOfItemToBeDeleted={noOfItemToBeDeleted} + /> + )} +
      + + {(item) => } + +
    +
    + ); } -export default App; \ No newline at end of file +export default App; diff --git a/src/BucketListItem.jsx b/src/BucketListItem.jsx index 4dcecc2..b340d9c 100644 --- a/src/BucketListItem.jsx +++ b/src/BucketListItem.jsx @@ -1,23 +1,14 @@ -import { createEffect, createSignal } from 'solid-js'; -import {Modal} from './Modal'; - export function BucketListItem(props) { - const [isOpen, setIsOpen] = createSignal(false); - - const handleDeleteItem = ()=>{ - props.setItems((items) => { - const itemsWithoutTheDeletedOne = items.filter((item) => - props.item !== item - ); - return itemsWithoutTheDeletedOne; - }); - setIsOpen(false); - } + + const handleButtonClick = ()=>{ + props.setItems((items)=>{ + const newItems = items.map((item)=> props.item === item ? {...item, delete: !item.delete} : item); + return newItems; + }); + } return ( <> - {isOpen() && } -
  • {props.item.text} -
    • diff --git a/src/Modal.jsx b/src/Modal.jsx index b0f4f34..49c49ed 100644 --- a/src/Modal.jsx +++ b/src/Modal.jsx @@ -1,10 +1,10 @@ -export function Modal(props) { +export default function Modal(props) { return (
    -
    +
    -
    Modal title
    +
    {props.title}
    -
    + {props.noOfItemToBeDeleted() === 0 ? null : (
    -
    +
    )}