Commit b63c531

committed

Day 03 - CSS Variables

1 parent 4a6d685 commit b63c531Copy full SHA for b63c531

File tree

+83

-0

lines changed

+83

-0

lines changed

Lines changed: 39 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,39 @@`
	`1`	`+<!DOCTYPE html>`
	`2`	`+<html lang="en">`
	`3`	`+`
	`4`	`+<head>`
	`5`	`+ <meta charset="UTF-8">`
	`6`	`+ <title>03 Day</title>`
	`7`	`+ <link rel="stylesheet" href="style.css">`
	`8`	`+</head>`
	`9`	`+`
	`10`	`+<body>`
	`11`	`+ <h2>Change CSS Variables with <span class='hl'>JS</span></h2>`
	`12`	`+`
	`13`	`+ <div class="controls">`
	`14`	`+ <label for="spacing">Spacing:</label>`
	`15`	`+ <input type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">`
	`16`	`+`
	`17`	`+ <label for="blur">Blur:</label>`
	`18`	`+ <input type="range" name="blur" min="0" max="25" value="10" data-sizing="px">`
	`19`	`+`
	`20`	`+ <label for="base">Base Color</label>`
	`21`	`+ <input type="color" name="base" value="#ffc600">`
	`22`	`+ </div>`
	`23`	`+`
	`24`	`+ <img src="https://images.unsplash.com/photo-1529440547539-b8500cf6c0c3?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=1ac93abd74a3cc16f233234b90e6a8b8&auto=format&fit=crop&w=750&q=80">`
	`25`	`+`
	`26`	`+`
	`27`	`+ <script>`
	`28`	`+ const inputs = document.querySelectorAll('.controls input');`
	`29`	`+`
	`30`	`+ function update() {`
	`31`	`+ const suffix = this.dataset.sizing \|\| '';`
	`32`	+ document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
	`33`	`+ }`
	`34`	`+`
	`35`	`+ inputs.forEach(input => input.addEventListener('change', update));`
	`36`	`+ inputs.forEach(input => input.addEventListener('mousemove', update));`
	`37`	`+ </script>`
	`38`	`+</body>`
	`39`	`+</html>`

Lines changed: 40 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,40 @@`
	`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`	`+body {`
	`18`	`+ text-align: center;`
	`19`	`+}`
	`20`	`+`
	`21`	`+body {`
	`22`	`+ background: #214e53;`
	`23`	`+ color: white;`
	`24`	`+ font-family: 'helvetica neue', sans-serif;`
	`25`	`+ font-weight: 100;`
	`26`	`+ font-size: 50px;`
	`27`	`+}`
	`28`	`+`
	`29`	`+.controls {`
	`30`	`+ margin-bottom: 50px;`
	`31`	`+}`
	`32`	`+`
	`33`	`+a {`
	`34`	`+ color: var(--base);`
	`35`	`+ text-decoration: none;`
	`36`	`+}`
	`37`	`+`
	`38`	`+input {`
	`39`	`+ width: 100px;`
	`40`	`+}`

Lines changed: 3 additions & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -25,3 +25,6 @@ Thanks!`
`25`	`25`
`26`	`26`	`### Day 2: 19 Jun 2018`
`27`	`27`	`Learned about Css transition & transform, ES6 const keyword and live UI update after few seconds.`
	`28`	`+`
	`29`	`+### Day 3: 20 Jun 2018`
	`30`	`+ Learned about CSS variables & updating them using JavaScript`

Lines changed: 1 addition & 0 deletions

Original file line number	Diff line number	Diff line change
`@@ -11,6 +11,7 @@`
`11`	`11`	`<div class="topnav">`
`12`	`12`	`<a class="active" href="./01_day/index.html">01 Day</a>`
`13`	`13`	`<a class="active" href="./02_day/index.html">02 Day</a>`
	`14`	`+ <a class="active" href="./03_day/index.html">03 Day</a>`
`14`	`15`	`</div>`
`15`	`16`	`</body>`
`16`	`17`

Comments

(0)