Skip to content

Commit 089f4a9

Browse files
alexrahalexrah
committed
Done: 03 - CSS Variables
1 parent d9b80f6 commit 089f4a9

File tree

14 files changed

+5899
-4
lines changed

14 files changed

+5899
-4
lines changed

‎.babelrc‎

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,8 +2,7 @@
22
"presets": [["env",
33
{
44
"targets": {
5-
"browsers": "last 6 versions",
6-
"node": 4
5+
"browsers": "last 6 versions"
76
},
87
"loose": true,
98
"debug": true

‎03 - CSS Variables/dist/bundle.js‎

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
/******/ (function(modules) { // webpackBootstrap
2+
/******/ // The module cache
3+
/******/ var installedModules = {};
4+
/******/
5+
/******/ // The require function
6+
/******/ function __webpack_require__(moduleId) {
7+
/******/
8+
/******/ // Check if module is in cache
9+
/******/ if(installedModules[moduleId]) {
10+
/******/ return installedModules[moduleId].exports;
11+
/******/ }
12+
/******/ // Create a new module (and put it into the cache)
13+
/******/ var module = installedModules[moduleId] = {
14+
/******/ i: moduleId,
15+
/******/ l: false,
16+
/******/ exports: {}
17+
/******/ };
18+
/******/
19+
/******/ // Execute the module function
20+
/******/ modules[moduleId].call(module.exports, module, module.exports, __webpack_require__);
21+
/******/
22+
/******/ // Flag the module as loaded
23+
/******/ module.l = true;
24+
/******/
25+
/******/ // Return the exports of the module
26+
/******/ return module.exports;
27+
/******/ }
28+
/******/
29+
/******/
30+
/******/ // expose the modules object (__webpack_modules__)
31+
/******/ __webpack_require__.m = modules;
32+
/******/
33+
/******/ // expose the module cache
34+
/******/ __webpack_require__.c = installedModules;
35+
/******/
36+
/******/ // define getter function for harmony exports
37+
/******/ __webpack_require__.d = function(exports, name, getter) {
38+
/******/ if(!__webpack_require__.o(exports, name)) {
39+
/******/ Object.defineProperty(exports, name, { enumerable: true, get: getter });
40+
/******/ }
41+
/******/ };
42+
/******/
43+
/******/ // define __esModule on exports
44+
/******/ __webpack_require__.r = function(exports) {
45+
/******/ if(typeof Symbol !== 'undefined' && Symbol.toStringTag) {
46+
/******/ Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
47+
/******/ }
48+
/******/ Object.defineProperty(exports, '__esModule', { value: true });
49+
/******/ };
50+
/******/
51+
/******/ // create a fake namespace object
52+
/******/ // mode & 1: value is a module id, require it
53+
/******/ // mode & 2: merge all properties of value into the ns
54+
/******/ // mode & 4: return value when already ns object
55+
/******/ // mode & 8|1: behave like require
56+
/******/ __webpack_require__.t = function(value, mode) {
57+
/******/ if(mode & 1) value = __webpack_require__(value);
58+
/******/ if(mode & 8) return value;
59+
/******/ if((mode & 4) && typeof value === 'object' && value && value.__esModule) return value;
60+
/******/ var ns = Object.create(null);
61+
/******/ __webpack_require__.r(ns);
62+
/******/ Object.defineProperty(ns, 'default', { enumerable: true, value: value });
63+
/******/ if(mode & 2 && typeof value != 'string') for(var key in value) __webpack_require__.d(ns, key, function(key) { return value[key]; }.bind(null, key));
64+
/******/ return ns;
65+
/******/ };
66+
/******/
67+
/******/ // getDefaultExport function for compatibility with non-harmony modules
68+
/******/ __webpack_require__.n = function(module) {
69+
/******/ var getter = module && module.__esModule ?
70+
/******/ function getDefault() { return module['default']; } :
71+
/******/ function getModuleExports() { return module; };
72+
/******/ __webpack_require__.d(getter, 'a', getter);
73+
/******/ return getter;
74+
/******/ };
75+
/******/
76+
/******/ // Object.prototype.hasOwnProperty.call
77+
/******/ __webpack_require__.o = function(object, property) { return Object.prototype.hasOwnProperty.call(object, property); };
78+
/******/
79+
/******/ // __webpack_public_path__
80+
/******/ __webpack_require__.p = "";
81+
/******/
82+
/******/
83+
/******/ // Load entry module and return exports
84+
/******/ return __webpack_require__(__webpack_require__.s = "./src/main.js");
85+
/******/ })
86+
/************************************************************************/
87+
/******/ ({
88+
89+
/***/ "./src/main.js":
90+
/*!*********************!*\
91+
!*** ./src/main.js ***!
92+
\*********************/
93+
/*! no static exports found */
94+
/***/ (function(module, exports, __webpack_require__) {
95+
96+
"use strict";
97+
eval("\n\n/**\n * Created by ale on 05/01/18.\n */\n// import $ from 'jquery';\n\n// $(document).ready(function () {\n\nvar spacing = document.querySelector('#spacing');\n\nspacing.addEventListener('change', function (e) {\n console.log(e);\n});\n\n// });\n\n\n// ci riprovo e riprocv e rip l;l\n// rovo e provo e provo e ancora e sempre e provo sempre\n\n//# sourceURL=webpack:///./src/main.js?");
98+
99+
/***/ })
100+
101+
/******/ });

‎03 - CSS Variables/dist/main.js‎

Lines changed: 19 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎03 - CSS Variables/dist/main.js.map‎

Lines changed: 1 addition & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎03 - CSS Variables/dist/style.css‎

Lines changed: 33 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎03 - CSS Variables/index-FINISHED.html‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -63,6 +63,7 @@ <h2>Update CSS Variables with <span class='hl'>JS</span></h2>
6363
const inputs = document.querySelectorAll('.controls input');
6464

6565
function handleUpdate() {
66+
console.log(this);
6667
const suffix = this.dataset.sizing || '';
6768
document.documentElement.style.setProperty(`--${this.name}`, this.value + suffix);
6869
}

‎03 - CSS Variables/index.html‎

Lines changed: 82 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,82 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8">
5+
<title>Scoped CSS Variables and JS</title>
6+
</head>
7+
<body>
8+
<h2>Update CSS Variables with <span class='hl'>JS</span></h2>
9+
10+
<div class="controls">
11+
<label for="spacing">Spacing:</label>
12+
<input id="spacing" type="range" name="spacing" min="10" max="200" value="10" data-sizing="px">
13+
14+
<label for="blur">Blur:</label>
15+
<input id="blur" type="range" name="blur" min="0" max="25" value="10" data-sizing="px">
16+
17+
<label for="base">Base Color</label>
18+
<input id="base" type="color" name="base" value="#ffc600">
19+
</div>
20+
21+
<img src="https://source.unsplash.com/7bwQXzbF6KE/800x500">
22+
23+
<style>
24+
25+
/*
26+
misc styles, nothing to do with CSS variables
27+
*/
28+
29+
:root {
30+
--base: red;
31+
--spacing: 10px;
32+
--blur: 0;
33+
}
34+
35+
body {
36+
text-align: center;
37+
background: #193549;
38+
color: white;
39+
font-family: 'helvetica neue', sans-serif;
40+
font-weight: 100;
41+
font-size: 50px;
42+
}
43+
44+
.controls {
45+
margin-bottom: 50px;
46+
}
47+
48+
input {
49+
width:100px;
50+
}
51+
52+
img {
53+
padding: var(--spacing);
54+
background: var(--base);
55+
filter: blur(var(--blur));
56+
}
57+
58+
.hl {
59+
color: var(--base);
60+
filter: blur(var(--blur));
61+
}
62+
63+
</style>
64+
65+
<script type="text/javascript">
66+
67+
const inputs = document.querySelectorAll('input');
68+
69+
function handleChange(){
70+
const sizing = this.dataset.sizing||'';
71+
document.documentElement.style.setProperty(`--${this.name}`,this.value + sizing);
72+
}
73+
74+
inputs.forEach(input => input.addEventListener('change',handleChange));
75+
inputs.forEach(input => input.addEventListener('mousemove',handleChange));
76+
77+
78+
</script>
79+
80+
81+
</body>
82+
</html>

0 commit comments

Comments
 (0)