Skip to content

Instantly share code, notes, and snippets.

@larapollehn

larapollehn/index.css

Created June 27, 2020 13:41
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save larapollehn/ef34040b8b402f4f2ab7dad317ef0065 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save larapollehn/ef34040b8b402f4f2ab7dad317ef0065 to your computer and use it in GitHub Desktop.
Download ZIP
bp-pagination
Raw
index.css
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
.card-slider{
width: 100%;
float: left;
overflow: hidden;
}
.card-container{
float: left;
transition: margin 1s ease ;
}
.item{
background-color: grey;
text-align: center;
color: #ffffff;
float: left;
border-radius: 15px;
}
.less-than-three{
position: absolute;
}
.controls{
width: 100%;
padding: 15px;
}
.controls ul{
display: block;
text-align: center;
list-style: none;
}
li{
height: 30px;
width: 30px;
line-height: 30px;
border: 1px solid grey;
border-radius: 25px;
margin: 4px;
display: inline-block;
cursor: pointer;
}
li:hover{
background-color: lightgrey;
}
.active{
background-color: thistle;
}
.balance{
font-size: 2.5rem;
height: 150px;
line-height: 150px;
}
.account{
font-size: 20px;
}
.iban{
font-size: 16px;
}
.dropbtn {
background-color: thistle;
color: white;
padding: 8px;
font-size: 16px;
border: none;
cursor: pointer;
width: 100px;
}
.dropdown {
position: relative;
display: inline-block;
width: 100%;
margin: 15px 0 0 15px;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 100px;
z-index: 1;
text-align: center;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: lightgrey}
.dropdown:hover .dropdown-content {
display: block;
}
.dropdown:hover .dropbtn {
background-color: grey;
}
Raw
index.html
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport"
content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
<link rel="stylesheet" href="index.css">
<title>Card-Slider</title>
</head>
<body>
<div id="pagination" class="pagination">
<div id="filter-menu" class="dropdown">
<button class="dropbtn">Filter</button>
<div id="filter" class="dropdown-content">
</div>
</div>
<div id="card-slider" class="card-slider">
<div id="card-container" class="card-container">
</div>
</div>
<div id="controls" class="controls">
</div>
</div>
<script src="index.js"></script>
</body>
</html>
Raw
index.js
const accounts = [
{id: 1, balance: 2834.23 , bank: "Sparkasse Freiburg", iban: "DE9563 7625 3487 23"},
{id: 2, balance: 130.99 , bank: "Sparkasse Freiburg", iban: "DE9583 7625 9852 65"},
{id: 3, balance: 23.20 , bank: "Volksbank Mannheim", iban: "DE0298 9867 2435 21"},
{id: 4, balance: 15689.21 , bank: "IngDiba", iban: "DE7283 2435 9282 12"},
{id: 5, balance: 130.99 , bank: "Sparkasse Freiburg", iban: "DE9583 7625 9852 65"},
{id: 6, balance: 323.20 , bank: "Volksbank Mannheim", iban: "DE0298 9867 2435 21"},
{id: 7, balance: 130.99 , bank: "Deutsche Bank", iban: "DE9583 7625 9852 65"},
{id: 8, balance: 23.20 , bank: "Volksbank München", iban: "DE0298 9867 2435 21"}
];
const filterOptions = [
{id: 1, option: "Balance <"},
{id: 2, option: "Balance >"},
{id: 3, option: "Bank"},
];
const paginationContainer = document.getElementById("pagination");
const cardContainer = document.getElementById("card-container");
const controlContainer = document.getElementById("controls");
const filterContainer = document.getElementById("filter");
const filterMenuContainer = document.getElementById("filter-menu");
const items = document.getElementsByClassName("item");
const itemsPerPage = 3;
const itemWidth = 200;
const itemHeight = 250;
const margin = 30;
let nextPageWidth = 0;
function setAttributesOfElements() {
paginationContainer.style.width = ((itemWidth+margin)*itemsPerPage) + "px";
cardContainer.style.width = ((itemWidth+margin)* accounts.length) +"px";
}
function displayCards() {
if(accounts.length === 2){
cardContainer.style.marginLeft = ((itemWidth+margin)/2) + "px";
}else if(accounts.length === 1){
cardContainer.style.marginLeft = (itemWidth+margin)+ "px";
}
for(let i = 0; i < accounts.length; i++){
const div = document.createElement("div");
div.className = "item";
div.style.width = itemWidth + "px";
div.style.height = itemHeight + "px";
div.style.margin = (margin/2)+"px";
const balanceDiv = document.createElement("div");
balanceDiv.className = "balance";
balanceDiv.innerText = accounts[i]['balance'] + "€";
div.appendChild(balanceDiv);
const accountDiv = document.createElement("div");
accountDiv.className = "account";
accountDiv.innerText = accounts[i]['bank'];
div.appendChild(accountDiv);
const ibanDiv = document.createElement("div");
ibanDiv.className = "iban";
ibanDiv.innerText = accounts[i]['iban'];
div.appendChild(ibanDiv);
cardContainer.appendChild(div);
}
}
function displayControls() {
if(accounts.length <= 3){
controlContainer.style.visibility = "hidden";
}else{
const numberOfPages = Math.ceil(accounts.length/ itemsPerPage);
const ul = document.createElement("ul");
controlContainer.appendChild(ul);
for (let i = 1 ; i <= numberOfPages; i++){
const li = document.createElement("li");
li.id = i.toString();
li.innerText = i.toString();
li.setAttribute("onclick", "nextPage(this)");
if(i === 1){
li.className = "active";
}
ul.appendChild(li);
}
}
}
function displayFilters() {
if(accounts.length === 1 || (typeof filterOptions === 'undefined') || filterOptions.length === 0){
filterMenuContainer.style.visibility = "hidden";
}else{
for(let i = 0; i < filterOptions.length; i++){
let option = document.createElement("a");
option.setAttribute("href", "#");
option.setAttribute("onclick", "filter(this)");
option.innerText = filterOptions[i]['option'];
filterContainer.appendChild(option);
}
}
}
function nextPage(elem){
let active;
let activeElem = document.querySelector(".active");
activeElem.className = "";
active = activeElem.id -1;
elem.className = "active";
let number = (elem.id -1)-active;
nextPageWidth += (((itemWidth+margin)* itemsPerPage) * number);
cardContainer.style.marginLeft =- nextPageWidth +"px";
}
function filter(caller) {
let filterBy = caller.innerText;
console.log("filter", filterBy);
if(filterBy === "Bank"){
console.log("bank");
accounts.sort(filterByProperty("bank"));
console.log(accounts);
}else if(filterBy === "Balance <"){
console.log("balance <");
accounts.sort(filterByProperty("balance"));
console.log(accounts);
}else if(filterBy === "Balance >"){
console.log("balance >");
accounts.sort(filterByProperty("-balance"));
console.log(accounts);
}
while(cardContainer.firstChild){
cardContainer.removeChild(cardContainer.lastChild);
}
displayCards();
}
function filterByProperty(property) {
let sortOrder = 1;
if (property[0] === "-") {
sortOrder = -1;
property = property.substr(1);
}
return function compare(a, b) {
let result;
if (a[property] < b[property]) {
result = -1;
} else if (a[property] > b[property]) {
result = 1;
} else {
result = 0;
}
return result * sortOrder;
}
}
setAttributesOfElements();
displayCards();
displayControls();
displayFilters();
Raw
pre-defined-html-items.js
for(let i = 0; i < accounts.length; i++){
const div = document.createElement("div");
div.className = "item";
div.style.width = (itemWidth - margin) +"px";
div.style.margin = (margin/2) + "px";
div.innerText = accounts[i]['balance'] + "€\n " + accounts[i]['bank'] + "\n " + accounts[i]['iban'];
cardContainer.appendChild(div);
totalItemsWidth += itemWidth;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment