Another webSQL
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 - 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">×</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 + ');">×</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; }
})();
Developer | Moncho Varela |
Username | nakome |
Uploaded | July 07, 2022 |
Rating | 4.5 |
Size | 6,565 Kb |
Views | 48,576 |
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!
Name | Size |
Responsive table with json data. | 4,802 Kb |
Simple Calendar with json events | 4,127 Kb |
Background video | 3,286 Kb |
IndexedDB demo | 6,577 Kb |
Youtube videos | 3,592 Kb |
One page theme | 6,183 Kb |
A Pen by Moncho Varela | 7,581 Kb |
Another webSQL | 6,565 Kb |
Another preloader, Airport panel. | 2,948 Kb |
Calendar with json events mobile concept | 4,022 Kb |
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!
Name | Username | Size |
Three js | Paulq | 2,353 Kb |
Bootstrap 3 Price Table | Honglio | 2,655 Kb |
Ball physics | Blackkbot | 3,874 Kb |
Simple DevTools | Deegill | 2,511 Kb |
Weather App | OmranAbazid | 2,596 Kb |
Another brick in the wall | Fivera | 1,955 Kb |
Pure CSS Animated Photo Stack | Depthdev | 2,486 Kb |
Header Line Issue | Charlie-volpe | 1,768 Kb |
Prism | Pyrografix | 2,843 Kb |
Fading gradient button | Insprd | 1,713 Kb |
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!