Tag: javascript

Why to-do apps for JavaScript frameworks

~ Cloud ~ Leave a comment

Somehow whenever I see some new Javascript framework, most of them always have the same To-Do application as their showcase sample. If someone/ some company is going to build a new framework and going to tell me, we built an awesome framework you can do so much with that and then they go ahead and give me a sample of a To-Do application, anyone would be like meh!!

How difficult can a to-do application be that the said framework is going to make your life much easier.

Just wrote a small to-do app myself, it only needs 1 single line of javascript, yup you read that right.

<!doctype html>
<html>
<head>
<title>Sample To-Do</title>
<style type="text/css">
section {margin: 0 auto;width: 100%;}
h3, h5, li {float: left;width:100%;}
ul {list-style: none;}
input[type=checkbox], p { float:left;margin: 0;}
</style>
</head>
<body>
<section>
<h3> To-Do Application</h3>
<h5> Add your todo below</h5>
<div>
<textarea id="newtodo" placeholder="Enter your todo here..."></textarea>
<button id="newtodosub" onclick="addtodo();">Add</button>
</div>
<ul id="todos"></ul>
</section>
<script type="text/javascript">
function addtodo() {
document.getElementById("todos").insertAdjacentHTML('beforeend',
'<li id="todoitem"><input type="checkbox" onclick="function rem(el) {el.parentElement.lastElementChild.style='
+ '\'float:left;text-decoration:line-through\';el.setAttribute(\'disabled\', \'disabled\')};rem(this);" />'
+ '<p style="float:left;">&nbsp;&nbsp;&nbsp;' + document.getElementById("newtodo").value + '</p>'
+ '</li>'
);
}
</script>
</body>
</html>
view raw todo.html hosted with ❤ by GitHub

All the things you need are –

  1. Text area for the To-do
  2. Button to add it.
  3. Checkbox to mark the todo complete.

The addtodo() function inside the <script> tag is what does all of this.

I feel designers, developers need to come up with something more innovative than a todo list app. Just saying!

Script Processor in EDQ is cool

~ Cloud ~ Leave a comment

So I started with a bit of work on EDQ and I must say its a pretty neat tool. Basically Oracle EDQ stands for Enterprise Data Quality where you get to fix all the invalid, inconsistent and simply put bad, very bad, very very bad data.

I was just playing with it a bit and found the script processor very handy since I could do anything I want with use of a scripting language like javascript or groovy.

I just wrote a sample script to have convert the currency values of products from one currency to another. Maybe this could help someone writing a script for the first time in EDQ.

Here is what my data looks like –

+--------+--------------+------------+-----------------+
| Value | Convert From | Convert To | Converted Value |
+--------+--------------+------------+-----------------+
| 100.14 | INR | USD | |
| 290.19 | INR | GBP | |
| 310.05 | INR | EUR | |
| 110.67 | INR | CAD | |
| 200 | EUR | EUR | |
| 10 | EUR | GBP | |
| 3 | EUR | INR | |
| 6 | GBP | INR | |
| 6 | EUR | INR | |
+--------+--------------+------------+-----------------+
view raw sample_data_for_edq_proc.csvalues hosted with ❤ by GitHub

I created a quick web service on mockable.io. It is a pretty neat tool where you can create a web service to output any data that you want to, here is the sample data I created –

{"base":"EUR","rates":{"CAD":1.4469,"HKD":8.4742,"ISK":139.3,"PHP":55.538,"DKK":7.471,"HUF":339.28,"CZK":25.344,"AUD":1.6565,"RON":4.805,"SEK":10.5813,"IDR":15221.86,"INR":77.9195,"BRL":4.7741,"RUB":71.2368,"HRK":7.4605,"JPY":120.13,"THB":34.664,"CHF":1.0606,"SGD":1.5204,"PLN":4.3094,"BGN":1.9558,"TRY":6.6981,"CNY":7.6329,"NOK":10.2113,"NZD":1.7273,"ZAR":16.4555,"USD":1.0875,"MXN":20.806,"ILS":3.7429,"GBP":0.8415,"KRW":1322.29,"MYR":4.5952}}
view raw sample_data_for_edq_proc.json hosted with ❤ by GitHub

And finally here is the code of the script processor which will convert the values to specific currency, the data used is pretty self explanatory.

addLibrary("http");
var output1;
var xmlHttp = new XMLHttpRequest();
xmlHttp.open("GET", "http://demo7684243.mockable.io/curr_rates&quot;, false);// Here goes your web service URL
xmlHttp.send();
var responseData = xmlHttp.responseText;
var dataJSON = JSON.parse(responseData);
var baseCurr = dataJSON["base"];
var baseCurrRate = dataJSON["rates"];
var convertFrom = input1[1];
var convertTo = input1[2];
var convertFromRate = dataJSON["rates"][convertFrom];
var convertToRate = dataJSON["rates"][convertTo];
if (convertFrom == convertTo) {
convertToRate = 1;
convertFromRate = 1;
}
if (convertTo == baseCurr) {
convertToRate = 1;
}
if (convertFrom == baseCurr) {
convertFromRate = 1;
}
var convertedVal = (input1[0] * convertToRate) / convertFromRate;
output1 = convertedVal.toFixed(2);
view raw edq_script_proc.js hosted with ❤ by GitHub

There are few things which I am sure, you would know if you have used EDQ before.

  1. All inputs and outputs have to be used in the form of array. input1[0], input1[1], input1[2] and so on will be automatically mapped with your columns which you would have selected.
  2. There can be only one output of the script and you need to store it in output1 variable only.
  3. You can simply ignore the logic of Currency conversion in the code, since this is for a very specific task.

All this was just to show you how you can manipulate data with the use of Web Services in EDQ. Hope this helps 🙂

Sencha Touch. HTML5?

~ Cloud ~ Leave a comment

Yo! whats up guys?

I have always felt UI/UX being an integral part of application development. What? Well not really if you are the developer of the ugly looking enterprise apps. Can’t help your poor souls though. But if you fall in the niche category, where you get to develop something cool! Lets talk about the ONGOING Sencha Touch – Are you HTML5 ready? contest. Sencha touch has been one of my favourites, ever since I first started with it, Now well, to be honest, I have always been a backend guy with developing core functionalities rather than making designs, designing UIs, dabbling on UX. But I always had this urge to make something that looks gorgeous and well yeah! which is kind of easy to make. So well, there are two of the more popular frameworks out there, one being jQuery Mobile and other being Sencha Touch built over the popular framework Ext/js, which has been there from sometime now.

Anyways – Contest to build HTML5 apps –> http://www.sencha.com/html5-is-ready

They have kind of defined a few categories, though its not necessary for you to to stick to those categories, but they kind of make it established that you are in a better position to win if you keep within these categories –

  1. Weather
  2. To Do/Reminder
  3. Calculator
  4. Stocks
  5. Camera/Photos
  6. Calendar

Well, no ones stopping you though, you can create as long as it satisfies you, if it does, I guess, it should be good enough to win 🙂 so what brush up your javascript, brush up your MVC and start with it.

Guess I will make something up for the contest too 😛