Create simple UI for some JSON data with KnockoutJS and Boostrap 3
- or -
Post a project like this3011
$$
- Posted:
- Proposals: 2
- Remote
- #1008837
- Awarded
Description
Experience Level: Intermediate
Estimated project duration: 1 day or less
General information for the website: It's a goal tracking and commenting widget to be plugged into my bigger application
Num. of web pages/modules: 1
Description of every page/module: This is a simple project that shouldn't take long and will hopefully showcase your communication, design and coding skills for further work.
This project involves a list of goals that a user has provided onto a system. Each goal has a title and a description such as "Lose weight" and "By eating more healthily and doing more exercise".
Goals can be added, edited and deleted by the user - but at this stage, I only want the 'view' functionality.
Goals also have 'updates'. An update could be made by the user himself or any other user. The user's own updates are shown on the left, those by other users are shown aligned to the right. For now, I just need to display them, not edit or delete them.
Description of requirements/features: You are given a JSON document (pasted below) which will ultimately be retrieved from a .net web service. Briefly, the schema is:
- Array of
-- Goals with data such as Title, Description etc. each Goal has
---- Array of Comments. Each comment has data like: Comment itself and name of person who made comment
Your job is to create the attached screenshot using KnockoutJS and Twitter Boostrap.
Stage 1
- just create the 'read' view with buttons to edit/add/delete
-use knockout and bootstrap to display the data. You can assume your piece will be inserted into a container on a page.
Later stage (not required right now)
- design and build the edit/delete functionality
Please do not apply any custom CSS - just use Bootstrap's built in classes.
Criteria for selection
- a good eye for UX and UI design - knowing where to put the buttons, getting things in alignment and proportion, suggestions to change my design if appropriate. Please send me your portfolio
- clean code and absolute clarity of thought / good questions asked
- ideally based in west europe / UK with excellent English and the possibility of doing a lot more work with me / potential job
Extra notes:
[
{
"Completed": false,
"dCreated": "2001-01-01T00:00:00",
"Deleted": false,
"Description": "By exercising, eating more healthily. Ect.....",
"GoalID": 1,
"Title": "Lose weight",
"UserID": 14,
"GoalComments": [
{
"CommentText": "I'm doing well on this, I think I've cut down on crisps etc..",
"dCreated": "2014-01-01T00:00:00",
"Deleted": false,
"GoalCommentID": 1,
"GoalID": 1,
"UserID": 14,
"GoalCommentFirstName": "Bob",
"GoalCommentLastname": "Walter"
},
{
"CommentText": "I ate a cake today",
"dCreated": "2014-01-02T00:00:00",
"Deleted": false,
"GoalCommentID": 2,
"GoalID": 1,
"UserID": 14,
"GoalCommentFirstName": "Bob",
"GoalCommentLastname": "Walter"
},
{
"CommentText": "We discussed this today and agreed you need to worry less",
"dCreated": "2014-01-05T00:00:00",
"Deleted": false,
"GoalCommentID": 4,
"GoalID": 1,
"UserID": 654,
"GoalCommentFirstName": "Test",
"GoalCommentLastname": "Mentor"
}
]
},
{
"Completed": false,
"dCreated": "2015-01-02T00:00:00",
"Deleted": false,
"Description": "In 4 years I'd like to have a better job, better salary and more authority. I think Ican probably achieve this in 3 years.",
"GoalID": 2,
"Title": "Become a manager at my local branch",
"UserID": 14,
"GoalComments": [
{
"CommentText": "Going well. Got a pay rise",
"dCreated": "2015-01-01T00:00:00",
"Deleted": false,
"GoalCommentID": 5,
"GoalID": 2,
"UserID": 14,
"GoalCommentFirstName": "Bob",
"GoalCommentLastname": "Walter"
},
{
"CommentText": "Could do better on this. Not going very well. Must discuss.",
"dCreated": "2015-01-05T00:00:00",
"Deleted": false,
"GoalCommentID": 6,
"GoalID": 2,
"UserID": 14,
"GoalCommentFirstName": "Bob",
"GoalCommentLastname": "Walter"
}
]
}
]
Num. of web pages/modules: 1
Description of every page/module: This is a simple project that shouldn't take long and will hopefully showcase your communication, design and coding skills for further work.
This project involves a list of goals that a user has provided onto a system. Each goal has a title and a description such as "Lose weight" and "By eating more healthily and doing more exercise".
Goals can be added, edited and deleted by the user - but at this stage, I only want the 'view' functionality.
Goals also have 'updates'. An update could be made by the user himself or any other user. The user's own updates are shown on the left, those by other users are shown aligned to the right. For now, I just need to display them, not edit or delete them.
Description of requirements/features: You are given a JSON document (pasted below) which will ultimately be retrieved from a .net web service. Briefly, the schema is:
- Array of
-- Goals with data such as Title, Description etc. each Goal has
---- Array of Comments. Each comment has data like: Comment itself and name of person who made comment
Your job is to create the attached screenshot using KnockoutJS and Twitter Boostrap.
Stage 1
- just create the 'read' view with buttons to edit/add/delete
-use knockout and bootstrap to display the data. You can assume your piece will be inserted into a container on a page.
Later stage (not required right now)
- design and build the edit/delete functionality
Please do not apply any custom CSS - just use Bootstrap's built in classes.
Criteria for selection
- a good eye for UX and UI design - knowing where to put the buttons, getting things in alignment and proportion, suggestions to change my design if appropriate. Please send me your portfolio
- clean code and absolute clarity of thought / good questions asked
- ideally based in west europe / UK with excellent English and the possibility of doing a lot more work with me / potential job
Extra notes:
[
{
"Completed": false,
"dCreated": "2001-01-01T00:00:00",
"Deleted": false,
"Description": "By exercising, eating more healthily. Ect.....",
"GoalID": 1,
"Title": "Lose weight",
"UserID": 14,
"GoalComments": [
{
"CommentText": "I'm doing well on this, I think I've cut down on crisps etc..",
"dCreated": "2014-01-01T00:00:00",
"Deleted": false,
"GoalCommentID": 1,
"GoalID": 1,
"UserID": 14,
"GoalCommentFirstName": "Bob",
"GoalCommentLastname": "Walter"
},
{
"CommentText": "I ate a cake today",
"dCreated": "2014-01-02T00:00:00",
"Deleted": false,
"GoalCommentID": 2,
"GoalID": 1,
"UserID": 14,
"GoalCommentFirstName": "Bob",
"GoalCommentLastname": "Walter"
},
{
"CommentText": "We discussed this today and agreed you need to worry less",
"dCreated": "2014-01-05T00:00:00",
"Deleted": false,
"GoalCommentID": 4,
"GoalID": 1,
"UserID": 654,
"GoalCommentFirstName": "Test",
"GoalCommentLastname": "Mentor"
}
]
},
{
"Completed": false,
"dCreated": "2015-01-02T00:00:00",
"Deleted": false,
"Description": "In 4 years I'd like to have a better job, better salary and more authority. I think Ican probably achieve this in 3 years.",
"GoalID": 2,
"Title": "Become a manager at my local branch",
"UserID": 14,
"GoalComments": [
{
"CommentText": "Going well. Got a pay rise",
"dCreated": "2015-01-01T00:00:00",
"Deleted": false,
"GoalCommentID": 5,
"GoalID": 2,
"UserID": 14,
"GoalCommentFirstName": "Bob",
"GoalCommentLastname": "Walter"
},
{
"CommentText": "Could do better on this. Not going very well. Must discuss.",
"dCreated": "2015-01-05T00:00:00",
"Deleted": false,
"GoalCommentID": 6,
"GoalID": 2,
"UserID": 14,
"GoalCommentFirstName": "Bob",
"GoalCommentLastname": "Walter"
}
]
}
]
Roly W.
100% (13)Projects Completed
15
Freelancers worked with
15
Projects awarded
35%
Last project
5 Jun 2017
United Kingdom
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