Week 10: HTML Pages, Info and Options Button Divs (Javascript)

This week has been hectic for coding. I have finally finished all of the html pages in regards to the design and some of the functionality. The css is looking beautiful and I have never been so proud.

index.html

Info div

The index page is all beautiful and complete! Of course there is some functionality needed. However I managed (by the help of the tutors and other javascript coders) to pop a div up when you click on the information and options buttons using javascript and css. Basically all you do is use an "on click" event and toggle the div so that each time you click on the button the div will toggle between being shown and hidden. I also made a close button which did the same thing so that the user can easily close the window without having to press again on the information/options button. This was to go with the accessibility guidelines :).

Of course we are needing extra functionality which is to add in error messages that also go with the accessibility guidelines.

error messages for login

Here I made notes for my teammates for later on. This will also need to be implemented on the create an account page with messages such as "This username already exists", "These passwords don't match" and "Please input a second password" etc.

Account Page

Here is the account page which gives a general idea of it however the saved searches, username and so on will need to be provided by the database and that is for my other team members Thaun and Park to do :).

Account Page fixes 

Next to the copyright free default account image, we are wanting to have the username of the user displayed, maybe a date on when they first joined and so on. And also their saved searches - if they have any.

Bootstrop Icons

Another fix to the account page was to change the "My Account" button to "Map" so that the user can easily just go back to the map. To improve accessibility standards, bootstrap icons were also used to help.

Map Page

This is the map page and I think it is the page that needs the most work. However it will be done by the other coders as they are the ones who are responsible for coding the trove api functionality, searching and so on.

Overall I am quite excited and thrilled because we go so much work done and we will be able to use this as our digital prototype which will be tested next contact session :).