HOT! DELICIOUS! JAVASCRIPT

          Hello people!! what’s up! So I am back with another blog and this time is home made pure JavaScript. I have been introduced to JavaScript during FSMK summer camp and I have been flabbergast ever since with the potential this scripting language has. So JavaScript was taught to us by Gautham Pi sir who is a proud founder of Jnaapti , he was generous enough to offer free online course on JavaScript to whoever was interested. I was curious, so I enrolled and to be honest it helped me lot I had amazing experience brainstorming on problems and learning entirely new concepts. Shree Laxmi ma’m made sure that we are regular and disciplined about the course. The entire concept was amazing and I really I loved the way it worked out for me . THANK YOU JNAAPTI .
Now, coming back to the JavaScript , I came up with the following approach during the camp. The problem was while using an outdated tag called <marquee></marquee> I wanted that my scrolling text should stop when user has its mouse over the text and at the same time it should highlight the content. So, as someone told me that first you should know the problem , then think about how to solve it and if solving requires learning a new skill then learn it . Yeah, So what I did was , you guessed it right I used . . . “JavaScript” TADA!!
The approach was to make the scrolling stop and highlight the text a.k.a “reduce the opacity” when user points on the text and resume the same when user takes out the mouse. I wrote a small yet clever JS function for that, what my JS did was it sets the attribute called onmouseove to an inbuilt function called this.stop() and onmouseout to this.start() that reduces my job , hush!. Now , I made two functions one to increase the opacity and the other to set it back. It sounds simple right? Well it is, the the problem was the number of time i need to call those function and it WAS MAKING MY SWEET, SIMPLE, SEXY, AND GORGEOUS JS (no! I am not describing my dream girl 😉 ) to look tedious so I had to do something so I made a parameterized function and incorporated into it. So, the code is ……*DRUM ROLLS * 😛

something is missing
ON MOUSE OVER
something is missing
ON MOUSE OUT


<script>
function CompAct(para){
document.getElementById('scroller').setAttribute('onmouseover', 'this.stop()');
document.getElementById('scroller').setAttribute('onmouseout', 'this.start()');
function changeColor(){
para.style.backgroundColor='#f3d67d';
para.style.opacity='0.5';
}
function removeColor(){
para.style.backgroundColor='';
para.style.opacity='';
}
para.addEventListener('mouseover', changeColor);
para.addEventListener('mouseout', removeColor);
}
CompAct(document.getElementById('news1'));
CompAct(document.getElementById('news2'));
CompAct(document.getElementById('news3'));
CompAct(document.getElementById('news4'));
CompAct(document.getElementById('news5'));
CompAct(document.getElementById('news6'));
CompAct(document.getElementById('news7'));

</script>

 

Cool! isn’t it ! Well I think so these many lines of code did that amazing job. Ok! Something I wanted to share, to all the noobs like me who must be thinking WTH! I wrote document.getElementById when I had the option of making it a variable. The answer to that question is IT CAUSES GLOBAL VARIABLE POLLUTION, in short it increases the size of the webpage and make it heavy and difficult to load . So , try this out people hope you like it I am putting up the code for this page as well as the whole website on git to check out here . Feel free to commit and criticize ! peace out until next time.

 

 

Magic Of Magic-8

Magic 8 is basically a funschool toy. Its a ball which contains a dice having 16 faces on a shake of the ball it gives answer to yes or no type of question.

The Magic 8 Ball is a hollow plastic sphere resembling an oversized, black and white 8-ball. Inside is a cylindrical reservoir containing a white, plastic, icosahedral die floating in alcohol with dissolved dark blue dye. Each of the 20 faces of the die has an affirmative, negative, or non-committal statement printed on it in raised letters. There is a transparent window on the bottom of the Magic 8 Ball through which these messages can be read.

To use the ball, it must be held with the window initially facing down. After “asking the ball” a yes-no question, the user then turns the ball so that the window faces him, setting in motion the liquid and die inside. When the die floats to the top and one of its faces is pressed against the window, the raised letters displace the blue liquid to reveal the message as white letters on a blue background. Although many users shake the ball before turning it upright, the instructions warn against doing so because it can lead to bubbles. Unfortunately, over time the fluid tends to leak into the die such that eventually, it will no longer float to the top to display an answer.

– Source Wikipedia(http://en.wikipedia.org/wiki/Magic_8-Ball)

I tried to make a virtual version of it . So, the first version of the App that I came up with was quite crude. For android developers- it comprised of a single activity having two text fields and a button. On click of the button it calls a function which generates a number corresponding to which it sends a value or answer to the textfield. The function is as follows

public void job()

{

Random crazy = new Random();//Random class to generate random number

int k = crazy.nextInt(20);// sets the range to integers between 0 and 20

int i = 15;

switch (k) {

case 0:

tvB.setText(“It is certain”);// text to send to the text field

tvB.setTextColor(Color.rgb(crazy.nextInt(265), crazy.nextInt(265),

crazy.nextInt(265)));// Beauty of code lies here ’cause ever output will have different colour

break;

case 1:

tvB.setText(“Outlook not so good”);

tvB.setTextColor(Color.rgb(crazy.nextInt(265), crazy.nextInt(265),

crazy.nextInt(265)));

break;

case 2:

tvB.setText(“It is decidedly so”);

tvB.setTextColor(Color.rgb(crazy.nextInt(265), crazy.nextInt(265),

crazy.nextInt(265)));

break;

case 3:

tvB.setText(“Without a doubt”);

tvB.setTextColor(Color.rgb(crazy.nextInt(265), crazy.nextInt(265),

crazy.nextInt(265)));

break;

case 4:

tvB.setText(“Yes definitely”);

tvB.setTextColor(Color.rgb(crazy.nextInt(265), crazy.nextInt(265),

crazy.nextInt(265)));

break;

case 5:

tvB.setText(“You may rely on it”);

tvB.setTextColor(Color.rgb(crazy.nextInt(265), crazy.nextInt(265),

crazy.nextInt(265)));

break;

case 6:

tvB.setText(“As I see it, yes”);

tvB.setTextColor(Color.rgb(crazy.nextInt(265), crazy.nextInt(265),

crazy.nextInt(265)));

break;

case 7:

tvB.setText(“Most likely”);

tvB.setTextColor(Color.rgb(crazy.nextInt(265), crazy.nextInt(265),

crazy.nextInt(265)));

break;

case 8:

tvB.setText(“Outlook good”);

tvB.setTextColor(Color.rgb(crazy.nextInt(265), crazy.nextInt(265),

crazy.nextInt(265)));

break;

case 9:

tvB.setText(“Yes”);

tvB.setTextColor(Color.rgb(crazy.nextInt(265), crazy.nextInt(265),

crazy.nextInt(265)));

break;

case 10:

tvB.setText(“Signs point to yes”);

tvB.setTextColor(Color.rgb(crazy.nextInt(265), crazy.nextInt(265),

crazy.nextInt(265)));

break;

case 11:

tvB.setText(“Very doubtful “);

tvB.setTextColor(Color.rgb(crazy.nextInt(265), crazy.nextInt(265),

crazy.nextInt(265)));

break;

case 12:

tvB.setText(“Reply hazy try again”);

tvB.setTextColor(Color.rgb(crazy.nextInt(265), crazy.nextInt(265),

crazy.nextInt(265)));

break;

case 13:

tvB.setText(“Ask again later”);

tvB.setTextColor(Color.rgb(crazy.nextInt(265), crazy.nextInt(265),

crazy.nextInt(265)));

break;

case 14:

tvB.setText(” Better not tell you now”);

tvB.setTextColor(Color.rgb(crazy.nextInt(265), crazy.nextInt(265),

crazy.nextInt(265)));

break;

case 15:

tvB.setText(“Cannot predict now”);

tvB.setTextColor(Color.rgb(crazy.nextInt(265), crazy.nextInt(265),

crazy.nextInt(265)));

break;

case 16:

tvB.setText(“Concentrate and ask again”);

tvB.setTextColor(Color.rgb(crazy.nextInt(265), crazy.nextInt(265),

crazy.nextInt(265)));

break;

case 17:

tvB.setText(“Don’t count on it”);

tvB.setTextColor(Color.rgb(crazy.nextInt(265), crazy.nextInt(265),

crazy.nextInt(265)));

break;

case 18:

tvB.setText(“My reply is no”);

tvB.setTextColor(Color.rgb(crazy.nextInt(265), crazy.nextInt(265),

crazy.nextInt(265)));

break;

case 19:

tvB.setText(“My sources say no”);

tvB.setTextColor(Color.rgb(crazy.nextInt(265), crazy.nextInt(265),

crazy.nextInt(265)));

break;

}

}

The above function is the heart of this app, it is like the core of the armour. So on every click of the button this function is called. Now, I should tell you how i went about doing this app. First comes the graphical layout , the code is below and the trick I used is I used a picture for the background. Well, I am telling this because in the first version I used a simple background color which used to look ugly. So, a piece of advice for people like me instead of giving background color give a background image.

this is the layout
this is the layout

The xml code is:

<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android&#8221;

xmlns:tools=”http://schemas.android.com/tools&#8221;

android:layout_width=”match_parent”

android:layout_height=”match_parent”

android:background=”@drawable/mg1″

android:paddingBottom=”@dimen/activity_vertical_margin”

android:paddingLeft=”@dimen/activity_horizontal_margin”

android:paddingRight=”@dimen/activity_horizontal_margin”

android:paddingTop=”@dimen/activity_vertical_margin”

tools:context=”.MainActivity” >

<TextView

android:id=”@+id/tv1″

android:layout_width=”fill_parent”

android:layout_height=”wrap_content”

android:text=”@string/des”

android:textColor=”#d76316″

android:textSize=”20sp”

android:textStyle=”bold” />

<TextView

android:id=”@+id/tv2″

android:layout_width=”fill_parent”

android:layout_height=”wrap_content”

android:layout_below=”@id/tv1″

android:layout_marginTop=”90dp”

android:background=”#ffffff”

android:hint=”@string/ya”

android:padding=”10dp”

android:textSize=”40sp” />

</RelativeLayout>

case 2:

tvB.setText(“It is decidedly so”);

tvB.setTextColor(Color.rgb(crazy.nextInt(265), crazy.nextInt(265),
crazy.nextInt(265)));

break;

case 3:

tvB.setText(“Without a doubt”);

tvB.setTextColor(Color.rgb(crazy.nextInt(265), crazy.nextInt(265),
crazy.nextInt(265)));

break;

case 4:
tvB.setText(“Yes definitely”);

tvB.setTextColor(Color.rgb(crazy.nextInt(265), crazy.nextInt(265),
crazy.nextInt(265)));

break;

case 5:

tvB.setText(“You may rely on it”);

tvB.setTextColor(Color.rgb(crazy.nextInt(265), crazy.nextInt(265),

crazy.nextInt(265)));

break;

case 6:

tvB.setText(“As I see it, yes”);

tvB.setTextColor(Color.rgb(crazy.nextInt(265), crazy.nextInt(265),
crazy.nextInt(265)));

break;

case 7:

tvB.setText(“Most likely”);

tvB.setTextColor(Color.rgb(crazy.nextInt(265), crazy.nextInt(265),
crazy.nextInt(265)));
break;

case 8:

tvB.setText(“Outlook good”);

tvB.setTextColor(Color.rgb(crazy.nextInt(265), crazy.nextInt(265),
crazy.nextInt(265)));

break;

case 9:

tvB.setText(“Yes”);

tvB.setTextColor(Color.rgb(crazy.nextInt(265), crazy.nextInt(265),
crazy.nextInt(265)));

break;

case 10:

tvB.setText(“Signs point to yes”);

tvB.setTextColor(Color.rgb(crazy.nextInt(265), crazy.nextInt(265),
crazy.nextInt(265)));

break;

case 11:

tvB.setText(“Very doubtful “);

tvB.setTextColor(Color.rgb(crazy.nextInt(265), crazy.nextInt(265),
crazy.nextInt(265)));

break;

case 12:

tvB.setText(“Reply hazy try again”);

tvB.setTextColor(Color.rgb(crazy.nextInt(265), crazy.nextInt(265),
crazy.nextInt(265)));

break;

case 13:
tvB.setText(“Ask again later”);

tvB.setTextColor(Color.rgb(crazy.nextInt(265), crazy.nextInt(265),
crazy.nextInt(265)));

break;

case 14:

tvB.setText(” Better not tell you now”);

tvB.setTextColor(Color.rgb(crazy.nextInt(265), crazy.nextInt(265),
crazy.nextInt(265)));

break;

case 15:
tvB.setText(“Cannot predict now”);

tvB.setTextColor(Color.rgb(crazy.nextInt(265), crazy.nextInt(265),
crazy.nextInt(265)));

break;

case 16:

tvB.setText(“Concentrate and ask again”);

tvB.setTextColor(Color.rgb(crazy.nextInt(265), crazy.nextInt(265),
crazy.nextInt(265)));

break;

case 17:

tvB.setText(“Don’t count on it”);

tvB.setTextColor(Color.rgb(crazy.nextInt(265), crazy.nextInt(265),
crazy.nextInt(265)));

break;

case 18:

tvB.setText(“My reply is no”);

tvB.setTextColor(Color.rgb(crazy.nextInt(265), crazy.nextInt(265),
crazy.nextInt(265)));

break;

case 19:

tvB.setText(“My sources say no”);

tvB.setTextColor(Color.rgb(crazy.nextInt(265), crazy.nextInt(265),
crazy.nextInt(265)));

break;

}

}

The xml code is:

<RelativeLayout xmlns:android=”http://schemas.android.com/apk/res/android&#8221;

xmlns:tools=”http://schemas.android.com/tools&#8221;

android:layout_width=”match_parent”

android:layout_height=”match_parent”

android:background=”@drawable/mg1″

android:paddingBottom=”@dimen/activity_vertical_margin”

android:paddingLeft=”@dimen/activity_horizontal_margin”

android:paddingRight=”@dimen/activity_horizontal_margin”

android:paddingTop=”@dimen/activity_vertical_margin”

tools:context=”.MainActivity” >

<TextView

android:id=”@+id/tv1″

android:layout_width=”fill_parent”

android:layout_height=”wrap_content”

android:text=”@string/des”

android:textColor=”#d76316″

android:textSize=”20sp”

android:textStyle=”bold” />

<TextView

android:id=”@+id/tv2″

android:layout_width=”fill_parent”

android:layout_height=”wrap_content”

android:layout_below=”@id/tv1″

android:layout_marginTop=”90dp”

android:background=”#ffffff”

android:hint=”@string/ya”

android:padding=”10dp”

android:textSize=”40sp” />

</RelativeLayout>

One of the most important thing is java file , the back-end support of the app, the action packed feature literally. Java file is automatically generated in eclipse , and linked to the xml file , I will talk about that in later blogs on how to link java file to xml file , for now the java code is :

package com.example.magic_8;import java.util.Random;

import android.os.Bundle;

import android.app.Activity;

import android.content.Context;

import android.graphics.Color;

import android.hardware.Sensor;

import android.hardware.SensorEvent;

import android.hardware.SensorEventListener;

import android.hardware.SensorManager;

import android.util.Log;

import android.view.Gravity;

import android.view.View;

import android.view.View.OnClickListener;

import android.view.Window;

import android.view.WindowManager;

import android.widget.Button;

import android.widget.TextView;

import android.widget.Toast;

public class MainActivity extends Activity implements SensorEventListener {

public TextView tvA, tvB;

SensorManager sm;

private static final int SHAKE_THRESHOLD = 800;

long lastUpdate = 0;

public float x, y, z;

public float last_x = 0;

public float last_y = 0;

public float last_z = 0;

@Override

protected void onCreate(Bundle savedInstanceState) {

super.onCreate(savedInstanceState);

//this line makes the activity whole screen activity hiding the notification bar

requestWindowFeature(Window.FEATURE_NO_TITLE);

getWindow().setFlags(WindowManager.LayoutParams.FLAG_FULLSCREEN, WindowManager.LayoutParams.FLAG_FULLSCREEN);

intials();

//registering the sensor

if (sm.getSensorList(Sensor.TYPE_ACCELEROMETER).size() != 0) {

Sensor r = sm.getSensorList(Sensor.TYPE_ACCELEROMETER).get(0);

sm.registerListener(this, r, SensorManager.SENSOR_DELAY_GAME);

}

}

public void intials() { //function to initialize all the varibles

setContentView(R.layout.activity_main);

sm = (SensorManager) getSystemService(Context.SENSOR_SERVICE);

tvA = (TextView) findViewById(R.id.tv1);

tvB = (TextView) findViewById(R.id.tv2);

}

public void job() {

Random crazy = new Random();

int k = crazy.nextInt(20);

int i = 15;

switch (k) {

case 0:

tvB.setText(“It is certain”);

tvB.setTextColor(Color.rgb(crazy.nextInt(265), crazy.nextInt(265),

crazy.nextInt(265)));

break;

case 1:

tvB.setText(“Outlook not so good”);

tvB.setTextColor(Color.rgb(crazy.nextInt(265), crazy.nextInt(265),

crazy.nextInt(265)));

break;

case 2:

tvB.setText(“It is decidedly so”);

tvB.setTextColor(Color.rgb(crazy.nextInt(265), crazy.nextInt(265),

crazy.nextInt(265)));

break;

case 3:

tvB.setText(“Without a doubt”);

tvB.setTextColor(Color.rgb(crazy.nextInt(265), crazy.nextInt(265),

crazy.nextInt(265)));

break;

case 4:

tvB.setText(“Yes definitely”);

tvB.setTextColor(Color.rgb(crazy.nextInt(265), crazy.nextInt(265),

crazy.nextInt(265)));

break;

case 5:

tvB.setText(“You may rely on it”);

tvB.setTextColor(Color.rgb(crazy.nextInt(265), crazy.nextInt(265),

crazy.nextInt(265)));

break;

case 6:

tvB.setText(“As I see it, yes”);

tvB.setTextColor(Color.rgb(crazy.nextInt(265), crazy.nextInt(265),

crazy.nextInt(265)));

break;

case 7:

tvB.setText(“Most likely”);

tvB.setTextColor(Color.rgb(crazy.nextInt(265), crazy.nextInt(265),

crazy.nextInt(265)));

break;

case 8:

tvB.setText(“Outlook good”);

tvB.setTextColor(Color.rgb(crazy.nextInt(265), crazy.nextInt(265),

crazy.nextInt(265)));

break;

case 9:

tvB.setText(“Yes”);

tvB.setTextColor(Color.rgb(crazy.nextInt(265), crazy.nextInt(265),

crazy.nextInt(265)));

break;

case 10:

tvB.setText(“Signs point to yes”);

tvB.setTextColor(Color.rgb(crazy.nextInt(265), crazy.nextInt(265),

crazy.nextInt(265)));

break;

case 11:

tvB.setText(“Very doubtful “);

tvB.setTextColor(Color.rgb(crazy.nextInt(265), crazy.nextInt(265),

crazy.nextInt(265)));

break;

case 12:

tvB.setText(“Reply hazy try again”);

tvB.setTextColor(Color.rgb(crazy.nextInt(265), crazy.nextInt(265),

crazy.nextInt(265)));

break;

case 13:

tvB.setText(“Ask again later”);

tvB.setTextColor(Color.rgb(crazy.nextInt(265), crazy.nextInt(265),

crazy.nextInt(265)));

break;

case 14:

tvB.setText(” Better not tell you now”);

tvB.setTextColor(Color.rgb(crazy.nextInt(265), crazy.nextInt(265),

crazy.nextInt(265)));

break;

case 15:

tvB.setText(“Cannot predict now”);

tvB.setTextColor(Color.rgb(crazy.nextInt(265), crazy.nextInt(265),

crazy.nextInt(265)));

break;

case 16:

tvB.setText(“Concentrate and ask again”);

tvB.setTextColor(Color.rgb(crazy.nextInt(265), crazy.nextInt(265),

crazy.nextInt(265)));

break;

case 17:

tvB.setText(“Don’t count on it”);

tvB.setTextColor(Color.rgb(crazy.nextInt(265), crazy.nextInt(265),

crazy.nextInt(265)));

break;

case 18:

tvB.setText(“My reply is no”);

tvB.setTextColor(Color.rgb(crazy.nextInt(265), crazy.nextInt(265),

crazy.nextInt(265)));

break;

case 19:

tvB.setText(“My sources say no”);

tvB.setTextColor(Color.rgb(crazy.nextInt(265), crazy.nextInt(265),

crazy.nextInt(265)));

break;

}

}

@Override

public void onAccuracyChanged(Sensor arg0, int arg1) {

// TODO Auto-generated method stub

}

@Override

public void onSensorChanged(SensorEvent k) {

// TODO Auto-generated method stub

// arrangement made to difine a shake using accelerometer

long curTime = System.currentTimeMillis();

// only allow one update every 100ms.

if ((curTime – lastUpdate) > 100) {

long diffTime = (curTime – lastUpdate);

lastUpdate = curTime;

x = k.values[0];

y = k.values[1];

z = k.values[2];

float speed = Math.abs(x + y + z – last_x – last_y – last_z)

/ diffTime * 10000;

if (speed > SHAKE_THRESHOLD) {

job();

}

last_x = x;

last_y = y;

last_z = z;

}

}

@Override

protected void onPause() {

// TODO Auto-generated method stub

super.onPause();

sm.unregisterListener(this);

}

}

One of the most important concept is linking two activity which I will be covering in the next blog till then experiment with the code , tell me any bugs or flaws you come across any suggestion, criticism and appreciation will make me very happy see you in the next blog peace out.

With this I am also pushing my first project on Github , do pull ,commit and play with the code the link to the project is here 🙂

“That’s one small step for man, one giant leap for mankind.”

“That’s one small step for man, one giant leap for mankind.” this line didn’t have much significance for me earlier and I never thought it could be something interesting and that too in code universe but Richard Buckland changed my thinking totally.  Coming to Armstrong what he meant was the small step he is taking on moon is going to be revolutionizing for the mankind. Now , how is that related to writing codes or figuring out algorithm well  believe it or not ,it is.
The way a computer science guy looks at a problem , the steps he follow is PAPP as Richard says.
p——->problem
a——->algorithm
p——–>program
p———>process
Well its kind of ironic because ‘papp’ in Hindi means sin . So, you need to commit sin to solve a problem , what to say its “necessary evil”. Pj’s apart so what are we seeing here is small steps like learning to code is like  small steps that we all belonging to this community take may lead us to take the giant leap i.e to figure out simplest algorithm to find solution to the biggest problems.

rc

Okay! so simplest algorithm , it seems to be a big word but we all follow algorithm. While taking bath, while searching for books in library, searching for DVDs but the revolutionary idea is to make the program follow algorithm , with algorithm comes complexity and stuff. Richard makes one of his student to sort DVDs and he sorts it in two different ways in two different conditions. He sorts it with insertion sort when he saw the DVDs the very first time and then he sorted them with selection sort the other , well I was amazed observing what our mind can do it figures out such complicated algorithm in such a small amount of time , the most amazing algorithms are around us they are the most obvious ones but we overlook them.
The other argument that blew my mind was why computer science is science?
To which Buckland replied in a very clever way science is anything we observe , then what do we observe in computer monitor? keyboard? naaah! we observe the beautiful concept of any programming language, we observe functions what input we take  and what output its going to produce. Functions that take same input to produce same output are similar functions irrespective of the intrinsic code written, this can be explained taking example of humans , A homo sapien will be a homo sapien irrespective of his height, skin colour or the place he is born in. Taking this in consideration functions are suppose to be more liberal than human beings . Functions treat each of them equals provided they are doing the same job unlike humans. Then what decide which function is better and which function should we  adopt, this statement has a lot of ambiguities, after  four hours of intense discussion on scrollback we came to the conclusion that how an algorithm behaves with increasing number of input tells us how good an algorithm is.Hush!

rc1

Explanation on ‘abstraction’ well abstraction is selfishness , really! It means to concentrate on things which we want to concentrate and leave out all other things as simple as that. Most of us has this stereotypical mindset about abstraction that it means “overlooking the complexity of the process” well its partially true , its an example of abstraction.
I am also a learner , so I am sure I have made a lot of mistakes please If you come across any such mistake, you are free to criticize and help me grow. This is Farhaan BUkhsh , this was my take on Richard Bukland’s video on data structures lecture 1 and 2. Do write to me telling how you feel about it , will come back with another post till then peace out!