Skip to content

Instantly share code, notes, and snippets.

View geomago's full-sized avatar

geomago

1 follower · 0 following
View GitHub Profile
@geomago
geomago / sidebar_with_apis.js
Created April 25, 2023 19:01
Experiment with public APIs
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css" rel="stylesheet">
<style>
.sidebar {
position: fixed;
@geomago
geomago / medium_stats.js
Last active April 17, 2023 14:27
Create a popup table with summary stats
{
var htmlEscape = function (value) {
var d = document.createElement('div');
d.innerText = value;
return d.innerHTML;
};
var url = 'https://medium.com/me/';
var getDetail = (postId, startDate, callback) => {
const payload = [
{
@geomago
geomago / wc-image-carousel.js
Last active April 11, 2023 13:31
Standard Web Component as a wrapper to Glide.js
@geomago
geomago / vanilla_reactivity.html
Last active April 1, 2023 12:12
Experiment with Reactivity
<!DOCTYPE html>
<html>
<head>
<title>Product Table</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<style>
#productTable img {
max-width: 100px;
@geomago
geomago / wc-date-picker.js
Last active March 19, 2023 07:20
Standard Web Component wrapping the js-datapicker library
// WebComponent date-picker, a wrapper for js-datepicker
class DatePicker extends HTMLElement {
constructor() {
super();
}
connectedCallback() {
// Load the js-datepicker once
if (typeof datepicker === 'undefined') { // "datepicker" does not exists
if (!window.jsDatepicker) { // not already running (no other instance of the same WC)
@geomago
geomago / restruct_array.js
Created June 19, 2020 17:37
restruct_array
let newCars = cars2.slice(0).sort( (a,b) => a.price - b.price )
.map( (item,index) => {
item.position = index+1;
delete item.colour;
return item;
}
);
// RESULT IS
[
@geomago
geomago / remove_dupl.js
Last active June 19, 2020 17:19
remove_dupl
let carsAsString = cars.map( (item) => JSON.stringify(item));
let unique = [...new Set(carsAsString)].map( (item) => JSON.parse(item) );
// RESULT IS:
[
{id:1,make:"Ferrari",model:"812GTS",price:336000,colour:"rosso corsa"},
{id:2,make:"Ferrari",model:"F8 Spider",price:262000,colour:"giallo modena"},
{id:3,make:"Lamborghini",model:"Aventador S",price:329400,colour:"blu le mans"},
{id:4,make:"Bugatti",model:"Chiron Pur Sport",price:3000000,colour:"blue"},
{id:5,make:"McLaren",model:"New GT",price:203000,colour:"helios orange"},
@geomago
geomago / remove_dupl_2.js
Last active June 19, 2020 17:18
remove_dupl_2
let unique = cars.filter ( (item,index) => index === cars.findIndex ( car => car.make === item.make && car.model === item.model) );
// RESULT IS:
[
{id:1,make:"Ferrari",model:"812GTS",price:336000,colour:"rosso corsa"},
{id:2,make:"Ferrari",model:"F8 Spider",price:262000,colour:"giallo modena"},
{id:3,make:"Lamborghini",model:"Aventador S",price:329400,colour:"blu le mans"},
{id:4,make:"Bugatti",model:"Chiron Pur Sport",price:3000000,colour:"blue"},
{id:5,make:"McLaren",model:"New GT",price:203000,colour:"helios orange"}
]
@geomago
geomago / intersect_arrays.js
Last active June 19, 2020 17:17
intersect_arrays
let commonCars = cars.filter( item => cars2.findIndex( car => car.id == item.id ) >= 0 );
// RESULT IS:
[
{id:2,make:"Ferrari",model:"F8 Spider",price:262000,colour:"giallo modena"},
{id:5,make:"McLaren",make:"New GT",price:203000,colour:"helios orange"},
{id:6,make:"Ferrari",model:"F8 Spider",price:262000,colour:"giallo modena"}
]
@geomago
geomago / merge_arrays_2.js
Last active June 19, 2020 14:15
merge_arrays_2
let allCars = cars2.reduce(
(result,item) => {
if ( cars.findIndex( car => car.id == item.id ) < 0) {
result.push(item);
}
return result;
},
cars.slice(0)
);