Skip to main content

Posts

Showing posts with the label JavaScript

Responsive header menu bar using jquery with sub-menu for mobile and tables

Responsive menu jquery with submenu mobile and tables Download HTML File Source : <!doctype html> <html> <head> <meta charset="utf-8"> <title>Responsive menu jquery with submenu mobile and tables </title> <link rel="stylesheet" href="http://fontawesome.io/assets/font-awesome/css/font-awesome.css" type="text/css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> <script> $(document).ready(function(e) {     $("#mobileMen").click(function(){ $("#menu").fadeToggle(100) }) }); </script> <style> * { margin:0px; padding:0px; text-decoration:none; color:inherit; font-family:arial; transition-duration:.5s; }  nav  { background:#FF404E;     background: -webkit-linear-gradient(#FF404E, #FF616C);     background: -o-linear-gradient(#FF404E, #FF616C);     backgrou...

How to create a dynamic digital clock for your website using javascript

Dynamic Digital Clock Time : Day : Click to see the clock Just copy and past on your website Source :  <!DOCTYPE html> <html> <head> <script> function startTime() {     var today = new Date();     var h = today.getHours();     var m = today.getMinutes();     var s = today.getSeconds();     m = checkTime(m);     s = checkTime(s);     document.getElementById('clock').innerHTML =     h + ":" + m + ":" + s;     var t = setTimeout(startTime, 500); var today = new Date();     var day = today.getDate();     var month = today.getMonth();     var year = today.getFullYear();       document.getElementById('day').innerHTML =     day + "/" + month + "/" + year;     var d = setTimeout(startTime, 500); } function checkTime(i) {     if (i < 10) {i =...

Create dynamic table using bootstrap (filter & find records)

Data Table With Bootstrap Download HTML file Into : In this table, you can short, filtering, find the record and many features you have been used but its very easy to use and configure. so don't get late lets introducing data table CSS:  Data table Stylesheet JS:   Data table js download this for your next project. or you can copy and paste bellow con on your project it's definitely working. Source : <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Data Table</title> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://cdn.datatables.net/1.10.16/js/jquery.dataTables.min.js"></script> <script src="https://cdn.datatables.net/1.10.16/js/dataTables.bootstrap4.min.js"></script> <script> $(document).ready(function(){       $('#myTable').DataTable(); }); </script> <link...

How to create a calculator using HTML, CSS & JavaScript

Create a Calculator Using HTML ,CSS & JavaScript Download HTML file Source : <!doctype html> <html> <head> <meta charset="utf-8"> <title>Dynamic Calculator</title> <style> body { background:#ecf0f1; font-family:arial; } #calBody { padding:10px; background:#3498db; width:300px; height:310px; margin:auto; top:0px; right:0px; left:0px; bottom:0px; position:absolute; -webkit-box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.15); -moz-box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.15); box-shadow: 0px 1px 1px 1px rgba(0,0,0,0.15); } #calBody h1 { color:#ecf0f1; font-weight:normal; text-align:center; } #calBody input, #answer { padding:10px; width:270px; border:none; margin:auto; display:block; margin-bottom:10px; font-size:24px; color:#34495e; background:#ecf0f1; } #buttons { width:230px; margin:auto; ...

Show date and time by JavaScript

Show date and time help of JavaScript. Output : Show date and time help of JavaScript. Date : dd/mm/yyyy Time : hh:mm:ss Long Process : <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>Show date and time help of JavaScript</title> </head> <body> <h1 align="center">Show date and time help of JavaScript.</h1> <script> var date = new Date(); document.write("Date : ") document.write(date.getDate()) document.write("/") document.write(date.getMonth()) document.write("/") document.write(date.getFullYear()) document.write("<br>") document.write("Time : ") document.write(date.getHours()) document.write(":") document.write(date.getMinutes()) document.write(":") document.write(date.getSeconds()) </script> </body> </html> Light Process : ...