From 3b6c743dc4b3ea42b2919557b6341d4a0cc86848 Mon Sep 17 00:00:00 2001 From: Marina Ferreira Date: Mon, 16 Jul 2018 21:22:02 -0300 Subject: [PATCH] Video 7 --- video-7/index.html | 69 ++++++++++++++++++++++++++++++++++++++++++++++ video-7/scripts.js | 32 +++++++++++++++++++++ video-7/styles.css | 55 ++++++++++++++++++++++++++++++++++++ 3 files changed, 156 insertions(+) create mode 100644 video-7/index.html create mode 100644 video-7/scripts.js create mode 100644 video-7/styles.css diff --git a/video-7/index.html b/video-7/index.html new file mode 100644 index 0000000..0037907 --- /dev/null +++ b/video-7/index.html @@ -0,0 +1,69 @@ + + + + + + Memory Game + + + + +
+
+ Aurelia + JS Badge +
+
+ Aurelia + JS Badge +
+ +
+ Vue + JS Badge +
+
+ Vue + JS Badge +
+ +
+ Angular + JS Badge +
+
+ Angular + JS Badge +
+ +
+ Ember + JS Badge +
+
+ Ember + JS Badge +
+ +
+ Backbone + JS Badge +
+
+ Backbone + JS Badge +
+ +
+ React + JS Badge +
+
+ React + JS Badge +
+
+ + + + diff --git a/video-7/scripts.js b/video-7/scripts.js new file mode 100644 index 0000000..0eedc6d --- /dev/null +++ b/video-7/scripts.js @@ -0,0 +1,32 @@ +const cards = document.querySelectorAll('.memory-card'); + +let hasFlippedCard = false; +let firstCard, secondCard; + +function flipCard() { + this.classList.add('flip'); + + if (!hasFlippedCard) { + // first click + hasFlippedCard = true; + firstCard = this; + } else { + // second click + hasFlippedCard = false; + secondCard = this; + + if (firstCard.dataset.framework === secondCard.dataset.framework) { + // it's a match! + firstCard.removeEventListener('click', flipCard); + secondCard.removeEventListener('click', flipCard); + } else { + // not a match + setTimeout(() => { + firstCard.classList.remove('flip'); + secondCard.classList.remove('flip'); + }, 1500); + } + } +} + +cards.forEach(card => card.addEventListener('click', flipCard)); diff --git a/video-7/styles.css b/video-7/styles.css new file mode 100644 index 0000000..5c73946 --- /dev/null +++ b/video-7/styles.css @@ -0,0 +1,55 @@ +* { + padding: 0; + margin: 0; + box-sizing: border-box; +} + +body { + height: 100vh; + display: flex; + background: #060AB2; +} + +.memory-game { + width: 640px; + height: 640px; + margin: auto; + display: flex; + flex-wrap: wrap; + perspective: 1000px; +} + +.memory-card { + width: calc(25% - 10px); + height: calc(33.333% - 10px); + margin: 5px; + position: relative; + transform: scale(1); + transform-style: preserve-3d; + transition: transform .5s; + box-shadow: 1px 1px 1px rgba(0,0,0,.3); +} + +.memory-card:active { + transform: scale(0.97); + transition: transform .2s; +} + +.memory-card.flip { + transform: rotateY(180deg); +} + +.front-face, +.back-face { + width: 100%; + height: 100%; + padding: 20px; + position: absolute; + border-radius: 5px; + background: #1C7CCC; + backface-visibility: hidden; +} + +.front-face { + transform: rotateY(180deg); +}