cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

Quick-add: + add another resource

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              $girl = deeppink
$boy = #3498db

*
  box-sizing border-box

header
  background $boy
  margin-bottom 2rem
  
main
  padding 0 2rem

input[type='text']
  margin 1rem
  background white
  font-size 1.3rem
  border none
  box-shadow inset 0 0 3px rgba(0,0,0,0.3)
  border-radius 3px
  padding 0 2rem
  width calc(100% - 2rem)
  height 4rem
  
ul
  padding 0
  
li
  position relative
  list-style none
  display inline-block
  padding .25rem .75rem
  margin 2px
  border-radius 3px
  
  &:hover
    cursor pointer
  
  &.girl
    background lighten($girl, 35)
    color darken($girl, 25)
    
    &:hover
      background lighten($girl, 30)
    
  &.boy
    background lighten($boy, 25)
    color darken($boy, 25)
    
    &:hover
      background lighten($boy, 20)
      
.favourites
  
  li:hover:before
    content '\00D7'
    position absolute
    top -.5rem
    right -.3rem
    width 1rem
    height 1rem
    z-index 2
    text-align center
    line-height 1
    font-size .9rem
    vertical-align middle
    border-radius 50%
    background tomato
    border solid 2px white
    color white
    box-shadow 0 0 6px rgba(black, 0.3)
  
  h4
    padding 1rem 0
    font-weight 400
    font-size 1.3rem
    margin 0
    color darken(white, 30)
    
  hr 
    border-bottom 0
    border-top solid 1px darken(white, 10)
    margin 1.75rem 0
    
.credit
  padding 1rem 0
  color darken(white, 30)
  
  a
    color $boy
    
button
  background #d7d7d7
  color #3b3b3b
  padding .6rem 1rem
  font-size .8rem
  border solid 1px #c7c7c7
  margin 1rem 0
  box-shadow 0 3px 10px rgba(black, 0.1)
  border-radius 3px
  outline none
  
  &:hover
    background #ddd
            
          
!
            
              const { Component } = React

/* ############################ */
/* ##### Single baby name ##### */
/* ############################ */

const Name = ({ 
  id, 
  info, 
  handleFavourite 
}) => (
  <li
    className={info.sex}
    onClick={() => handleFavourite(id)}>
    {info.name}
  </li>
)

/* ##################### */
/* ##### Shortlist ##### */
/* ##################### */

const ShortList = ({
  favourites,
  data,
  deleteFavourite
}) => {
  const hasFavourites = (favourites.length > 0)
  const favList = favourites.map((fav, i) => {
    return (
      <Name 
        id={i}
        key={i}
        info={data[fav]}
        handleFavourite={(id) => deleteFavourite(id)}
      />
    )
  })
  return (
    <div className="favourites">
      <h4>
        {hasFavourites 
          ? 'Your Shortlist'
          : 'Click on a name to shortlist it..'
        }
      </h4>
      <ul>
        {favList}
      </ul>
      {hasFavourites && <hr/>}
    </div>
  )
}

/* ########################### */
/* ##### Baby names list ##### */
/* ########################### */

const NamesList = ({ 
  data, 
  filter, 
  favourites, 
  addFavourite 
}) => { 
  const input = filter.toLowerCase()
  
  // Gather list of names
  const names = data
    // filtering out the names that...
    .filter((person, i) => {
      return (
        // ...are already favourited
        favourites.indexOf(person.id) === -1
        // ...are not matching the current search value
        && !person.name.toLowerCase().indexOf(input)
      )
    })
    // ...output a <Name /> component for each name
    .map((person, i) => {
    // only display names that match current input string
      return (
        <Name 
          id={person.id}
          key={i}
          info={person}
          handleFavourite={(id) => addFavourite(id)}
        />
      )
    })
  
  /* ##### the component's output ##### */
  return ( 
    <ul> 
      {names}
    </ul>
  )
}

/* ###################### */
/* ##### Search bar ##### */
/* ###################### */

// need a component class here
// since we are using `refs`
class Search extends Component {
  render() {
    const { filterVal, filterUpdate} = this.props
    return (
      <form>
        <input 
          type='text'
          ref='filterInput'
          placeholder='Type to filter..'
          // binding the input value to state
          value={filterVal}
          onChange={() => {
           filterUpdate(this.refs.filterInput.value) 
          }}
        /> 
      </form>
    )
  }
}

/* ############################## */
/* ##### Main app component ##### */
/* ############################## */

class App extends Component {
  constructor(props) {
    super(props)
    this.state = {
      filterText: '',
      favourites: []
    }
  }
  
  // update filterText in state when user types 
  filterUpdate(value) {
    this.setState({
      filterText: value
    });
  }
  
  // add clicked name ID to the favourites array
  addFavourite(id) {
    const newSet = this.state.favourites.concat([id])
    this.setState({
      favourites: newSet
    })
  }
  
  // remove ID from the favourites array
  deleteFavourite(id) {
    const { favourites } = this.state
    const newList = [
      ...favourites.slice(0, id),
      ...favourites.slice(id + 1)
      ]
    this.setState({
      favourites: newList
    })
  }
  
  render() {
    const hasSearch = this.state.filterText.length > 0
    return ( 
      <div>
        <header>
          <Search
            filterVal={this.state.filterText}
            filterUpdate={this.filterUpdate.bind(this)}
          /> 
        </header>
        <main>
        
          <ShortList 
            data={this.props.data} 
            favourites={this.state.favourites}
            deleteFavourite={this.deleteFavourite.bind(this)}
          />

          <NamesList 
            data={this.props.data}
            filter={this.state.filterText}
            favourites={this.state.favourites}
            addFavourite={this.addFavourite.bind(this)}
          />
          {/* 
            Show only if user has typed in search.
            To reset the input field, we pass an 
            empty value to the filterUpdate method
          */}
          {hasSearch &&
            <button
              onClick={this.filterUpdate.bind(this, '')}>
              Clear Search
            </button>
          }

          <div className="credit">
            Source of names list: <a href="https://www.yahoo.com/parenting/atticus-tops-baby-names-2015-124073377716.html" target="_blank">Yahoo - Top Baby Names in 2015</a>
          </div>
        </main>
      </div>
    )
  }
}

/* ########################## */
/* ##### The names data ##### */
/* ########################## */

const PEOPLE = [
  {
    id: 0,
    name: 'Aria',
    sex: 'girl'
  }, {
    id: 1,
    name: 'Logan',
    sex: 'boy'
  }, {
    id: 2,
    name: 'Quinn',
    sex: 'girl'
  }, {
    id: 3,
    name: 'Kai',
    sex: 'boy'
  }, {
    id: 4,
    name: 'Dashiell',
    sex: 'boy'
  }, {
    id: 5,
    name: 'John',
    sex: 'boy'
  }, {
    id: 6,
    name: 'Seraphina',
    sex: 'girl'
  }, {
    id: 7,
    name: 'Caroline',
    sex: 'girl'
  }, {
    id: 8,
    name: 'Tobias',
    sex: 'boy'
  }, {
    id: 9,
    name: 'Harper',
    sex: 'girl'
  }, {
    id: 10,
    name: 'Mabe',
    sex: 'girl'
  }, {
    id: 11,
    name: 'Iris',
    sex: 'girl'
  }, {
    id: 12,
    name: 'Beatrice',
    sex: 'girl'
  }, {
    id: 13,
    name: 'Knox',
    sex: 'boy'
  }, {
    id: 14,
    name: 'August',
    sex: 'boy'
  }, {
    id: 15,
    name: 'Poppy',
    sex: 'girl'
  }, {
    id: 16,
    name: 'Aurora',
    sex: 'girl'
  }, {
    id: 17,
    name: 'Wyatt',
    sex: 'boy'
  }, {
    id: 18,
    name: 'Ezra',
    sex: 'boy'
  }, {
    id: 19,
    name: 'Emily',
    sex: 'girl'
  }, {
    id: 20,
    name: 'Sebastian',
    sex: 'boy'
  }, {
    id: 21,
    name: 'Gabriel',
    sex: 'boy'
  }, {
    id: 22,
    name: 'Charlie',
    sex: 'boy'
  }, {
    id: 23,
    name: 'Isabella',
    sex: 'girl'
  }, {
    id: 24,
    name: 'Elliot',
    sex: 'boy'
  }, {
    id: 25,
    name: 'Declan',
    sex: 'boy'
  }, {
    id: 26,
    name: 'Benjamin',
    sex: 'boy'
  }, {
    id: 27,
    name: 'Gemma',
    sex: 'girl'
  }, {
    id: 28,
    name: 'Lucas',
    sex: 'boy'
  }, {
    id: 29,
    name: 'Chloe',
    sex: 'girl'
  }, {
    id: 30,
    name: 'Khaleesi',
    sex: 'girl'
  }, {
    id: 31,
    name: 'Austin',
    sex: 'boy'
  }, {
    id: 32,
    name: 'Matilda',
    sex: 'girl'
  }, {
    id: 33,
    name: 'Grayson',
    sex: 'boy'
  }, {
    id: 34,
    name: 'Beckett',
    sex: 'boy'
  }, {
    id: 35,
    name: 'Nicholas',
    sex: 'boy'
  }, {
    id: 36,
    name: 'Ronan',
    sex: 'boy'
  }, {
    id: 37,
    name: 'Eliza',
    sex: 'girl'
  }, {
    id: 38,
    name: 'Imogen',
    sex: 'girl'
  }, {
    id: 39,
    name: 'Amelia',
    sex: 'girl'
  }, {
    id: 40,
    name: 'Nathaniel',
    sex: 'boy'
  }, {
    id: 41,
    name: 'Ryker',
    sex: 'boy'
  }, {
    id: 42,
    name: 'Olivia',
    sex: 'girl'
  }, {
    id: 43,
    name: 'Leo',
    sex: 'boy'
  }, {
    id: 44,
    name: 'Zane',
    sex: 'boy'
  }, {
    id: 45,
    name: 'Grace',
    sex: 'girl'
  }, {
    id: 46,
    name: 'Owen',
    sex: 'boy'
  }, {
    id: 47,
    name: 'Clara',
    sex: 'girl'
  }, {
    id: 48,
    name: 'Julian',
    sex: 'boy'
  }, {
    id: 49,
    name: 'Caleb',
    sex: 'boy'
  }, {
    id: 50,
    name: 'Nolan',
    sex: 'boy'
  }, {
    id: 51,
    name: 'Roman',
    sex: 'boy'
  }, {
    id: 52,
    name: 'Felix',
    sex: 'boy'
  }, {
    id: 53,
    name: 'Aryan',
    sex: 'boy'
  }, {
    id: 54,
    name: 'Lily',
    sex: 'girl'
  }, {
    id: 55,
    name: 'Sloane',
    sex: 'girl'
  }, {
    id: 56,
    name: 'Zoe',
    sex: 'girl'
  }, {
    id: 57,
    name: 'Penelope',
    sex: 'girl'
  }, {
    id: 58,
    name: 'Evangeline',
    sex: 'girl'
  }, {
    id: 59,
    name: 'Julia',
    sex: 'girl'
  }, {
    id: 60,
    name: 'Theo',
    sex: 'boy'
  }, {
    id: 61,
    name: 'Nathan',
    sex: 'boy'
  }, {
    id: 62,
    name: 'Juliet',
    sex: 'girl'
  }, {
    id: 63,
    name: 'Josiah',
    sex: 'boy'
  }, {
    id: 64,
    name: 'Harrison',
    sex: 'boy'
  }, {
    id: 65,
    name: 'Archer',
    sex: 'boy'
  }, {
    id: 66,
    name: 'Ellie',
    sex: 'girl'
  }, {
    id: 67,
    name: 'Rowan',
    sex: 'boy'
  }, {
    id: 68,
    name: 'Eden',
    sex: 'girl'
  }, {
    id: 69,
    name: 'Rhys',
    sex: 'boy'
  }, {
    id: 70,
    name: 'Evelyn',
    sex: 'girl'
  }, {
    id: 71,
    name: 'Isabel',
    sex: 'girl'
  }, {
    id: 72,
    name: 'Mae',
    sex: 'girl'
  }, {
    id: 73,
    name: 'Mila',
    sex: 'girl'
  }, {
    id: 74,
    name: 'Emmett',
    sex: 'boy'
  }, {
    id: 75,
    name: 'Rose',
    sex: 'girl'
  }, {
    id: 76,
    name: 'Axel',
    sex: 'boy'
  }, {
    id: 77,
    name: 'Willow',
    sex: 'girl'
  }, {
    id: 78,
    name: 'Cora',
    sex: 'girl'
  }, {
    id: 79,
    name: 'David',
    sex: 'boy'
  }, {
    id: 80,
    name: 'Miles',
    sex: 'boy'
  }, {
    id: 81,
    name: 'Clementine',
    sex: 'girl'
  }, {
    id: 82,
    name: 'Sophia',
    sex: 'girl'
  }, {
    id: 83,
    name: 'Eloise',
    sex: 'girl'
  }, {
    id: 84,
    name: 'Everly',
    sex: 'girl'
  }, {
    id: 85,
    name: 'Maeve',
    sex: 'girl'
  }, {
    id: 86,
    name: 'Nora',
    sex: 'girl'
  }, {
    id: 87,
    name: 'Lucy',
    sex: 'girl'
  }, {
    id: 88,
    name: 'Adeline',
    sex: 'girl'
  }, {
    id: 89,
    name: 'Hazel',
    sex: 'girl'
  }, {
    id: 90,
    name: 'Oscar',
    sex: 'boy'
  }, {
    id: 91,
    name: 'Ruby',
    sex: 'girl'
  }, {
    id: 92,
    name: 'Silas',
    sex: 'boy'
  }, {
    id: 93,
    name: 'Mia',
    sex: 'girl'
  }, {
    id: 94,
    name: 'Jude',
    sex: 'boy'
  }, {
    id: 95,
    name: 'Evie',
    sex: 'girl'
  }, {
    id: 96,
    name: 'Luna',
    sex: 'girl'
  }, {
    id: 97,
    name: 'Wren',
    sex: 'girl'
  }, {
    id: 98,
    name: 'Hadley',
    sex: 'girl'
  }, {
    id: 99,
    name: 'Ivy',
    sex: 'girl'
  }, {
    id: 100,
    name: 'Lachlan',
    sex: 'boy'
  }, {
    id: 101,
    name: 'Emmeline',
    sex: 'girl'
  }, {
    id: 102,
    name: 'Hugo',
    sex: 'boy'
  }, {
    id: 103,
    name: 'Stella',
    sex: 'girl'
  }, {
    id: 104,
    name: 'Maddox',
    sex: 'boy'
  }, {
    id: 105,
    name: 'Asher',
    sex: 'boy'
  }, {
    id: 106,
    name: 'Jayden',
    sex: 'boy'
  }, {
    id: 107,
    name: 'Daisy',
    sex: 'girl'
  }, {
    id: 108,
    name: 'Callum',
    sex: 'boy'
  }, {
    id: 109,
    name: 'Jasper',
    sex: 'boy'
  }, {
    id: 110,
    name: 'Emma',
    sex: 'girl'
  }, {
    id: 111,
    name: 'Claire',
    sex: 'girl'
  }, {
    id: 112,
    name: 'Lola',
    sex: 'girl'
  }, {
    id: 113,
    name: 'Jonah',
    sex: 'boy'
  }, {
    id: 114,
    name: 'Sienna',
    sex: 'girl'
  }, {
    id: 115,
    name: 'Ada',
    sex: 'girl'
  }, {
    id: 116,
    name: 'Scarlett',
    sex: 'girl'
  }, {
    id: 117,
    name: 'Sawyer',
    sex: 'boy'
  }, {
    id: 118,
    name: 'Hannah',
    sex: 'girl'
  }, {
    id: 119,
    name: 'Soren',
    sex: 'boy'
  }, {
    id: 120,
    name: 'Maya',
    sex: 'girl'
  }, {
    id: 121,
    name: 'Arabella',
    sex: 'girl'
  }, {
    id: 122,
    name: 'Beau',
    sex: 'boy'
  }, {
    id: 123,
    name: 'Maxwell',
    sex: 'boy'
  }, {
    id: 124,
    name: 'Anna',
    sex: 'girl'
  }, {
    id: 125,
    name: 'Lila',
    sex: 'girl'
  }, {
    id: 126,
    name: 'Sadie',
    sex: 'girl'
  }, {
    id: 127,
    name: 'James',
    sex: 'boy'
  }, {
    id: 128,
    name: 'Arthur',
    sex: 'boy'
  }, {
    id: 129,
    name: 'Aurelia',
    sex: 'girl'
  }, {
    id: 130,
    name: 'Samuel',
    sex: 'boy'
  }, {
    id: 131,
    name: 'Atticus',
    sex: 'boy'
  }, {
    id: 132,
    name: 'Bodhi',
    sex: 'boy'
  }, {
    id: 133,
    name: 'Elijah',
    sex: 'boy'
  }, {
    id: 134,
    name: 'Griffin',
    sex: 'boy'
  }, {
    id: 135,
    name: 'Graham',
    sex: 'boy'
  }, {
    id: 136,
    name: 'Weston',
    sex: 'boy'
  }, {
    id: 137,
    name: 'Hudson',
    sex: 'boy'
  }, {
    id: 138,
    name: 'Henry',
    sex: 'boy'
  }, {
    id: 139,
    name: 'Levi',
    sex: 'boy'
  }, {
    id: 140,
    name: 'Nova',
    sex: 'girl'
  }, {
    id: 141,
    name: 'Margaret',
    sex: 'girl'
  }, {
    id: 142,
    name: 'Adelaide',
    sex: 'girl'
  }, {
    id: 143,
    name: 'Audrey',
    sex: 'girl'
  }, {
    id: 144,
    name: 'Jane',
    sex: 'girl'
  }, {
    id: 145,
    name: 'Alice',
    sex: 'girl'
  }, {
    id: 146,
    name: 'Simon',
    sex: 'boy'
  }, {
    id: 147,
    name: 'Ella',
    sex: 'girl'
  }, {
    id: 148,
    name: 'Violet',
    sex: 'girl'
  }, {
    id: 149,
    name: 'Thomas',
    sex: 'boy'
  }, {
    id: 150,
    name: 'Madeline',
    sex: 'girl'
  }, {
    id: 151,
    name: 'Genevieve',
    sex: 'girl'
  }, {
    id: 152,
    name: 'Oliver',
    sex: 'boy'
  }, {
    id: 153,
    name: 'Lydia',
    sex: 'girl'
  }, {
    id: 154,
    name: 'Ethan',
    sex: 'boy'
  }, {
    id: 155,
    name: 'Liam',
    sex: 'boy'
  }, {
    id: 156,
    name: 'Alexander',
    sex: 'boy'
  }, {
    id: 157,
    name: 'Wesley',
    sex: 'boy'
  }, {
    id: 158,
    name: 'William',
    sex: 'boy'
  }, {
    id: 159,
    name: 'Harlow',
    sex: 'girl'
  }, {
    id: 160,
    name: 'Isaac',
    sex: 'boy'
  }, {
    id: 161,
    name: 'Eliana',
    sex: 'girl'
  }, {
    id: 162,
    name: 'Esme',
    sex: 'girl'
  }, {
    id: 163,
    name: 'Elizabeth',
    sex: 'girl'
  }, {
    id: 164,
    name: 'Xavier',
    sex: 'boy'
  }, {
    id: 165,
    name: 'Piper',
    sex: 'girl'
  }, {
    id: 166,
    name: 'Andrew',
    sex: 'boy'
  }, {
    id: 167,
    name: 'Abigail',
    sex: 'girl'
  }, {
    id: 168,
    name: 'Olive',
    sex: 'girl'
  }, {
    id: 169,
    name: 'Everett',
    sex: 'boy'
  }, {
    id: 170,
    name: 'Lincoln',
    sex: 'boy'
  }, {
    id: 171,
    name: 'Eli',
    sex: 'boy'
  }, {
    id: 172,
    name: 'Elodie',
    sex: 'girl'
  }, {
    id: 173,
    name: 'Josephine',
    sex: 'girl'
  }, {
    id: 174,
    name: 'Thea',
    sex: 'girl'
  }, {
    id: 175,
    name: 'Emilia',
    sex: 'girl'
  }, {
    id: 176,
    name: 'Florence',
    sex: 'girl'
  }, {
    id: 177,
    name: 'Ava',
    sex: 'girl'
  }, {
    id: 178,
    name: 'Isla',
    sex: 'girl'
  }, {
    id: 179,
    name: 'Willa',
    sex: 'girl'
  }, {
    id: 180,
    name: 'Milo',
    sex: 'boy'
  }, {
    id: 181,
    name: 'Charlotte',
    sex: 'girl'
  }, {
    id: 182,
    name: 'Noah',
    sex: 'boy'
  }, {
    id: 183,
    name: 'Matthew',
    sex: 'boy'
  }, {
    id: 184,
    name: 'Luca',
    sex: 'boy'
  }, {
    id: 185,
    name: 'Finn',
    sex: 'boy'
  }, {
    id: 186,
    name: 'Cordelia',
    sex: 'girl'
  }, {
    id: 187,
    name: 'Theodore',
    sex: 'boy'
  }, {
    id: 188,
    name: 'George',
    sex: 'boy'
  }, {
    id: 189,
    name: 'Jackson',
    sex: 'boy'
  }, {
    id: 190,
    name: 'Jacob',
    sex: 'boy'
  }, {
    id: 191,
    name: 'Eleanor',
    sex: 'girl'
  }, {
    id: 192,
    name: 'Daniel',
    sex: 'boy'
  }, {
    id: 193,
    name: 'Ryder',
    sex: 'boy'
  }, {
    id: 194,
    name: 'Annabelle',
    sex: 'girl'
  }, {
    id: 195,
    name: 'Zachary',
    sex: 'boy'
  }, {
    id: 196,
    name: 'Luke',
    sex: 'boy'
  }, {
    id: 197,
    name: 'Jack',
    sex: 'boy'
  }, {
    id: 198,
    name: 'Charles',
    sex: 'boy'
  }, {
    id: 199,
    name: 'Bennett',
    sex: 'boy'
  }
]

ReactDOM.render( 
  <App data={PEOPLE} />,
  document.getElementById('root')
);
            
          
!
999px
Loading ..................

Console