Estimated reading time: 7 minutes
Nota
Note taker application is web application and it is called to nota according to Egyptians. Note taker application helps you to store your notes on your browser and you can export your notes to excel or pdf. This application is based on html. css and JavaScript. It is depended on local storage to save your note with its date and time and you can also edit or delete your note to save it on your browser or export it to excel or pdf.
Code
HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset=”UTF-8″ />
<meta name=”viewport” content=”width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no” />
<meta name=”description” content=”note taker application is based on html, css and javascript. this application is used local storage in your prouser by javascript to store your notes and you can export your notes to excel or pdf”>
<meta name=”keywords” content=”portfolio, Website, about, Sharepoint Developer, Technology Information Developer, programming, developint, Mohammed Khaled, Web Develope, note, nota, note taker, notion, taking notes, save note, capture my notes”>
<meta name=”author” content=”Mohammed Khaled, mohammed.khaled@mohammedkhaled.com”>
<meta name=”og:title” content=”Nota”>
<meta name=”og:description” content=”Note taker”>
<meta property=”og:image” content=”https://mohammedkhaled.com/wordpress/wp-content/uploads/2022/07/note.png”>
<meta name=”og:type” content=”nota application”>
<meta name=”og:email” content=”mohammed.khaled@mohammedkhaled.com”>
<meta name=”og:phone_number” content=”+201141226652″>
<meta name=”og:country-name” content=”Egypt”>
<title>NOTA</title>
<link rel=”stylesheet” href=”style.css”>
</head>
<body>
<audio src=”welcome.mp3″ id=”my_audio”></audio>
<h1>Capture your notes</h1>
<form id=”add-form”>
<input id=”title” placeholder=”Title”>
<textarea name=”Note” id=”note” rows=”4″ placeholder=”Type your note here.”></textarea>
<input id=”date” type=”date” />
<button type=”submit”>add</button>
</form>
<hr/>
<table id=”list-table”>
<thead>
<th>
Title
</th>
<th colspan=”4″>
Note
</th>
<th colspan=”2″>
Date and Time
</th>
</thead>
</table>
<input type=”button” value=”export to Excel” onclick=”exportToExcel(‘list-table’)” />
<input type=”button” onclick=”generate()” value=”Export To PDF” />
<script src=”https://cdnjs.cloudflare.com/ajax/libs/jspdf/1.5.3/jspdf.min.js”></script>
<script src=”https://cdnjs.cloudflare.com/ajax/libs/jspdf-autotable/3.5.6/jspdf.plugin.autotable.min.js”></script>
<script src=”script.js”></script>
</body>
</html>
CSS:
* {
box-sizing: border-box;
}
html {
font-family: Helvetica, Arial, sans-serif;
background: #eee;
}
body {
border: 1px solid #ddd;
background: #fff;
max-width: 800px;
margin: 2rem auto;
padding: 2rem;
}
h1 {
border-bottom: 1px solid #eee;
margin-bottom: 2rem;
}
form {
margin: 2rem 0;
}
input, textarea {
display: block;
width: 100%;
padding: .5em 1em;
margin: 1rem 0;
font: inherit;
}
button {
border: 0;
padding: .5em 1em;
font: inherit;
border-radius: 1em;
cursor: pointer;
}
table {
width: 100%;
border-collapse: collapse;
border-spacing: 0;
}
td, th {
border: 1px solid #f3f3f3;
border-width: 1px 0;
padding: .5em 1em;
vertical-align: top;
}
th {
border-bottom: 2px solid #aaa;
text-align: left;
}
table .actions {
white-space: nowrap;
width: 1px;
}
table input,
table textarea {
margin: 0;
}
table textarea {
resize: none;
min-width: 300px;
height: 6em;
}
#date{
display: none;
}
JavaScript:
window.onload=function(){ document.getElementById(“my_audio”).play(); } var date = new Date(); var currentDate = date.toISOString().slice(0,10); var currentTime =currentDate+”<br/>”+ date.getHours() + ‘:’ + date.getMinutes(); var $form = document.querySelector(‘#add-form’) var $table = document.querySelector(‘#list-table’) var contacts = JSON.parse(localStorage.getItem(‘contacts’) || ‘[]’) contacts.forEach(function (contact) { var $row = document.createElement(‘tr’) $row.dataset.note = contact.note $row.innerHTML = ` <td> ${contact.name} </td> <td> ${contact.note || ‘-‘} </td> <tt> ${contact.date} </tt> <td class=”actions”> <a href=”#” data-action=”edit”>edit</a> | <a href=”#” data-action=”delete”>delete</a> </td> ` $table.appendChild($row) }) $form.addEventListener(‘submit’, function (event) { event.preventDefault() var name = document.querySelector(‘#title’).value var note =document.querySelector(‘#note’).value var date = document.getElementById(‘date’).value =currentTime; var $row = document.createElement(‘tr’) $row.dataset.note = note $row.innerHTML = ` <td> ${name} </td> <td> ${note} </td> <tt> ${date} </tt> <td class=”actions”> <a href=”#” data-action=”edit”>edit</a> | <a href=”#” data-action=”delete”>delete</a> </td> ` $table.appendChild($row) $form.reset() contacts.push({ note: note, name: name, date: date }) localStorage.setItem(‘contacts’, JSON.stringify(contacts)) }) $table.addEventListener(‘click’, function (event) { event.preventDefault() var $button = event.target var $row = $button.closest(‘tr’) var note = $row.dataset.note var action = $button.dataset.action if (action === ‘delete’) { contacts = contacts.filter(function (contact) { return contact.note !== note }) localStorage.setItem(‘contacts’, JSON.stringify(contacts)) $row.remove() } if (action === ‘edit’) { var $cells = $row.querySelectorAll(‘td’) var name = $cells[0].textContent.trim() var note = $cells[1].textContent.trim() var date = $cells[2].textContent.trim() $row.innerHTML = ` <td> <input value=”${name}” data-original=”${name}”> </td> <td> <textarea data-original=”${note}”>${note}</textarea> </td> <tt> <input value=”${currentTime}” data-original=”${currentTime}”> </tt> <td class=”actions”> <button data-action=”save”>save</button> <a href=”#” data-action=”cancel”>cancel</a> </td> ` } if (action === ‘save’) { var $inputs = $row.querySelectorAll(‘input, textarea’) var name = $inputs[0].value var note = $inputs[1].value var date = $inputs[2].value $row.innerHTML = ` <td> ${name} </td> <td> ${note} </td> <tt> ${date} </tt> <td class=”actions”> <a href=”#” data-action=”edit”>edit</a> | <a href=”#” data-action=”delete”>delete</a> </td> ` contacts.forEach(function (contactItem) { if (contactItem.note === note) { contactItem.name = name contactItem.note = note contactItem.date = date } }) localStorage.setItem(‘contacts’, JSON.stringify(contacts)) } if (action === ‘cancel’) { var $inputs = $row.querySelectorAll(‘input, textarea’) var name = $inputs[0].dataset.original var note = $inputs[1].dataset.original var date = $inputs[2].dataset.original $row.innerHTML = ` <td> ${name} </td> <td> ${note} </td> <tt> ${date} </tt> <td class=”actions”> <a href=”#” data-action=”edit”>edit</a> | <a href=”#” data-action=”delete”>delete</a> </td> ` } }) function exportToExcel(tableId){ let tableData = document.getElementById(tableId).outerHTML; tableData = tableData.replace(/<A[^>]*>|<\/A>/g, “”); //remove if u want links in your table tableData = tableData.replace(/<input[^>]*>|<\/input>/gi, “”); //remove input params tableData = tableData + ‘<br /><br />Code witten By sudhir K gupta.<br />My Blog – https://comedymood.com’ let a = document.createElement(‘a’); a.href = `data:application/vnd.ms-excel, ${encodeURIComponent(tableData)}` a.download = ‘my notes’ + getRandomNumbers() + ‘.xls’ a.click() } function getRandomNumbers() { let dateObj = new Date() let dateTime = `${dateObj.getHours()}${dateObj.getMinutes()}${dateObj.getSeconds()}` return `${dateTime}${Math.floor((Math.random().toFixed(2)*100))}` } function generate() { var doc = new jsPDF(‘p’, ‘pt’, ‘letter’); var htmlstring = ”; var tempVarToCheckPageHeight = 0; var pageHeight = 0; pageHeight = doc.internal.pageSize.height; specialElementHandlers = { // element with id of “bypass” – jQuery style selector ‘#list-table’: function (element, renderer) { // true = “handled elsewhere, bypass text extraction” return true } }; margins = { top: 150, bottom: 60, left: 40, right: 40, width: 600 }; var y = 20; doc.setLineWidth(2); doc.text(200, y = y + 30, “MY NOTES”); doc.autoTable({ html: ‘#list-table’, startY: 70, theme: ‘grid’, columnStyles: { 0: { cellWidth: 180, }, 1: { cellWidth: 180, }, 2: { cellWidth: 180, } }, styles: { minCellHeight: 40 } }) doc.save(‘my notes.pdf’); }