Time Teller

Developer
Kenny Mark
Size
2,862 Kb
Views
26,312
  1. Time Teller Previews
  2. Time Teller HTML Codes
  3. Time Teller CSS Codes
  4. Time Teller JS Codes

How do I make an time teller?

What is a time teller? How do you make a time teller? This script and codes were developed by Kenny Mark on 28 September 2022, Wednesday.

Time Teller Previews
IQ Test

Time Teller - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Time Teller </title> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body> <body> <h1>Time and Postion Teller</h1> <div class="container"> <i class="fa fa-refresh"></i> <div class="popup round"></div> <div class="message round"> </div> <input type ="text" class="textbox " placeholder="Type in anything to get current time"> <i class="fa fa-paper-plane"></i> </input>
</div>
</body> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Time Teller - Script Codes CSS Codes

@import url(https://fonts.googleapis.com/css?family=Josefin+Sans);
* { margin: 0; padding: 0;
}
body { font-family: 'Josefin Sans', sans-serif; background: #95E1D3; font-size: 18px;
}
h1{ text-align: center; position: absolute; top:40px; color:#fff; margin: 120px auto; left:0; right:0; font-size: 40px;
}
.container { width: 400px; height: 350px; background-color: #d5efff; margin: 250px auto 0 auto; border-radius: 20px; background-clip: padding-box; position: relative; left: 0; right: 0; box-shadow: 0px 0px 0.2pc 1px #d5ffff;
}
.round { border-radius: 20px; background-clip: padding-box; color: white;
}
.popup { font-size: 13px; padding:5px 8px; background: #53CDD8; position: absolute; top: 200px; left: 2%; border-radius: 20px; height:18px;
}
.message { height:18px; background: #78BBE6; position: absolute; top: 250px; right: 5%; padding:4px 10px; font-size: 15px;
}
.textbox { width: 90%; height: 35px; background: white; position: absolute; top: 305px; margin: 0 20px; border-radius: 10px; border: 0px; outline: none; font-family: 'Josefin Sans', sans-serif; font-size: 17px; transition: all .3s ease-in-out; padding-left: 10px;
}
.textbox:focus{ background-color: #95E1D3; transition: all .3s; color:white;
}
.fa-paper-plane{ position: absolute; top:308px; left: 355px; border: 1px solid #d5ffff; padding: 5px; background-color: #efefef; border-radius:50%; transform:rotate(15deg); color:#F06868; cursor:pointer; transition: all 0.3s ease-in;
}
.fa-paper-plane:hover{ color:#FF304F;
}
.fa-refresh{ position: absolute; left:360px; top:10px; border:grey 1px solid; padding: 6px 8px; border-radius:50%; color: grey; background: ; cursor:pointer; transition: all .7s ease;
}
.fa-refresh:active{ transform:rotate(360deg); background: #f2f2f5;
}
.disabled{ opacity: 0.5;
}

Time Teller - Script Codes JS Codes

$(document).ready(function(){ var time = Date(); $('.popup').hide(); $('.message').hide(); $('.container').delay(500).hide().fadeIn(1000).effect('bounce', {times:6},400); $('.fa-paper-plane').click(function(){ var text = $('input').val(); var emptyInput = $('input').val(''); $(".popup").html(time).delay(500).effect('bounce').fadeIn(200); $(".message").html(text).effect('bounce').fadeIn(200); emptyInput; }); $('.fa-refresh').click(function(){ $('.message, .popup').slideUp(200); }); $('input').keypress(function(event){ if (event.which === 13){ $('.fa-paper-plane').click(); $(this).val(''); } });
function getLocation() { var x = $(".popup").text(); if (navigator.geolocation) { navigator.geolocation.getCurrentPosition(showPosition); } else { x.text("Geolocation is not supported by this browser."); }
} function showPosition(position) { x.text("Latitude: " + position.coords.latitude + "<br>Longitude: " + position.coords.longitude);
}
});
Time Teller - Script Codes
Time Teller - Script Codes
Home Page Home
Developer Kenny Mark
Username kennymark
Uploaded September 28, 2022
Rating 3
Size 2,862 Kb
Views 26,312
Do you need developer help for Time Teller?

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!

Kenny Mark (kennymark) Script Codes
Name
Flexbox grid
FseRec
Shopping
Beautiful Weather App
Login FSe
Blog Post M
Davon
A Pen by Kenny Mark
Twitter Todo List
Get Movie Cast App
Create amazing blog posts 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!