Showing posts with label Javascript. Show all posts
Showing posts with label Javascript. Show all posts

Sunday, January 9, 2022

How to make JavaScript projects or app?

This blog is for you if you want to make JavaScript project or app. 
I will also add video in English as well as in Hindi . I will also add source code . 
Basically we are making 3 apps.



1. Mile to KM Convertor JavaScript App or Project 
 App is Conversion App where you can convert miles to Km.by taking this project as reference you can make currency convertor ,Feet to Inches Convertor, KG to LB and many more. Just change formula. 
Also in this app there is custom error message where if user does not enter any Value , user will get custom error message. And as soon as user enter value , error message will go away ,and app will convert mile to km. 
In this  app you will learn few concept of HTML, CSS ,  and variable ,IF else statement , DOM (Document Object Model concept) from JavaScript step by step. 
Source Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>App</title>
    <style>
        #container{
            height: 400px;
            width: 400px;
            border: 3px solid rgb(51, 4, 4);
        }
        h1{
            text-align: center;
        }
        input{
            background-color: blue;
            color: white;
            width: 90px;
            height: 50px;
            font-size: x-large;
        }
        button{
            height: 40px;
            width: 100px;
            margin-top: 10px;
            margin-left: 100px;
            background-color: rgb(56, 6, 6);
            color: white;
            font-size: large;
        }
  #error{
      color: red;
  }

    </style>
</head>
<body>
    <div id ="container">
        <h1>Mile to KM</h1>
       <h4><span id= "error"></span></h4>
        Mile<input id="mile" type ="text">
        KM:<input id= "km" type ="text"><br>
        <button id ="submit" > Submit</button>
    </div>
   

 <script>
newmile= document.getElementById("mile")
newkm= document.getElementById("km")
newerror= document.getElementById("error")
newsub= document.getElementById("submit")
newsub.addEventListener("click",function(){
    if(newmile.value===""){
        newerror.innerText="Please enter value"
    }
    else{
        newerror.innerText=""
        newkm.value=newmile.value*1.609344
    }
 
})
 </script>

   
</body>
</html>


2. JavaScript Quiz App / Project
In app you will learn how to make JavaScript simple quiz by using JavaScript library jQuery. In  video CDN method has used . Where if user click on Hide button, All Answer will be hide and as soon user click on show method Answer will be shown to user.  Also there is another way in jQuery if you use toggle in build method then on one button user can hide and show answer . Hide, show and toggle jQuery method is used. 
  Source Code
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quiz</title>
    <style>
        #box{
            height: 400px;
            width: 500px;
            background-color: dodgerblue;
            margin-left: 20px;
            text-align: center;
            border: 2px solid black;
            color: white;
        }
        p{
            color: red;
            font-size: x-large;
            font-weight: bold;
        }
        #hide{
            height: 30px;
            width: 50px;
            color: white;
            background-color: red;

        }
        #show{
            height: 30px;
            width: 50px;
            color: white;
            background-color: green;

        }
        #to{
           
            height: 30px;
            width: 50px;
            color: white;
            background-color: rgb(6, 14, 6);

       
        }

    </style>
</head>
<body>
    <div id= "box">
        <h1>QuizApp</h1>
        <h3>1. What is 2 + 2?</h3>
        <p>4</p>
        <h3>2. What is 2 - 2?</h3>
        <p>0</p>
        <h3>3. Where is Mumbai </h3>
        <p>India</p>
        <button id ="hide">Hide</button>
        <button id ="show">Show</button>
        <button id ="to">Toggle</button>
    </div>
    <script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script>
        $(document).ready(function(){
         $("#hide").click(function(){
             $("p").hide();
         })
         $("#show").click(function(){
             $("p").show();
         })
         $("#to").click(function(){
             $("p").toggle()
         })
       
        })
    </script>
</body>
</html>

3. Lotto App
In this JavaScript app, computer will generate 3 random number if user click on button . Math.floor and Math.random method used in this all to generate random number. In this tutorial you will get hint of how to use and call JavaScript function and how to use console to making sure if logic is correct. 
 Source Code
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lotto</title>
    <style>
        #container{
            height: 500px;
            width: 500px;
            border: solid 2px black;
            text-align: center;
        }
        input{
            background-color: blue;
            color: white;
            height: 100px;
            width: 100px;
            text-align: center;
            font-size: xx-large;
            font-weight: bold;
            margin-top: 10px;
        }
        button{
            height: 80px;
            width: 80px;
            margin-top: 10px;
            font-size: larger;
            background-color: green;
            color: white;

        }
    </style>
</head>
<body>
    <div id ="container">
        <h1>LottoApp</h1>
        <input id ="one"type="text">
        <input id ="two" type="text">
        <input id = "three"type="text"><br>

        <button id = "submit">Click</button>
    </div>

    <script>
        num1= document.getElementById("one")
        num2= document.getElementById("two")
        num3 =document.getElementById("three")
        sub =document.getElementById("submit")
        sub.addEventListener("click", function(){
            one()
            two()
            three()
        })
        function one(){
            num1.value=Math.floor(Math.random()*10)
        }
        function two(){
            num2.value=Math.floor(Math.random()*10)
        }
        function three(){
            num3.value=Math.floor(Math.random()*10)
        }
       

    </script>
</body>
</html>

Video Source :
                                                      In English Language



                                                           In Hindi Language 






Friday, December 25, 2020

Lotto App|Random Number App|Javascript app

 Random Number App: In this tutorial you will make app similar to Lottery or pick 3 number app. It is fun way to make app . You will use HTML, CSS and JavaScript . In JavaScript you will use Random generator and DOM (Document Object Model). How these topics go to gather and by using Event what you make. Here is source code and video for it. 

Video:



Source Code: 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Lotto</title>
    <style>
        #container{
            height300px;
            width300px;
            bordersolid 2px black;
            text-aligncenter;

        }
        input{
            background-colorblue;
            colorwhite;
            height70px;
            width70px;
            text-aligncenter;
            font-size30px;
            font-weightbold;
        }
        button{
            height30px;
            width70px;
            margin-top20px;
            background-colorteal;
            border-radius20px;
            colorwhite;
            font-size15px;
            font-weightbold;

        }

    </style>
</head>
<body>
    <div id="container">
        <h1>Lotto Game:</h1>
        <input type="text" id ="one">
        <input type="text" id ="two">
        <input type="text" id ="three"><br>
        <button id ="submit">Click</button>

    </div>
   
    <script>
        var randonedocument.querySelector("#one")
        var randtwodocument.querySelector("#two")
       var randthreedocument.getElementById("three")
       var submit =document.getElementById("submit")
       submit.addEventListener("click"function(){
           numberone();
           numbertwo();
           numberthree();

           

       })
       function numberone(){
          randone.valueMath.floor(Math.random()*10)
       }
       function numbertwo(){
          randtwo.valueMath.floor(Math.random()*10)
       }
       function numberthree(){
          randthree.valueMath.floor(Math.random()*10)
       }

    </script>
    
</body>
</html>

Saturday, November 21, 2020

How to create simple Quiz app in Javascript?

 Quiz App in Javascript:

In this tutorial you will learn HTML, CSS, BootStrap and Java library -Jquery. This is fun way to learn these topics by making app.You will learn how to use show, hide and toggle function by making cool app. Video and Source code are included so make and show to world. 

Video:




SourceCode:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Quiz Application</title>
    <style>
        #container{
            height500px;
            width500px;
            background-colordodgerblue;
            margin-left20px;
            text-aligncenter;
            border:  2px solid black;
            colorwhite;

        }
        p{
            color:yellow;
        }

    </style>
    <link rel="stylesheet"
 href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" 
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" 
crossorigin="anonymous">
    
</head>
<body>
    <div id ="container">
        <h1> Quiz App</h1>
        <h3>1. Tallest Mountin in the world?</h3>
        <p>Mount Averest</p>
        <h3>2. Deepest ocean the world?</h3>
        <p>Pacefic</p>
        <h3>3. Longest River in the world?</h3>
        <p>Nile</p>
        <!-- <button id ="hid"class="btn btn-danger">Hide</button>
        <button id ="sho"class="btn btn-warning">Show</button> -->
        <button id ="tog"class="btn btn-dark">Hide|Show</button>
    </div>
   
    <script src="https://code.jquery.com/jquery-3.5.1.min.js"
 integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="
 crossorigin="anonymous"></script>
    <script>
      $(document).ready(function(){
        //   $("#hid").click(function(){
        //       $("p").hide();
        //   })
        //   $("#sho").click(function(){
        //       $("p").show();
        //   })
          $("#tog").click(function(){
              $("p").toggle();
          })
      })
    </script>
</body>
</html>

Easy Javascript App for beginner | Feet to Inch App

 JavaScript App for Beginner: In this tutorial you will learn HTML, CSS, Bootstrap, JavaScript function, event, DOM, Validation , if else statement and many more by creating app . It is learn with fun activity . you will learn how to create Feet to Inch conversion.  so make it and show to world. Below you will find video and source code for App.

lets understand one by one. First lets create HTML Document 

h1tag contains title, now add two input tag and set type as text . now we will add one button . That's what we need for html . now we since we will add CSS in future so lets wrap all html in div and give id as container. we will add id to input tag also . For error message lets give h3 tag and add span tag for future error message.  for coloring button we will give id to button tag also. 

<div id ="container">
        <h1>Feet to Inch Convertor App</h1>
        Feet:<input id ="fee"type ="text">
        <h3><span id = "err"></span></h3>
        Inch:<input id ="inc"type ="text"><br><br>
        <button id="sub"class="btn btn-dark">Convert</button>
    </div>

now we can create style tag after title in html.
we can do this multiple way . best way is do it via creating separate file and link it.
for Simplicity purpose we have created style tag in same file . Since we gave id
for container so we will use hashtag for container and we will set height , width color
etc. Now our CSS is also ready .

CSS
  <style>
        #container{
            height:400px ;
            width:200px ;
            background-colorcoral;
            text-aligncenter;
            color:white;
            border:2px solid brown;
            margin-top100px;
            margin-left100px;
        }
        #err{
            color:red;

        }

    </style>
Now time to introduce JavaScript.
feet=document.getElementById("fee");
Now lets locate out element. document.getElement will find our element. since we use
id as fee in our HTML . Now we will store in feet variable .
lets do it for another input tag and submit button .
inch=document.getElementById("inc");
   inch=document.getElementById("inc");
        submit=document.getElementById("sub");
        error=document.getElementById("err");

Since we have added our submit butoon in variable we can add even listener on it. so we
create function when someone click on button our function will run. we will add if else
statement . if value of feet is empty, we will through error message and we have provide
error message text as "Invalid, can not empty!". If user enter any content in input field
it will run else block of code. we will clear error message first. and will provide
formula which will convert value accurately.


For more information we have added video tutorial step by step so you can watch it also.
in this video tutorial you will learn about HTML, CSS, Bootstrap. JavaScript is very important
we have covered datatype variable how to use it, Function, if else statement, Document Object Model (DOM)

by adding and fetching id and store in variable. now you can create many app just need to change formula accordingly .


submit.addEventListener("click"function(){
            if(feet.value===""){
                error.textContent"Invalid, can not empty!"

            }
            else{
                error.textContent ="";
                inch.value=feet.value*12;

            }
        
        })

                             Video



Source-code 

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>FeettoInch Convertor</title>
    <style>
        #container{
            height:400px ;
            width:200px ;
            background-colorcoral;
            text-aligncenter;
            color:white;
            border:2px solid brown;
            margin-top100px;
            margin-left100px;
        }
        #err{
            color:red;

        }

    </style>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/
css/bootstrap.min.css" 
integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" 
crossorigin="anonymous">
</head>
<body>
    <div id ="container">
        <h1>Feet to Inch Convertor App</h1>
        Feet:<input id ="fee"type ="text">
        <h3><span id = "err"></span></h3>
        Inch:<input id ="inc"type ="text"><br><br>
        <button id="sub"class="btn btn-dark">Convert</button>
    </div>
   
    <script>
        feet=document.getElementById("fee");
        inch=document.getElementById("inc");
        submit=document.getElementById("sub");
        error=document.getElementById("err");
        submit.addEventListener("click"function(){
            if(feet.value===""){
                error.textContent"Invalid, can not empty!"

            }
            else{
                error.textContent ="";
                inch.value=feet.value*12;

            }
        
        })

    </script>
    
</body>
</html>

how to create Simple Javascript App?

LBToKGConverterApp-Javascript:
In this lesson you will learn how to create LB TO KG converter with validation. you will learn HTML, CSS, Bootstrap and in Javascript you will learn function, event if else and many more. Please click on video to watch. You can modify css and Bootstrap. Design may not be ideal here because purpose is to show topics .
                                  video


                            Soruce Code:

<html lang="en">
<head>
    <meta charset="UTF-8"></meta>
    <meta content="width=device-width, initial-scale=1.0" name="viewport"></meta>
    <title>LB To KG Calculator</title>
    <style>
        #container{
            height: 350px;
            width: 200px;
            background-color:gray;
            border: 2px solid black;
            text-align: center;
            margin-top: 100px;;
            margin-left: 225px;
        
            
        }
        #error{
            color: red;

        }
    </style>
    <link crossorigin="anonymous" href="https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css" integrity="sha384-TX8t27EcRE3e/ihU7zmQxVncDAy5uIKz4rEkgIXeMed4M0jlfIDPvg6uqKI2xXr2" rel="stylesheet"></link>
</head>
<body>
    <div id="container">
    <h1>LB to KG Calculator</h1>
    <h3><span id="error"></span></h3>
    LB:<input id="lb" type="text" />
    KG:<input id="kg" type="text" /><br /><br />
    <button class="btn btn-warning" id="submit" type="button">Submit</button>
    </div>
    <script>
         lb =document.getElementById("lb");
         kg =document.getElementById("kg");
         error =document.getElementById("error");
         submit =document.getElementById("submit");
         submit.addEventListener("click", function(){ 
            if(lb.value ==""){
                error.innerText ="Please Enter Valid Number"

            } else{
                error.innerText="";
                kg.value=lb.value/2.20462262;
            

            }
           
        })

    </script>

    
</body>
</html>
LB To KG Calculator

LB to KG Calculator

LB: KG:

Sunday, June 14, 2020

JavaScript Projects for Beginners


Javascript for Beginners sourceCode-

1. Print 0   to 10 by using for loop and while loop
IF you want to print 0 to 1o in descending order you can use loops .

Source code:


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
<script>
    function number(){
        // for(let i= 1;i<=10;i++){
        //     document.write("the nember is "+i+"<br>");
        // }
        let i=1;
        while(i<=10){
            document.write(`the new while number is ${i} <br> `);
            i++;
        }
    }
    number();
</script>
</body>
</html>


2. How to Print number in descending order in javascript?




Source Code: 


 <!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function dec(){
            for(let i = 10; i>=1;i--){
                document.write(`The number is ${i}<br>`)
            }
        }
        dec();
    </script>
</body>
</html>

3. Print Odd Number

Source Code:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function odd(){
            for(let i = 1;i<=10;i+=2){
                document.write(`Method one with for loop ${i} <br>`);
            } 
            for(let k=1;k<=10;k++) {
                if(k%2!==0){
                    document.write(`Method two with for loop ${k} <br>`);

                }
            }
            //with while loop
            let j = 1;
            while(j<=10) {
                document.write(`Method one with while loop ${j} <br>`);
                j+=2;

            } 
            // print 1 to 10 only even number by mod method with for loop
       

   
        }
        odd();
    </script>
</body>
</html>



4.  Print Even Number


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        //50 -100 even
        function even(){
            for(let i= 50;i<=100;i++){
                if(i%2==0){
                    document.write(`Then even number is ${i}<br>`)

                }
               
            }
        }
        even();
 
    </script>
</body>
</html>



5.  Print table of 3 by using for loop


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function tab(){
            let j= 3
            for(let i= 1;i<=10;i++){
                document.write(`${j} times ${i} is ${j*i}<br>`)
            }
        }
        tab();
    </script>
</body>
</html>


6. How to add or Sum in Javascript



<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function total(){
            sum=0
            let array=[5,3,2,5,1]
            for(let i=0;i<array.length;i++){
                sum+=array[i]
            }
            document.write(`Total is ${sum}`);
        }
        total();
    </script>
</body>
</html>

7. Find smallest or Min number in Array in Javascript




<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function minimum(){
            let array= [5,10,15,2,20,4]
            let min=array[0]
            for(let i = 0 ;i<array.length;i++){
                if(min>array[i]){
                    min= array[i]
                }
            }
            document.write(`The minimum value is ${min}`)
        }
        minimum();
    </script>
</body>
</html>

8. Find Largest or Max number in Javascript Array





<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function maximum(){
            let array = [5,4,2,6,10,1]
            let max= array[0]
            for(let i=0;i<array.length;i++){
                if(array[i]>max){
                    max= array[i]
                }
            }
            document.write(`The largest element in array is ${max}`)
        }
        maximum();
    </script>
</body>
</html>

9. Find Average in Javascript Array


<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <script>
        function avg(){
            let sum= 0;
            let array= [1,2,3]
            for(let i= 0;i<array.length;i++){
                sum+=array[i]
            }
            document.write(`The average is ${sum/array.length}`)

        }
        avg();
    </script>
</body>
</html>

java switch statement | Java Tutorial For Beginners

 Switch statement is alternative and more cleaner way to write code if we have more than two options. we can use else if, this is better way...