Skip to content

Instantly share code, notes, and snippets.

View cfleschhut's full-sized avatar
🌍
#NeverStopLearning

Christian Fleschhut cfleschhut

🌍
#NeverStopLearning
View GitHub Profile
module CommentBox exposing (main)
import Browser
import Html exposing (..)
import Html.Attributes exposing (..)
import Html.Events exposing (..)
main : Program () Model Msg
main =
@cfleschhut
cfleschhut / index.html
Last active June 2, 2017 08:55
Animated image fade-in
<div class="content">
<h1>Lorem ipsum</h1>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error velit in, enim voluptatum placeat, esse officiis dicta, dignissimos sapiente ipsum aut. Itaque ipsa magnam sint aspernatur illum, sed libero vel.</p>
<h2>Lorem ipsum dolor</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error velit in, enim voluptatum placeat, esse officiis dicta, dignissimos sapiente ipsum aut. Itaque ipsa magnam sint aspernatur illum, sed libero vel. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Error velit in, enim voluptatum placeat, esse officiis dicta, dignissimos sapiente ipsum aut. Itaque ipsa magnam sint aspernatur illum, sed libero vel.</p>
<p class="placeholder"></p>
<p>
<img src="http://static.highsnobiety.com/wp-content/uploads/2016/10/27194553/Colette-Coach-Casetify-7-640x427.jpg" data="inview-fading">
</p>

Javascript / Senior Front-end Developer

Interview Test

Share your answers as Markdown through Gist and include code as Markdown code blocks. No worries, there is more than one way to answer the questions 👍

Q1

Write a function (without using external libraries) in ES6 that converts the user entered date formatted as M/D/YYYY to the format YYYYMMDD which is required by an API endpoint. It should convert ”12/31/2016” to ”20161231” for example. Furthermore, it should validate that the passed date is formatted correctly using a Regular Expression (let's assume all months have 31 days). Write unit tests for your convert function using the syntax of a BDD-style test framework of your choice.

mocha.setup('bdd');
@cfleschhut
cfleschhut / example.html
Created January 25, 2012 18:08
Examples for: querySelector, elem.matchesSelector, elem.classList, elem.nextElementSibling, DOMContentLoaded, document.readyState
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>NetTuts: From jQuery to JavaScript</title>
<script type="text/javascript">
var addEvent = (function () {
var filter = function(el, type, fn) {
for ( var i = 0, len = el.length; i < len; i++ ) {
@cfleschhut
cfleschhut / railstutorial.rb
Created November 27, 2011 13:50
Ruby Snippets
# Ruby classes
# Class inheritance
class Word < String
def palindrome?
self == self.reverse
end
end
@cfleschhut
cfleschhut / index.html
Created September 11, 2011 15:40
jQuery Mobile Test [+ Geolocation, + Local Storage]
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>t3n jQuery Mobile Geolocation</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.css" />
<script src="http://code.jquery.com/jquery-1.6.2.js"></script>
<script src="http://code.jquery.com/mobile/1.0b3/jquery.mobile-1.0b3.js"></script>
<script type="text/javascript">
@cfleschhut
cfleschhut / fiddle.css
Created August 7, 2011 19:49
CSS3 Button
body { font: 250%/1.2 sans-serif; background: #eee; }
a { color: #fff; text-decoration: none; outline: none; }
.btn {
display: inline-block;
border-radius: 8px;
box-shadow: 0 8px 0 #1a74a1,
0 15px 20px rgba(0, 0, 0, 0.35);
-moz-transition: box-shadow 0.2s ease-in-out;
-webkit-transition: box-shadow 0.2s ease-in-out;
}
@cfleschhut
cfleschhut / fiddle.css
Created July 27, 2011 22:05
CSS3 CardFlip
body {
margin: 0; padding: 0; background: #eee; color: #444;
}
#container {
width: 320px; height: 300px;
background: #fff; margin: 20px auto; padding: 30px 0;
-webkit-perspective: 600;
}
#card {
width: 200px; height: 300px;
@cfleschhut
cfleschhut / fiddle.css
Created July 15, 2011 14:05
Test: jsFiddle GitHub Integration
body { background: url(http://www.themaninblue.com/experiment/Cubescape/images/grid.gif); }
#box {
position: absolute;
}
.top {
width: 20px; height: 20px; background: hsl(40, 85%, 70%);
-moz-transform: rotate(45deg) skew(-15deg, -15deg);
-webkit-transform: rotate(45deg) skew(-15deg, -15deg);
}
.left {
// Getting an Object’s enumerable properties (ES5)
var obj = {};
Object.defineProperty(obj, "foo", { value: 2, enumerable: true });
Object.defineProperty(obj, "bar", { value: 3, enumerable: true });
Object.defineProperty(obj, "baz", { value: 4, enumerable: false });
Object.keys(obj).forEach(function(key) {
console.log(key, obj[key]);
});