Coding Challenge - FizzBuzz

README.md

Coding Challenge - Fizz Buzz

Language / Framework

• React 15.5.4
• Vanilla JavaScript

Attribution

This project derived from: Programming Challenges: [Fizz Buzz]

Project Timeline

Notes I took for working on this coding challenge

• 2017-04-25 @ 7:35pm
• 8:35pm -> 1.0 hr (got it output to console, but I was missing one huge fault (which I found later while getting output to HTML))
• 12:32am + 2.5 hrs (4 minus 1.5 hr timeout for completing my daily project (GistBox) and got something to eat)

Overall project took about 3.5 hours to fully complete. Plenty of room for improvement.

This Code on CodePen

Learning Gotchas

The biggest issue I faced with this project was in trying to figure out how/when/where to execute the loop/output function

• I determined I needed to execute it both when the component is initially loaded, and when props are updated

    componentWillMount() {
        this.runCount()

Took about half hour to figure out how not to trigger the infinite 'componentDidUpdate' loop

    componentDidUpdate(prevProps, prevState) {
        if (prevProps.countToNum != this.props.countToNum) {
            this.runCount()

The next issue was that I ended up setting state inside the for loop... Whoops!

• Still not sure how the console.log was showing correctly after my first hour.
• I knew something was wrong when I added a setTimeout() around the setState() and it worked.
  • Red Flag -- This is 100% NOT the place for a setTimeout()

I enjoyed working on this project, but definitely need to get my full completion time down.

coding-challenge-fizzbuzz.js

// This project derived from:
// http://code.startupinacar.com/programming-challenges/
// Programming Challenges: [Fizz Buzz]
// --- --- ---   --- --- ---   --- --- ---

// Container
    // state.countUpTo || 100
    // Loop
        // Update value (show value)
    // Input

console.clear()

class FizzBuzzContainer extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            countUpTo: 10
        }
        this.submitCountTo = this.submitCountTo.bind(this)
    }
    submitCountTo(countTo) {
        this.setState({ countUpTo: countTo })
    }
    render() {
        return (
            <div>
                <CountUpToForm countToNum={this.state.countUpTo} submitCountTo={this.submitCountTo} />
                <CountUpToDisplay countToNum={this.state.countUpTo} />
            </div>
        )
    }
}
class CountUpToDisplay extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            displayCount: this.props.countToNum,
            cntArray: []
        }
        this.runCount = this.runCount.bind(this)
    }
    componentWillMount() {
        this.runCount()
    }
    componentDidUpdate(prevProps, prevState) {
        if (prevProps.countToNum != this.props.countToNum) {
            this.runCount()
        }
    }
    runCount() {
        let curArray = []
        for (let cnt=1; cnt <= this.props.countToNum; cnt++) {
            //“FizzBuzz” if the number is divisible by both 3 and 5.
            // prints “Fizz” if the number is divisible by 3
            //“Buzz” if the number is divisible by 5
            if (this.is3(cnt) && this.is5(cnt)) {
                curArray.push( ['FizzBuzz'] )
            } else if (this.is3(cnt)) {
                curArray.push( ['Fizz'] )
            } else if (this.is5(cnt)) {
                curArray.push( ['Buzz'] )
            } else {
                curArray.push( [cnt] )
            }
        }
        this.setState({ cntArray: curArray })
    }
    is3(curCnt) {
        return curCnt % 3 === 0
    }
    is5(curCnt) {
        return curCnt % 5 === 0
    }
    render() {
        return (
            <div>
                <ShowVal countText={this.state.cntArray} />
            </div>
        )
    }
}
class ShowVal extends React.Component {
    render() {
        return (
            <div>{this.props.countText.map( word => '[' + word + '] ' )}</div>
        )
    }
}
class CountUpToForm extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            countTo: this.props.countToNum
        }
        this.updateCountTo = this.updateCountTo.bind(this)
        this.submitCountTo = this.submitCountTo.bind(this)
    }
    updateCountTo(e) {
        this.setState({ countTo: e.target.value })
    }
    submitCountTo(e) {
        e.preventDefault()
        this.props.submitCountTo( this.state.countTo )
    }
    render() {
        return (
            <form onSubmit={this.submitCountTo}>
                <input type="number" onChange={this.updateCountTo} value={this.state.countTo} />
                <button>Update Counter</button>
            </form>
        )
    }
}
ReactDOM.render(
    <FizzBuzzContainer />,
    container
)