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 / 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-image-carousel.js
Last active April 11, 2023 13:31
Standard Web Component as a wrapper to Glide.js
@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 / 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)
);
@geomago
geomago / merge_arrays_1.js
Created June 19, 2020 11:43
merge_arrays_1
let allCars = cars.concat(cars2);
let unique = allCars.filter ( (item,index) => index === allCars.findIndex ( car => car.id === item.id) );
// 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 / cars_array_2.js
Created June 19, 2020 06:40
cars_array_2
let cars2 = [
{id: 2, make: 'Ferrari', model: 'F8 Spider', price: 262000, colour: 'giallo modena'},
{id: 5, make: 'McLaren', model: 'New GT', price: 203000, colour: 'helios orange'},
{id: 6, make: 'Ferrari', model: 'F8 Spider', price: 262000, colour: 'giallo modena'},
{id: 9, make: 'Lamborghini', model: 'Huracan', price: 206790, colour: 'green'},
{id: 10, make: 'Bugatti', model: 'Chiron Sport 110 ans', price: 16000000, colour: 'dark gray'},
];