Skip to content

Instantly share code, notes, and snippets.

Avatar

Raymon S raymonschouwenaar

View GitHub Profile
@raymonschouwenaar
raymonschouwenaar / index.html
Created Nov 13, 2020
JS Bin [Merge object pre ES2015] // source https://jsbin.com/kenaxoz
View index.html
<!DOCTYPE html>
<html>
<head>
<meta name="description" content="[Merge object pre ES2015]">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
@raymonschouwenaar
raymonschouwenaar / Merge-objects-pre-ES2015.js
Last active Nov 13, 2020
Merge Objects Pre ES2015/ES6
View Merge-objects-pre-ES2015.js
const obj1 = {key1: 'Key 1', value1: 'Value'};
const obj2 = {key2: 'Key 1', value2: 'Value'};
const mergedObj = {};
for (var attr in obj1) {
if(!mergedObj.hasOwnProperty(attr)) {
mergedObj[attr] = obj1[attr];
}
}
View dark-mode-switcher.js
const button = document.querySelector(".color-switch");
button.addEventListener("click", function() {
const body = document.querySelector("body");
body.classList.toggle("darkmode");
if (button) {
button.innerText = body.classList.contains("lightmode") ? "Dark" : "Light";
}
});
View dark-mode-switcher.ts
const button: HTMLButtonElement = document.querySelector(".color-switch");
button.addEventListener("click", function() {
const body: HTMLBodyElement = document.querySelector("body");
body.classList.toggle("darkmode");
if (button) {
button.innerText = body.classList.contains("lightmode") ? "Dark" : "Light";
}
});
View dark-color-scheme.css
.darkmode {
--text: #fff;
--links: #66e387;
--bg-start: #2c5364;
--bg-middle: #203a43;
--bg-end: #0f2027;
--background-fallback: #0f2027; /* fallback for old browsers */
--background-gradient-webkit: -webkit-linear-gradient(
to bottom,
var(--bg-start),
@raymonschouwenaar
raymonschouwenaar / product-list.component.scss
Created Jul 30, 2020
How To Build A Serverless Webshop - part 2
View product-list.component.scss
:host {
width: 100%;
--productSize: 400px;
}
.products__container {
display: grid;
grid-template-columns: repeat(2, 1fr);
grid-auto-rows: var(--productSize);
grid-gap: 1rem;
}
@raymonschouwenaar
raymonschouwenaar / product-item.component.html
Created Jul 30, 2020
How To Build A Serverless Webshop - part 2
View product-item.component.html
<ng-container *ngIf="productItem">
<section class="product__item">
<h1 class="product__title">{{ productItem.name }}</h1>
<ng-container *ngIf="productItem.image">
<figure class="product__figure">
<img
loading="lazy"
*ngIf="productItem.image"
width="640px"
class="product__image"
@raymonschouwenaar
raymonschouwenaar / product-item.component.ts
Created Jul 30, 2020
How To Build A Serverless Webshop - part 2
View product-item.component.ts
import { Component, OnInit } from '@angular/core'
import { ActivatedRoute } from '@angular/router'
import { ProductService } from '../../service/product.service'
import { ProductData } from '../../models/product'
@Component({
selector: 'app-product-item',
templateUrl: './product-item.component.html',
styleUrls: ['./product-item.component.scss'],
})
export class ProductItemComponent implements OnInit {
@raymonschouwenaar
raymonschouwenaar / product.service.ts
Created Jul 30, 2020
How To Build A Serverless Webshop - part 2
View product.service.ts
import { Injectable } from '@angular/core'
import { HttpClient } from '@angular/common/http'
import { Product, ProductData } from '../models/product'
import { environment } from 'src/environments/environment'
@Injectable({
providedIn: 'root',
})
export class ProductService {
constructor(private http: HttpClient) {}
public async getProducts(): Promise<ProductData[]> {
@raymonschouwenaar
raymonschouwenaar / product-by-id.js
Created Jul 30, 2020
How To Build A Serverless Webshop - part 2
View product-by-id.js
import { ProductService } from '../lib/product-service.js'
import { client, headers } from '../lib/config.js'
const service = new ProductService({ client })
exports.handler = async (event, context) => {
console.log('Function ` products ` invoked')
const { path } = event
const productId = path.substr(path.lastIndexOf('/') + 1)
if (!productId) {
return {
statusCode: 400,
You can’t perform that action at this time.