Week 2: Chat

For this week assignment I worked on setting up a chat using web-sockets. The biggest challenge was to set everything up and running and after I was able to do so I decided to change the visualization and the content of the chat messaging board.

The first step was to make possible for a user that sent a text to see the content instead of just sending it and it disappearing.

Test 1: Make the sent message visible

Test 1: Make the sent message visible

The second step was to design a look and feel that was appropriate following some best practices, I decided to design it with “Dark mode” since it has been proven to be better for the eyes. I started the design process in sketch to be able to test color and size before implementing it in the code.

Design process using Sketch

Design process using Sketch

The next step was to try to implement the User Interface Design previously created in sketch. This was a very challenging part specially because the divs for “outgoing” and “incoming” messages were being generated from the chat, therefore the information architecture had to be generated from there. My biggest challenge, and the one that I wasn’t able to solve, was to be able to visualize each bubble of text to the left and to the right, according to outgoing and incoming, but occupying the entire width of the container div.

challenge

The final result is a compliment chat that invites the users to give an anonymous compliment to the users in the connected users.

Live Web Assignment 1: Self Portrait

For this week’s assignment the main goal was to practice “add event listener” and “get element by id” by creating a self portrait with video and audio implementation in javascript. I started the process by finding a video that would represent myself in a good way and the project evolved from there.

The first functionality that I focused on was to be able to play the video on the screen, and I added a button to play and pause with toggle functionality. After I was able to implement those interactions I decided to try to change the text that was being displayed on the button, this was for sure the most difficult part of the assignment because I had to do research in many different elements that I wasn’t used to implement.

The next step was to apply some styles using css, I didn’t want to invest too much time on that because I wanted to focus on practicing more javascript therefore the visual components are simple.

Moreover, I wanted to find a way to only show the video when the button was pressed and change the background image when the video was playing and at the same time enable the functionality to hide the video and the background image, but making sure that the video was paused while it was hidden.

The final result is a self portrait that demonstrates in a very accurate way how happy I get whenever I have ice cream in my hands.

Code documentation: