<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<!DOCTYPE html><html class=''>
<head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/paulnotes/pen/WpVoQj?depth=everything&order=popularity&page=3&q=vue+js&show_forks=false" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.0/css/materialize.min.css'><link rel='stylesheet prefetch' href='https://fonts.googleapis.com/icon?family=Material+Icons'>
<style class="cp-pen-styles"></style></head><body>
<head>
<title>Material Notes</title>
</head>
<body>
<div id="app">
<nav class="grey darken-3" style="margin-bottom: 2rem">
<div class="nav-wrapper">
<a href="#" class="brand-logo center white-text">Material Notes</a>
</div>
</nav>
<div class="row container">
<div class="col s12 l6 xl6 offset-l3 offset-xl3">
<!---Form is here -->
<div class="col s12">
<div class="row">
<div class="input-field col s12">
<input id="title" type="text" class="validate" v-model="note.title">
<label for="title">Title</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<input id="src" type="url" class="validate" placeholder="http://anImageSource.com/image.jpg" v-model="note.src">
<label for="src">Image URL</label>
</div>
</div>
<div class="row">
<div class="input-field col s12">
<textarea id="textarea" class="materialize-textarea" v-model="note.text"></textarea>
<label for="textarea">Notes</label>
</div>
</div>
<button v-on:click="addNote" class="waves-effect waves-light btn amber darken-4">Add Note</button>
</div>
<!--Form ends here -->
</div>
</div>
<div class="row">
<div class="section"></div>
<div class="col s12 m6 l3" v-for="(note, index) in notes">
<div class="card white hoverable">
<div class="card-image">
<img v-bind:src="note.src">
<span class="card-title">{{note.title}}</span>
<a v-on:click="removeNote(index)" class="btn-floating halfway-fab waves-effect waves-light amber darken-4"><i class="material-icons">delete</i></a>
</div>
<div class="card-content">
<p>
{{note.text}}
</p>
</div>
<div class="card-action orange-text">Created on: <i>{{note.date}}</i>
</div>
</div>
</div>
</div>
<footer class="page-footer black">
<div class="container">
<div class="col s12 center-align white-text">
A simple note taking app with VUE Js by Abialbon Paul
</div>
</div>
<div class="section"></div>
</footer>
<script src="app.js"></script>
</body>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/materialize/0.98.1/js/materialize.min.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js'></script>
<script >var app = new Vue({
el: '#app',
data: {
note: {
title: '',
text: '',
src: ''
},
notes: [{
title: 'San Juan',
text: "San Juan, Puerto Rico's capital and largest city, sits on the island's Atlantic coast. Its widest beach fronts the Isla Verde resort strip, known for its bars, nightclubs and casinos.",
date: new Date(Date.now()).toLocaleString(),
src: 'http://www.san-juan-airport.com/images/san-juan-city-skyline.jpg'
}, {
title: 'Mountains',
text: "The Andes, running along South America's western side, is among the world's longest mountain ranges. Its varied terrain encompasses glaciers, volcanoes, grassland, desert, lakes and forest.",
date: new Date(Date.now()).toLocaleString(),
src: 'https://cache-graphicslib.viator.com/graphicslib/thumbs674x446/20268/SITours/portillo-inca-lagoon-at-the-andes-mountains-and-san-esteban-vineyard-in-santiago-255055.jpg'
}]
},
methods: {
addNote() {
let {
title,
text,
src
} = this.note;
if (src == '') {
src = 'http://www.gavaghan.ca/wp-content/uploads/2014/09/placeholder.png'
}
if (title == '' || text == '') {
alert('Please enter some text');
return
} else {
this.notes.push({
title,
text,
date: new Date(Date.now()).toLocaleString(),
src
});
this.note.title = '';
this.note.text = '';
this.note.src = ''
}
}, //AddNote
removeNote(index) {
this.notes.splice(index, 1);
}
}
});
//# sourceURL=pen.js
</script>
</body></html>
