harunpehlivan

<div class="wrapper">
  <h1>What The Hex?</h1>
  <div class="inner">
    <p>A hex code is a 6-digit number used to represent colors on the web.</p>
    <p>Made up of red, green, and blue, the hex code uses 16 digits from 0 to F where 00 represents no color and FF represents full color.<br/><br/><strong>Change the digits below to see how it affects the background color.</strong></p>
    <form class="form-inline">
      <span class="hashtag">#</span>
      <div class="form-group red">
        <span>Red</span>
        <select class="form-control" id="red1">

harunpehlivan

Chance the Sampler

Yet another ridiculous Chance the Rapper thing. Works best in Chrome or Safari. Firefox is a slightly subpar experience. It hardly works on mobile but it is somehow better than Firefox.

A Pen by HARUN PEHLİVAN on CodePen.

License.

harunpehlivan

<div id=bg></div>
<svg id=svg></svg>
<header>
  <input type=text id=playlist placeholder="SoundCloud Playlist URL" />
  <button id=load>Load Playlist</button>
</header>  

<footer>
  <a href="http://harunpehlivan.fm.tc/">
    <img src="https://res.cloudinary.com/tercuman-b-l-m-merkez/image/upload/v1606077286/favicon_bi8c66.png" />

harunpehlivan

<input id="help" type="checkbox" />
<label for="help"></label>
<footer>
  <div>
    <p>
      This is a mechanism to create secret teams where players only know the identity of those on their team. 
      Enter the names and team size and press “go”. The first player will be presented with a button.
      When the player clicks that button it will reveal their secret team. The player then hits a button
      to finish, and the next player’s button will appear.
    </p>

harunpehlivan

CSS: Keyboard

A functional keyboard using CSS

A Pen by HARUN PEHLİVAN on CodePen.

License.

harunpehlivan

CSS: checkbox Phone Number Input

Inspired by this amazing twitter thread.

CSS that can parse checkboxes to determine numbers because science.

A Pen by HARUN PEHLİVAN on CodePen.

License.

harunpehlivan

<header id="intro">
  <section>
    <h1>Procedurally Generated Music</h1>
    <p>
      This will infinitely generate a random song based on the <em>seed</em> that you provide it with. 
      Procedural generation ensures that the song will always be the exact 
      same song for the seed data you provide, but will be unique to any other seed.
    </p>
    <p>
      Type anything into the input below and hit "Load" to generate and hear your song.

harunpehlivan

CSS: Searching a Dataset with Filters

Searching and filtering a list with CSS. In order to have three characters of specificity, I parse the specific list of words to get all relevant permutations instead of any combination of the full alphabet. This limits the potential 1, 2, and 3 letter combinations to 1,245 permutations instead of 18,278 which allows its complexity to be digested by CodePen.

The filters map to attribute selector wildcards in CSS, so the "finding" of elements is actually fairly simple.

A Pen by HARUN PEHLİVAN on CodePen.

License.

harunpehlivan

<div>
  <canvas id="canvas" height="1600" width="1600"></canvas>
  <canvas id="ref" height="1600" width="1600"></canvas>
</div>

harunpehlivan

<header>
  <h1>Metered</h1>
  <h2>Jake Albaugh</h2>
</header>
<main></main>
<aside>
  <p>
    This is a musical composition with five patterns. 
    Each pattern is made up of two measures in different time signatures.
    The drum beat changes time signatures to highlight a specific pattern.