Skip to content

Instantly share code, notes, and snippets.

Avatar
🎯
Focusing

Steve Griffith prof3ssorSt3v3

🎯
Focusing
View GitHub Profile
@prof3ssorSt3v3
prof3ssorSt3v3 / app.css
Last active Nov 28, 2022
Sample Code for Merging data arrays from two sources into one object
View app.css
* {
box-sizing: border-box;
margin: 0;
padding: 0;
}
html {
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
'Helvetica Neue', sans-serif;
font-size: 20px;
}
@prof3ssorSt3v3
prof3ssorSt3v3 / app.js
Created Nov 26, 2022
Sample about using the History API and putting form data in the URL hash
View app.js
const APP = {
lastSearch: null,
init: () => {
console.log('init');
if (!location.hash) {
console.log('clear url');
history.replaceState(null, null, '/#/');
} else {
APP.readURL();
}
@prof3ssorSt3v3
prof3ssorSt3v3 / main.js
Created Nov 25, 2022
Code for video on Array.prototype findLast and findLastIndex
View main.js
// Array.prototype.find() node v4.9.1
// Array.prototype.findIndex() v4.9.1
// Array.prototype.findLast() node v18.12.1+
// Array.prototype.findLastIndex() node v18.12.1+
const names = [
{ name: 'Rachel' },
{ name: 'Ross' },
{ name: 'Chandler' },
@prof3ssorSt3v3
prof3ssorSt3v3 / index.html
Last active Nov 25, 2022
Code sample for background image tints through CSS
View index.html
<!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" />
<title>Tinting Images with CSS</title>
<link href="https://fonts.cdnfonts.com/css/brandon-grotesque" rel="stylesheet" />
<link rel="stylesheet" href="./style.css" />
<script>
@prof3ssorSt3v3
prof3ssorSt3v3 / app.js
Created Nov 23, 2022
Using custom error classes in your code - sample demo for class
View app.js
import { NetworkError, EmptyInputError, InvalidUserError, EmptyRecordsError } from './errs.js';
const APP = {
errorBox: null,
init: () => {
//page has loaded add event listeners
document.querySelector('form').addEventListener('submit', APP.handleSubmit);
APP.errorBox = document.querySelector('.err');
},
handleSubmit: (ev) => {
@prof3ssorSt3v3
prof3ssorSt3v3 / index.html
Created Nov 21, 2022
Sample localStorage page from class with ability to add or remove petnames
View index.html
<!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" />
<title>Web Storage</title>
<link rel="stylesheet" href="./storage.css" />
<script src="./storage.js" type="module"></script>
</head>
@prof3ssorSt3v3
prof3ssorSt3v3 / network-error.js
Last active Nov 17, 2022
Sample network error script
View network-error.js
let responseObj = new Response('http://example.com/', { status: 200, statusText: 'All good' });
//Network errors
class NetworkError extends Error {
constructor(msg, response) {
super(msg);
this.name = 'NetworkError';
this.response = response;
this.status = response.status;
this.text = response.statusText;
@prof3ssorSt3v3
prof3ssorSt3v3 / loader.css
Created Nov 14, 2022
Sample code for showing loader
View loader.css
* {
box-sizing: border-box;
padding: 0;
margin: 0;
font-weight: 100;
font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans',
'Helvetica Neue', sans-serif;
}
html {
font-size: 20px;
@prof3ssorSt3v3
prof3ssorSt3v3 / form.css
Last active Nov 13, 2022
Starter code for working with Forms
View form.css
/*
Remember that form control elements don't inherit font properties (size, color, family) from the body.
Default font-family for body and elements that inherit from them is Serif.
Default font-family for <input> and <button> is sans-serif.
label will inherit from <form> or <div>.
label default font-size is 1.0rem.
<input> and <button> default size is 13.33333px (0.83333333333rem).
<input> and <button> elements have no margin by default.
*/
@prof3ssorSt3v3
prof3ssorSt3v3 / index.html
Last active Nov 12, 2022
Code for Media Query Ranges video
View index.html
<!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" />
<title>Media Query Ranges</title>
<link rel="stylesheet" href="./main.css" />
</head>
<body>