Skip to content

Instantly share code, notes, and snippets.

View prof3ssorSt3v3's full-sized avatar
🎯
Focusing

Steve Griffith prof3ssorSt3v3

🎯
Focusing
View GitHub Profile
@prof3ssorSt3v3
prof3ssorSt3v3 / index.html
Created May 4, 2024 20:16
Code for Video about Monitoring Download Progress and displaying it with SVG animations
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>SVG Progress Display for File Downloads</title>
<style>
:root {
--bgcolor: hsl(220, 20%, 70%);
--focuscolor: hsl(220, 80%, 50%);
@prof3ssorSt3v3
prof3ssorSt3v3 / index.html
Last active April 28, 2024 03:01
Starter code for Cache Storage assignment - /index.html, /css/main.css, /js/main.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Cache Storage</title>
<link rel="stylesheet" href="./css/main.css" />
<script type="module" src="./js/main.js"></script>
</head>
<body>
@prof3ssorSt3v3
prof3ssorSt3v3 / api.css
Created February 7, 2021 23:33
Form Validation Part II - the JS code and working with the Constraint Validation API
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
html {
font-size: 16px;
font-weight: 300;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen,
Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
//finite state machine
const machine = {
state: "SOBER",
transitions: {
SOBER: {
drink: function(beverage, second) {
console.log("current state", this.state);
console.log("\tdrinking", beverage.type); //second would be undefined
if (beverage.type == "alcohol") {
console.log("\tAdios inhibitions!");
//https://www.npmjs.com/package/cordova-plugin-android-volume
//plugin to retrieve the android system volumes
// https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-media/index.html
// cordova media plugin
let app = {
track: {
src: 'file:///android_asset/www/media/fight-club.mp3',
title: 'Fight Club Rules',
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Form Events</title>
<style>
* {
padding: 0;
margin: 0;
@prof3ssorSt3v3
prof3ssorSt3v3 / index.html
Created June 16, 2022 17:47
CSS :is() :where and :has() pseudo class example code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width,initial-scale=1.0" />
<link rel="stylesheet" href="style.css" />
<title>CSS :is :where :has</title>
<link href="./main.css" rel="stylesheet" />
</head>
@prof3ssorSt3v3
prof3ssorSt3v3 / app.js
Created February 23, 2021 20:02
indexedDB part 3 - get( ) and getAll( )
import { uid } from './uid.js';
console.log(uid());
//nothing else to import because we are using the built in methods
//https://developer.mozilla.org/en-US/docs/Web/API/IDBDatabase
const IDB = (function init() {
let db = null;
let objectStore = null;
let DBOpenReq = indexedDB.open('WhiskeyDB', 6);
const http = require("http");
const fs = require("fs");
const server = http.createServer(function(req, res) {
let img = __dirname + "/pod.jpg";
fs.access(img, fs.constants.F_OK, err => {
//check that we can access the file
console.log(`${img} ${err ? "does not exist" : "exists"}`);
});
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>HTML Templates</title>
<meta name="viewport" content="width=device-width">
<style>
.temp{
background-color: cornflowerblue;
color: #fff;