Project Description
Features
- One-on-None Messaging
- Name Changes
- Status
- Recent Messages
- Time stamps
- Multiple themes
- Profile pictures
- Drop-down menus
How It's Built
HTML:
Used flexbox to organize the various elements. Buttons and onClick attributes were used to communicate with Javascript functions. Used <ul> to create a framework and <div> for more in-depth designs. Added "data-tab" to differentiate between contacts and chats. Textareas were used for chat inputs to allow the user to type in multiple lines. Lastly, I identified several elements with IDs and Classes to simplify their designs through CSS and communicate with them through Javascript.
CSS:
Used several different styles to bring the webpage designs together in all ids and classes. Created a :root which contains various variable names for colors that would change depending on the selected theme. Customized the scrollbar and implemented svg designs for the status icon.
Javascript:
Created three javascript files.
-readChat.js:
Translates a chat log made of an array of strings into HTML elements. It simulates retrieving a chat-log from a database and translating it into the webpage. It iterates through each tab, translating the array that matches with the tab's id.
-main.js
The main Javascript file which holds all the interactions with the webpage. For instance, it controls the display of navigation menus (toggles on and off with onClick). Additionally, it changes the displayed chat depending on the selected tab. There are also theme functions wherein it changes the CSS color variables depending on the selected input (type radio). Most importantly, it facilitates the message inputs into the chat with the time stamp.
-electronApp.js
The file which allows the HTML to be in a desktop app format. It uses electron dependencies to do so. It sets up the dimensions and basic functions such as closing the app and starting it up.
Where To Download
Click on the google drive link below and download the zip. Note that, to display it on a web browser, you must comment/remove out the first two lines of "main.js". The two variables are used to display it with electron dependencies, which are not connected to a web browser like google.
Aside from web browsers, it is accessible by clicking on the .exe shortcut in the main directory.
Give Feedback
Log in to comment!