- page 2

October 2nd - Javascript Algorithms + Data Structures

As sort of an extra supplemental course, I am taking a JavaScript Algorithms and Data Structures Class by Colt Steele on Udemy. I am still in the early stages of the course but we have been learning about Big O Notation and what his means for the speed and complexity of functions.

We can categroize the complexity of a functions runtime by giving it a “Big O Notation.” For example:
```
function logAtLeast5(n) {
  for (let i = 1; i <= Math.max(5, n); i++) {
    console.log(i)
  }
}
```
Read More...

October 1st - Continuing with React

Today I will be continuing with a couple of hours with the React course, followed by more learning of MongoDB, as well as some supplemental learning of Javascript algorithms.

The following code illustrates how you can bind a function with arguments passed to it inside of the render function. This would make it easier to pass arguments into something like a handleClick function without having to dive into the event to get data about the object that was clicked. This method isn’t perfect, but it does work for simple applications. The reason is that, it creates a new function each time a component or piece of a component is rendered.

class myComponent extends Component {
  static defaultProps = {
    color: ['blue','green','red','yellow','orange']
  }
  constructor(props) {
    super(props)
    this.state = {color: 'blue'}
  }

  changeColor(newColor) {
    console.log(`newColor is: ${newColor}`)
    this.setState({ color: newColor})
  }

  render() {
    return (
      <div className="ButtonList" style=>
      {this.props.colors.map(color => {
        const colorObj = {backgroundColor: color};
        return (
          // this will pass the changeColor function to the onClick method, giving it the argument of the current color
          <button style={colorObj} onClick={this.changeColor.bind(this, color)}>
            Click me!
          </button>
        );
      })}
      </div>
    );
  }
}

September 16th

Last week I left off with one hour left of the Udemy Node course I have been working through. We are currently learning how to use socket.io to implement into a chat room, and tracking the users, and rooms of the app.

We’ll start today by creating users.js file to store users. In the code we will create the ability to add users, check users in rooms, and perform other validation.

const users = []

// addUser, removeUser, getUser, getUsersInRoom

const addUser = ({id, username, room}) => {
  // Clean the data
  username = username.trim().toLowerCase()
  room = room.trim().toLowerCase()

  // Validate the data
  if (!username || !room) {
    return {
      error: 'Username and room are required.'
    }
  }

  // Check for existing user
  const existingUser = users.find((user) => {
    return user.room === room && user.username === username
  })

  // Validate username
  if (existingUser) {
    return {
      error: 'Username is in use!'
    }
  }

  // Store user
  const user = { id, username, room }
  users.push(user)
  return { user }
}

const removeUser = (id) => {
  const index = users.findIndex((user) => user.id === id)

  if (index !== -1) {
    return users.splice(index,1)[0]
  }
}

const getUser = (id) => {
  const index = users.findIndex((user) => user.id === id)

  if (index !== -1) {
    return users[index]
  }

  return undefined
}

const getUsersInRoom = (room) => {
  const usersInRoom = users.filter((user) => user.room === room)
  if (usersInRoom) {
    return usersInRoom
  }
  return []
}

module.exports = {
  addUser,
  removeUser,
  getUser,
  getUsersInRoom
}

September 9th

I am in the last section of the node course I have been working through for the past two months. This section deals with using socket.io and a building simple chat messaging app.

What is neat about socket.io is that it allows users to send messages to the server, and for the server to send messages back to the user. With this implemented, users are able to chat with each other in real time, as messages are related to and from the server to all of the users (or to whichever users you specify)

In today’s lesson we will be implementing using handlebars to render chat messages from users to the browser.

In my index.html I have added the following (the location button is from a previous lesson):

<body>
  <h1>Chat App</h1>

  <div id='messages'>
  </div>

  <form id='message'>
    <input type="text" id="messageText"></input>
  <button type="submit">Send</button>
  </form>
  <button id="send-location">Send Location</button>

  <script id="message-template" type="text/html">
    <div>
      <p></p>
    </div>
  </script>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/mustache.js/3.0.1/mustache.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.22.2/moment.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/qs/6.6.0/qs.min.js"></script>
  <script src="/socket.io/socket.io.js"></script>
  <script src="/js/chat.js"></script>
</body>

Coding Journal

Jordan Vidrine

October 2nd - Javascript Algorithms + Data Structures

October 1st - Continuing with React

September 30th

September 23rd Through 25th

Site Example

September 18th

September 17th

September 16th Part 2

Create React App

September 16th

September 11th

September 10th

September 9th

September 2nd Through 9th

August 27th & 28th

Coding the project

August 26th

Fetch

August 21st

Testing in Node with Jest