Merge pull request #15 from cdscally/development

cdscally · web-flow · commit 39baa835e3a3 · 2017-06-20T18:21:34.000+01:00
Development
diff --git a/.gitignore b/.gitignore
@@ -0,0 +1 @@
+.node_modules/
diff --git a/README.md b/README.md
@@ -0,0 +1,31 @@
+![Note App Logo](https://user-images.githubusercontent.com/6470014/27345241-dbfd1a88-55e0-11e7-8a01-e0c914008543.png)
+
+A single page application build with JavaScript, HTML and CSS.
+No libraries or frameworks allowed!
+
+## User Stories
+```
+As a programmer
+I can see a list of my notes, where each note is abbreviated to the first 20 characters
+So I can find the one I want
+```
+
+```
+As a programmer
+I can create a new note
+So I can record something I need to remember
+```
+
+```
+As a programmer
+I can see the full text of an individual note on its own page
+So I can see all the information in the note
+```
+
+## Contributors
+
+- [Charlotte Feather](https://github.com/charliefea)
+- [Colin Scally](https://github.com/cdscally)
+- [Mario Ribeiro](https://github.com/marioribeiro)
+- [Simon Ashbery](https://github.com/SiAshbery)
+- [Kavita Kalaichelvan](https://github.com/kkavita92)
diff --git a/SpecRunner.html b/SpecRunner.html
@@ -3,8 +3,6 @@
   <head>
     <meta charset="utf-8">
     <title>Notes App SpecRunner</title>
-
-    <script src="./src/view.js"></script>
     <script src="./src/NoteList.js"></script>
     <script src="./src/Note.js"></script>
     <script src="./spec/TestingFramework.js"></script>
diff --git a/css/template.css b/css/template.css
@@ -39,14 +39,17 @@ header {
    background-color: #FFF;
    border-radius: 4px;
    box-sizing: border-box;
-   padding: 15px;
    margin-bottom: 15px;
  }
   ul#notes-list li:hover {
     box-shadow: 0 14px 28px rgba(0,0,0,0.25), 0 10px 10px rgba(0,0,0,0.22);
     transition: all 0.3s cubic-bezier(.25,.8,.25,1);
-    cursor: pointer;
-  }
+}
+
+ul#notes-list li p{
+  padding: 15px;
+  cursor: pointer;
+ }
 
 .create-new-note {
   width: 646px;
@@ -105,3 +108,7 @@ header {
   resize: none;
   margin-top: 15px;
 }
+
+#note-content {
+  word-wrap: break-word;
+}
diff --git a/src/view.js b/src/view.js
@@ -2,19 +2,25 @@ var pageList = new NoteList();
 
 var submitNote = function() {
   pageList.createNote(document.forms[0].elements[0].value);
+  document.forms[0].elements[0].value = '';
   writeList();
 };
 
 var writeList = function() {
   var notesList = document.getElementById('notes-list');
   var li = document.createElement('li');
-  var note = document.createElement('p');
-  var long = pageList.notes[pageList.notes.length - 1].content;
-  note.innerHTML = pageList.list()[pageList.list().length - 1];
-  note.addEventListener('click', function() {
+  var noteElement = document.createElement('p');
+  var fullNote = pageList.notes[pageList.notes.length - 1].content;
+  var abbreviatedNote = pageList.list()[pageList.list().length - 1];
+  if (fullNote == abbreviatedNote) {
+    noteElement.innerHTML = abbreviatedNote;
+  } else {
+    noteElement.innerHTML = abbreviatedNote + '...';
+  }
+  noteElement.addEventListener('click', function() {
     var noteContent = document.getElementById('note-content');
-    noteContent.innerHTML = long;
+    noteContent.innerHTML = fullNote;
   });
-  li.appendChild(note);
+  li.appendChild(noteElement);
   notesList.appendChild(li);
-};
+};
