Skip to content

Instantly share code, notes, and snippets.

View shawnco's full-sized avatar

Shawn shawnco

1 follower · 11 following
  • Manhattan, KS
View GitHub Profile
@shawnco
shawnco / index.js
Created May 30, 2024 00:13
Letter Boxed Words-to-Binary Tweet Generator Tutorial
import React, { useState } from 'react';
const TweetGenerator = () => {
const [words, setWords] = useState('');
const [output, setOutput] = useState('');
const wordToBinary = (word) => word
.split('')
.map((w) => w.charCodeAt(0).toString(2))
.join(' ');
@shawnco
shawnco / index.html
Created September 19, 2023 23:40
Simple Wordle clone using Javascript and canvas
<html>
<head>
<title>Canvas Wordle</title>
</head>
<body style="background-color: black; color: white;">
<canvas id="canvas" width="250" height="250" style="border: 1px solid black;"></canvas><br />
<input type="text" id="guess" name="guess" maxlength="5" />
<button onClick="guess()">Guess</button><br />
<div id="message"></div>
<script type="text/javascript">
@shawnco
shawnco / checkbox-expand.js
Created January 24, 2023 22:31
Simple Expanding Checkbox Dropdown Tutorial
import React, {useState, useEffect} from 'react';
const Checkbox = props => <input type='checkbox' {...props} />
const List = props => <ul style={{listStyle: 'none', margin: 0, padding: 5}}>{props.children}</ul>
const CheckboxExpand = ({currentData, allData, getValue, getLabel, onChange}) => {
const [current, setCurrent] = useState(currentData);
const [matches, setMatches] = useState([]);
const [showAll, setShowAll] = useState(false);
const inCurrent = val => current.includes(val);
@shawnco
shawnco / client_index.js
Last active January 8, 2023 22:55
Time Management Web App section 7
import React from 'react';
import ReactDOM from 'react-dom/client';
import App from './App';
import {BrowserRouter, Routes, Route} from 'react-router-dom';
import TaskTable from './tasks';
import Workspace from './workspace';
import Home from './home';
import Nav from './nav';
import ProjectTable from './projects';
import Project from './project';
@shawnco
shawnco / index.js
Created November 19, 2022 21:48
Persistent Jobs with Node-Schedule
const PersistentJobs = require('./persistent_jobs');
const schedule = require('node-schedule');
const actions = {
test1: require('./actions/test1'),
test2: require('./actions/test2')
};
async function scheduleJobs() {
const jobs = new PersistentJobs();
await jobs.connect();
@shawnco
shawnco / client_App.css
Created October 26, 2022 21:06
Time Management Web App section 6
#nav {
list-style-type: none;
margin: 0;
padding: 0 0 10px 0;
}
#nav li {
display: inline;
margin-right: 10px
}
@shawnco
shawnco / client_App.css
Created October 18, 2022 00:24
Time Management Web App section 5
#nav {
list-style-type: none;
margin: 0;
padding: 0 0 10px 0;
}
#nav li {
display: inline;
margin-right: 10px
}
@shawnco
shawnco / client_task_notes.js
Created October 17, 2022 21:23
Time Management Web App section 4
import {useState} from 'react';
const url = 'http://localhost:3001/api/task';
const headers = {
'Content-Type': 'application/json'
};
const API = {
async create(task, content) {
const res = await fetch(`${url}/${task}/notes`, {
@shawnco
shawnco / client_workspace.js
Created October 17, 2022 01:00
Time Management Web App section 3
import {useState, useEffect} from 'react';
const url = 'http://localhost:3001/api/task';
const headers = {
'Content-Type': 'application/json'
};
const API = {
async update(id, body) {
const res = await fetch(`${url}/${id}`, {method: 'PUT', headers, body: JSON.stringify(body)});
@shawnco
shawnco / index.js
Created October 14, 2022 00:50
Time Management Web App section 2
import React from 'react';
import ReactDOM from 'react-dom/client';
import {BrowserRouter, Routes, Route} from 'react-router-dom';
import App from './App';
import TaskTable from './tasks';
const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
<React.StrictMode>
<BrowserRouter>