Handy Tool For Work

Developer
Sarah Dunlap
Size
4,308 Kb
Views
6,072
  1. Handy Tool For Work Previews
  2. Handy Tool For Work HTML Codes
  3. Handy Tool For Work CSS Codes
  4. Handy Tool For Work JS Codes

How do I make an handy tool for work?

This can be a handy tool to use for work. Create check lists, calculate the number of hours worked in a day, make a list of important links. . What is a handy tool for work? How do you make a handy tool for work? This script and codes were developed by Sarah Dunlap on 18 January 2023, Wednesday.

Handy Tool For Work Previews
IQ Test

Handy Tool For Work - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Handy Tool For Work</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css'>
<link rel='stylesheet prefetch' href='https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css'>
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/font-awesome/4.6.3/css/font-awesome.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body>	<div class="container">	<div id="navMenu"><h1 onclick="menuToggle()">Menu<i class="fa fa-caret-down small" aria-hidden="true"></i><i style="display: none" class="fa fa-caret-up small" aria-hidden="true"></i></h1></div>	<div class="menu">	<h2 id ="linksMenu" onclick="showHide('#linksMenu')">Links</h2>	<h2 id="checkListMenu" onclick="showHide('#checkListMenu')">Check List</h2>	<h2 id ="timeCalcMenu" onclick="showHide('#timeCalcMenu')">Time Calculator</h2>	</div>	<section id="links">	<div id ="linksList">	<h1>Links</h1> <!-- Links -->	<p><a href="#">Link</a></p>	<p><a href="#">Link</a></p> <p><a href="#">Link</a></p> <p><a href="#">Link</a></p>	</div>	<div id ="checkList">	<h1>Check List</h1>	<form class="checkListMiddle">	<div class="checkbox" id="1" onclick="checkListToggle('#1')">	Item 1	</div>	<div class="checkbox" id="2" onclick="checkListToggle('#2')">	Item 2	</div>	<div class="checkbox" id="3" onclick="checkListToggle('#3')">	Item 3	</div>	<div class="checkbox" id="4" onclick="checkListToggle('#4')">	Item 4	</div>	<div class="checkbox" id="5" onclick="checkListToggle('#5')">	Item 5	</div>	<div class="checkbox" id="6" onclick="checkListToggle('#6')">	Item 6	</div>	</form>	</div>	<div id ="timeCalc">	<h1>Time Calculator</h1>	<div id="timeMiddle">	<h2>Start Time</h2>	<form>	<div class="row"> <div class="col-md-5">	<p>Hour</p>	<input type="text" class="form-control" id="startHour"><br>	</div>	<div class="col-md-5">	<p>Minute</p>	<input type="text" class="form-control" id="startMinute"><br>	</div>	<div class="col-md-2">	<button class="btn btn-secondary timeButton start" onclick="timeToggle('.start')" value="AM" type="button">AM</button>	<button class="btn btn-secondary timeButton start" onclick="timeToggle('.start')" style="display:none;" value="PM" id="startAMPM" type="button">PM</button>	</div>	</div>	<h2>Lunch Time</h2>	<form>	<div class="row"> <div class="col-md-5">	<p>Hour</p>	<input type="text" class="form-control" id="lunchHour"><br>	</div>	<div class="col-md-5">	<p>Minute</p>	<input type="text" class="form-control" id="lunchMinute"><br>	</div>	<div class="col-md-2"></div>	</div>	<h2>End Time</h2>	<div class="row"> <div class="col-md-5">	<p>Hour</p>	<input type="text" class="form-control" id="endHour"><br>	</div>	<div class="col-md-5">	<p>Minute</p>	<input type="text" class="form-control" id="endMinute"><br>	</div>	<div class="col-md-2">	<button class="btn btn-secondary timeButton end" onclick="timeToggle('.end')" value="AM" type="button">AM</button>	<button class="btn btn-secondary timeButton end" onclick="timeToggle('.end')" style="display:none;" value="PM" id="endAMPM" type="button">PM</button>	</div>	</div>	</form>	</div>	<div id="total">	<h2>Total</h2>	<div class="row">	<div class="col-md-4">	<p>Hours</p>	<div id="hour"></div>	</div>	<div class="col-md-4">	<p>Minutes</p>	<div id="minute"></div>	</div>	<div class="col-md-4">	<p>Decimal</p>	<div id="decimal"></div>	</div>	</div>	</div>	</div>	</div>	</section> <script src='https://code.jquery.com/jquery-2.2.4.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Handy Tool For Work - Script Codes CSS Codes

body {background-color: #eee;}	.container {box-shadow: 1px 1px 0.5px #ddd; text-align: center; background-color: #fff; margin-top: 20px; font-size: 25px; max-width: 800px; margin-left:auto; margin-right:auto; border-radius: 10px; min-height: 600px; text-align:center; padding-bottom: 30px;}	h1 {font-size: 50px; font-weight: 500; margin-bottom: 0px; color: #fff; background-color: #0077C8;}	#links h1 {background-color: #eee; color: #000; width: 100%; margin-left: auto; margin-right: auto; margin-bottom: 10px; margin-top: 4px}	a {color: #000; padding: 8px;}	a:hover {background-color: #e39623; color: #fff; padding: 8px; text-decoration:none;}	hr {border-top: 3px solid #333; margin-top: 0px; margin-bottom: 10px; width: 50%;}	#navMenu h1 {width: 100%; padding: 10px; cursor: pointer;}	.menu h2 {margin-left: auto; margin-right: auto; background-color: #434343; color: #fff; padding: 7px; width: 80%; cursor: pointer; margin-top: 2px; margin-bottom: 2px;}	.menu h2:hover{background-color: #222;}	.menu {margin-top: 10px; margin-bottom: 10px;}	i {margin-left: 4px;}	h1 .small {color: #e39623; font-size: 75%;}	#timeMiddle {width: 250px; margin-left:auto; margin-right:auto; text-align:center;}	#timeMiddle p {margin-bottom: 0px; margin-top: 0px;}	#timeMiddle h2 {margin-bottom: 2px;}	#hour, #minute, #decimal {padding: 10px; min-width: 30px; height: 60px; color: #fff; background-color: #333; margin-left:auto; margin-right:auto;}	#total {width: 350px; margin-left:auto; margin-right: auto;}	.form-control {display:inline; font-size: 18px;}	.timeButton {margin-top: 37px; font-size: 16px; text-align:left; margin-left: 0px; border: 1px solid #c1c1c1;}	.col-md-2 {padding-left: 0px;}	.row {margin-left: 8px;}	.checkbox {display:block; background-color: #ddd; color: #000; padding: 5px 5px 5px 25px; margin-top: 12px; margin-bottom: 12px; font-size: 22px; cursor:pointer;}	.checkbox:hover {background-color: #016ab1;color: #fff;}	.checkbox.active {background-color:#e39623; color: #fff;}	.checkListMiddle {text-align:left; padding-left: 35px; padding-right: 35px;}	.example {background-color:#eee; padding: 8px;}	#examples a {font-size: 20px !important; padding:4px;}	.codeExamples {padding-top: 10px; padding-bottom:10px; font-size: 18px; border-top: solid #eee; text-align:left;}	.row {margin-left:auto; margin-right:auto;}	input [type=text]{max-width: 80px; text-align:center;}	input[type=checkbox] {	background-color: #333;	margin-top: 10px;	/* All browsers except webkit*/	transform: scale(1.5);	/* Webkit browsers*/	-webkit-transform: scale(1.5); }	@media screen and (max-width: 480px) {	h1 {font-size: 30px;}	.menu h2 {font-size: 25px;}	}

Handy Tool For Work - Script Codes JS Codes

var menuItems = [	["#linksMenu","#linksList"],	["#timeCalcMenu", "#timeCalc" ],	["#checkListMenu", "#checkList"]	];	function menuToggle () {	$(".menu").toggle( "size", 400);	$( "i" ).toggle();	}	function timeToggle (id) {	$(id).toggle( );	calculateTime();	}	function checkListToggle(id) {	$(id).toggleClass("active");	}	function showHide (id) {	$("#links").show();	for (var i = 0; i < menuItems.length; i++) {	if (menuItems[i][0] != id) {	$( menuItems[i][1] ).hide();	} else {	$( menuItems[i][1] ).show();	}	}	$(".menu").toggle("slide", 400);	$( "i" ).toggle();	}	function calculateTime () {	var startTime = 0;	var endTime = 0;	var totalTime = 0;	var totalHour = "";	var totalMinute = "";	var decimal = "";	var startHour = $( "#startHour").val();	var startMinute = $( "#startMinute").val();	var endHour = $( "#endHour").val();	var endMinute = $( "#endMinute").val();	var lunchHour = $( "#lunchHour").val();	var lunchMinute = $( "#lunchMinute").val();	var startAMPM = $( "#startAMPM").val();	var endAMPM = $( "#endAMPM").val();	if (startHour.length > 0 && startMinute.length > 0 &&	endHour.length > 0 && endMinute.length > 0) {	//make them all ints	startHour = parseInt(startHour);	startMinute = parseInt(startMinute);	endHour = parseInt(endHour);	endMinute = parseInt(endMinute);	//add AM or PM values	if (startAMPM == "PM" && $("#startAMPM").is(":visible")) {	startHour = (startHour + 12) * 60;	}	else {	startHour = startHour * 60;	}	if (endAMPM == "PM" && $("#endAMPM").is(":visible")) {	endHour = (endHour + 12) * 60;	}	else {	endHour = endHour * 60;	}	//math and stuff	startTime = startHour + startMinute;	endTime = endHour + endMinute;	totalTime = endTime - startTime;	//get Lunch time	if (lunchHour.length > 0) {	lunchHour = parseInt(lunchHour) * 60;	totalTime = totalTime - lunchHour;	}	if (lunchMinute.length > 0) {	lunchMinute = parseInt(lunchMinute);	totalTime = totalTime - lunchMinute;	}	totalHour = Math.floor(totalTime/60);	totalMinute = totalTime%60;	decimal = (totalMinute/60).toFixed(2);	decimal = decimal.toString();	decimal = decimal.slice(2, 4);	totalMinute = totalMinute.toString();	totalHour = totalHour.toString();	if(totalMinute.length < 2) {	totalMinute = "0" + totalMinute;	}	}	//keeps a weird decimal from appearing in the total box before the nums	if (decimal.length > 0 && totalTime > 0) {	$( "#hour").html(totalHour);	$( "#minute").html(totalMinute);	$( "#decimal").html(totalHour + "." + decimal);	}	}	$(document).on('change', 'input', function() { calculateTime();	});	$("#links").hide();
Handy Tool For Work - Script Codes
Handy Tool For Work - Script Codes
Home Page Home
Developer Sarah Dunlap
Username SarahDunlap
Uploaded January 18, 2023
Rating 3
Size 4,308 Kb
Views 6,072
Do you need developer help for Handy Tool For Work?

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!

Sarah Dunlap (SarahDunlap) Script Codes
Name
Work in Progress
Reddit API
Card Game
Twitch
Random Quotes
Rock Paper Scissors
Wikipedia Search
Pomodoro Clock
Tic Tac Toe With AngularJS
My CodePen Projects
Create amazing captions 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!