Skip to content

Instantly share code, notes, and snippets.

View stevebrownlee's full-sized avatar
🦁
Ready to roar

Steve Brownlee stevebrownlee

🦁
Ready to roar
View GitHub Profile
@stevebrownlee
stevebrownlee / Animal.js
Created July 5, 2019 21:45
React component to display animal information
import "./AnimalCard.css"
import React from "react"
export default props => {
return (
<li>
<div className="card-body">
<div className="animal__header">
<h5 className="card-title">
@stevebrownlee
stevebrownlee / AnimalList.js
Last active July 5, 2019 21:39
React component to display a list of Animal components, and a AnimalDialog component
import React, { useState, useContext, useEffect, useRef } from "react"
import Animal from "./Animal"
import AnimalDialog from "./AnimalDialog"
import { AnimalContext } from "../providers/AnimalProvider"
import useModal from "../../hooks/ui/useModal"
import "./AnimalList.css"
export default (props) => {
const { toggleDialog, modalIsOpen } = useModal("#dialog--animal")
@stevebrownlee
stevebrownlee / useModal.js
Last active July 5, 2019 21:36
React hook to control visibility of HTML dialogs
import { useState } from "react"
const useModal = (selector) => {
const [modalIsOpen, setIsOpen] = useState(false)
function toggleDialog() {
setIsOpen(!modalIsOpen)
if (modalIsOpen) {
document.querySelector(`${selector}`).removeAttribute("open")
@stevebrownlee
stevebrownlee / AnimalDialog.js
Created July 5, 2019 21:33
Component for HTML dialog to display animal info
import React from "react"
export default ({toggleDialog, animal}) => {
return (
<dialog id="dialog--animal">
<h2>
Medical History for {animal.name}
</h2>
{
animal.treatments.map(t => (
const accounts = [
{
"last_login": {
"ip4": "201.154.17.193",
"date_time": "Sat Oct 22 07:25:08 UTC 1983"
},
"id": "cold-brook-65",
"gender": "male",
"email": "[email protected]",
"account_age": 3
@stevebrownlee
stevebrownlee / linq-exercises.cs
Last active January 28, 2023 13:04
C# LINQ Exercises
using System;
using System.Collections.Generic;
using System.Linq;
// Define a bank
public class Bank
{
public string Symbol { get; set; }
public string Name { get; set; }
}
@stevebrownlee
stevebrownlee / weakmap-events.js
Created August 16, 2018 20:52
Using WeakMaps for metadata and custom events
{
const ArticleMap = new WeakMap()
const Articles = Object.create(null, {
"init": {
value: function () {
ArticleMap.set(this, {})
}
},
"condensed": {
@stevebrownlee
stevebrownlee / projectsetup.sh
Last active August 16, 2018 14:45
For NSS students to quickly create basic project structure
#
#!/bin/bash
#
# To create a simple project setup with just an HTML file, a JavaScript file, and a CSS file
# just pass the string "simple" as the first argument
# ex: projectsetup.sh simple
#
# - All source code will be created in the src sub-directory
# - If using json-server, it will be configured and started in the api sub-directory
# - If distributing code, grunt task will be configured to create dist sub-directory
Verifying that "stevebrownlee.id" is my Blockstack ID. https://explorer.blockstack.org/name/stevebrownlee.id
@stevebrownlee
stevebrownlee / GroupedProducts.cs
Last active August 17, 2018 04:22
C# Bangazon product types view with products
using System.Collections.Generic;
namespace Bangazon.Models
{
public class GroupedProducts
{
public int TypeId { get; set; }
public string TypeName { get; set; }
public int ProductCount { get; set; }
public IEnumerable<Product> Products { get; set; }