css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv
CodePen probably won't work great in this browser. We generally only support the major desktop browsers like Chrome, Firefox, Safari, and Edge. Use this one at your own risk! If you're looking to test things, try looking at Pens/Projects in Debug View.

Posts tagged 30 days js

30 days of js day 4 - array cardio

Array Cardio

Being able to edit and arange data in js is super useful espically when dealing with external sources or internal. This challenge goes through the following methods.


30 days js - flex panels image gallery

Flex panels image gallery

This challenge focuses on the use of flex box to create a responsive layout that makes use of flex css properties and values. To begin the layout is created by setting the...

Slide in on scroll

Slide in on scroll

Using js to find out when images are reached when scrolling down the page. From here you can add and remove classes that cause images to have transition and styles of your...

JS key detection sequence (KONAMI CODE)

JS Key Detection Sequence

Check what the user types compared to a secret code that is logged in js.


You can store the keys that are pressed by using a key up function.

  const pressed = [];...

Tapas local storage

Tapas local storage

Creating a to do list that makes use of local storage to update the added items, along with checked state of input fields.

First we want to create a function that allows use to...