JonathanDn

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'maxLength'
})
export class MaxLengthPipe implements PipeTransform {
  transform(value: string, limit: number){
      if (value.length > limit) return value.substring(0, limit) + '...';
        else return value;
  }

JonathanDn

// component importing and mutating state from store.js (all getters, mutations, actions)
// reference = https://austincooper.dev/2019/08/09/vue-observable-state-store/
<template>
    <div>
        <div>Radius: {{ radius }}</div>
        <div>Color: {{ color }}</div>
        <button @:click="setRadius(0)">Reset radius</button>
        <button @:click="fetchColorFromApi">Fetch color</button>
    </div>
</template>

JonathanDn

<div class="canvas">
    <div id="totalCounter" class="total-counter"></div>

    <div id="clap" class="clap-container">
        <i class="clap-icon fa fa-hand-paper-o"></i>
    </div>
    
    <div id="clicker" class="click-counter">
        <span class="counter"></span>
    </div>

JonathanDn

import {Component, OnInit, Input, ChangeDetectionStrategy} from '@angular/core';
import * as d3 from 'd3';
import {Observable} from "rxjs";
import {UIConsts} from "../../../../shared/app.consts";

@Component({
    selector: 'timeline',
    styleUrls: ['timeline.scss'],
    template: `
        <div class="timeline-svg-container">

JonathanDn

body {
  margin: 0;
  overflow: hidden;
}

JonathanDn

import { Pipe, PipeTransform } from '@angular/core';

@Pipe({
    name: 'getInitials'
})

export class GetInitialsPipe implements PipeTransform {
  transform(value: string) {
    return value.replace(/[a-z]/g, '').replace(' ', '');
  }

JonathanDn

body {
  background: cyan;
}

@keyframes donut-spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);

JonathanDn

/* 
  ##Device = Desktops
  ##Screen = 1281px to higher resolution desktops
*/

@media (min-width: 1281px) {
  
  //CSS
  

JonathanDn

/**
 * Rotates coordinate system for velocities
 *
 * Takes velocities and alters them as if the coordinate system they're on was rotated
 *
 * @param  Object | velocity | The velocity of an individual particle
 * @param  Float  | angle    | The angle of collision between two objects in radians
 * @return Object | The altered x and y velocities after the coordinate system has been rotated
 */

JonathanDn

body {
  margin: 0;
  overflow: hidden;
}