Flexbox filter V1 from array

Developer
Nathan Gregg
Size
4,051 Kb
Views
8,096
  1. Flexbox filter V1 from array Previews
  2. Flexbox filter V1 from array HTML Codes
  3. Flexbox filter V1 from array CSS Codes
  4. Flexbox filter V1 from array JS Codes

How do I make an flexbox filter v1 from array?

The example here is with music tracks tagged with style attributes taken from an array (at the top of js). After array comparison with checked boxes the tracks are given a number depending on how many match. That number is used to set the order using the 'order' css flexbox property.. What is a flexbox filter v1 from array? How do you make a flexbox filter v1 from array? This script and codes were developed by Nathan Gregg on 25 December 2022, Sunday.

Flexbox filter V1 from array Previews
IQ Test

Flexbox filter V1 from array - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Flexbox filter V1 from array</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="page-container">
<div class="filter-container"> <div class="checkbox-container"> <input type="checkbox" name="style" value="select-all" id="select-all" /> <label for="select-all">select all tags</label><hr> <input type="checkbox" name="style" value="sweet" id="sweet" /> <label for="sweet">sweet</label> <input type="checkbox" name="style" value="noisy" id="noisy" /> <label for="noisy">noisy</label> <input type="checkbox" name="style" value="no-beat" id="no-beat"/> <label for="no-beat">no beat</label> <input type="checkbox" name="style" value="texture" id="texture"/> <label for="texture">texture</label> <input type="checkbox" name="style" value="guitar-riffs" id="guitar-riffs"/> <label for="guitar-riffs">guitar riffs</label> <input type="checkbox" name="style" value="rhythmic" id="rhythmic"/> <label for="rhythmic">rhythmic</label> <input type="checkbox" name="style" value="no-rhythm" id="no-rhythm"/> <label for="no-rhythm">no rhythm</label> <input type="checkbox" name="style" value="vocals" id="vocals"/> <label for="vocals">vocals</label> <input type="checkbox" name="style" value="no-vocals" id="no-vocals"/> <label for="no-vocals">no vocals</label> <input type="checkbox" name="style" value="quiet" id="quiet"/> <label for="quiet">quiet</label> <input type="checkbox" name="style" value="instrumental" id="instrumental"/> <label for="instrumental">instrumental</label> </div>
</div>
<div class="container"></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script>
<script src='http://www.wavesurfer.fm/build/wavesurfer.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Flexbox filter V1 from array - Script Codes CSS Codes

*{ font-family: 'Mallanna', sans-serif; paading: 0; margin 0;
}
hr{ width: 80%; background-color: lightgrey; border: 0 none; color: #999999; height: 1px;
}
.page-container{ width: 90%; margin: 0 auto;
}
.filter-container{ float: left; width: 15%; display: flex; flex-flow: column nowrap;
}
.checkbox-container{ display: flex; flex-flow: column nowrap;
}
input[type="text"] { width: 80%; margin-bottom: 10px;
}
input[type="checkbox"] { display: none;
}
input[type="checkbox"]:not(:checked) + label:hover { box-shadow: 0px 1px 3px;
}
input[type="checkbox"] + label:active,
input[type="checkbox"]:checked + label { box-shadow: 0px 0px 3px inset; background: lightgrey;
}
label { margin: 3px; background-color: #fff; width: 100%; text-align: center; border: 1px solid grey; border-radius: 5px; color: grey; cursor: pointer;
}
.container{ float: right; width: 80%; display: flex; flex-flow: column-reverse nowrap;
}
.track{ width: 100%; margin: 5px; padding: 15px; border: 1px solid grey; border-radius: 5px;
}
.p-right{ float: right;
}
.p-left{ float: left;
}
span.track-name{ font-size: 28px; color: gray;
}
span.artist-name{ font-size: 18px; color: lightgray;
}
p.tags{ color: grey;
}
span.matched{ font-size: 20px;
}
span.not_matched{ color: lightgrey; text-decoration: line-through;
}
.hidden{ display: none;
}

Flexbox filter V1 from array - Script Codes JS Codes

var tracklist = [ { "id": "bird_songs", "track": "Bird Songs", "artist": "Nathan", "tags": ["sweet", "quiet", "no-beat", "instrumental"], "runtime": "2:30", "waveform_url": "", }, { "id": "violet_end", "track": "Violet End", "artist": "Nathan", "tags": ["texture", "abstract", "no-beat", "instrumental"], "runtime": "1:35", "waveform_url": "", }, { "id": "coffee_malts", "track": "Coffee Malts", "artist": "Cousin", "tags": ["guitar-riffs", "drums", "no-vocals", "band"], "runtime": "1:35", "waveform_url": "", }, { "id": "someone", "track": "Someone Is Waiting For You", "artist": "Dan Amos", "tags": ["vocals", "noisy", "distorted", "song"], "runtime": "1:35", "waveform_url": "", }
];
$(document).ready(function() {
// Declare some VARIABLES
var checkbox_array = [], boxes = "";
// FUNCTION compares the two arrays checkboxes vs tags
Array.prototype.diff = function(tracklist) { var tags_matched = [], tags_not_matched = []; // the two arrays to store the results this.sort(); tracklist.sort(); // both arrays are sorted for easier matching for(var i = 0; i < this.length; i += 1) { // for each item in the array passed in (the checkboxes) if(tracklist.indexOf( this[i] ) > -1){ // if it matches with track taglist array tags_matched.push(" " + this[i]); // push result to new array of matched tags }else{ tags_not_matched.push(" " + this[i]); // otherwise push it to new array of unmatched tags } } return [tags_matched, tags_not_matched]; // return both arrays as array
};
// FUNCTION to execute whenever a checkbox changes
$('input:checkbox').change(function() { // if a checkbox changes checkbox_array = []; // empty checkbox array $('.container').html(""); // empty the container of current html $('input:checkbox:checked').each(function() { checkbox_array.push($(this).val()); // push checked checkboxes to new array }); makeBox(); // call the function to make the html
});
// FUNCTION to iterate the array and make the html
function makeBox(){ for ( var i = 0; i < tracklist.length; i++ ) { // for each track in the tracklist array var matches = checkbox_array.diff(tracklist[i].tags); // compare arrays, return array of 2 arrays var matched = matches[0]; // matched array var not_matched = matches[1]; // and not matched array var ordernumb = matches[0].length; // checks the length of matched array boxes = // build html elements for each track '<div id="' + tracklist[i].id + '" class="track" style="order:' + ordernumb // applys length of matched array as flexbox order number, column-reversed so the higher the number (ie. more matches) the higher the box. best match at the top + '"><p><span class="track-name">' + tracklist[i].track + '</span><span class="artist-name"> by ' + tracklist[i].artist + '</span></p>' + '<p class="tags">selected tags = <span class="matched">' + matched + ', </span>' + '<span class="not_matched"> ' + not_matched + '</span></p></div>'; $('.container').append(boxes); // append html to the container if (checkbox_array.length == 0){ // if no boxes are checked $("p.tags").addClass("hidden"); // hide the element that contains them (just hides a bit of text) } } }
// SELECT ALL CHECKBOXES BUTTON
$('#select-all').click(function(event) { if(this.checked) { // Iterate each checkbox $(':checkbox').each(function() { this.checked = true; }); } if(!this.checked) { // Iterate each checkbox $(':checkbox').each(function() { this.checked = false; }); }
});
makeBox(); // after all is loaded make the boxes
});
//SELECT LABEL <p class="p-right"><input type="checkbox" name="select" id="select" /><label for="select">select</label
Flexbox filter V1 from array - Script Codes
Flexbox filter V1 from array - Script Codes
Home Page Home
Developer Nathan Gregg
Username nathansonic
Uploaded December 25, 2022
Rating 3
Size 4,051 Kb
Views 8,096
Do you need developer help for Flexbox filter V1 from array?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Nathan Gregg (nathansonic) Script Codes
Name
Matching 2 Arrays
CWB Risk Calc
Logo Skews etc
CWB logo
Scroll Horizontal, div to center V2
Color Swatch
Flexbox filter V2 from array
CWB Full V3
HTML5 Playlist
Pure CSS filter using Flexbox
Create amazing sales emails with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!