Another webSQL

Developer
Size
6,565 Kb
Views
48,576

How do I make an another websql?

What is a another websql? How do you make a another websql? This script and codes were developed by Moncho Varela on 07 July 2022, Thursday.

Another webSQL Previews

Another webSQL - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Another webSQL</title> <link rel="stylesheet" href="http://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.2.0/css/font-awesome.min.css"> <link href='http://fonts.googleapis.com/css?family=Roboto:400,300,700,700italic,400italic,100italic' rel='stylesheet' type='text/css'> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="window"> <nav class="menu"> <button class="btn" type="button" id="modal_open"><i class="fa fa-edit"></i> </button> <button class="btn" type="button" id="dbDel"><i class="fa fa-trash"></i> </button> <button class="btn" type="button" id="dbRefresh"><i class="fa fa-refresh"></i> </button> <button class="btn" type="button" id="dbCode"><i class="fa fa-code"></i> </button> </nav> <div class="window-drag"></div> <div class="window-buttons"> <a href="#" id="minimize">minimize</a> <a href="#" id="maximize">Maximize</a> <a href="#" id="close">Close</a> </div> <div class="window-body"> <div class="widget"> <div id="page"> <div class="preloader"> <div class="preloader_inner"></div> </div> <section id="dbSection"> <ul id="dbEvents" class="grid"></ul> </section> <section class="modal-overlay"> <div class="modal-content"> <button class="btn-close" id="modal_close">&times;</button> <div class="modal-body"> <form action="#" method="post" id="dbForm"> <label>Title</label> <input type="text" name="dbTitle" id="dbTitle"> <label>Description</label> <textarea name="dbDescription" id="dbDescription" rows="10"></textarea> </div> <div class="modal-footer"> <input type="submit" id="dbAdd" value="Add"> </div> </form> </div> </section> <!-- modal --> </div> </div> <div id="footer_info"></div> </div>
</div> <script src="js/index.js"></script>
</body>
</html>

Another webSQL - Script Codes CSS Codes

 ::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-track { background-color: #ECECEC; } ::-webkit-scrollbar-thumb { background-color: #CBCBCB; } ::-webkit-scrollbar-thumb:hover { background-color: #C8C8C8; } ::-webkit-selection { color: #FFFFFF; background: #EF7171; } * { box-sizing: border-box; } html, body { position: relative; height: 100%; } body { margin: 30px auto; padding: 0; width: 600px; height: 465px; font-size: 13px; font-family: 'Roboto', sans-serif; font-weight: 300; text-rendering: auto; background: #3C3331; } h3, p { text-align: center; font-family: Roboto; font-weight: 300; } h3 { font-weight: 700; } .window { box-sizing: border-box; position: relative; width: 100%; margin: 0; overflow: hidden; background: #5D504D; border-width: 3px; border-color: #5D504D; border-style: solid; display: block; height: 100%; position: relative; border-radius: 4px; box-shadow: 0 1px 5px #100E0E; } .window .window-drag { height: 3em; width: 51em; -webkit-app-region: drag; } .window .window-buttons { position: absolute; top: 0; right: 0; width: 100px; height: 36px; z-index: 99999; -webkit-app-region: no-drag; -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; } .window .window-buttons #minimize, .window .window-buttons #maximize, .window .window-buttons #close { position: absolute; top: 1em; right: 1em; width: 1em; height: 1em; text-decoration: none; overflow: hidden; border-radius: 100%; } .window .window-buttons #minimize { right: 4em; background: #16A085; color: #16A085; } .window .window-buttons #maximize { right: 2.5em; background: #D35400; color: #D35400; } .window .window-buttons #close { right: 1em; background: #C0392B; color: #C0392B; } .window .widget { position: relative; width: 100%; height: 100%; overflow-y: auto; } @media (max-width: 480px) { .window .window-body { width: 100%; } } /* APP */ a { color: #217dbb; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } a:hover, a:focus { color: #196090; } h1, h2, h3, h4, h5, h6 { margin-top: 0; font-family: Roboto; color: #666666; } h1 { font-size: 3em; line-height: 1; padding-top: 0.53em; margin-bottom: 0.5em; } h2 { font-size: 2em; padding-top: 0.25em; margin-bottom: 0.5em; } h3 { font-size: 1.5em; line-height: 1; padding-top: 0.35em; margin-bottom: 0.65em; } p { margin: 0 0 1.5em 0; } /* PRELOADER
--------------------*/ .loaded { opacity: 0; visibility: hidden; filter: alpha(opacity=0); -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } .preloader { position: absolute; top: 0; left: 0; background: #EDEDED; width: 100%; height: 100%; z-index: 99999; } .preloader .preloader_inner { position: absolute; top: 0; right: 0; bottom: 0; left: 0; margin: auto; width: 1em; height: 1em; background: #FFD2D2; border-radius: 100%; -webkit-animation: love 1s infinite linear; animation: love 1s infinite linear; -webkit-backface-visibility: hidden; backface-visibility: hidden; box-shadow: 0em 0em 0 1em #E8E8E8, 0em 0em 0 2em #EDEDED, 0em 0em 0 3em #EAEAEA, 0em 0em 0 4em #E5E5E5, 0em 0em 0 5em #EAEAEA; } @-webkit-keyframes love { 10% { box-shadow: 0em 0em 0 1em #E8E8E8, 0em 0em 0 0em #EDEDED, 0em 0em 0 0em #EAEAEA, 0em 0em 0 0em #E5E5E5, 0em 0em 0 0em #EAEAEA; } } @keyframes love { 10% { box-shadow: 0em 0em 0 1em #E8E8E8, 0em 0em 0 0em #EDEDED, 0em 0em 0 0em #EAEAEA, 0em 0em 0 0em #E5E5E5, 0em 0em 0 0em #EAEAEA; } } @-webkit-keyframes preloader { 50% { color: white; } } @keyframes preloader { 50% { color: white; } } #page { width: 100%; margin: 0 auto; overflow-y: auto; padding: 0; display: block; height: 31em; background: #F5F5F5; } #page::-webkit-scrollbar { width: 5px; } #page::-webkit-scrollbar-track { background-color: #ECECEC; } #page::-webkit-scrollbar-thumb { background-color: #CBCBCB; } #page::-webkit-scrollbar-thumb:hover { background-color: #C8C8C8; } .menu { margin: 0; padding: 0; } .menu .btn { display: inline-block; float: left; padding: 0.7em; outline: none; cursor: pointer; background: rgba(0, 0, 0, 0); border: none; color: #B5B5B5; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } .menu .btn:hover { color: #16A085; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } /* Modal */ .modal-overlay { background: #FFF; height: 100%; left: 0; display: block; overflow: auto; padding: 0; position: absolute; top: 0; width: 100%; z-index: 9999; opacity: 0; visibility: hidden; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } #modal_close { position: absolute; top: 0; right: 0; padding: 0.2em; background: #F7F4F4; border: none; font-size: 3em; color: #888; outline: none; cursor: pointer; font-family: initial; } #modal_close:hover { color: #f55; } .modal-content { background: #F7F4F4; margin: 0 auto; overflow: auto; overflow-x: hidden; position: relative; padding: 1em; border-radius: 4px; } .modal-content .modal-body { padding: 0; margin-top: 2em; } .modal-body #dbForm label { display: block; margin: 5px auto; padding: 0; color: #A0A0A0; } .modal-body #dbForm input, .modal-body #dbForm textarea { display: block; width: 100%; margin: 0.5em auto; padding: 0.5em 1em; background: #FFFFFF; border: 1px solid #E4E4E4; color: #555; } .modal-footer { display: block; padding: 0.5em; margin-top: 1.5em; } .modal-footer input[type="submit"] { border: 1px solid #E4E4E4; background: #FFF; padding: 0.5em 1em; color: #717171; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } .modal-footer input[type="submit"]:hover { border: 1px solid #E4E4E4; background: #F2F2F2; color: #FF9090; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; cursor: pointer; } .show { opacity: 1; visibility: visible; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } #dbSection { display: block; padding: 0; } .grid { padding: 0; margin: 0; list-style: none; -webkit-column-count: 2; -webkit-column-gap: 0.2em; } .grid li { position: relative; background: #5D504D; border-radius: 4px; display: inline-block; list-style: none; padding: 0.2em; margin: 0.2em; } .grid li:nth-child(4n+1) { background: #D35400; } .grid li:nth-child(4n+2) { background: #16A085; } .grid li:nth-child(4n+3) { background: #C0392B; } .grid li > div { padding: 0.5em; } .grid li > .eventDel { position: absolute; top: 0; right: 0.5em; padding: 0; color: #fff; text-decoration: none; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; font-family: initial; font-size: 1.5em; } .grid li > .eventDel:hover { color: #EF7171; -webkit-transition: all 0.5s ease; transition: all 0.5s ease; } .grid li > h3 { margin: 0; padding: 0.5em; text-align: left; color: #f5f5f5; } .grid li > .eventDate { display: block; background: #FFFFFF; border-top: 1px solid #ECECEC; border-bottom: 1px solid #ECECEC; padding: 0.5em; color: #C0C0C0; overflow: hidden; } .grid li > .eventDate .in-left { float: left; } .grid li > .eventDate .in-right { float: right; } .grid li .eventDesc { color: #777; word-break: break-all; word-wrap: break-word; min-width: 20em; min-height: 5em; background: white; } .info { position: absolute; top: 0; left: 0; right: 0; bottom: 0; width: 21em; height: 7em; margin: auto; display: block; background: #FFF; padding: 1em; border-radius: 4px; border: 1px solid #E5E5E5; color: #B3ADAD; } pre { display: block; width: 100%; min-height: 27em; padding: 0; color: #808080; margin: 0; word-break: break-word; } #footer_info { color: #8B807D; -webkit-transition: all 1s ease; transition: all 1s ease; line-height: 1.5em; margin-left: 1em; }
#footer_info p{ text-align:left;
}
#footer_info i{ margin-left:0.2em; margin-right:0.2em; color:white;
}
#footer_info .tip{ color:#16A085;
}

Another webSQL - Script Codes JS Codes

window.addEventListener( 'DOMContentLoaded', function() { notes.run();
}, false);
// simple WebSql app
var notes = (function() { 'use strict'; return { db: '', // default options cache: { db_name: 'dbNotes', db_table: 'notes', db_version: '0.1', db_description: 'A Database of Events', db_not_support: 'WebSQL is not supported by your browser!', db_valid_form: 'You must enter a something!', db_error: 'db not found, your browser does not support web sql!' }, // run notes run: function() { var self = this; // check support if (window.openDatabase) { // open database this.db = openDatabase(self.cache.db_name, self.cache.db_version, self.cache.db_description, 1024 * 1024); // create table this.db.transaction(function(t) { t.executeSql('CREATE TABLE IF NOT EXISTS ' + self.cache.db_table + '(id INTEGER PRIMARY KEY ASC, date TEXT, hour TEXT, title TEXT, description TEXT)'); }); } else { // not support qS('#dbEvents').innerHTML = '<div class="info">' + '<h3>Not Support</h3><p>' + self.cache.db_not_support + '</p>' + '</div>'; } // Hide preloader on load var loader = setTimeout(function() { qS('.preloader').classList.add('loaded'); clearTimeout(loader); }, 2000); // footer info this.showInfoHeader(); // show envets this.outputEvents(); // init functions this.fns(); }, fns: function() { var self = this; // open modal qS('#modal_open').addEventListener('click', function(e) { self.showOrhide(e); }, false); // close modal qS('#modal_close').addEventListener('click', function(e) { self.showOrhide(e); }, false); // add event and hide modal qS('#dbAdd').addEventListener('click', function(e) { e.preventDefault(); self.addEvent(); }, false); // add event and hide modal qS('#dbRefresh').addEventListener('click', function(e) { e.preventDefault(); self.refresh(100); }, false); // delete event and hide modal qS('#dbDel').addEventListener('click', function(e) { e.preventDefault(); // confirm before drop if (self.confirm('Are you sure') === true) { // drop data self.drop(); // remove class qS('.modal-overlay').classList.remove('show'); // show info qS('#dbEvents').innerHTML = '<div class="info"><h3>Clear Database....</h3><p>The Database now is empty <br>Refresh to create.</p></div>'; } }, false); }, // modal function showOrhide: function(e) { var modal = qS('.modal-overlay'); e.preventDefault(); if (modal.classList.contains('show')) { modal.classList.remove('show'); } else { modal.classList.add('show'); } }, // confirm fn confirm: function(msg) { var data = confirm(msg + " ?"); return data; }, // refresh on delete refresh: function(time) { var t = setTimeout(function() { window.location = window.location; clearTimeout(t); }, time); }, // delete drop: function() { var self = this; self.db.transaction(function(tx) { tx.executeSql('DROP TABLE ' + self.cache.db_table, [], self.outputEvents(), function onError(tx, error) { qS('#dbEvents').innerHTML = '<p class="error">Error: ' + error.message + '</p>'; }); }); }, // add event addEvent: function() { var self = this; if (this.db) { var d = new Date(), date = d.getDate() + '/' + d.getMonth() + '/' + d.getFullYear(), hour = _getHour(), title = qS('#dbTitle').value, desc = qS('#dbDescription').value; // if not empty values if (title !== '' && desc !== '') { self.db.transaction(function(tx) { tx.executeSql('INSERT INTO ' + self.cache.db_table + '(date,hour,title,description) VALUES (?,?,?,?)', [date, hour, title, desc]); self.outputEvents(); qS('#dbForm').reset(); qS('.modal-overlay').classList.remove('show'); }); } else { alert(self.cache.db_valid_form); } } else { // not support qS('#dbEvents').innerHTML = '<div class="info">' + '<h3>Error</h3><p>' + this.cache.db_error + '</p>' + '</div>'; } }, // update events updateEvents: function(transaction, results) { var self = this, result = qS('#dbEvents'), a, html = '', out = ''; result.innerHTML = ''; for (a = 0; a < results.rows.length; a++) { var row = results.rows.item(a); out += JSON.stringify(row, undefined, 2) + ',\n'; html += '<li><a class="eventDel" href="javascript:void(0);" onclick="notes.deleteEvent(' + row.id + ');">&times;</a><h3>' + row.title + '</h3><div class="eventDate"><span class="in-left">' + row.date + '</span><span class="in-right">' + row.hour + '</span></div><div class="eventDesc" contenteditable onkeyup="notes.updateEvent(' + row.id + ',this)">' + row.description + '</div></li>'; } if(html === ''){ result.innerHTML = '<div class="info">'+'<h3>Empty Database</h3><p>Add New note in Database</p>'+'</div>'; }else{ result.innerHTML = html; } // render to json qS('#dbCode').addEventListener('click', function() { out = out.replace(/,\s*$/, ""); if (typeof out !== 'undefined') { qS('.modal-content').innerHTML = '<pre>[' + out + ']</pre>'; qS('.modal-overlay').classList.add('show'); } }); }, // update event updateEvent: function(id, el) { var self = this; this.db.transaction(function(tx) { tx.executeSql('UPDATE ' + self.cache.db_table + ' SET description = ? WHERE id = ?', [el.textContent, id], null, function() { qS('#dbEvents').innerHTML = '<div class="info">'+'<h3>Error</h3><p>'+self.cache.db_error+'</p>'+'</div>'; }); }); }, // show events in html outputEvents: function() { var self = this; if (this.db) { this.db.transaction(function(tx) { tx.executeSql('SELECT * FROM ' + self.cache.db_table, [], self.updateEvents); }); } else { // not support qS('#dbEvents').innerHTML = '<div class="info">' + '<h3>Error</h3><p>' + this.cache.db_error + '</p>' + '</div>'; } }, // delete event deleteEvent: function(id) { var self = this; if (this.db) { if (this.confirm('Are you sure') === true) { self.db.transaction(function(t) { t.executeSql('DELETE FROM ' + self.cache.db_table + ' WHERE id=?', [id], self.outputEvents()); }); } } else { // not support qS('#dbEvents').innerHTML = '<div class="info">' + '<h3>Error</h3><p>' + this.cache.db_error + '</p>' + '</div>'; } }, // show tips showInfoHeader: function(){ var element = qS('#footer_info'); var tip_1 = '<p><b class="tip">Note: </b>You can see the code pressing the button <i class="fa fa-code"></i>.</p>'; var tip_2 = '<p><b class="tip">Note: </b>pressing the button <i class="fa fa-trash"></i> and clear Database</p>'; var tip_3 = '<p><b class="tip">Note: </b>pressing the button <i class="fa fa-refresh"></i> and refresh window</p>'; var tip_4 = '<p><b class="tip">Note: </b>You can edit content of notes, just click in note and edit.</p>'; var arr = [tip_1,tip_2,tip_3,tip_4]; element.innerHTML = tip_1; setInterval(function(){ var rand = arr[Math.floor(Math.random() * arr.length)]; element.innerHTML = rand; },5000); } }; function qS(e) { return document.querySelector(e); } function addZero(i) { if (i < 10) { i = "0" + i; } return i; } function _getHour() { var d = new Date(), h = addZero(d.getHours()), m = addZero(d.getMinutes()), result = h + ":" + m; return result; }
})();
Another webSQL - Script Codes
Another webSQL - Script Codes
Home Page Home
Developer Moncho Varela
Username nakome
Uploaded July 07, 2022
Rating 4.5
Size 6,565 Kb
Views 48,576
Do you need developer help for Another webSQL?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Moncho Varela (nakome) Script Codes
Create amazing love letters with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!