arr = [] // empty array
const isEmpty = arr => !Array.isArray(arr) || arr.length === 0;

// Examples
isEmpty([]); // true
isEmpty([1, 2, 3]); // false

// Vanilla JS Solution:
var app = document.getElementById('app');

var typewriter = new Typewriter(app, { loop: true });

typewriter
    .typeString("I'm John and I'm a super cool web developer")
    .pauseFor(3000)
    .deleteChars(13) // "web developer" = 13 characters
    .typeString("person to talk with!") // Will display "I'm John and I'm a super cool person to talk with!"
    .start();

// React Solution:
import Typewriter from 'typewriter-effect';

<Typewriter
    options={{ loop: true }}
    onInit={typewriter => {
        typewriter
            .typeString("I'm John and I'm a super cool web developer")
            .pauseFor(3000)
            .deleteChars(13) // "web developer" = 13 characters
            .typeString("person to talk with!") // Will display "I'm John and I'm a super cool person to talk with!"
            .start();
    }}
/>

// There are n rings and each ring is either red, green, or blue. The rings are distributed across ten rods labeled from 0 to 9.

// You are given a string rings of length 2n that describes the n rings that are placed onto the rods. Every two characters in rings forms a color-position pair that is used to describe each ring where:

// The first character of the ith pair denotes the ith ring's color ('R', 'G', 'B').
// The second character of the ith pair denotes the rod that the ith ring is placed on ('0' to '9').
// For example, "R3G2B1" describes n == 3 rings: a red ring placed onto the rod labeled 3, a green ring placed onto the rod labeled 2, and a blue ring placed onto the rod labeled 1.

// Return the number of rods that have all three colors of rings on them.


let rings = "B0B6G0R6R0R6G9";
var countPoints = function(rings) {
    
    let sum = 0;
    
	// Always 10 Rods
    for (let i = 0; i < 10; i++) {
        if (rings.includes(`B${i}`) && rings.includes(`G${i}`) && rings.includes(`R${i}`)) {
            sum+=1;
        }
    }
    
    return sum;
    
};

console.log(countPoints(rings));

function Clock(props) {
  return (
    <div>
      <h1>Hello, world!</h1>
      <h2>It is {props.date.toLocaleTimeString()}.</h2>
    </div>
  );
}

function tick() {
  ReactDOM.render(
    <Clock date={new Date()} />,
    document.getElementById('root')
  );
}

setInterval(tick, 1000);

new StringBuilder(hi).reverse().toString()

const ResponsiveCardImg = styled(Card.Img)`
    // For screens wider than 768px
    @media(min-width: 768px) {
        // Your responsive styles here.
    }

    // For screens smaller than 768px
    @media(max-width: 768px) {
        // Your responsive styles here.
    }
`

export default function App() {
    return (
        <MainContainer>
            <Container>
                <Card text='white' bg='dark' style={styles.mainCard}>
                <ResponsiveCardImg
                    style={styles.cardImage}
                    onClick={handleClick}
                    src={apeImage}
                    alt='Degenerate Ape Academy'
                />
                <Card.Body>
                    <Card.Title className='text-center' as='h2'>
                    {apeId}
                    </Card.Title>
                </Card.Body>
                </Card>
            </Container>
        </MainContainer>
    );
}