Coding Journal

Jordan Vidrine

An experienced business owner + musician with a demonstrated history of management in the Energy sector and an insatiable appetite for learning new and complex skills. Transitioning from an ownership role & seeking employment in Web Development as a Jr Full Stack Developer.

June 12th 2019

Super productive day for me today. I went back to my Pomodoro App and finalized the look of it, as well as updated some of the code. Since I now know how to create React Apps without the bulk of installing a ton of node packages, I was able to re-format my code to upload onto my new github portfolio.

Portfolio

My portfolio is now up with 3 apps!

Drum App

I began working today on a Drum Machine app as well. I implemented the ability to ‘press’ the drum pads with QWER and ASDF on the keyboard. I also figured out how to increase or decrease volume based on the mouseup, mousedown, and mousemove events.

Here is the code I used to increase and decrease volume, with a min of 0 and max of 100.

componentDidMount() {
  document.addEventListener('keydown', this.handleKeyPress);
  document.addEventListener('keyup', this.handleKeyUp);
  document.addEventListener('mouseup', this.handleMouseUp)
}

handleMouseDown(e){
  document.addEventListener('mousemove', this.handleMouseMove);
   this.setState({
     ...this.state,
     //this sets the original click position, used by mousemove as a base to increase or decrease volume by
     mouseDown: e.clientX,
   })
}

handleMouseUp(e){
  document.removeEventListener('mousemove', this.handleMouseMove)
}

handleMouseMove(e){
  let volume = this.state.volume;
  volume = volume + ((e.clientX - this.state.mouseDown) / 50);
  let updatedVolume;

  if (volume >= 0 && volume <= 100) {
    updatedVolume = volume;
  } else if (volume <= 0) {
    updatedVolume = 0;
  } else {
    updatedVolume = 100;
  }
  this.setState({
    ...this.state,
    volume: updatedVolume,
  })
}

After this project, I will move forward with learning Node and a back end database like mySQL or mongoDB.