Skip to content

Instantly share code, notes, and snippets.

View P1xt's full-sized avatar
🏠
Working from home

P1xt P1xt

🏠
Working from home
  • Freelance
  • Minneapolis, MN, USA
View GitHub Profile
@P1xt
P1xt / bar-chart.component.ts
Created March 15, 2017 22:52
Snippet containing the relevant code for getting d3-tip to work in an Angular 2 app
var d3 = require("d3");
var d3tip = require('d3-tip')(d3);
//---------------------------------
const tip = d3tip
.attr('class', 'd3-tip')
.offset([-10, 0])
.html(function (d) {
const date = new Date(d[0]);
const year = date.getFullYear();
const month = months[date.getMonth()];
@P1xt
P1xt / geolocation.service.ts
Created March 15, 2017 16:51
Angular 2 service to pull location information from freegeoip.net
import { Injectable } from '@angular/core';
import { Http, Response, Jsonp, URLSearchParams } from '@angular/http';
@Injectable()
export class GeolocationService {
constructor(private jsonp: Jsonp) { }
getLocation = (position) => {
@P1xt
P1xt / all-time.component.html
Created March 14, 2017 02:55
Angular 2 *ngFor loop illustrating looping through an array of objects to populate an html table
<section class="leader-table">
<h2>All Time Leaderboard</h2>
<table class="table-hover table-striped">
<thead>
<tr>
<th colspan="2">Camper</th>
<th>Points in past 30 days</th>
<th>All time Points</th>
</tr>
</thead>
@P1xt
P1xt / all-time.component.ts
Created March 14, 2017 02:46
Angular 2 - component subscribing to data provided by service
import { Component, OnInit } from '@angular/core';
import { Camper } from '../../classes/camper';
import { AllTimeService } from '../../services/all-time.service';
@Component({
selector: 'app-all-time',
templateUrl: './all-time.component.html',
styleUrls: ['./all-time.component.scss']
})
export class AllTimeComponent implements OnInit {
@P1xt
P1xt / all-time.service.ts
Created March 14, 2017 02:41
Simple Angular 2 Service to read data from an http get request
import { Injectable } from '@angular/core';
import { Http, Response } from '@angular/http';
@Injectable()
export class AllTimeService {
constructor(private http: Http) { }
getCampers = () => {
let apiUrl: string = 'https://fcctop100.herokuapp.com/api/fccusers/top/alltime';
@P1xt
P1xt / app.component.html
Created March 13, 2017 18:17
Angular 2 - two way data binding for markdown previewer
<div id="pre-marked" class="preview">
<textarea [(ngModel)]="input" name="text" class="text" ></textarea>
</div>
<div></div>
<div id="marked" class="preview">
<div innerHtml={{input|mark}} name="text-marked" class="text" ></div>
</div>
@P1xt
P1xt / mark.pipe.ts
Last active March 13, 2017 18:10
Angular 2 pipe to use the marked npm package to convert markdown
import { Pipe, PipeTransform } from '@angular/core';
var marked = require('marked');
@Pipe({
name: 'mark'
})
export class MarkPipe implements PipeTransform {
transform(value: any, args?: any): any {
marked.setOptions({ sanitize: true});
@P1xt
P1xt / bonfire-exact-change.js
Created December 9, 2015 18:10 — forked from anonymous/bonfire-exact-change.js
http://www.freecodecamp.com/p1xt 's solution for Bonfire: Exact Change
// Bonfire: Exact Change
// Author: @p1xt
// Challenge: http://www.freecodecamp.com/challenges/bonfire-exact-change
// Learn to Code at Free Code Camp (www.freecodecamp.com)
function drawer(price, cash, cid) {
var change = [];
var types = ['PENNY',
'NICKEL',
'DIME',
@P1xt
P1xt / diff.js
Last active November 21, 2015 05:07
Javascript function to return an array containing the items that occur in one but not both input arrays. Need to refactor this.
/**
* diff two arrays - return the elements that occur in one but not both input arrays
* note to self: This works but there has to be a better (more performant) solution
* Revisit this and look into removing items from both arrays as they're discovered
**/
function diff(arr1, arr2) {
// get the items from arr1 that aren't in arr2
var filteredArr1 = arr1.filter( function( el ) {
return arr2.indexOf( el ) < 0;
} );