diff --git a/01 - JavaScript Drum Kit/index-START.html b/01 - JavaScript Drum Kit/index-START.html index 4070d32767..c8d7719259 100644 --- a/01 - JavaScript Drum Kit/index-START.html +++ b/01 - JavaScript Drum Kit/index-START.html @@ -59,6 +59,31 @@ diff --git a/02 - JS + CSS Clock/index-FINISHED.html b/02 - JS + CSS Clock/index-FINISHED.html deleted file mode 100644 index d4cb3b56a8..0000000000 --- a/02 - JS + CSS Clock/index-FINISHED.html +++ /dev/null @@ -1,98 +0,0 @@ - - - - - JS + CSS Clock - - - - -

- - - - - - - diff --git a/02 - JS + CSS Clock/index-START.html b/02 - JS + CSS Clock/index-START.html deleted file mode 100644 index 2712384201..0000000000 --- a/02 - JS + CSS Clock/index-START.html +++ /dev/null @@ -1,73 +0,0 @@ - - - - - JS + CSS Clock - - - - -

- - - - - - - diff --git a/02 - JS + CSS Clock/index.html b/02 - JS + CSS Clock/index.html deleted file mode 100644 index 1c777557da..0000000000 --- a/02 - JS + CSS Clock/index.html +++ /dev/null @@ -1,96 +0,0 @@ - - - - - JS + CSS Clock - - - - -

- - - - - - - diff --git a/02-js-css-clock/index-ly.html b/02-js-css-clock/index-ly.html new file mode 100644 index 0000000000..0d79efcc29 --- /dev/null +++ b/02-js-css-clock/index-ly.html @@ -0,0 +1,140 @@ + + + + + JS + CSS Clock + + + + +

Ly's JS Clock

+ + + + + + + diff --git a/02-js-css-clock/js-css-clock.png b/02-js-css-clock/js-css-clock.png new file mode 100644 index 0000000000..480d403b73 Binary files /dev/null and b/02-js-css-clock/js-css-clock.png differ diff --git a/02-js-css-clock/readme.md b/02-js-css-clock/readme.md new file mode 100644 index 0000000000..9f7453cd69 --- /dev/null +++ b/02-js-css-clock/readme.md @@ -0,0 +1,3 @@ +# [JS CSS Clock](https://ly900.github.io/JavaScript30/02-js-css-clock/index-ly.html) + +

diff --git a/03 - CSS Variables/index-START.html b/03 - CSS Variables/index-START.html deleted file mode 100644 index 7171607a8b..0000000000 --- a/03 - CSS Variables/index-START.html +++ /dev/null @@ -1,54 +0,0 @@ - - - - - Scoped CSS Variables and JS - - -

Update CSS Variables with JS

- -

- Spacing: - - - Blur: - - - Base Color - -

- -

- - - - - - - diff --git a/03 - CSS Variables/readme.md b/03 - CSS Variables/readme.md new file mode 100644 index 0000000000..dea4c5610b --- /dev/null +++ b/03 - CSS Variables/readme.md @@ -0,0 +1,4 @@ + +# [CSS Variables](https://ly900.github.io/JavaScript30/03-css-variables/index-ly.html) + +

diff --git a/03-css-variables/css-variables.png b/03-css-variables/css-variables.png new file mode 100644 index 0000000000..95dbdd2717 Binary files /dev/null and b/03-css-variables/css-variables.png differ diff --git a/03 - CSS Variables/index-FINISHED.html b/03-css-variables/index-ly.html similarity index 62% rename from 03 - CSS Variables/index-FINISHED.html rename to 03-css-variables/index-ly.html index c3217fc003..cf9554dfdf 100644 --- a/03 - CSS Variables/index-FINISHED.html +++ b/03-css-variables/index-ly.html @@ -21,26 +21,16 @@

Update CSS Variables with JS

+ inputs.forEach(input => input.addEventListener("change", handleUpdate)); + + inputs.forEach(input => input.addEventListener("mousemove", handleUpdate)); + diff --git a/03-css-variables/readme.md b/03-css-variables/readme.md new file mode 100644 index 0000000000..dea4c5610b --- /dev/null +++ b/03-css-variables/readme.md @@ -0,0 +1,4 @@ + +# [CSS Variables](https://ly900.github.io/JavaScript30/03-css-variables/index-ly.html) + +

diff --git a/04-array-cardio-day1/index-ly.html b/04-array-cardio-day1/index-ly.html new file mode 100644 index 0000000000..3d5cd53f14 --- /dev/null +++ b/04-array-cardio-day1/index-ly.html @@ -0,0 +1,147 @@ + + + + + Array Cardio 💪 + + +

Psst: have a look at the JavaScript Console 💁

+ + + diff --git a/04-array-cardio-day1/readme.md b/04-array-cardio-day1/readme.md new file mode 100644 index 0000000000..e69de29bb2 diff --git a/06-type-ahead/index-FINISHED.html b/06-type-ahead/index-FINISHED.html new file mode 100644 index 0000000000..5902b43936 --- /dev/null +++ b/06-type-ahead/index-FINISHED.html @@ -0,0 +1,61 @@ + + + + + Type Ahead 👀 + + + + + + + + diff --git a/06-type-ahead/index-ly.html b/06-type-ahead/index-ly.html new file mode 100644 index 0000000000..55045f73c0 --- /dev/null +++ b/06-type-ahead/index-ly.html @@ -0,0 +1,70 @@ + + + + + Type Ahead 👀 + + + + + + + + diff --git a/06-type-ahead/style.css b/06-type-ahead/style.css new file mode 100644 index 0000000000..c591be0417 --- /dev/null +++ b/06-type-ahead/style.css @@ -0,0 +1,86 @@ + html { + box-sizing: border-box; + background:#ffc600; + font-family:'helvetica neue'; + font-size: 20px; + font-weight: 200; + } + *, *:before, *:after { + box-sizing: inherit; + } + input { + width: 100%; + padding:20px; + } + + .search-form { + max-width:400px; + margin:50px auto; + } + + input.search { + margin: 0; + text-align: center; + outline:0; + border: 10px solid #F7F7F7; + width: 120%; + left: -10%; + position: relative; + top: 10px; + z-index: 2; + border-radius: 5px; + font-size: 40px; + box-shadow: 0 0 5px rgba(0, 0, 0, 0.12), inset 0 0 2px rgba(0, 0, 0, 0.19); + } + + .suggestions { + margin: 0; + padding: 0; + position: relative; + /*perspective:20px;*/ + } + .suggestions li { + background:white; + list-style: none; + border-bottom: 1px solid #D8D8D8; + box-shadow: 0 0 10px rgba(0, 0, 0, 0.14); + margin:0; + padding:20px; + transition:background 0.2s; + display:flex; + justify-content:space-between; + text-transform: capitalize; + } + + .suggestions li:nth-child(even) { + transform: perspective(100px) rotateX(3deg) translateY(2px) scale(1.001); + background: linear-gradient(to bottom, #ffffff 0%,#EFEFEF 100%); + } + .suggestions li:nth-child(odd) { + transform: perspective(100px) rotateX(-3deg) translateY(3px); + background: linear-gradient(to top, #ffffff 0%,#EFEFEF 100%); + } + + span.population { + font-size: 15px; + } + + + .details { + text-align: center; + font-size: 15px; + } + + .hl { + background:#ffc600; + } + + .love { + text-align: center; + } + + a { + color:black; + background:rgba(0,0,0,0.1); + text-decoration: none; + }