Move demo files in demo folder

Author: thecodeholic

src/app.js renamed to demo/app.js

@@ -1,5 +1,5 @@
-import './scss/style.scss';
-import NoteManager from './NoteManager';
+import './style.scss';
+import NoteManager from '../src/NoteManager';
 
 const noteManager = new NoteManager({
   el: document.getElementById('notesWrapper'),

src/index.html renamed to demo/index.html

@@ -0,0 +1,14 @@
+* {
+  box-sizing: border-box;
+}
+
+body {
+  padding: 0;
+  margin: 0;
+  background-color: #e4e4e4;
+}
+
+#notesWrapper {
+  padding: 50px;
+}
+

demo/style.scss

@@ -1,13 +1,16 @@
+import './NoteManager.scss';
 import Note from './Note';
 
 export default class NoteManager {
   constructor({el, notes}) {
     this.el = el;
+    this.el.className = 'tc-notes-wrapper';
     this.notesEl = null;
     this.notes = notes.map(note => new Note(note, this));
 
     this.onNoteChange = () => {
     };
+    this.createNewNoteButton();
     this.createNotesWrapper();
     this.renderNotes();
   }
@@ -27,6 +30,10 @@ export default class NoteManager {
     this.renderNotes();
   }
 
+  createNewNoteButton(){
+
+  }
+
   createNotesWrapper() {
     this.notesEl = document.createElement('div');
     this.notesEl.className = 'tc-notes';

src/NoteManager.js

@@ -0,0 +1,88 @@
+.tc-notes-wrapper {
+  .new-note-btn {
+    width: 200px;
+    display: block;
+    margin: 0 auto 20px;
+    background-color: #FFF;
+    padding: 10px 32px;
+    border: 1px solid #e0e0e0;
+    font-size: 26px;
+    outline: 0;
+    transition: all 0.3s;
+    cursor: pointer;
+    font-family: 'Caveat', cursive;
+
+    &:hover {
+      box-shadow: 0 5px 7px rgba(0, 0, 0, 0.1);
+    }
+
+    &:active {
+      position: relative;
+      top: 1px;
+    }
+  }
+
+  .tc-notes {
+    display: flex;
+    justify-content: center;
+    flex-wrap: wrap;
+    margin: 0 auto;
+
+    .tc-note {
+      background-color: #f0c806;
+      border-radius: 8px;
+      width: 280px;
+      margin: 0 10px 20px;
+      box-shadow: 1px 3px 5px rgba(0, 0, 0, 0.2);
+      transition: all 0.5s;
+      cursor: pointer;
+      font-family: 'Caveat', cursive;
+
+      .tc-note-header {
+        padding: 10px 16px 0;
+
+        .tc-note-close {
+          display: inline-block;
+          width: 24px;
+          height: 24px;
+          border-radius: 50%;
+          line-height: 24px;
+          text-align: center;
+          transition: all 0.3s;
+
+          &:hover {
+            background-color: rgba(0, 0, 0, 0.2);
+          }
+
+          &:focus {
+            box-shadow: inset 2px 3px 0px rgba(0, 0, 0, 0.8);
+          }
+        }
+
+        .tc-note-close {
+          float: right;
+        }
+      }
+
+      .tc-note-title,
+      .tc-note-body {
+        outline: 0;
+      }
+
+      .tc-note-title {
+        font-size: 24px;
+        padding: 10px 16px;
+        font-weight: bold;
+      }
+
+      .tc-note-body {
+        font-size: 20px;
+        padding: 10px 16px 16px;
+      }
+
+      &:hover {
+        box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.3);
+      }
+    }
+  }
+}

src/NoteManager.scss

@@ -6,7 +6,7 @@ module.exports = function(){
   return {
     mode: 'development',
     entry: [
-      './src/app.js'
+      './demo/app.js'
     ],
     watch: true,
     watchOptions: {
@@ -27,7 +27,7 @@ module.exports = function(){
     },
     plugins: [
       new HtmlWebpackPlugin({
-        template: path.resolve('./src/index.html')
+        template: path.resolve('./demo/index.html')
       }),
       new webpack.HotModuleReplacementPlugin()
     ],