@@ -37,13 +33,15 @@ Cryptopia
diff --git a/script.js b/script.js index e335b30..5967d71 100644 --- a/script.js +++ b/script.js @@ -313,17 +313,19 @@ function renderCards() { // if 100 per page, currentpage 1: index will loop 0-99 , currentpage 2: index will loop 100-199 $(".cardsContainer").append(`
-
`)
-
+ // true if array includes id
+ const myBoolean = toggledList.some(each => each.id === filteredCoinsData[i].id)
+ if (myBoolean) {
+ $(`#checkbox${filteredCoinsData[i].id}`).prop("checked", true)
+ }
}
}
@@ -517,16 +519,90 @@ function editSliderContent(btnElement, coinObject, success) {
}
// #endregion
- // #region || popup modal + toggle checkboxes
+ // #region || toggle checkboxes + popup modal
let toggledList = [];
-//$("#name-checkbox").is(':checked')
-function checkboxClick() {
+function checkboxClick(coinID, coinSymbol, isPopup) {
+ // if checkbox is not from popup menu
+ if (!isPopup) {
+ // if toggled on:
+ if ($(`#checkbox${coinID}`).is(":checked")) {
+ if (toggledList.length >= 5) {
+ console.log("over 5, unchecked")
+ $(`#checkbox${coinID}`).prop("checked", false)
+ showPopupMenu(coinID, coinSymbol)
+ } else {
+ // true if array includes id
+ const myBoolean = toggledList.some(each => each.id === coinID)
+ if (!myBoolean) {
+ toggledList.push({id: coinID, symbol: coinSymbol})
+ }
+ }
+ } else { // if toggled off:
+ // remove id from list if its there
+ toggledList = toggledList.filter(each => each.id !== coinID )
+ }
+ } else { // if checkbox was in popup menu:
+ console.log("in popup")
+ // if toggled on:
+ if ($(`#p-checkbox${coinID}`).is(":checked")) {
+ console.log("TOGGLED ON ->>")
+ if (toggledList.length >= 5) {
+ console.log("over 5, unchecked")
+ $(`#p-checkbox${coinID}`).prop("checked", false)
+ } else {
+ // sync non-popup checkbox
+ $(`#checkbox${coinID}`).prop("checked", true)
+ // true if array includes id
+ const myBoolean = toggledList.some(each => each.id === coinID)
+ if (!myBoolean) {
+ toggledList.push({id: coinID, symbol: coinSymbol})
+ }
+ }
+ } else { // if toggled off:
+ console.log("TOGGLED OFF ->>")
+ // sync non-popup checkbox
+ $(`#checkbox${coinID}`).prop("checked", false)
+ // remove id from list if its there
+ toggledList = toggledList.filter(each => each.id !== coinID )
+ }
+
+ }
+}
+
+function showPopupMenu(coinID, coinSymbol) {
+ $(".popup-body").html("")
+ for (let i = 0; i < toggledList.length; i++) {
+ $(".popup-body").append(`
+ ${i + 1}. ${filteredCoinsData[i].symbol}
+${i + 1}. ${filteredCoinsData[i].symbol.toUpperCase()}
${filteredCoinsData[i].name}
- - + + -
-
-
+
+
+ `)
+ }
+ $(".popup-body").append(`
+ ${toggledList[i].symbol.toUpperCase()}
+ + +
+
+ `)
+ $(".popup-dark-overlay").css("display", "flex")
+}
+function closePopupMenu() {
+ $(".popup-dark-overlay").css("display", "none")
}
+$(".popup-exit-button").click(closePopupMenu)
+$(".popup-dark-overlay").click(e => {
+ if (e.target === e.currentTarget) {
+ closePopupMenu();
+ }
+})
// #endregion
// #region || search + mic + api-button
diff --git a/style.css b/style.css
index fa903ad..ab564ae 100644
--- a/style.css
+++ b/style.css
@@ -440,6 +440,7 @@ main {
justify-content: center;
justify-items: center;
user-select: none;
+ margin-bottom: 25px;
}
.page-number {
@@ -610,11 +611,11 @@ main {
/* #endregion */
/* #region || checkbox */
-.card input[type="checkbox"] {
+.card-checkbox-input {
display: none;
}
-.card label {
+.card-checkbox-label {
cursor: pointer;
width: 50px;
height: 30px;
@@ -626,7 +627,7 @@ main {
top: 10px;
}
-.card label:after {
+.card-checkbox-label:after {
content: '';
position: absolute;
top: 2.5px;
@@ -638,20 +639,20 @@ main {
transition: 0.3s;
}
-.card input:checked ~ label {
+.card-checkbox-input:checked ~ .card-checkbox-label {
background-color: var(--lightblue);
}
-.card input:checked ~ label:after {
+.card-checkbox-input:checked ~ .card-checkbox-label:after {
left: calc(100% - 2.5px);
transform: translateX(-100%);
}
-.card label:active:after {
+.card-checkbox-label:active:after {
transform: translateX(18%);
}
-.card input:checked ~ label:active:after {
+.card-checkbox-input:checked ~ .card-checkbox-label:active:after {
transform: translateX(-118%);
}
@@ -674,8 +675,9 @@ main {
.popup-container {
min-height: 250px;
- max-width: 450px;
- flex-grow: 1;
+ /* max-width: 450px; */
+ min-width: 450px;
+ /* flex-grow: 1; */
padding: 20px;
overflow: auto;
border-radius: 10px;
@@ -686,10 +688,15 @@ main {
.popup-container .popup-header {
display: flex;
justify-content: space-between;
- align-content: center;
+ align-items: center;
margin-bottom: 20px;
}
+.popup-container h1 {
+ font-size: 17px;
+ font-weight: 700;
+}
+
.popup-container .popup-exit-button {
border: 2px solid grey;
cursor: pointer;
@@ -704,40 +711,28 @@ main {
background-color: rgb(223, 113, 113);
}
-.popup-container .popup-menu-title {
- margin: 0;
+.popup-body {
+ display: grid;
+ grid-template-columns: auto auto;
+ gap: 15px;
}
-.popup-body .loading {
- display: block;
- margin: auto;
- margin-top: 10px;
- height: 100px;
- width: 100px;
+.flex-row {
+ display: flex;
+ justify-content: space-between;
}
-.popup-body .coin-image {
+.popup-body p {
+ font-size: 16px;
display: block;
- width: 100px;
- height: 100px;
- object-fit: cover;
- margin-bottom: 15px;
- border-radius: 100%;
-}
-
-.popup-body h4 {
- display: inline-block;
+ margin-right: 8px;
}
-.popup-body span {
- color:rgb(36, 145, 60);
-}
-
-.popup-body select {
- font-size: 14px;
- border: 2px solid black;
- border-radius: 6px;
- padding: 3px;
+.popup-body .card-checkbox-label {
+ position: relative;
+ min-width: 50px;
+ top: unset;
+ right: unset;
}
/* #endregion */
${coinSymbol.toUpperCase()}
+ + +