Coding a popup box with more than 1 input in JavaScript

It is extremely simple to code a popup box with more than 1 input in JavaScript. Here is the code snippet for your reference. (Run Code)

var mywindow = window.open("", "_blank", "width=400, height=200");

mywindow.moveTo(450, 50);

function ok() {

var name = mywindow.document.getElementById('name').value;

var pass = mywindow.document.getElementById('pass').value;

mywindow.close();

alert('Name: ' + name + ' Password: ' + pass);

}

function cancel() {

mywindow.close();

}

mywindow.document.open();

mywindow.document.write("<html>

<head>

<title>Popup Box with 2 inputs | 10xCoderKids</title>

</head>

<body>

<p>Please enter your details:</p>

Name: <input id='name' /><br><br>

Password: <input id='pass' /><br><br>

<button id='submit'>Ok</button>

<button id='cancel'>Cancel</button>

</body>

</html>");

mywindow.document.getElementById('submit').addEventListener('click',function(){

ok();

})

mywindow.document.getElementById('cancel').addEventListener('click',function(){

cancel();

})

mywindow.document.close();

Bitwise in JavaScript

Please refer to the video to understand Bitwise in JavaScript.

The table below is referred to in the video and will be handy in understanding the signed binary numbers.

4-bit Signed Binary Number Comparison

Decimal	Signed Magnitude	Signed One’s Complement	Signed Two’s Complement
+7	0111	0111	0111
+6	0110	0110	0110
+5	0101	0101	0101
+4	0100	0100	0100
+3	0011	0011	0011
+2	0010	0010	0010
+1	0001	0001	0001
+0	0000	0000	0000
-0	1000	1111	–
-1	1001	1110	1111
-2	1010	1101	1110
-3	1011	1100	1101
-4	1100	1011	1100
-5	1101	1010	1011
-6	1110	1001	1010
-7	1111	1000	1001

Coding for Kids

What is coding?

In coding we build a program to do a specific task for us.

Code: A code is a set of computer instructions and when you will run it then it will show a result according to it.

Visualisation: Visualisation is an important aspect of coding. If you are given a task to make a game of Snakes and Ladders then first you will have to visualise it in your mind. For example :- You will first think about making two players, then you will think about adding ladders randomly on the board, after that you will think about adding snakes randomly on the board, then you will think about how can you add a winning and losing system.

Logical Thinking: Logical thinking is the most important part of coding. You can only write a code when you think logically. If you have a task to print out Fibonacci Series then you will have to first visualise it and then break into smaller parts. After that you will have to take one part at a time and code it. So when you code, your mind is thinking logically in a step-wise manner.

Why should kids do coding?

Kids should start coding from a young age because their mind is really fertile as they have no worries and they solve puzzles such as Sudoku, The Rubik’s Cube and play lots of other mind games that makes their mind even more fertile. The second point is that their grasping power is really high. This is scientifically a fact that kids can grasp things faster than adults can. The third point is that, the sooner they start the better they can become in coding at an early age in life. For example Mark Zuckerberg built Facebook when he was just 19 years old.

How is it beneficial for kids to start coding at a young age?

Problem solving skills are needed at all times of life whether you are a child or a grown up. Coding improves problem solving skills. Now you must be eager to know that how does coding improve problem solving skills? So here is the answer: Lot’s of problems occur when you are coding. Your program will run only after you have resolved all the problems. This fosters the attitude of problem solving in you and that will always help you in your future life.

Which languages should you start with?

I think you should start with Python if you want to automate stuff and make apps. Python is an extremely powerful high level language created by Guido van Rossum. Python is at number one in the rankings.

If you want to make and quickly publish web apps or games then you can use JavaScript. JavaScript is also an extremely powerful high level language created by Brendan Eich. JavaScript is at number two in the rankings. JavaScript apps can be published easily and the whole world can access your app but if you are using Python and not using any Python framework then it is lot harder to publish your apps and make your apps available to the world. For example I made an app called alien invasion in Python but I have not published it yet because first I will have to make a package installer for it.

How can you become a 10xCoder?

10xCoder is effectively ~10 times better than a normal coder. You can become a 10xCoder by simply practising and teaching other people. Now you must be wondering that practising is a valid point but how will teaching other people coding will help me become a 10xCoder? The simple answer to that is that when you teach, you learn yourself in the process and once all your concepts are clear then you will be building cool apps in really less time and then you are on the journey to become a 10xCoder !!!

Coding AddMul Series in JavaScript

This program takes 2 pair of numbers and we first add them and then multiply them. For example 11 and 11 = 4 because (1 + 1) * (1 + 1) = 4.

Code (Run Code) :

// This program takes 2 pair of numbers and we first add them and then multiply them. For example 11 and 11 = 4 because (1 + 1) * (1 + 1) = 4

function addMulSeries() {

var arr = [];

var num = [];

for (var i = 1; i < 11; i++) {

arr.push(i);

}

for (i of arr) {

num.push((i + i) * (i + i));

}

document.write(num);

}

addMulSeries();

Saion Gupta's Coding Journey (Part-II)

Saion Gupta's Coding Journey (Part-I)

When my father saw that I have interest and I can do something big in coding, he decided to order a JavaScript book for me. So he told me that ‘Saion, let’s  select a book of JavaScript on Amazon’. I was really exited so I we opened Amazon and searched ‘JavaScript books for Kids’. There came lot’s and lot’s of results but I liked a book but my father liked a different book. We both liked the books from the same author because they were looking good and their star rating was also good. I picked the book ‘{ Coding For Kids } Learn JavaScript: Build The Room Adventure Game’ and my father picked ‘{ Coding For Kids } Learn JavaScript: Build Mini Apps’. Me and my father discussed for a long time because we wanted our choice of books. I always liked the game mystery rooms and my kindle had mostly mystery rooms games only and my father wanted the other book because we could build lot’s of short apps and he said that we will learn more if we make different kinds of apps. So after a long discussion we finally decided that we will buy the mystery rooms book. Oh god I loved that moment.

AFTER 3 DAYS

My father had gone somewhere and I was eating my lunch when suddenly the doorbell rung. I thought that my father had come and he does not like waiting outside so I quickly ran and just opened the door but I saw a delivery man with a book shaped packet. He said ‘Is this Sandeep Gupta’s House?‘ By-The-Way, Sandeep Gupta is my father’s name, so back to the topic, I responded to the delivery man ‘Yes, this is Sandeep Gupta’s house’. He said ‘I am from Amazon, a book was ordered by Sandeep Gupta, please sign here and take this book.’ I signed on a paper and he handed me the book. So I just ran to the dining table and gobbled up my food. Then I went to my room and tore off the wrap around the book and I saw a heavy, beautiful and a geeky book. I turned the pages and in the end I saw code. In one line there was alert() that’s why I knew it was code. I could not wait for my father to come back and just start teaching me from the book. For the next 2 hours I kept the book in my hands. And when my father came I was extra happy to see him because I was going to start a new Journey from that day. My father said ‘Saion, I am really tired, what is the matter, you are looking extra happy today’ and when I heard the word tired then I knew that we are not going to do coding today but I still replied to him ‘Papa, my book has come!!! Check it out. Let’s start reading it.’ He said ‘Saion I am too tired today, cannot read it today, we will start from tomorrow’. And I went and started doing my school homework.

THE NEXT DAY

It was the next day and I was super exited. Though it was Sunday and we usually get up at 9 on Sunday but I got up at 6 and everybody except for my grandfather were sleeping. I quickly used the toilet, brushed my teeth, had a quick bath and I had finished my daily chores by 7. I went to my father’s room and saw he was in deep sleep. I said in a low voice ‘Papa, papa, papa, please get up, we have to start our book’. And he suddenly woke up. He said ‘What happened. You look like you have completed your daily chores. It is just 7 and you woke up!!!’ I replied ‘Pops, I woke up at 6, come on let’s do coding’. And he said ‘Let me sleep man’ and he turned his face to the other side and slept. So I was left alone thinking of what to do. Then I thought that I will read the book myself and when papa will get up then I will read it with him once again. So I went into the balcony where birds were chirping and started reading the book. But I didn’t know that coding books are not read like this. They should be read with a laptop in front of you because in a coding book there are examples which are needed to be tested practically. But when I started reading it then I could not understand a single word. For example there was written ‘Enter the following link in the browser: http://repl.it’. But I could not understand where should I enter it, where should I go and all that because I did not have a laptop in front of me to enter the link in the browser. After about half an hour I left it and just closed my eyes. I was not aware that I slept on the chair only and my mother woke me up at about 9:30. I was day dreaming and was murmuring ‘Codi... ng... pap.. a... have... yo.. u.. woken... u.. p..’. And then my mother shouted ‘Saion!!! What are you saying!!! Have you gone mad!!!’. I suddenly got up and I said ‘I got up at 6, I got up at 6!!!’. And my mother said ‘You were sleeping!!!! Don’t lie!!’. And she left. I was feeling quite lazy, I went to my bed and lied down on it. Then from behind my father shouted ‘Saion, you woke me up at 7 and you are sleeping yourself’.  I got up and murmured ‘Pa.. pa... let’s... d.. o... cod... ing....’. And he shouted ‘OK!!! BUT GET OUT OF THE BED!!!’. And after that I went to the laptop with my father. We started the book and it was quite interesting. It took about two months to finish the book. And then we had made our own ‘Mystery Rooms’ app. I said ‘YAY!!!! we have done it!!!!! We have created MYSTERY ROOMS!!!! Papa, please publish it online so all my friends can play it!!’ and after 2 days my game was online!!! 

This is how I created my first app using HTML, JavaScript, CSS and the journey is on and continues... 

My First App

My First Coding Book

Saion Gupta's Coding Journey (Part-I)

My Journey was quite weird. It all started when I was 9 year old and I was watching some cartoon named ‘Chotta Bheem’. My father just came into the room and spoke up ‘You are not going to learn anything from this silly cartoon’. By-the-way, he is a Computer Engineer from IIT. So back to the topic, he just picked up the TV remote and switched off the cartoon. I was really furious at that time. He said come with me to my laptop. I said in a low voice though I was furious ‘Ok papa’. I went there to his laptop and he said that ‘You should learn coding’. I at the very first moment was speechless thinking ‘What the heck is CODING?’ Then I asked him ‘What is coding?’ and he responded that ‘Like we speak English and Hindi, computers also have their own language. By coding we make the computer do certain tasks for us. Like we have these apps twitter, facebook, instagram etc. They all are built by coding only.’ At the first moment I was really excited and the first thought that came to my mind was ‘I can make twitter, instagram and facebook if I learn coding, coding must be so cool, I could make it big if I learn coding’. I was jumping here and there and spoke loudly ‘Yes!!! I want to learn CODING!!!’.

My father was happy to see me interested in coding. He said ‘Then ok, let’s see a youtube video on which programming language is best for beginners’. Again I was speechless thinking ‘How many languages can a computer understand’. And I asked my father a question that ’How many languages can a computer understand?’. He replied ‘About hundreds or may be thousands (Notice: Here we are saying that computer can understand thousands of languages though computer can only understand 1 language that is binary but we code in higher level languages.)’. I was shocked! Every computer can understand about a thousand languages but that human who made this computer can only understand 2 or 3 languages. Then we searched on youtube ‘Which coding language is the best for beginners’. There came lots of videos like Top 3 programming languages, Top 5 programming languages and all but I liked a video on JavaScript and it’s thumbnail was also really stylish. I convinced my father to play that video and he did because he knew JavaScript was one of the best languages and he wanted my interest to keep growing though I did not know anything about coding so he played the video and the person in it said to code in Firefox. I didn’t know what was Firefox and forced my father to install that web browser though we had Google Chrome but I always thought that the video was correct. We were trying to install Firefox again and again but it gave some issues and about 2 or 3 hours later it had completely installed. I was really excited and in that video they said to press F12 to open the console of the browser. We pressed it and the console was opened. Then that person told us to write our first command that was alert(‘Hello World’) and I was jumping on my seat hoping to see this command create facebook for me and I asked my father ‘Papa, will this command create facebook for me???’. And then he laughed out loud (LOL) and said ‘No, just wait and see’. I was quite happy and quite sad also thinking that I will not be able to make facebook from this command and maybe I will create instagram or twitter from it. I wrote the command in the console and I was shocked!!!! It literally just brought a small popup in which there was written ‘Hello World’ and there was an OK button. I still had hopes that if I press the OK button then it will create twitter or instagram for me but after hitting OK it did not do anything. I asked my father ‘What will this do for us???’. I was still very excited because my father had mentioned that I can make social networking sites from coding but I thought it would happen from only 1 line of code. I then thought that it was so foolish of me to think that I could make social networking sites from only 1 command and if that was possible then everybody would have done it. My father replied to my question ‘Saion, this is used for lots of things, for example if you ask for an email id from a user and he just inputs an invalid email id then we can alert him that he has entered a wrong email id’. I was speechless thinking it is so useful and then I said ‘Oh!!! WOW!!!’. Then we did our second command that was prompt(‘Hi’) and it also brought a popup but with an input field. I asked my father ‘What is this for???’ and he replied ‘This is for taking input from the user. For example if you want the user’s name then you could do prompt(‘What is your name’)’. I thought that prompt is so useful, if we did not have prompt then we could not take input from the user. Our last command in the video was console.log(‘Hello World’) and it printed Hello World in the console. I was thinking why do we use this? And then I asked my father ‘Pops, what does console.log() do?’ and he replied ‘console.log() is mostly used for testing. When you will make a proper program then you will come to know where can we use console.log()’. I said ‘ok’.

This was my first introduction to the world of coding and computers and the journey had just started and continues in Part-II.

Saion Gupta's Coding Journey (Part-II)

JavaScript prototype to find co-primes

Co-primes are numbers whose common factor is only 1. For example :- 4, 9

Factors of 4 :- 2, 2, 1
Factors of 9 :- 3, 3, 1
Common Factor :- 1

Here is the JavaScript prototype to find co-primes. Here is the code snippet.

Code (Run Code):

function factors(num) {

arr = [];

for (var i = 1; i < num; i++) {

if (num % i == 0) {

arr.push(i);

}

}

return arr;

}

function coPrime(num1, num2) {

arr1 = factors(num1);

arr2 = factors(num2);

for (var i = 1; i < arr1.length; i++) {

for (var j = 0; j < arr2.length; j++) {

if (arr1[i] == arr2[j]) {

return num1 + ' and ' + num2 + ' are not co-prime';

}

}

}

return num1 + ' and ' + num2 + ' are co-prime';

}

function main() {

document.getElementById('result').innerHTML =

(coPrime(document.getElementById('num1').value, document.getElementById('num2').value))

}