Skip to content

Instantly share code, notes, and snippets.

View mtzfox's full-sized avatar

Mike Carlson mtzfox

2 followers · 7 following
View GitHub Profile
@mtzfox
mtzfox / React Card Component with Profile Cards.md
Created July 18, 2023 21:45
The code snippet defines a Card component that takes a title and children as props. The Profile component renders two instances of the Card component, each with a different title and content. This code exports a function that creates a card with an image, avatar, and title. It also includes the profile component to display information about Rain…

React Card Component with Profile Cards

Preview:
function Card({ children, title }) {
  return (
    <div className="card">
      <div className="card-content">
        <h1>{title}</h1>
        {children}
      </div>
@mtzfox
mtzfox / React Bucket List using Immer.md
Last active July 18, 2023 07:07
The code snippet defines a React component called "BucketList" that renders a list of artwork to see. The component uses the `useImmer()` hook to manage the state of the list. It also includes a function called `handleToggleMyList()` that creates a list of artworks and displays them in an HTML page when clicked.

React Bucket List with Immer

Preview:
import React, { useState, useCallback } from 'react';
import { useImmer } from 'use-immer';

const BucketList = () => {
  const [myList, updateMyList] = useImmer([
    { id: 0, title: 'Picaso', seen: false },
    { id: 1, title: 'The Mona Lisa', seen: false },
@mtzfox
mtzfox / Drumkit with Transition Removal and Sound Playing.md
Last active July 18, 2023 06:58
This code snippet creates a drumkit by selecting HTML elements with a specific class, adding event listeners to them, and playing corresponding audio files when clicked. It also adds and removes a CSS class to create a visual effect.This code creates an array of HTML elements that plays a sound, and adds border to each element. It also removes t…

Vanilla JS Drumkit with animation and sound

Preview:
function drumkit() {
  const keys = document.querySelectorAll(".keys .key");

  function removeTransition(e) {
    if (e.propertyName !== 'transform') return;
@mtzfox
mtzfox / Closure example for counter.js
Last active July 12, 2023 06:32
The closure (internal function) here allows for the counter to keep track of how many times the function has been called. - In order for it to work, the function first has to be asigned to a variable as a function expression, with that being called instead of the function directly.
function myFunc() {
let count = 0;
return function () {
if (count < 3) {
console.log(count);
count++;
} else {
console.error('maximum count has been reached');
throw 'max count';
}
@mtzfox
mtzfox / Fizzbuzz.js
Last active July 12, 2023 07:31
The classic
function fizzBuzz(n) {
for (let i = 1; i <= n; i++) {
if (i % 15 === 0) return 'FizzBuzz'
if (i % 5 === 0) return 'Buzz'
if (i % 3 === 0) return 'Fizz'
else {
return i
}
}
}
@mtzfox
mtzfox / mergeTwoStrings.js
Last active July 12, 2023 06:08
Merge two strings with alternating letters: abc, xyz => axbycz
function mergeAlternately(word1, word2) {
// get max length of each word
let m = word1.length,
n = word2.length,
// starting word
result = '';
// if either index is less than word length, add current letter to result
for (i = 0; i < Math.max(m, n); i++) {
@mtzfox
mtzfox / greatestNumberOfCandy1.js
Last active July 12, 2023 06:09
Kids with greatest number of Candies
var kidsWithCandies = function(candies, extraCandies) {
let greatestNumber = candies.map(i => i).sort((a, b) => b - a)[0];
let output = [];
for (let i in candies) {
if (candies[i] + extraCandies >= greatestNumber) {
output.push(true);
}
else {
@mtzfox
mtzfox / reverse-vowels1.js
Last active July 12, 2023 05:56
Reverse vowels of a string
var reverseVowels = function (s) {
let vowels = ['a', 'e', 'i', 'o', 'u', 'A', 'E', 'I', 'O', 'U'];
let strArr = [...s];
let foundVowels = [];
for (let i = s.length - 1; i >= 0; i--) {
if (vowels.includes(s[i])) {
foundVowels.push(s[i]);
}
}
for (let j = 0; j < strArr.length; j++) {
@mtzfox
mtzfox / Reverse Words in a String.js
Created July 12, 2023 05:46
Runtime:45 ms, Beats: 99.44%
var reverseWords = function (s) {
let strArr = s
.replace(/\s{2,}/g, ' ')
.trim()
.split(' ')
.reverse();
return strArr.join(' ');
};
@mtzfox
mtzfox / index.html
Created April 27, 2021 23:27
Pure HTML and CSS Accordion
<ul class="accordion">
<li class="accordion-item">
<input id="s1" class="hide" type="checkbox">
<label for="s1" class="accordion-button">
<span class="title">Real Abstraction: In the Mind but not from There</span>
<span class="date">Thu May 6th, 2021 @ 11am PDT</span>
</label>
<div class="accordion-content">
<p>
<span class="speakers">Speakers:</span>