Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 390cdde

Browse files
Add Day3: CSS Variables
1 parent 32207fb commit 390cdde

File tree

4 files changed

+73
-0
lines changed

4 files changed

+73
-0
lines changed

‎src/components/Day3/Home.vue‎

Lines changed: 49 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,49 @@
1+
<template>
2+
<div ref="root" class="root flex flex-col bg-blue-lightest h-screen">
3+
<div class="h-32 flex justify-center items-center">
4+
<h1 >Update CSS Variables with JS</h1>
5+
</div>
6+
<div class="h-64 flex justify-center items-center">
7+
<div class="flex flex-col px-5">
8+
<label for="sizing">Size</label>
9+
<input @touchmove="update" @mousemove="update" @change="update" type="range" name="sizing" min="50" max="100" value="100" data-suffix="%">
10+
</div>
11+
<div class="flex flex-col px-5">
12+
<label for="sizing">Blur</label>
13+
<input @touchmove="update" @mousemove="update" @change="update" type="range" name="blur" min="0" max="10" step="1" value="0" data-suffix="px">
14+
</div>
15+
</div>
16+
<div class="h-full mx-auto px-2 md:px-10 lg:px-20 max-w-xl">
17+
<img class="image shadow-lg rounded-lg" src="https://picsum.photos/800/500/?random">
18+
</div>
19+
</div>
20+
</template>
21+
22+
<script>
23+
export default {
24+
name: "day3",
25+
data() {
26+
return {};
27+
},
28+
methods: {
29+
update(e) {
30+
let suffix = e.target.dataset.suffix;
31+
this.$refs.root.style.setProperty(
32+
`--${e.target.name}`,
33+
`${e.target.value}${suffix}`
34+
);
35+
}
36+
},
37+
mounted() {
38+
this.$refs.root.style.setProperty(`--sizing`, `100%`);
39+
this.$refs.root.style.setProperty(`--blur`, `0px`);
40+
}
41+
};
42+
</script>
43+
44+
<style scoped>
45+
.image {
46+
width: var(--sizing);
47+
filter: blur(var(--blur));
48+
}
49+
</style>

‎src/router.js‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,11 @@ export default new Router({
2323
path: "/day2",
2424
name: "day2",
2525
component: () => import(/* webpackChunkName: "day2" */ "./views/Day2.vue")
26+
},
27+
{
28+
path: "/day3",
29+
name: "day3",
30+
component: () => import(/* webpackChunkName: "day2" */ "./views/Day3.vue")
2631
}
2732
]
2833
});

‎src/views/Day3.vue‎

Lines changed: 18 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,18 @@
1+
<template>
2+
<div class="h-full content-center">
3+
<home />
4+
</div>
5+
</template>
6+
7+
<script>
8+
import Home from "@/components/Day3/Home.vue";
9+
export default {
10+
name: "day3",
11+
components: {
12+
Home
13+
}
14+
};
15+
</script>
16+
17+
<style>
18+
</style>

‎src/views/Home.vue‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@
33
<div class="flex flex-wrap justify-center">
44
<router-link class="no-underline btn" to="/day1">01. Drum Kit</router-link>
55
<router-link class="no-underline btn" to="/day2">02. Clock</router-link>
6+
<router-link class="no-underline btn" to="/day3">03. CSS Variables</router-link>
67
</div>
78
</div>
89
</template>

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /