Team

yourself

Project Description

A longer description of the project compared to the one liner.

Features

Talk about some cool things your project does here. You can use a:

• Bulleted
• List
• Like
• This

How It's Built

Talk about how you built this project in technical terms. Talk about the languages, frameworks, and tools you used to create this project.

Team

mikmikmiky0

Project Description

A longer description of the project compared to the one liner.

Features

Talk about some cool things your project does here. You can use a:

• Bulleted
• List
• Like
• This

How It's Built

Talk about how you built this project in technical terms. Talk about the languages, frameworks, and tools you used to create this project.

Team

tmnin

Project Description

Team

Niwri

Ranotic

andrewn0316

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.

Team

ammarmahmood288

junaidmahmood288

Project Description

This is our chat app. We published it to github pages and got some help from youtube, stackoverflow and google. We used a bunch of images from fivcon(icon website). Credit to them.

Features

Here are some of the features of our chat app WebChat2.0:

• We got a bot that response with automatic answers( u can add em in the javascript file)
• Tony stark is one of the people you can message

How It's Built

This is built using Html, Css, and Javascript. We used vscode as our IDLE and used github to collaborate on our project. There was a lot of problems when building this specifically with the javascript. I found it extremly difficult to complete that part but we accomplished.

Team

ammarmahmood288

junaidmahmood288

Project Description

Project Description This is our chat app. We published it to github pages and got some help from youtube, stackoverflow and google. We used a bunch of images from fivcon(icon website). Credit to them.

Features Here are some of the features of our chat app WebChat2.0:

We got a bot that response with automatic answers( u can add em in the javascript file) Tony stark is one of the people you can message How It's Built This is built using Html, Css, and Javascript. We used vscode as our IDLE and used github to collaborate on our project. There was a lot of problems when building this specifically with the javascript. I found it extremly difficult to complete that part but we accomplished.

Team

3Gigs

Project Description

A simple chat app made with HTML, CSS, and Javascript

Features

• Flexboxed and responsive UI
• Working and clickable contacts list
• Each contacts it's own chat messages
• UI decorated with CSS

How It's Built

For responsive UI, I used to flexbox css. It was quite easy to learn and use. All the interactive elements in the webpage are created using DOM manipulation with vanilla javascript. Contacts are stored using the browser's localStorage, allowing me to make a very small simple database. There are originally supposed to be able to allow to user to send messages using POST, but due to time contraints I wasn't able to do that. The chat input box is only cosmetic right now.

Team

VstDrknss

UHhhhhhh

Project Description

A longer description of the project compared to the one liner.

Features

Talk about some cool things your project does here. You can use a:

• Bulleted
• List
• Like
• This

How It's Built

Youtube A lot of reasearch A lot of basing myself for things i just can't and don't have the brainpower to find more efficient solution

Team

MichelleOkolie

Project Description

For this project, it was supposed to be an easy 3 day thing

But JavaScript decided that was too nice, along with me procrastinating

I've linked the project below, but if you want to see the hellish code that formed this project, I've linked the repo below

• https://github.com/michelleokolie/HTMl-CSS-Design-Challenge

I made this entirely with JS, CSS and JS. Some JS library would have been easier for this but I wanted to try using just JS, so no libraires not even JQuery

All Interactive bits are from me, changing or updating the DOM. You can send messages but, you can't receive any

Team

Andrew059

Project Description

This fully functioning chat application was made using Node.js, JavaScript, CSS, JSON, and HTML.

Features

• Easy to Use
• Sound Effects
• One-on-one Messaging
• Declare Username
• Responsive User-Interface

-Decorated with CSS

How It's Built

This application was built with Node.js, JavaScript, CSS, JSON, and HTML.

Team

Miniapple8888

Student developer | HackitForward Dev

Project Description

A Chat app that allows you to chat with other people. This is still unfinished!

Features

Here are some things my project can do for now:

• View chats messages from a person in particular
• Side bar for the different ongoing conversations
• Side bar for the navigation menu of a potential app!

How It's Built

This project was built using React (although I could have used vanilla html, javascript, and css, but I wanted to practice^^)

What's next?

• Build the backend! Maybe use socket.io to do live chat!

Team

saltyRavioli

Project Description

I'll figure this out later...

Features

Talk about some cool things your project does here. You can use a:

• Bulleted
• List
• Like
• This

How It's Built

Talk about how you built this project in technical terms. Talk about the languages, frameworks, and tools you used to create this project.