tbennett’s gists

tbennett / float_clear.css

Created November 5, 2024 21:19

A Legit Method for clearing floats. * Hack Free *

	/* From MDN */

	/*
	* Clearing overlapping floats:
	* To solve this problem is to use the value flow-root of the display property.
	* This exists only to create a block formatting context (BFC) without using hacks —
	* there will be no unintended consequences when you use it.
	*/

	.wrapper {

tbennett / gist:416f91cb94933cbe759c4e2cce5431b1

Created December 12, 2023 01:09

Convert 24hr (Militarty) time to standard 12hr time

	function convertMilitaryToStandard(militaryTime) {
	let hours = militaryTime.substring(0,2);
	let minutes = militaryTime.substring(3,5);
	let meridian = (hours >= 12) ? "PM" : "AM";
	let convertedTime = ((parseInt(hours) + 11) % 12 + 1) + ":" + minutes;
	return convertedTime + " " + meridian;
	};

tbennett / git_master_to_main

Created September 10, 2022 10:29

Reconfig git and GitHub master to main


	# Setting Up to Use Git

	Github > Settings > Branches > Default branch --> change to main

	For your local Git install, there is a config option called init.DefaultBranch. Just set it and forget it.
	__git config --global init.defaultBranch main__

	You're good going forward!

tbennett / Ranged random nums

Created March 30, 2022 22:56

	// two ways to get a random integer between zero and another (e.g. between 0 and 100)

	// method 1
	// Math.trunc (new ES6) truncates the floating point, converting the value to an integer.
	const maxVal = 100;
	const randomInt = Math.trunc(maxVal * Math.random());


	// method 2
	// the left shift operator (<<)

tbennett / css_grid_example.html

Last active November 1, 2022 08:23

Example of using CSS Grid with named template areas and a bit of flexbox for the internals of the grid areas.


	<!doctype>
	<html lang="en">
	<head>
	<meta charset="utf-8">
	<title>CSS Grid and Flexbox Demo</title>
	<meta name="Author" content="tb"/>
	<meta name="viewport" content="width=device-width, initial-scale=1">
	<style>
	/* These styles are the default for mobile and desktop */

tbennett / HTML Mobile 1st Example (FLOATS) DON'T USE! for reference only

Last active June 12, 2019 01:22

HTML Mobile 1st: Responsive multicolumn layout using floats and single media query

	<!doctype html>
	<html>
	<head>
	<title>test</title>
	<meta charset="utf-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<style>
	/* Ideally, this stylesheet should be external and linked to this document.
	it is embedded here to simplify the demo process */

tbennett / HTML Mobile 1st Example (inline-block) DON'T USE! for reference only

Last active June 12, 2019 01:23

Mobile 1st: Responsive multiple columns using display:inline-block and single media query


	<!doctype html>
	<html>
	<head>
	<title>test</title>
	<meta charset="utf-8"/>
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />

	<!-- specialized typefaces can be added to a webpage from external sources -->

tbennett / HTML Table Example

Last active October 12, 2021 05:58

Example of HTML Table w/ header,footer and body



	<table id="example" class="display" border="1">
	<!-- in HTML5 the summary, cellspacing, and cellpadding attributes are obsolete/deprecated -->
	<caption> Global Employees Listing</caption>
	<thead>
	<tr>
	<th scope="col">Name</th>
	<th scope="col">Position</th>
	<th scope="col">Office</th>

tbennett / HTML-selectList-US-States

Last active April 5, 2022 20:42

A HTML form select with US states and territories

	<form id="res_form" action="" method="post" accept-charset="utf-8">
	<fieldset>
	<legend>Guest Information<span>* Indicates required field</span></legend>

	<label for="state">* State/Territory/Associations</label>
	<select name="state" required title="Please select a state or territory.">
	<option value="">select your location</option>
	<optgroup label="US Territories">
	<option value="AS">American Samoa</option>
	<option value="PR">Commonwealth of Puerto Rico</option>

tbennett / flexbox-example

Last active April 13, 2020 21:55

Basic Flexbox Layout Example

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Flexbox Demo</title>
	<style>

tbennett tbennett