Skip to content

Instantly share code, notes, and snippets.

@raspberrypisig

raspberrypisig/fiddle.html

Forked from WarFox/fiddle.html
Last active September 22, 2025 21:15
Show Gist options
  • Save raspberrypisig/f1eb115b5da77cfbe5e9b7d510cb5efd to your computer and use it in GitHub Desktop.
Save raspberrypisig/f1eb115b5da77cfbe5e9b7d510cb5efd to your computer and use it in GitHub Desktop.
Download ZIP
Raw
fiddle.html
<!DOCTYPE html>
<html>
<head>
<title>Kitchen Sink Example</title>
</head>
<body lang="en">
<p>This paragraph WILL NOT be styled by CSS or changed by javascript.</p>
<p id="secondpara">This paragraph will be styled by CSS using its <b>id</b>attribute using CSS selector.</p>
<p class="thirdpara">This paragraph will be styled by CSS using its <b>class</b>attribute using CSS selector.</p>
<p id="willchange">This paragraph will be changed by javascript</p>
<p> Only <span>this portion</span> will be styled by CSS </p>
<div>
<p class="first makemepurple">first child p of div</p>
<p class="makemepurple">second child p of div</p>
</div>
<a target="_blank" href="https://gist.github.com/raspberrypisig/f1eb115b5da77cfbe5e9b7d510cb5efd">source code</a>
<hr>
<h1>walk the DOM using javascript</h1>
<p>
document title:
lang attribute on body element:
number of children that div has on this page:
what is the value of class for the first child of div:
</p>
<p>NOTE: use of b and hr tags are frowned upon, accomplish the same with CSS</p>
</body>
</html>
Raw
fiddle.js
function changeContent () {
//old way before document.querySelector became the new normal
//var myelement = document.getElementById("willchange");
const myelement = document.querySelector("#willchange");
myelement.textContent = "Replaced with javascript";
}
window.onload = changeContent ;
Raw
fiddle.manifest
name: First test
description: first attempt of using jsfiddle with gist
authors:
- Mohan Gupta
normalize_css: no
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment