This website is used to present information to a user,it has a simple to use layout which is easy to navigate.
It shows current time and weather for Ireland, Upon selection of a country from a dropdown list it shows some
information for that country,the location of that country and the current available weather for that country
This site can be viewed here
The strategy for the site was to make a simple user friendly site that anyone of any age could use to find out
information about any country they would be interested in
I made the layout simple to use as i would hope that primary school children could use it to find out a bit more about the world around them.
The interface is easy to use, just pick the country you are interested in and the site does the rest
I wanted to make this site easy to use and as user friendly as possible, i believe that anyone can use this site without instruction
The site has four main information panels, the first shows the current time,date and weather with the controls for accessing the rest of the site
the second panel shows information regarding the selected country, the third panel shows the countries location
and the fourth shows current weather for that country.Each panel has a link to the next snippet of information until the end which has a link to bring
you back to the top of the site again
There is an attached file showing the original rough drawing for the site
I picked slategrey and black colours for the main part of the site with three global pictures and footer with an orange colour
all the movement buttons are green and fade to red and the external links are red fading to green just to add a bit of colour
The site is simple in design, there are a few smooth scrolling jquery functions that bring you from panel to panel.
The four main panels of information are simplistic in design and are all linked with the jquery scrolling function
I would like to add an error message that appears when there is no available weather information available for a country.
I might add a drop down feature with more country info in the future although it would depend on how it looks on the site.
I believe a dropdown would takeaway from the overall design of the site.
I would have the weather at the top of the site linked to a geolocator as it is linked to current Irish weather at the moment.
- HTML
- CSS
- Bootstrap
- Javascript
- jQuery
- API'S
The site was tested on mobile devices manufactured by huawei,apple and samsung.it was tested on laptop devices and desktops
of varying sizes and operating systems such as chrome,firefox, and edge, only slight styling changes were observed
all the scrolling functions work correctly on the differant devices and sites apart from edge: in edge the top image does not
render when you scroll up from the bottom using the scroll to top button, if you use the scroll bar on the side it is ok
alternating between using the scroll bar and button produces the same failure in sofar as the image is there using the bar
and not there when using the button. I had a look online to see if anyone else had the same issues but there was no fix relating
to the failure that i am experiencing, this is something which will have to be addressed with more experience
currently i would say that the site is not compatible with edge. On one occasion the flag img failed to update
This only happened the one time out of hundreds of tests so i did not investigate any further
During testing the new map failed to load maybe two-three times out of hundreds of querys,I moved the script for the map below the rest of the javascript
and that seems to have resolved the issue, more tests may be needed here I also noticed on smaller devices there
is a white margin on the right side of the screen which was being caused by a row expanding beyond its parent container,
that seems to be fixed now also the weather for some of the countries that are a bit off the beaten track
do not seem to have any accessible weather data, I tried to implement an information message regarding the missing
weather data but all my attempts seemed to compromise the working of the site as it currently stands so I will have to fix
that in the future,currently if you request one of these countries first the 'no weather data' message remains(e.g:christmas island)
However if you request a country with weather data first and then the country without the weather data the data from the first request remains
all coding was passed through validators, three red errors showed in the html validator but they are related to the unpopulated
image tag which is only populated after the search is initiated, it also showed an error for not having an alt image tag but if i put
that into the site it appears before any information is called and it does not look nice so i intentionally left it out
css has no errors, javascript validator showed up spacing issues,i fixed some of these and left others where i thought it made it easier to read the code.
I deployed the site to Github pages, it uses the master branch, it updates with each new commit,
upon deployment it was checked on various platforms and seems to be ok
All content on the site is aquired from:
openweathermap api
googlemaps api
restful countries api
The photos used in this site were obtained from pexels.com
I found it difficult to implement the country drop down list correctly so i took code from a youtube tutorial
The title of the tutorial is rest countries api by coding journey, the code can be seen at the 53min of the tutorial
The code is stored in the countries.js file and is highlighted