Designs broke out into clean responsive HTML and CSS preferably done in a framework
- or -
Post a project like this$$$
- Posted:
- Proposals: 4
- Remote
- #1861803
- Expired
Description
Experience Level: Expert
Here are the design assets I need broken out: https://www.dropbox.com/s/76o3wwc35pih5ad/Archive.zip?dl=0
This file contains two sketch documents one is for the educational side of things. I’ve already got the map piece completed and most of the graphing complete in the dark layout what I need is the light UI broken out.
Here is what I am expecting from the break out of the educational UI:
I need the designs broke out into clean responsive HTML and CSS preferably done in a framework like bootstrap or Google Material with the javascript pieces built-in modularly separated by functionality for example on the map it should have functionality that allows you hover over each country and allow you to click on a country. When you click on a country we need a javascript piece that will pull from a data source that contains the country name, flag, and emblem. From there they can choose to Compare that country by clicking on the compare button that should popup over like you see in the design mockup. When they click compare it should populate a new row of charts that you see below.
This data source can be static dummy data I'll tie it into the real data source via ajax after its completed.
it would need to allow you to click on any of the countries and then pull from a data source for example:
var countryData = {
'usa': {
'name': 'Full Country Name',
'flag-img': "http..url-to-flag-img",
'emblem-img': "http..url-to-country-emblem",
'quiz': { 'id': 123 },
'comparisonData': {
'idv': 33,
'ect..': 44,
'ect...': 36,
'ect...': 36,
'ect...': 36,
'ect...': 33
}
},
'uk': {
'name': 'Full Country Name',
'flag-img': "http..url-to-flag-img",
'emblem-img': "http..url-to-country-emblem",
'quiz': { 'id': 123 },
'comparisonData': {
'idv': 33,
'ect..': 44,
'ect...': 36,
'ect...': 36,
'ect...': 36,
'ect...': 33
}
},
'country-code': {
'name': 'Full Country Name',
'flag-img': "http..url-to-flag-img",
'emblem-img': "http..url-to-country-emblem",
'quiz': { 'id': 123 },
'comparisonData': {
'idv': 33,
'ect..': 44,
'ect...': 36,
'ect...': 36,
'ect...': 36,
'ect...': 33
}
},
ect....
};
making them all clickable and then when clicked trigger the popup that would query the countryData for the country code like if USA is clicked: var clickedCountry = countryData['usa'];
then have it populate the popup from that data so set the flag, emblem/seal, and if they click the compare button on the popup have it prepend a row the chart data below the map with the country name and populate the graphs using the data from the datasource's comparisonData, and once this is all done I'm going to have the countryData populate from the app database with real data in the same format or schema that I used for the example above.
Here is a full working example of the country map working by itself but it needs the UI corrected to the light layout:
http://millennialvagabond.com/webroot/country-map.html
This file contains two sketch documents one is for the educational side of things. I’ve already got the map piece completed and most of the graphing complete in the dark layout what I need is the light UI broken out.
Here is what I am expecting from the break out of the educational UI:
I need the designs broke out into clean responsive HTML and CSS preferably done in a framework like bootstrap or Google Material with the javascript pieces built-in modularly separated by functionality for example on the map it should have functionality that allows you hover over each country and allow you to click on a country. When you click on a country we need a javascript piece that will pull from a data source that contains the country name, flag, and emblem. From there they can choose to Compare that country by clicking on the compare button that should popup over like you see in the design mockup. When they click compare it should populate a new row of charts that you see below.
This data source can be static dummy data I'll tie it into the real data source via ajax after its completed.
it would need to allow you to click on any of the countries and then pull from a data source for example:
var countryData = {
'usa': {
'name': 'Full Country Name',
'flag-img': "http..url-to-flag-img",
'emblem-img': "http..url-to-country-emblem",
'quiz': { 'id': 123 },
'comparisonData': {
'idv': 33,
'ect..': 44,
'ect...': 36,
'ect...': 36,
'ect...': 36,
'ect...': 33
}
},
'uk': {
'name': 'Full Country Name',
'flag-img': "http..url-to-flag-img",
'emblem-img': "http..url-to-country-emblem",
'quiz': { 'id': 123 },
'comparisonData': {
'idv': 33,
'ect..': 44,
'ect...': 36,
'ect...': 36,
'ect...': 36,
'ect...': 33
}
},
'country-code': {
'name': 'Full Country Name',
'flag-img': "http..url-to-flag-img",
'emblem-img': "http..url-to-country-emblem",
'quiz': { 'id': 123 },
'comparisonData': {
'idv': 33,
'ect..': 44,
'ect...': 36,
'ect...': 36,
'ect...': 36,
'ect...': 33
}
},
ect....
};
making them all clickable and then when clicked trigger the popup that would query the countryData for the country code like if USA is clicked: var clickedCountry = countryData['usa'];
then have it populate the popup from that data so set the flag, emblem/seal, and if they click the compare button on the popup have it prepend a row the chart data below the map with the country name and populate the graphs using the data from the datasource's comparisonData, and once this is all done I'm going to have the countryData populate from the app database with real data in the same format or schema that I used for the example above.
Here is a full working example of the country map working by itself but it needs the UI corrected to the light layout:
http://millennialvagabond.com/webroot/country-map.html
John C.
100% (16)Projects Completed
9
Freelancers worked with
6
Projects awarded
24%
Last project
17 Sep 2020
United States
New Proposal
Login to your account and send a proposal now to get this project.
Log inClarification Board Ask a Question
-
There are no clarification messages.
We collect cookies to enable the proper functioning and security of our website, and to enhance your experience. By clicking on 'Accept All Cookies', you consent to the use of these cookies. You can change your 'Cookies Settings' at any time. For more information, please read ourCookie Policy
Cookie Settings
Accept All Cookies