title
<!DOCTYPE html> <html> <head> <meta charset="utf-8"/> <title>A prototype</title> <link href='css/main.css' rel='stylesheet'> <script src='js/main.js' defer></script> </head> <body> <p class="click">Cliquez sur moi</p> <p class="apparition">Faites moi apparaître</p> </body> </html>
body{ background: lightgray; font-family: sans-serif; font-size: 20px; } .click{ color: blue; cursor: pointer; text-transform: uppercase; } .apparition{ display: none; text-transform: uppercase; font-size: 40px; color: yellow; border: 1px solid yellow; padding: 20px; text-align: center; }
var elClick = document.querySelector('.click'); var elApparition = document.querySelector('.apparition'); elClick.addEventListener('click', function(){ elApparition.style.display = "block"; elClick.style.color = "#000"; document.body.style.background = "#FF00FF"; });
snap
new
fork
download
html
css
js
output
config
➚ link to output
➚ list all stems
➚ snap player
font size
live reload
snap mode
layout
⤷ switch
★ info and code