LOADING...

Preview

Pen ID
Unlock Campus Themeforest adv

 

Code

AngularJS Markdown Notes

{{note.createdOn | date:"EEEE dd MMMM, yyyy 'at' h:mma"}}
{{ note.text }}
CSS
@import url(https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,700);
@import url(https://fonts.googleapis.com/css?family=Source+Code+Pro);
* {
  box-sizing: border-box;
}
body {
  max-width: 580px;
  margin: auto;
  padding: 10px;
  position: relative;
  background: #fdfdfd;
}
img {
  max-width: 100%;
  height: auto;
}
div[contenteditable] {
  font-size: 1.2em;
  font-family: 'Source Sans Pro', sans-serif;
  border: none;
  box-shadow: none;
  margin: 0;
  width: 100%;
  padding: 10px 20px 10px;
  min-height: 300px;
  background: #f9f9f9;
}
div[contenteditable] pre,
div[contenteditable] code {
  background: #ededed;
}
div[contenteditable]:focus {
  font-family: 'Source Code Pro', courier, monospace;
  font-size: 1em;
}
.header {
  margin: 5px 10px 0;
  color: #d46e58;
  display: inline-block;
}
.note {
  background: #eee;
  box-shadow: #999 1px 1px 3px;
  margin: 30px 0;
  padding-top: 40px;
  min-height: 200px;
  width: 100%;
  display: block;
  position: relative;
  overflow: hidden;
}
.date {
  position: absolute;
  top: 0;
  left: 0;
  padding: 15px;
  font-size: 0.7em;
  font-style: italic;
  color: #71CBD0;
}
.icons {
  position: absolute;
  right: 0;
  top: 0;
  padding: 10px;
}
.fa-trash-o,
.fa-plus-circle {
  cursor: pointer;
}
.fa-check {
  color: #92D788;
}
.fa-trash-o {
  color: #C2474B;
}
.fa-trash-o:hover {
  color: #7a292b;
}
.fa-pencil {
  color: #DBC394;
}
.fa-plus-circle {
  color: #71CBD0;
}
.fa-plus-circle:hover {
  color: #369fa5;
}
JS
(function(){

  var app = angular.module('notesApp',['angular-markdown-editable']);
  
  app.controller('notesController', function($scope){
    
    // Initial Data
  	$scope.notes = [{
      createdOn:1428237500771,
      edit:false,
      text:"#Hello, World!\n\nThis is your first Angular Markdown note. You can:\n\n* Click/Focus to edit\n\n* Click off/Blur to save\n\n* Add a new note  by clicking the plus sign above.\n\n* Delete this note\n\nMarkdown compiled using the fantastic [angular-markdown-editable](http://projects.quiver.is/angular-markdown-editable/) directive."
    }];
    
    // Add New Note
    $scope.addNote = function(){
      $scope.newNote = {};
      $scope.newNote.createdOn = Date.now();
      $scope.newNote.text = ' ';
      $scope.newNote.edit = true;
      $scope.notes.push($scope.newNote);
      $scope.newNote = {};
    };
    
    // Delete Note
    $scope.delete = function (i) {
      var r = confirm("Are you sure you want to delete this note?");
      if (r == true) 
        $scope.notes.splice(i, 1);
		};
    
    // Update Note
    $scope.update = function(i, note) {
      $scope.notes[i].text = note;
      $scope.notes[i].edit = false;
    };
  
  // End Controller
  });
  
// End Function  
})();
Host Instantly Drag and Drop Website Builder

 

Description

I use notes apps like Google Keep and Apple Notes all the time, but I wish I could use Markdown in them, so I built this.
Term
Mon, 11/27/2017 - 21:42

Related Codes

Pen ID
Pen ID
Pen ID