<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 lang='en' 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/builtbyvern/pen/rWozMM?limit=all&page=13&q=note" />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'>
<style class="cp-pen-styles">html, body {
box-siding: border-box;
margin: 0;
padding: 0;
}
.container {
max-width: 600px;
margin: 0 auto;
}
header {
background: teal;
color: #fff;
display: flex;
justify-content: space-between;
padding: 10px;
}
header h1 {
margin: 0;
}
button {
background: none;
border: none;
line-height: 16px;
margin: 0 0 .5em;
}
button.delete {
color: #b31014;
background: none;
font-size: 24px;
}
button.delete:hover {
color: #840f11;
}
button.txt-btn {
font-size: 12px;
text-transform: uppercase;
border: solid 1px #fff;
padding: 3px;
width: 100%;
background: rgba(255, 255, 255, 0.5);
}
button.add-note {
background: transparent;
}
button.add-note:hover {
background: rgba(0, 0, 0, 0.1);
}
.button-group {
padding: 10px;
background: rgba(0, 0, 0, 0.05);
}
.button-container {
display: flex;
}
select {
width: 100%;
margin: 0 0 .5em;
}
.note {
display: flex;
position: relative;
justify-content: space-between;
}
.note .button-group.active {
display: none;
}
.note.bg-green {
background: #B3FFC0;
}
.note.bg-blue {
background: #B3E8FF;
}
.note.bg-yellow {
background: #FFFFA5;
}
.note.in-edit {
z-index: 1000;
box-shadow: 0px 0px 10px 0px rgba(50, 50, 50, 0.75);
background-color: #ededed;
}
.note.in-edit.no-shadow {
box-shadow: none;
}
.note.in-edit .button-group.inactive {
display: none;
}
.note.in-edit .button-group.active {
display: block;
}
.note.in-edit textarea {
height: 70%;
visibility: visible;
border: dashed 2px #fff;
}
.note.in-edit p {
height: 0px;
visibility: hidden;
}
.note label {
font-size: 9px;
text-align: center;
}
.note textarea {
border: none;
background: none;
outline: 0;
resize: none;
padding: 10px;
width: 90%;
}
.note-content {
padding: 10px;
width: 80%;
}
#notes h1 {
text-align: center;
}
</style></head><body>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="x-ua-compatible" content="ie=edge">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
<header>
<h1>Notes</h1>
</header>
<section id="new-note">
<article class="note in-edit new-note no-shadow" data-bg="">
<div class="note-content">
<textarea placeholder="Click here and type!"></textarea>
</div>
<div class="button-group inactive">
<div class="button-container">
<button class="edit txt-btn">EDIT</button>
<button class="delete">×</button>
</div>
</div>
<div class="button-group active">
<label for="color">CHOOSE COLOR</label>
<select name="color" class="color-chooser">
<option value="">-- SELECT --</option>
<option value="yellow">Yellow</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
</select>
<button class="txt-btn save">Save</button>
</div>
</article>
</section>
<section id="notes">
</section>
</div>
</body>
</html>
<script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script >
var notes = [];
function displayNotes() {
// clear that screen first
$('#notes').empty();
// either run through the array or give a nice welcome.
if (notes.length > 0) {
var i;
for ( i = 0; i < notes.length; i++ ) {if (window.CP.shouldStopExecution(1)){break;}
var currentNote = notes[i];
addExistingNote(i,currentNote.color,currentNote.text);
}
window.CP.exitedLoop(1);
} else {
$('#notes').append("<h1>Let's Get Started</h1>");
}
}
// the code that drops that hot html
function addExistingNote(i,color,text) {
// generate that html
$('#notes').prepend(
'<article class="note new-note bg-' + color + '" data-count="' + i + '">' +
'<div class="note-content">' +
'<textarea readonly>' + text + '</textarea>' +
'</div>' +
'<div class="button-group inactive">' +
'<div class="button-container">' +
'<button class="edit txt-btn">EDIT</button>' +
'<button class="delete">×</button>' +
'</div>' +
'</div>' +
'<div class="button-group active">' +
'<label for="color">CHOOSE COLOR</label>' +
'<select name="color" class="color-chooser">' +
'<option value="">-- SELECT --</option>' +
'<option value="yellow">Yellow</option>' +
'<option value="green">Green</option>' +
'<option value="blue">Blue</option>' +
'</select>' +
'<button class="txt-btn save">Save</button>' +
'</div>' +
'</article>'
);
// let this note really equal this note since we're prepending it
var thisnote = $('#notes').find('.note:first');
// delete
thisnote.find('.delete').click(function(){
notes.splice(i,1);
displayNotes();
});
//edit button
thisnote.find('.edit').click(function(){
thisnote.addClass('in-edit');
var currentColor = color;
thisnote.find('.color-chooser').val(color);
thisnote.find('textarea').removeAttr('readOnly');
});
// save button
thisnote.find('.save').click(function(){
var editText = thisnote.find('textarea').val();
var editColor = thisnote.find('.color-chooser').val();
if ( editColor !='' ) {
notes.splice(i,1,{color:editColor, text:editText});
} else {
alert('Please assign a color');
}
displayNotes();
});
}
// adds a new note to our lovely array
function addNewNote(newNoteColor,newNoteText) {
$('#new-note textarea').val('');
// add it to the array
notes.push({color:newNoteColor, text:newNoteText});
// show them now
displayNotes();
}
// save a new note.
function saveNote(){
var newNoteColor = $('#new-note .color-chooser').val();
var newNoteText = $('#new-note textarea').val();
if ( newNoteColor != '' ) {
addNewNote(newNoteColor,newNoteText);
} else {
alert('Please assign a color');
}
}
$(document).ready(function(){
displayNotes();
$('#new-note .save').click(function(){
saveNote();
});
});
//# sourceURL=pen.js
</script>
</body></html>
