GPU Part Picker

Developer
Tim
Size
5,523 Kb
Views
18,216
  1. GPU Part Picker Previews
  2. GPU Part Picker HTML Codes
  3. GPU Part Picker CSS Codes
  4. GPU Part Picker JS Codes

How do I make an gpu part picker?

What is a gpu part picker? How do you make a gpu part picker? This script and codes were developed by Tim on 31 October 2022, Monday.

GPU Part Picker Previews
IQ Test

GPU Part Picker - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>GPU Part Picker</title> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="site"> <div class="header">GPU Parts</div> <div class="sidebar">Filters <div><span> <div class="title arrow-down" data-id="p">Price</div></span> <ul id="p-list"> <li> <input class="p_filter" type="checkbox" id="p_all" checked="checked"/> <label for="p_all">All</label> </li> <li> <input class="p_filter" type="checkbox" id="p_1" p-min="0" p-max="100"/> <label for="p_1">Less than $100</label> </li> <li> <input class="p_filter" type="checkbox" id="p_2" p-min="100" p-max="250"/> <label for="p_2">$100 - $250</label> </li> <li> <input class="p_filter" type="checkbox" id="p_3" p-min="250" p-max="500"/> <label for="p_3">$250 - $500</label> </li> <li> <input class="p_filter" type="checkbox" id="p_4" p-min="500" p-max="750"/> <label for="p_4">$500 - $750</label> </li> </ul> </div> <div id="model-filter-div"> <div class="title arrow-down" data-id="m">Model</div> <ul id="m-list"></ul> </div> </div> <div class="main">Parts <div class="searchbar">Search for GPUs: <input type="text" id="searchFilter" placeholder="Search"/> </div> <hr/> <table> <thead> <tr> <th></th> <th data-type="Product Name">Name <button class="arrow-up" data-dir="asc"></button> <button class="arrow-down" data-dir="dsc"></button> </th> <th data-type="GPU Chip">Model <button class="arrow-up" data-dir="asc"></button> <button class="arrow-down" data-dir="dsc"></button> </th> <th data-type="Price">Price <button class="arrow-up" data-dir="asc"></button> <button class="arrow-down" data-dir="dsc"></button> </th> <th></th> </tr> </thead> <tbody id="fbody"></tbody> </table> </div>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.0.0-beta1/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/tabletop.js/1.4.3/tabletop.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

GPU Part Picker - Script Codes CSS Codes

.site { width: 60vw; min-width: 800px; margin: 0 auto;
}
.header { display: block; width: auto; text-align: center; background-color: #FF9009;
}
.main { background-color: #C1E1A6; width: 80vw; min-height: 90vh; display: table-cell;
}
.main .searchbar { float: right;
}
.main table { width: 100%; border-collapse: collapse; text-align: left;
}
.main table th button { padding: 0;
}
.sidebar { display: table-cell; width: 20vw; min-height: 90vh; background-color: #118C4E;
}
.sidebar div .title { text-transform: uppercase; font-size: 12px; margin-left: 4px;
}
.sidebar div ul { margin: 0; padding: 0;
}
.sidebar div ul li { list-style: none;
}
.sidebar div ul li input { vertical-align: middle;
}
.sidebar div ul li label { margin-left: -10px; font-size: 10px;
}
.sidebar p { margin-left: 4px; font-size: 12px;
}
.sidebar input { width: 3vw; margin-left: 8px;
}
.arrow-down::before { position: relative; content: ""; display: inline-block; margin-right: 4px; margin-bottom: 2px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid black;
}
.arrow-up::before { position: relative; content: ""; display: inline-block; margin-right: 4px; margin-bottom: 2px; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 5px solid black;
}

GPU Part Picker - Script Codes JS Codes

var filters = {};
//Function to handle multiple filters
function aggregateFilter(){ var rows = $("#fbody").find("tr").hide(); var filtered = []; for(f in filters){ //Check if 'All' is checked if($('#'+f+'_all').prop('checked')){ filtered.push(rows); } else{ var filtering = undefined; $.each(filters[f], function(i, v){ if(v){ if( f === 'm'){ var temp = rows.filter(function(){ var model = $(this)[0].cells[2].textContent; return (model === i) ? 1: 0; }); } else if( f === 'p'){ var temp = rows.filter(function(){ var price = parseInt($(this)[0].cells[3].textContent.replace("$","")); var keys = i.split('-',2); var min = keys[0]; var max = keys[1]; return (price < max && price >= min) ? 1: 0; }); } else if(f === 'search'){ var r = new RegExp(v, 'i'); var temp = rows.filter(function(){ return $(this).text().match(r); }); } filtering = (!filtering) ? temp : filtering.add(temp); } }); filtered.push(filtering); } } //Create final filter to show remaining rows var finalFilter; for( var i=0; i<filtered.length; i++){ finalFilter = (!finalFilter) ? filtered[i] : filtered[i].filter(finalFilter); } if(finalFilter != null) finalFilter.show(); else{ rows.show(); }
}
var spreadsheet_url = 'https://docs.google.com/spreadsheets/d/1SBpnq-1z42t_VsqteTjQan1fNfcphb_jP17vZ48a-wM/pubhtml#';
var sheet_data;
function generateTable(){ //populate table var textToInsert = []; var i = 0; var length = sheet_data.elements.length; for (var a = 0; a < length; a++) { //Generate entire table textToInsert[i++] = '<tr><td>'; textToInsert[i++] = getData(a); textToInsert[i++] = '</td></tr>'; } $("#fbody tr").remove(); $("#fbody").append(textToInsert.join('')); textToInsert = null;
}
function loadData(data, tabletop){ sheet_data = data['Sheet3']; console.log(sheet_data); var models = []; //populate table var textToInsert = []; var i = 0; var length = sheet_data.elements.length; for (var a = 0; a < length; a++) { //Generate entire table textToInsert[i++] = '<tr><td>'; textToInsert[i++] = getData(a); textToInsert[i++] = '</td></tr>'; //Get model data models.push( sheet_data.elements[a]['GPU Chip']); } $("#fbody").append(textToInsert.join('')); models = models.sort().filter(function(el,i,a){return i ==a.indexOf(el);}); //Generate Model Filters var textToInsert2 = []; var i = 0; length = models.length; textToInsert2[i++] = '<li><input type="checkbox" id="m_all" checked="checked" class="m_filter"/><label for="m_all">All</label></li>'; for(var a=0; a<length; a++){ textToInsert2[i++] = '<li><input type="checkbox" id="m_'+a+'" m="'+models[a]+'" class="m_filter"/><label for="m_'+a+'">'+models[a]+'</label></li>'; } $("#m-list").append(textToInsert2.join('')); //Add click event listener to Model Filters $("#m_all").click(selectCheckboxAll("m")); for( var n=0; n<length; n++){ $("#m_"+n).click(createModelFilter(n)); }
}
function init() { Tabletop.init( { key: spreadsheet_url, callback: loadData })
}
function getData(index){ var sheet = sheet_data.elements[index]; return '<input type="checkbox"/></td><td>' + sheet['Product Name'] + '</td><td>' + sheet['GPU Chip'] + '</td><td>' + sheet['Price'] + '</td><td><button>Add</button>';
}
$("#searchFilter").keyup(function(){ if( !filters['search'] ) filters['search'] = {}; filters['search']['val'] = this.value; aggregateFilter();
});
function createPriceFilter(n) { return function(){ var min = parseInt($("#p_"+n).attr('p-min')); var max = parseInt($("#p_"+n).attr('p-max')); if( $("#p_"+n).is(':checked')){ if( !filters['p'] ) filters['p'] = {} filters['p'][(min+'-'+max)] = 1; //uncheck 'All' $("#p_all").prop('checked', false); } else{ if($('.p_filter:checked').length == 0){ //check 'All' $("#p_all").prop('checked', true); } if( !filters['p'] ) filters['p'] = {} filters['p'][(min+'-'+max)] = 0; } aggregateFilter(); };
}
function createModelFilter(n) { return function(){ var m = $("#m_"+n).attr('m'); if( $("#m_"+n).is(':checked')){ if( !filters['m'] ) filters['m'] = {} filters['m'][m] = 1; //uncheck 'All' $("#m_all").prop('checked', false); } else{ if($('.m_filter:checked').length == 0){ //check 'All' $("#m_all").prop('checked', true); } if( !filters['m'] ) filters['m'] = {} filters['m'][m] = 0; } aggregateFilter(); };
}
function selectCheckboxAll(name){ return function(){ //Uncheck all others $("."+name+"_filter:checked").prop('checked',false); //Make it checked $("#"+name+"_all").prop('checked',true); //Set all filters to false for(var key in filters[name]){ filters[name][key] = 0; } //update the table filter aggregateFilter(); };
}
$(document).ready(function(){ init(); for( var n=1; n<5; n++){ $("#p_"+n).click(createPriceFilter(n)); } $("#p_all").click(selectCheckboxAll("p")); $(".title").click(function(){ var list = $("#"+$(this).attr('data-id')+"-list"); list.toggle(); if(list.css('display') === 'none'){ $(this).removeClass('arrow-down').addClass('arrow-up'); } else{ $(this).removeClass('arrow-up').addClass('arrow-down'); } }); $("th button").click(function(){ var k = $(this).parent().attr('data-type'); var dir = $(this).attr('data-dir'); var sortfct = (dir === 'asc') ? function(a,b){return a[k] < b[k] ? -1 : a[k] > b[k] ? 1 : 0;} : function(a,b){return a[k] < b[k] ? 1 : a[k] > b[k] ? -1 : 0;}; sheet_data.elements.sort(sortfct); generateTable(); aggregateFilter(); });
});
GPU Part Picker - Script Codes
GPU Part Picker - Script Codes
Home Page Home
Developer Tim
Username maytim
Uploaded October 31, 2022
Rating 3
Size 5,523 Kb
Views 18,216
Do you need developer help for GPU Part Picker?

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!

Tim (maytim) Script Codes
Name
Custom Dropdown
CSS Grid Calendar
Javascript Spelling Game
Double Helix Animation - Jade and Sass
Pixel paint
Double Helix Animation - Jade and Sass
A Pen by Tim
Reddit API Gifs
Game idea
Custom Multi Column Data Entry Select
Create amazing SEO content 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!