Scott Granneman rsgranne

## grannepack-html-vscode-settings.json
// Place your settings in this file to overwrite the default settings
{
  "breadcrumbs.enabled": true,
  // Color Picker
  "colorHelper.formatsOrder": [
    "hsl",
    "hex",
    "named"
  ],
  "css.format.spaceAroundSelectorSeparator": true,

## html5.html
<!doctype html>
<html lang="en">

  <head>
    <meta charset="UTF-8">
    <title>Untitled</title>
    <link rel="stylesheet" href="/css/main.css">
  </head>

  <body>

## hwl-js-includes.md

      
              1 file
            
          
              0 forks
            
          
              0 comments
            
          
              0 stars
            
          
                rsgranne
                / hwl-js-includes.md
            
            
              Last active
              December 7, 2023 22:23
            
          
    You can find these instructions at https://chnsa.ws/25r.

Create new folders: js & includes.
Create new file in includes: footer.html.
Cut <footer> … </footer> from index.html & paste into footer.html & save it.

  
## breadcrumb.js
// To use, insert the following in `<body>`: <script src="/js/breadcrumb.js"></script>

// Function to capitalize the first letter of a string
function capitalizeFirstLetter(string) {
  return string.charAt(0).toUpperCase() + string.slice(1);
}

// Function to replace hyphens with spaces and format words
function formatBreadcrumbItem(item) {
  return item

## include.js
// Function to include HTML content below a specified element, id, or class
function includeHTML(url, targetElement = null) {
  fetch(url)
    .then(response => response.text())
    .then(data => {
      const parser = new DOMParser();
      const htmlContent = parser.parseFromString(data, 'text/html');
      const includedContent = htmlContent.querySelector('body').childNodes;

      if (targetElement) {

## VSCode HTML Snippets
{
  /*
  // Place your snippets for HTML here. Each snippet is defined under a snippet name and has a prefix, body and
  // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
  // ${1}, ${2} for tab stops, ${0} for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
  // same ids are connected.
  // Example:
  "Print to console": {
    "prefix": "log",
    "body": [

## css-user-snippet.json
{
  /*
  // Place your snippets for CSS here. Each snippet is defined under a snippet name and has a prefix, body and
  // description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
  // $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
  // same ids are connected.
  // Example:
  "Print to console": {
    "prefix": "log",
    "body": [

## bootstrap-5-cdn.html
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">

    <title>Untitled</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
    <link rel="stylesheet" href="/css/main.css">

## bootstrap-5-cdn.html
<!DOCTYPE html>
<html lang="en">

  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">

    <title>Untitled</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.2.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-rbsA2VBKQhggwzxH7pPCaAqO46MgnOM80zW1RWuH61DGLwZJEdK2Kadq2F9CUG65" crossorigin="anonymous">
    <link rel="stylesheet" href="/css/main.css">

## openai.js
Hi guys. Jans & I were playing around with OpenAI.

We first pasted in Bill E’s code & asked Open AI to explain what it was doing.

Here’s Bill’s code:

document.addEventListener('DOMContentLoaded', (event) => {
  var headers;
  headers = document.querySelectorAll('h2[slot="header"]');
  headers.forEach(
	// Place your settings in this file to overwrite the default settings
	{
	"breadcrumbs.enabled": true,
	// Color Picker
	"colorHelper.formatsOrder": [
	"hsl",
	"hex",
	"named"
	],
	"css.format.spaceAroundSelectorSeparator": true,
	<!doctype html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<title>Untitled</title>
	<link rel="stylesheet" href="/css/main.css">
	</head>

	<body>
	// To use, insert the following in `<body>`: <script src="/js/breadcrumb.js"></script>

	// Function to capitalize the first letter of a string
	function capitalizeFirstLetter(string) {
	return string.charAt(0).toUpperCase() + string.slice(1);
	}

	// Function to replace hyphens with spaces and format words
	function formatBreadcrumbItem(item) {
	return item
	// Function to include HTML content below a specified element, id, or class
	function includeHTML(url, targetElement = null) {
	fetch(url)
	.then(response => response.text())
	.then(data => {
	const parser = new DOMParser();
	const htmlContent = parser.parseFromString(data, 'text/html');
	const includedContent = htmlContent.querySelector('body').childNodes;

	if (targetElement) {
	{
	/*
	// Place your snippets for HTML here. Each snippet is defined under a snippet name and has a prefix, body and
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// ${1}, ${2} for tab stops, ${0} for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
	// same ids are connected.
	// Example:
	"Print to console": {
	"prefix": "log",
	"body": [
	{
	/*
	// Place your snippets for CSS here. Each snippet is defined under a snippet name and has a prefix, body and
	// description. The prefix is what is used to trigger the snippet and the body will be expanded and inserted. Possible variables are:
	// $1, $2 for tab stops, $0 for the final cursor position, and ${1:label}, ${2:another} for placeholders. Placeholders with the
	// same ids are connected.
	// Example:
	"Print to console": {
	"prefix": "log",
	"body": [
	Hi guys. Jans & I were playing around with OpenAI.

	We first pasted in Bill E’s code & asked Open AI to explain what it was doing.

	Here’s Bill’s code:

	document.addEventListener('DOMContentLoaded', (event) => {
	var headers;
	headers = document.querySelectorAll('h2[slot="header"]');
	headers.forEach(