This is my chatbot. The example site directly inspires it with some new features.
New features:
-The beginning of the greeting text is randomized. -The beginning of the reaction text is randomized. -Because the shop owner is a space invader - I also randomized the prices of the products. Some jokes included 😉👾
-Also, the reactions to the user's name are done, so the alien first reacts to the user's name and then posts a second bubble as an opening line for the business.
Pretty happy with the CSS. I also managed to use Finnish font called Fakir in the title and slogan 😂
The automated gradient is beautifully tasteless 🥳. There is also a slight glow around the white chat area. 😄
The site also works surprisingly well on mobile.
I first read the example site's HTML, CSS, and JS code, and tried to understand as much as possible. Then I followed the instructions. Then I watched Jennie's tutorial video and coded with her. After that some more text instructions.
Now I understand all the sections, but I couldn't have managed to structure the whole thing without looking for help from the example website.
One problem I couldn't solve. When filling in the name to the inbox site automatically moves up (iPhone) when the keyboard appears. After I press enter, the keyboards disappear, but the site remains so that there is a huge white cap at the bottom of the site - and I have to scroll manually up to see the site whole again. (I try to include a video about this problem because it's slightly hard to explain.)
Best regards, Peki