From e3ea569cb6f7567ca0a72e1254a5d651ebd80e69 Mon Sep 17 00:00:00 2001 From: Brad Traversy Date: Mon, 23 Nov 2020 12:00:08 -0500 Subject: [PATCH] Drag n drop --- drag-n-drop/index.html | 20 ++++++++ drag-n-drop/script.js | 39 +++++++++++++++ drag-n-drop/style.css | 44 +++++++++++++++++ social-links/index.html | 39 --------------- social-links/script.js | 7 --- social-links/style.css | 102 ---------------------------------------- 6 files changed, 103 insertions(+), 148 deletions(-) create mode 100644 drag-n-drop/index.html create mode 100644 drag-n-drop/script.js create mode 100644 drag-n-drop/style.css delete mode 100644 social-links/index.html delete mode 100644 social-links/script.js delete mode 100644 social-links/style.css diff --git a/drag-n-drop/index.html b/drag-n-drop/index.html new file mode 100644 index 0000000..a04cdc4 --- /dev/null +++ b/drag-n-drop/index.html @@ -0,0 +1,20 @@ + + + + + + + Drag N Drop + + +
+
+
+
+
+
+
+ + + + diff --git a/drag-n-drop/script.js b/drag-n-drop/script.js new file mode 100644 index 0000000..abc8a6e --- /dev/null +++ b/drag-n-drop/script.js @@ -0,0 +1,39 @@ +const fill = document.querySelector('.fill') +const empties = document.querySelectorAll('.empty') + +fill.addEventListener('dragstart', dragStart) +fill.addEventListener('dragend', dragEnd) + +for(const empty of empties) { + empty.addEventListener('dragover', dragOver) + empty.addEventListener('dragenter', dragEnter) + empty.addEventListener('dragleave', dragLeave) + empty.addEventListener('drop', dragDrop) +} + +function dragStart() { + this.className += ' hold' + setTimeout(() => this.className = 'invisible', 0) +} + +function dragEnd() { + this.className = 'fill' +} + +function dragOver(e) { + e.preventDefault() +} + +function dragEnter(e) { + e.preventDefault() + this.className += ' hovered' +} + +function dragLeave() { + this.className = 'empty' +} + +function dragDrop() { + this.className = 'empty' + this.append(fill) +} \ No newline at end of file diff --git a/drag-n-drop/style.css b/drag-n-drop/style.css new file mode 100644 index 0000000..c5036ab --- /dev/null +++ b/drag-n-drop/style.css @@ -0,0 +1,44 @@ +* { + box-sizing: border-box; +} + +body { + background-color: steelblue; + display: flex; + align-items: center; + justify-content: center; + height: 100vh; + overflow: hidden; + margin: 0; +} + +.empty { + height: 150px; + width: 150px; + margin: 10px; + border: solid 3px black; + background: white; +} + +.fill { + background-image: url('https://source.unsplash.com/random/150x150'); + height: 145px; + width: 145px; + cursor: pointer; +} + +.hold { + border: solid 5px #ccc; +} + +.hovered { + background-color: #333; + border-color: white; + border-style: dashed; +} + +@media (max-width: 800px) { + body { + flex-direction: column; + } +} diff --git a/social-links/index.html b/social-links/index.html deleted file mode 100644 index ac73829..0000000 --- a/social-links/index.html +++ /dev/null @@ -1,39 +0,0 @@ - - - - - - - - Social Links - - -
- - - - - - - - - - - - - - - - - - - - - -
- - - - diff --git a/social-links/script.js b/social-links/script.js deleted file mode 100644 index 1758aea..0000000 --- a/social-links/script.js +++ /dev/null @@ -1,7 +0,0 @@ -const container = document.getElementById('container') -const open = document.getElementById('open') -const close = document.getElementById('close') - -open.addEventListener('click', () => container.classList.add('open')) - -close.addEventListener('click', () => container.classList.remove('open')) \ No newline at end of file diff --git a/social-links/style.css b/social-links/style.css deleted file mode 100644 index a30958c..0000000 --- a/social-links/style.css +++ /dev/null @@ -1,102 +0,0 @@ -@import url('https://fonts.googleapis.com/css?family=Muli&display=swap'); - -* { - box-sizing: border-box; -} - -body { - background-color: #e0e0e0; - display: flex; - align-items: center; - justify-content: center; - height: 100vh; - margin: 0; -} - -.container { - background-color: #fff; - border-radius: 50px; - overflow: hidden; - display: flex; - align-items: center; - justify-content: center; - position: relative; - transition: 0.4s ease; - height: 70px; - width: 70px; -} - -.container.open { - width: 350px; -} - -.container .open-btn { - position: absolute; - top: 0; - left: 0; - - background-image: linear-gradient( - 110.1deg, - rgba(241, 115, 30, 1) 18.9%, - rgba(231, 29, 54, 1) 90.7% - ); - color: #fff; - cursor: pointer; - border: 0; - border-radius: 50%; - font-size: 26px; - display: flex; - align-items: center; - justify-content: center; - padding: 0; - height: 70px; - width: 70px; - z-index: 100; -} - -.container.open .open-btn { - display: none; -} - -.container a { - background-color: #fff; - border-radius: 50%; - font-size: 26px; - display: flex; - align-items: center; - justify-content: center; - position: absolute; - top: 0; - left: 0; - margin: 10px; - height: 50px; - width: 50px; - text-decoration: none; - opacity: 0; -} - -.container.open a { - position: static; - opacity: 1; - transition: 0.4s ease; -} - -.container a.ytb { - background-color: #ff0000; -} -.container a.twt { - background-color: #1da1f2; -} -.container a.x { - background-color: #282c37; -} -.container a.lin { - background-color: #007bb5; -} -.container a.ins { - background-color: #c32aa3; -} - -.container a i { - color: #fff; -}