Simple Counter - Codepen Typing CST Test
Loading…
Simple Counter — Codepen Code
A simple counter incremented by a button click.
<!DOCTYPE html>
<html>
<head>
<title>Counter</title>
</head>
<body>
<p>Count: <span id="count">0</span></p>
<button id="inc">Increment</button>
<script>
let count = 0
document.getElementById("inc").onclick = () => {
count++
document.getElementById("count").textContent = count
}
</script>
</body>
</html>Codepen Language Guide
CodePen is a social development environment and online code editor that allows users to write HTML, CSS, and JavaScript directly in the browser, see live previews, and share projects publicly. It's widely used for front-end experimentation, prototyping, and showcasing web design work.
Primary Use Cases
- ▸Front-end web development and prototyping
- ▸Sharing and embedding live demos
- ▸Learning and teaching HTML, CSS, and JavaScript
- ▸Experimenting with libraries, frameworks, and animations
- ▸Showcasing UI/UX design portfolios
Notable Features
- ▸Live preview of HTML, CSS, and JavaScript code
- ▸Supports preprocessors (Sass, SCSS, LESS, TypeScript)
- ▸Allows use of external libraries via CDN
- ▸Collaboration through 'Collab Mode'
- ▸Community gallery for sharing and discovering code snippets
Origin & Creator
Created by Alex Vazquez, Tim Sabat, and Chris Coyier in 2012, inspired by the need for a live code playground to experiment with front-end web development.
Industrial Note
Primarily used for front-end development, experimentation, UI/UX design, learning, and showcasing code snippets. Less suitable for full-stack or backend-heavy development.