diff --git a/css/checkbox.css b/css/checkbox.css new file mode 100644 index 0000000..9efcd1e --- /dev/null +++ b/css/checkbox.css @@ -0,0 +1,109 @@ +.checkbox__container { + position: relative; + width: 50px; +} +._checkbox { + display: none; +} + +label { + position: absolute; + top: 50%; + right: 0; + left: 0; + width: 40px; + height: 40px; + margin: 0 auto; + background-color: #f72414; + transform: translateY(-50%); + border-radius: 50%; + box-shadow: 0 7px 10px #ffbeb8; + cursor: pointer; + transition: 0.2s ease transform, 0.2s ease background-color, + 0.2s ease box-shadow; + overflow: hidden; + z-index: 1; + border: 2px solid rgba(0, 0, 0, 0.44); +} + +label:before { + content: ''; + position: absolute; + top: 50%; + right: 0; + left: 0; + width: 30px; + height: 30px; + margin: 0 auto; + background-color: #fff; + transform: translateY(-50%); + border-radius: 50%; + box-shadow: inset 0 7px 10px #ffbeb8; + transition: 0.2s ease width, 0.2s ease height; +} + +label:hover:before { + width: 55px; + height: 55px; + box-shadow: inset 0 7px 10px #ff9d96; +} + +label:active { + transform: translateY(-50%) scale(0.9); +} + +.tick_mark { + position: absolute; + top: 5px; + right: 0; + left: 0; + width: 26px; + height: 20px; + margin: 0 auto; + margin-left: 5px; + transform: rotateZ(-50deg); +} + +.tick_mark:before, +.tick_mark:after { + content: ''; + position: absolute; + background-color: #fff; + border-radius: 2px; + opacity: 0; + transition: 0.2s ease transform, 0.2s ease opacity; +} + +.tick_mark:before { + left: 0; + bottom: 0; + width: 5px; + height: 17px; + box-shadow: -2px 0 5px rgb(0 0 0 / 23%); + transform: translateY(-15px); +} + +.tick_mark:after { + left: 0; + bottom: 0; + width: 100%; + height: 5px; + box-shadow: 0 3px 5px rgb(0 0 0 / 23%); + transform: translateX(78px); +} + +._checkbox:checked + label { + background-color: #07d410; + box-shadow: 0 7px 10px #92ff97; +} + +._checkbox:checked + label:before { + width: 0; + height: 0; +} + +._checkbox:checked + label .tick_mark:before, +._checkbox:checked + label .tick_mark:after { + transform: translate(0); + opacity: 1; +} diff --git a/css/icofont.css b/css/icofont.css new file mode 100644 index 0000000..25bc977 --- /dev/null +++ b/css/icofont.css @@ -0,0 +1,242 @@ +@font-face { + font-family: 'IcoFont'; + font-weight: normal; + font-style: 'Regular'; + src: url('../fonts/icofont.woff2') format('woff2'), + url('../fonts/icofont.woff') format('woff'); +} + +[class^='icofont-'], +[class*=' icofont-'] { + font-family: 'IcoFont' !important; + speak: none; + font-style: normal; + font-weight: normal; + font-variant: normal; + text-transform: none; + white-space: nowrap; + word-wrap: normal; + direction: ltr; + line-height: 1; + /* Better Font Rendering =========== */ + -webkit-font-feature-settings: 'liga'; + -webkit-font-smoothing: antialiased; +} + +.icofont-ui-copy:before { + content: '\ec51'; +} + +.icofont-ui-edit:before { + content: '\ec55'; +} + +.icofont-ui-delete:before { + content: '\ec53'; +} + +.icofont-xs { + font-size: 0.5em; +} + +.icofont-sm { + font-size: 0.75em; +} + +.icofont-md { + font-size: 1.25em; +} + +.icofont-lg { + font-size: 1.5em; +} + +.icofont-1x { + font-size: 1em; +} + +.icofont-2x { + font-size: 2em; +} + +.icofont-3x { + font-size: 3em; +} + +.icofont-4x { + font-size: 4em; +} + +.icofont-5x { + font-size: 5em; +} + +.icofont-6x { + font-size: 6em; +} + +.icofont-7x { + font-size: 7em; +} + +.icofont-8x { + font-size: 8em; +} + +.icofont-9x { + font-size: 9em; +} + +.icofont-10x { + font-size: 10em; +} + +.icofont-fw { + text-align: center; + width: 1.25em; +} + +.icofont-ul { + list-style-type: none; + padding-left: 0; + margin-left: 0; +} + +.icofont-ul > li { + position: relative; + line-height: 2em; +} + +.icofont-ul > li .icofont { + display: inline-block; + vertical-align: middle; +} + +.icofont-border { + border: solid 0.08em #f1f1f1; + border-radius: 0.1em; + padding: 0.2em 0.25em 0.15em; +} + +.icofont-pull-left { + float: left; +} + +.icofont-pull-right { + float: right; +} + +.icofont.icofont-pull-left { + margin-right: 0.3em; +} + +.icofont.icofont-pull-right { + margin-left: 0.3em; +} + +.icofont-spin { + -webkit-animation: icofont-spin 2s infinite linear; + animation: icofont-spin 2s infinite linear; + display: inline-block; +} + +.icofont-pulse { + -webkit-animation: icofont-spin 1s infinite steps(8); + animation: icofont-spin 1s infinite steps(8); + display: inline-block; +} + +@-webkit-keyframes icofont-spin { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} + +@keyframes icofont-spin { + 0% { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); + } + + 100% { + -webkit-transform: rotate(360deg); + transform: rotate(360deg); + } +} + +.icofont-rotate-90 { + -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=1)'; + -webkit-transform: rotate(90deg); + transform: rotate(90deg); +} + +.icofont-rotate-180 { + -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2)'; + -webkit-transform: rotate(180deg); + transform: rotate(180deg); +} + +.icofont-rotate-270 { + -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=3)'; + -webkit-transform: rotate(270deg); + transform: rotate(270deg); +} + +.icofont-flip-horizontal { + -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=0, mirror=1)'; + -webkit-transform: scale(-1, 1); + transform: scale(-1, 1); +} + +.icofont-flip-vertical { + -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)'; + -webkit-transform: scale(1, -1); + transform: scale(1, -1); +} + +.icofont-flip-horizontal.icofont-flip-vertical { + -ms-filter: 'progid:DXImageTransform.Microsoft.BasicImage(rotation=2, mirror=1)'; + -webkit-transform: scale(-1, -1); + transform: scale(-1, -1); +} + +:root .icofont-rotate-90, +:root .icofont-rotate-180, +:root .icofont-rotate-270, +:root .icofont-flip-horizontal, +:root .icofont-flip-vertical { + -webkit-filter: none; + filter: none; + display: inline-block; +} + +.icofont-inverse { + color: #fff; +} + +.sr-only { + border: 0; + clip: rect(0, 0, 0, 0); + height: 1px; + margin: -1px; + overflow: hidden; + padding: 0; + position: absolute; + width: 1px; +} + +.sr-only-focusable:active, +.sr-only-focusable:focus { + clip: auto; + height: auto; + margin: 0; + overflow: visible; + position: static; + width: auto; +} diff --git a/css/style.css b/css/style.css index 5e25b96..877ae94 100644 --- a/css/style.css +++ b/css/style.css @@ -1,5 +1,6 @@ /*Fonts*/ @import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@600&display=swap'); +@import 'checkbox.css'; * { margin: 0; @@ -157,6 +158,16 @@ html { .button-danger:hover { background: #ec4811; } +.button_mini { + margin: 5px; + padding: 5px; +} +.button_mini > i { + font-size: 18px; + height: 20px; + width: 20px; + display: inline-block; +} .buttons { text-align: center; } @@ -174,6 +185,26 @@ html { border-radius: 15px; } +.box__content { + display: flex; + align-items: center; + padding: 10px; +} + +.box__header { + display: flex; + justify-content: space-between; + padding: 0 10px; + align-items: center; +} +.box__input { + flex: 1; + text-align: left; +} +.box__value[contenteditable] { + background-color: #fff; +} + .box p, h5 { margin: 10px; diff --git a/fonts/icofont.eot b/fonts/icofont.eot new file mode 100644 index 0000000..220107d Binary files /dev/null and b/fonts/icofont.eot differ diff --git a/fonts/icofont.svg b/fonts/icofont.svg new file mode 100644 index 0000000..ba16427 --- /dev/null +++ b/fonts/icofont.svg @@ -0,0 +1,13 @@ + + + + + + + + + + + + + \ No newline at end of file diff --git a/fonts/icofont.ttf b/fonts/icofont.ttf new file mode 100644 index 0000000..1468a8b Binary files /dev/null and b/fonts/icofont.ttf differ diff --git a/fonts/icofont.woff b/fonts/icofont.woff new file mode 100644 index 0000000..ce26e50 Binary files /dev/null and b/fonts/icofont.woff differ diff --git a/fonts/icofont.woff2 b/fonts/icofont.woff2 new file mode 100644 index 0000000..909539c Binary files /dev/null and b/fonts/icofont.woff2 differ diff --git a/index.html b/index.html index add62ff..417d441 100644 --- a/index.html +++ b/index.html @@ -4,30 +4,80 @@ - - - - - - - - - - - - - - - - - - - - + type="image/png" + sizes="192x192" + href="favicon/android-icon-192x192.png" + /> + + + + + + + -
NOTE :${index + 1}
- -
-

${element.value}

+
+ +
+ + + +
+
+
+
+
+ + +
+
+

${element.value}

+
- - -
`; }); @@ -41,29 +61,25 @@ function deleted(index) { showmsg('Note deleted successfully.'); } function edit(index) { - const noteElement = document.getElementById(`box-${index}`); - const swappableElement = noteElement.getElementsByClassName('swappable')[0]; - const editButton = noteElement.getElementsByClassName('edit')[0]; - - if (editButton.innerHTML == 'Edit') { - swappableElement.innerHTML = ` -
- -
- `; - editButton.innerHTML = 'Save'; - showmsgEdit('Note in Edit Mode.'); - } else { + const editButton = document.querySelector(`#box-${index} .edit`); + const noteText = document.querySelector(`#box-${index} .swappable p`); + + if (editButton.classList.contains('active')) { const listNotes = getStorageData(); - listNotes[index].value = noteElement.getElementsByTagName('input')[0].value; + listNotes[index].value = noteText.innerHTML + .replace(//gi, '\n') + .replace(/<[^>]*>/gi, ' ') + .trim(); localStorage.setItem('notes', JSON.stringify(listNotes)); showNotes(); showmsg('Note updated successfully.'); + } else { + noteText.setAttribute('contenteditable', true); + noteText.focus(); + editButton.classList.add('active'); + editButton.innerHTML = 'Save'; + showmsg('Note in Edit Mode.'); } } @@ -76,6 +92,18 @@ function copyText(index) { showmsg('Copied the note: ' + text); } +function changeStatus(index) { + const listNotes = getStorageData(); + const newList = listNotes.map((element, elementIndex) => { + if (elementIndex === index) { + element.status = !element.status; + } + return element; + }); + + localStorage.setItem('notes', JSON.stringify(newList)); +} + searched.addEventListener('input', function () { const inputValue = searched.value.toLowerCase(); const noteCard = document.getElementsByClassName('box'); @@ -106,6 +134,7 @@ formContainer.addEventListener('submit', (event) => { listNotes.push({ id: new Date().getTime(), date: new Date().getTime(), + status: false, value: addNote.value, }); showmsg('Your Note has been added successfully.');