We had to create a copy of Whatsapp Web using HTML, CSS and JS/JQ.
The whole project is client side only, so it is not working as a real messaging website because it is not storing any content.
The requirements of the project were:
- Create a somewhat decent looking website using CSS only
- The topic of the website is Whatsapp, overall you had to copy everything whatsapp had, or at least add some of the main features
The website turned out like this. In Highschool I was really interesed in CSS so I gave it my all.
If you send a message in one of the chats it has a little preview, also when you're typing, the text in there gets replaced with "You are typing..."
If you click on the three dots it will open a sub-menu, that lets you change chat wallpapers, your details, and to add a chat
You need to put the wallpaper's url in order to change it...
You can either get an avatar from internet and use its url, or you can choose one that is under.
The last option in the sub-menu has pretty much the same inputs as in the image above.
The aim of this project was for pure study, I have not further intentions on using this template (Meta please don't sue me).
If this may help you with your school projects, feel free to copy the code, but as always, make sure you understand the code...
If you also want to test the project without downloading it... here is a link to github pages: https://jfab00.github.io/-HighSchool-Projects-scuffed-Whatsapp/