Hi Everyone, this is Sravan... Yesterday was a long and boring day, so I wanted to do something and suddenly got an idea of developing an ID card Generator. Thus, I have developed an ID Card Generator using Javascript. In this, I have used Canvas tag, where the ID Card is generated and also provided a provision for the user to enter their details and also their photograph. And the generated canvas can be downloaded by clicking 'save' button. Below is the screenshot of the ID Generator project...
ID Card Generator using javascript
The working video of this ID Card Generator is shown below
Hi everyone, I have developed a very basic Tic-Tac-Toe game using Javascript. It was developed for fun. For a beginner, this post will be a great boost to learn Javascript programming. In this game, I have used 9 buttons. The programming and working video of this game is shown below....
Video Description: Winning Logic for 'X' : There are 8 set of rules for logic for 'X'. The set of rules are placed inside a function called xwin(). The function with the set of rules are given below
function xwin(){ if(first.value=='x' && second.value=='x' && third.value=='x') alert("Player X has won!") if(first.value=='x' && fourth.value=='x' && seventh.value=='x') alert("Player X has won!") if(first.value=='x' && fifth.value=='x' && ninth.value=='x') alert("Player X has won!") if(second.value=='x' && fifth.value=='x' && eighth.value=='x') alert("Player X has won!") if(third.value=='x' && sixth.value=='x' && ninth.value=='x') alert("Player X has won!") if(third.value=='x' && fifth.value=='x' && seventh.value=='x') alert("Player X has won!") if(fourth.value=='x' && fifth.value=='x' && sixth.value=='x') alert("Player X has won!") if(seventh.value=='x' && ninth.value=='x' && eighth.value=='x') alert("Player X has won!") }
Winning Logic for 'O' : There are again 8 set of rules for logic for 'O'. The set of rules are placed inside a function called owin(). The function with the set of rules are given below
function owin(){
if(first.value=='o' && second.value=='o' && third.value=='o') alert("Player O has won!")
if(first.value=='o' && fourth.value=='o' && seventh.value=='o') alert("Player O has won!")
if(first.value=='o' && fifth.value=='o' && ninth.value=='o') alert("Player O has won!")
if(second.value=='o' && fifth.value=='o' && eighth.value=='o') alert("Player O has won!")
if(third.value=='o' && sixth.value=='o' && ninth.value=='o') alert("Player O has won!")
if(third.value=='o' && fifth.value=='o' && seventh.value=='o') alert("Player O has won!")
if(fourth.value=='o' && fifth.value=='o' && sixth.value=='o') alert("Player O has won!")
if(seventh.value=='o' && ninth.value=='o' && eighth.value=='o') alert("Player O has won!")
}
And for a Draw, I have used a variable which increments its value on clicking a button. And thus, if the player clicks 9 times without producing a result, a alert box displays 'Its a Draw!'. A reset button is used to reset the game. This game is for Player1 vs Player2 and not Player vs Computer. The latter will be done soon.
The whole coding of this game can be downloaded from here. Hope you like it. Thats all for now
Hello everybody, Today I am focusing on using the radio buttons for the Temperature converter which we discussed in the earlier post. In this post well convert 'from celsius to fahrenheit' and also 'from fahrenheit to celsius' by using radio buttons. Below is the video to create radio buttons and also programming it..
I this video, you will be learning:
Create radio button
Enabling and Disabling Checking of Radio Button
Description of the video: The radio button is created using HTML tag <input type='radio'> as you could see from the video. Similarly it is also referenced by using an 'id'. Thus by using 'document.getElementById', the selection of radio button can enabled or disabled by setting it to true or false respectively. To disable radio button, document.getElementById('id').checked=false That's all for now. Hope you like it..See you in next post. Cheers Sravan
Hi Guys, I am Sravan, and I want to share some of my knowledge in javascript through this blog. Javascript is really a very easy programming language to learn and is used everywhere, right from web to games.
Today, I am going to share a basic javscript program which converts the celsius to fahrenheit. Before learning javascript, you should have a basic knowledge about HTML, because this comes under web development.
So, here is the programming video of the basic temperature converter which converts Celsius to Fahrenheit. In this video, you will be learning:
To get an input from the user
To create a function
onClick event of the Button
Description of the video:
<script> and </script> is the place where javascript program is done. To get an input value from the input text box, firstly, the input text box should have an 'id'. In this video 'celsius' is the id of the input text field.
In order to get the id of the text field, 'document.getElementById('celsius')' is used. In the above video we have assigned the input text field id to a variable called 'cel'. Thus to get the value from input we use 'cel.value'. Similarly, we do the same for the button. But in Button we have another attribute called 'onClick'.
We have created a function called c2f, in which the logic of temperature converter is. To create a function in javascript, we use
function functionname(){
}
(or)
var functionname=function(){
}
And to convert temperature on clicking the button, the onClick attribute calls the function. Thus, c2f() is set to onClick. The 'alert' is used to create dialog box with 'OK' option. alert can be used as below
alert('string')
alert('Hi I am learning Javascript')
In the above video, we have used alert(cel+' celsius is equal to '+far), where cel and far are variables and is concatenated to a string.That is all the basics you need to know about javascript.
Hope you like it. The next part of the Temperature converter contains radio buttons and it will follow in the next post....Till then
