Change Background Color - Codepen Typing CST Test
Loading…
Change Background Color — Codepen Code
Changes the page background color when button is clicked.
<!DOCTYPE html>
<html>
<head>
<title>Color Change</title>
</head>
<body>
<button id="colorBtn">Change Color</button>
<script>
document.getElementById("colorBtn").onclick = () => {
document.body.style.backgroundColor = "#4CAF50"
}
</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.