CodepenExamples

Source code for codepen experiments that I have done

1. Tribute Page

Tribute Page is based on

• Bootstrap 3.3.6

2. Personal Portfolio

Personal Portfolio is based on

• Bootstrap 3.3.6
• Font Awesome 4.5.0
• jQuery 2.2.2
• Bootstrap scrollspy

3. Random Quote Machine

Random Quote Machine is based on

• Bootstrap 3.3.6
• Font Awesome 4.5.0
• jQuery 2.2.2
• Quotes on design JSON REST API

4. Local Weather

Local Weather is based on

• Bootstrap 3.3.6
• jQuery 2.2.2
• ipinfo.io JSON API
• Dark Sky API
• Skycons

5. Wikipedia Search

Wikipedia Search is based on

• Materialize
• jQuery 2.2.2
• Wikipedia's API

6. Twitch.tv Status

Twitch.tv Status is based on

• Materialize
• jQuery 2.2.2
• Twitch.tv's JSONP API

7. Calculator

Calculator is based on

• Materialize
• jQuery 2.2.2

8. Pomodoro Clock

Pomodoro Clock is based on

• Materialize
• jQuery 2.2.2
• moment.js 2.13.0

9. Tic Tac Toe Game

Tic Tac Toe Game is based on

• Materialize
• jQuery 2.2.2
• Case Study on Tic-Tac-Toe Part 2: With AI

10. Simon Game

Simon Game is based on

• Materialize
• jQuery 2.2.2

11. Bar Chart

Bar Chart is based on

• d3.js v3

12. Scatterplot Graph

Scatterplot Graph is based on

• d3.js v3

13. Heat Map

Heat Map is based on

• d3.js v3

14. Meteorite Landing

Map Data Across the Globe. Meteorite landing (zoom) is based on

• d3.js v3
• topojson v1

15. National Contiguity

National Contiguity is based on

• d3.js 3.5.17
• Flag Sprites

16. Markdown Previewer

Markdown Previewer is based on

• jQuery 2.2.2
• Bootstrap 3.3.6
• React v15.0.2
• ReactDOM v15.0.2
• marked 0.3.5
• Sass
• Babel

17. Camper Leaderboard

Camper Leaderboard is based on

• jQuery 2.2.2
• Materialize
• React v15.0.2
• ReactDOM v15.0.2
• Sass
• Babel

18. Recipe Box

Recipe Box is based on

• jQuery 2.2.2
• Materialize
• React v15.0.2
• ReactDOM v15.0.2
• Sass
• Babel

19. Game of Life

Game of Life is based on

• jQuery 2.2.2
• Materialize
• React v15.0.2
• ReactDOM v15.0.2
• Sass
• Babel
• Conway's Game of Life

20. Roguelike Dungeon Crawler Game

Roguelike Dungeon Crawler Game is based on

• jQuery 2.2.4
• React 15.1.0
• ReactDOM 15.1.0
• Emoji CSS
• Sass
• Babel

21. Horizontal Splitter

Horizontal Splitter is based on

• jQuery 2.2.4

22. Horizontal Shuttle Lists (jQuery)

Horizontal Shuttle Lists (jQuery) is based on

• jQuery 2.2.4

23. Horizontal Shuttle Lists (Angular)

Horizontal Shuttle Lists (Angular) is based on

• Angular 1.5.5
• Angular's jqLite

24. Scrollable table

Scrollable table is based on

• jQuery 3.1.0

25. Flex and dotted text 1

Flex and dotted text 1

The task is:

1. Blocks 1, 2 and 4 has fixed width based on content width.
2. Block 3 has to fill all available space.
3. Text in block 3 should be in one line. If text too long it has to be truncated with three dots.
4. If width of the screen is too small so there is no anought space for the forth block, the forth block should be moved to the next line.

26. Flex and dotted text 2

Flex and dotted text 2

The task is:

1. Blocks 1, 2 and 4 has fixed width based on content width.
2. Block 3 has to fill all available space.
3. Text in block 3 should be in one line. If text too long it has to be truncated with three dots.
4. If width of the screen is too small so there is no anought space for the forth block, the forth block should be moved to the next line.
5. Text in all blocks has to be centered by height.

28. Honeycomb

Honeycomb

29. Honeycomb with image

Honeycomb with image

30. Radial chart

Radial chart is based on

• Highcharts 5.0.14
• Highcharts-more 5.0.14
• jQuery 3.2.1

31. Architectural Pearls

Architectural Pearls is based on

• Google Maps JavaScript API
• Minimalistic modern buildings that were designed by Alvar Aalto and Lahdelma & Mahlamäki Architects

32. MaailmA

MaailmA is based on

• Google Maps JavaScript API
• jQuery 3.2.1
• Icons for buttons from icons8

33. Material range input (SeekBar)

Material range input is based on

• jQuery 3.2.1
• Material design slider spec
• Material design color spec

34. Div that fills a remaining horizontal space

Div that fills a remaining horizontal space is based on

• CSS

35. Ring diagram

Ring diagram is based on

• CSS
• Less

36. Koch Curve

Koch Curve is based on

• Mathematical Koch Curve
• Cd3.js

37. Koch snow flake

Koch snow flake is based on

• Mathematical Koch snowflake
• Cd3.js

38. LSystem Trees

L-System Trees is based on

• L-system
• The Algorithmic Beauty of Plants by Przemyslaw Prusinkiewicz and Aristid Lindenmaye
• Cd3.js