Commit 3ce1d61

authored

Day 03 files

1 parent 74e8b0e commit 3ce1d61Copy full SHA for 3ce1d61

File tree

+87

-0

lines changed

+87

-0

lines changed

Lines changed: 42 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,42 @@`
	`1`	`+<!DOCTYPE html>`
	`2`	`+<html lang="en">`
	`3`	`+ <head>`
	`4`	`+ <meta charset="UTF-8" />`
	`5`	`+ <title>Scoped CSS Variables and JS</title>`
	`6`	`+ <link rel="stylesheet" href="style.css" />`
	`7`	`+ </head>`
	`8`	`+ <body>`
	`9`	`+ <h2>Update CSS Variables with <span class="hl">JS</span></h2>`
	`10`	`+`
	`11`	`+ <div class="controls">`
	`12`	`+ <label for="spacing">Spacing:</label>`
	`13`	`+ <input`
	`14`	`+ id="spacing"`
	`15`	`+ type="range"`
	`16`	`+ name="spacing"`
	`17`	`+ min="10"`
	`18`	`+ max="200"`
	`19`	`+ value="10"`
	`20`	`+ data-sizing="px"`
	`21`	`+ />`
	`22`	`+`
	`23`	`+ <label for="blur">Blur:</label>`
	`24`	`+ <input`
	`25`	`+ id="blur"`
	`26`	`+ type="range"`
	`27`	`+ name="blur"`
	`28`	`+ min="0"`
	`29`	`+ max="25"`
	`30`	`+ value="10"`
	`31`	`+ data-sizing="px"`
	`32`	`+ />`
	`33`	`+`
	`34`	`+ <label for="base">Base Color</label>`
	`35`	`+ <input id="base" type="color" name="base" value="#ffc600" />`
	`36`	`+ </div>`
	`37`	`+`
	`38`	`+ <img src="https://source.unsplash.com/7bwQXzbF6KE/800x500" />`
	`39`	`+`
	`40`	`+ <script src="index.js"></script>`
	`41`	`+ </body>`
	`42`	`+</html>`

Lines changed: 9 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,9 @@`
	`1`	`+const inputs = document.querySelectorAll('.controls input');`
	`2`	`+`
	`3`	`+function handleUpdate() {`
	`4`	`+ const suffix = this.dataset.sizing \|\| '';`
	`5`	+ document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
	`6`	`+}`
	`7`	`+`
	`8`	`+inputs.forEach(input => input.addEventListener('change', handleUpdate));`
	`9`	`+inputs.forEach(input => input.addEventListener('mousemove', handleUpdate));`

Lines changed: 36 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,36 @@`
	`1`	`+:root {`
	`2`	`+ --base: #ffc600;`
	`3`	`+ --spacing: 10px;`
	`4`	`+ --blur: 10px;`
	`5`	`+}`
	`6`	`+`
	`7`	`+img {`
	`8`	`+ padding: var(--spacing);`
	`9`	`+ background: var(--base);`
	`10`	`+ filter: blur(var(--blur));`
	`11`	`+}`
	`12`	`+`
	`13`	`+.hl{`
	`14`	`+ color: var(--base);`
	`15`	`+}`
	`16`	`+`
	`17`	`+/*`
	`18`	`+ Misc styles, nothing to do with CSS variables`
	`19`	`+*/`
	`20`	`+`
	`21`	`+body {`
	`22`	`+ text-align: center;`
	`23`	`+ background: #193549;`
	`24`	`+ color: white;`
	`25`	`+ font-family: "helvetica neue", sans-serif;`
	`26`	`+ font-weight: 100;`
	`27`	`+ font-size: 50px;`
	`28`	`+}`
	`29`	`+`
	`30`	`+.controls {`
	`31`	`+ margin-bottom: 50px;`
	`32`	`+}`
	`33`	`+`
	`34`	`+input {`
	`35`	`+ width: 100px;`
	`36`	`+}`

Comments

(0)