One bootstrap html page in datatable (or similar) for a translate tool

Status: Closed
Prize: $200
Entries Received: 6
Winner: Bajzathd

Winner

Contest Brief

In order to compete, submit a better drawing or html than I have attached. Use a design that you can implement/code perfectly into full bootstrap datatables (or similar ajax-functionality). IF you win, you should code the one-page HTML in bootstrap/ajax (no php) with example data.

I don't want more colors or a lot of new functionality - I want a good looking and very simple/fast/plain one-page bootstrap html. It is mostly about the finish and implementation of datatable.

You do not have to move things around mutch (please don't) and please avoid any design over 1024 pixels (800 is king, but maybe the text-box would be to small).

Use the same color/default bootstrap and text as in the drawing, I specially like the font/color on the left-column translation.

If you win, you are to deliver one working bootstrap page with dummy data hardcoded into datatable/html on load (or similar ajax-functionality) so that searching and sending this example data works. You do NOT need any PHP-knowledge, but you do need extensive datatable-knowledge/js to pull this off. Please do NOT bid if you are unfamiliar with datatables and js, as it will take time to learn!

Bootstrap datatable:
https://datatables.net/extensions/select/examples/styling/bootstrap.html

Functionality:
- Possible to search (in data generated into plain html/datatable) both original language key, string and translation - as soon as you type, the language-key, string and translation will disappear. Just like the search in the example above. Point 1 and 2 in my drawing.

- Pagnation/Sorting.

- Update the translated langauge string using ajax/datatable and somehow indicate in user interface a success. Behind the scene, the click should just call a dummy URL with the textbox-content and if success, show a icon or somehow indicate success before the indicator disappears soon. This point is nb 3 in drawing.

- When you click a project bootstrap dropdown (4), entire page reloads (new pageview) and gets language-strings for another language. Same thing happens with the links for the langauges (5). Again, you can hardcode these strings into html on load, do you not need to do the PHP coding.

Recommended Skills

Winner

Post a Contest Like This

Employer Feedback

“Did a very good job on this project, did exactly what it was supposed to do. Good english and quick response. ”

DeltaUser, Norway.

Public Clarification Board

prashant19sep
- 7 years ago
How can you choose a winner, when still there is time left for the contest to close. I was working on it. I had it ready, and now when I was about to upload i see this message. That's not professional. And I can bet, you will love the UI that I just worked. Its sober and with all the best features in place with alerts and processing status and everything else.... I worked the whole night on this.
- 7 years ago
1. ardiwirawan212
  - 7 years ago
  Maybe contest holder need a fast implementation, be patient sir. And maybe you can learn something here, done is better than perfect :) Cheers
  - 7 years ago
gireeshvfx
- 7 years ago
working i will update my entry soon
- 7 years ago
1. gireeshvfx
  - 7 years ago
  please check my entry and give me reviews #5 #4
  - 7 years ago
coder786sl
- 7 years ago
Okay understand now, its quite interesting lol. but complicated too, I wish you get a scientist who can do it for you :) Good luck my friend...!
- 7 years ago
1. Contest Holder
  - 7 years ago
  Everything is complicated before you learn it :)
  - 7 years ago
2. Contest Holder
  - 7 years ago
  See entry nb 2 and learn :)
  - 7 years ago
Contest Holder
- 7 years ago
My idea was that both search boxes was targeted at same datatable, but searched for different fields. For instance, I have colLanguageName, colEng, colNor in the datatable. When starting to type in the first text-box, all the rows/list list is filtered on whats inside colLanguageName and colEng. When starting to type in the second text box, all the content in third column colNor is searched at.
- 7 years ago
coder786sl
- 7 years ago
Yes, you are correct. We can't have two datatables, then why you have 2 search fields? That's my point. Hope you understand now. Explain more please, I will be thankful to you, and it will tell if its doable or not :)
- 7 years ago
coder786sl
- 7 years ago
One more thing please...
If I am not wrong then you need two datatables integrated on a single page, am I right?
I mean one for left column and second for right column, please correct me if I am wrong :)
Thanks again!
- 7 years ago
1. Contest Holder
  - 7 years ago
  Unsure about what you mean now. If you mean the two columns with the translations in them, I don't see how that can be done with two datatables: Because the left-one is connected to the rigth-one. It is the english original translation in the left column and the translated content to the rigth.
  - 7 years ago
2. Contest Holder
  - 7 years ago
  So the english translation is shown to the left, without any textbox (left column). And the spanish, norwegian or whatever language-box will appear to the rigth (rigth column). For every word you type in the left-columns search box, the three rows (with translation) shown in the image will disappear if there are no matches in the english original translation.
  - 7 years ago
coder786sl
- 7 years ago
Hello Contest Holder, I have worked with datatables in a Bitcoin doubler website. I will do my best to submit my entry in about 2 days, so please hang on and don't close the contest until you see my entry :) See you soon!
- 7 years ago
thecedi0
- 7 years ago
interesting
- 7 years ago
Contest Holder
- 7 years ago
You can choose. It's not a massive data-set, so I think it will be manageable with both of them.
- 7 years ago
prashant19sep
- 7 years ago
How many rows are you planning to load in the datatables.
- 7 years ago
1. Contest Holder
  - 7 years ago
  About 300 at most.
  - 7 years ago
prashant19sep
- 7 years ago
Will the pagination be server side or client side only
- 7 years ago