Skip to content

Commit

Permalink
added popup menu for max 5 selection
Browse files Browse the repository at this point in the history
  • Loading branch information
@TamirCode
TamirCode authored Dec 17, 2021
1 parent 2f34bd9 commit 5978881
Show file tree
Hide file tree
Showing 3 changed files with 122 additions and 53 deletions.
10 changes: 4 additions & 6 deletions index.html
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,3 @@
<!-- #region || head -->
<!DOCTYPE html>
<html lang="en">
<head>
Expand All @@ -14,8 +13,6 @@
<title>Cryptopia</title>
</head>
<body>
<!-- #endregion -->
<!-- #region || header -->
<header>
<nav>
<div class="triangle-page-marker" data-current-page="home"></div>
Expand All @@ -26,7 +23,6 @@
</header>
<div class="parallax-img"></div>
<h1 class="title">Cryptopia</h1>
<!-- #endregion -->

<main>
<img class="loading" src="./img/loading.gif" alt="loadingIMG">
Expand All @@ -37,13 +33,15 @@ <h1 class="title">Cryptopia</h1>
<div class="popup-dark-overlay">
<div class="popup-container">
<div class="popup-header">
<h1 class="popup-menu-title">Title</h1>
<h1>You can only select up to 5 coins.</h1>
<button class="popup-exit-button">
<i class="fa fa-close"></i>
</button>
</div>
<div class="popup-body">
<!-- JS -->
<div class="flex-row">
<!-- JS -->
</div>
</div>
</div>
</div>
Expand Down
96 changes: 86 additions & 10 deletions script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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(`
<div class="card">
<h2>${i + 1}. <span class="symbol">${filteredCoinsData[i].symbol}</span></h2>
<h2>${i + 1}. <span class="symbol">${filteredCoinsData[i].symbol.toUpperCase()}</span></h2>
<h3>${filteredCoinsData[i].name}</h3>
<input type="checkbox" id="checkbox${i}" />
<label for="checkbox${i}"></label>
<input class="card-checkbox-input" type="checkbox" id="checkbox${filteredCoinsData[i].id}" onclick="checkboxClick('${filteredCoinsData[i].id}', '${filteredCoinsData[i].symbol}', false)">
<label class="card-checkbox-label" for="checkbox${filteredCoinsData[i].id}"></label>
<button id="button${i}" onclick="moreInfoBtn(${i})">More Info</button>
<div class="more-info-container">
</div>
<div class="more-info-container"></div>
</div>
`)

// true if array includes id
const myBoolean = toggledList.some(each => each.id === filteredCoinsData[i].id)
if (myBoolean) {
$(`#checkbox${filteredCoinsData[i].id}`).prop("checked", true)
}
}
}

Expand Down Expand Up @@ -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(`
<div class="flex-row">
<p>${toggledList[i].symbol.toUpperCase()}</p>
<input checked class="card-checkbox-input" type="checkbox" id="p-checkbox${toggledList[i].id}" onclick="checkboxClick('${toggledList[i].id}', '${toggledList[i].symbol}', true)">
<label class="card-checkbox-label" for="p-checkbox${toggledList[i].id}"></label>
</div>
`)
}
$(".popup-body").append(`
<div class="flex-row">
<p>${coinSymbol.toUpperCase()}</p>
<input class="card-checkbox-input" type="checkbox" id="p-checkbox${coinID}" onclick="checkboxClick('${coinID}', '${coinSymbol}', true)">
<label class="card-checkbox-label" for="p-checkbox${coinID}"></label>
</div>
`)
$(".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
Expand Down
69 changes: 32 additions & 37 deletions style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -440,6 +440,7 @@ main {
justify-content: center;
justify-items: center;
user-select: none;
margin-bottom: 25px;
}

.page-number {
Expand Down Expand Up @@ -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;
Expand All @@ -626,7 +627,7 @@ main {
top: 10px;
}

.card label:after {
.card-checkbox-label:after {
content: '';
position: absolute;
top: 2.5px;
Expand All @@ -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%);
}

Expand All @@ -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;
Expand All @@ -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;
Expand All @@ -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 */
Expand Down

0 comments on commit 5978881

Please sign in to comment.