Knowledge anywhere

Friday, 9 July 2021

JavaScript tutorial #2 | access element , apply css | change , display and hide content @echocoding

source code

first.html

<!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>Document</title>
</head>
<body>
    <p id="showid">Hello world</p>
    <script>
    //  this console log help us to print value in console slfdsjflsdjflsdjf
        console.log( document.getElementById('showid').innerHTML);
        document.getElementById('showid').style.fontSize = '100px';
        document.getElementById('showid').style.color = 'red';
        document.getElementById('showid').style.display = 'block';
        document.getElementById('showid').innerHTML = 'Hi dear viewers ';
        // window.alert('this alert message');
        document.write(document.getElementById('showid').innerHTML);
        document.write('this tutorial is created for programmers');
    </script>
</body>
</html>

JavaScript start coding

download visual studio code https://youtu.be/shzrlZbexow

How to download visual studio code 00.45 - 1.21

start javaScript coding and install live server 2.30 - 03.26

use of console.log 03.27 - 04.05

access elements and display result in javaScript 04.05 - 04-50

increase font size of the elemtems 04.05 - 05.33

change color of the font 05.34-06.11

display and hide font in html 06.12 - 06.54

change value of html element 06.57 - 07.43

show alert section in page 07.45 - 08.33

use of document.write function 08.45 - 10.10

comments in javascript - 10.11 - 11.25

more details about javascript 11.25-11.51

We are going to learn and use of

live server extension - this extension help programmer to see output on click on saving files.Once you save the file , that page related to file is automatically update.

Console.log() this function is used to see output in console bar in the inspect Element section

access elements :- In javascript element access is very easy by id and class. In this video I am using id for accessing p tag html element and used console.log to print the value in console section in inspect element

change font-size :- we can also change the font size using javaScript by accessing value and styel.fontSize

JavaScript is vast language and it used for multiple purpose . You can simply change font size , values , color and more things dynamically without refreshing the page using this wonderfull Language javascript.

There is few function availabe that helps to pring values in the document that is discusseed in this video.

console.log() , document.write() , window.alert() , innerHTML

#Video_Kaisa_laga_comment_me_batao #Playlist_ko_access_jarur_krna #echocoding

JavaScript complete tutorial start on ecocoding | Introduction OF javaScript | JavaScript Front end Development #01 | Echocoding

==} JavaScript ( Frontend programming language ) JavaScript is very important language in website development. JavaScript is language of web that's mean JavaScript is used to create website . We can create Dynamic and attractive website using javaScript. It plays wital role in website development JavaScript helps us to define behavior of the website and It is most popular language in 2021.JavaScript is easy to learn and Most Important is Code development is very easy in javaScript. ==} What can you Do with JavaScript ? JavaScript Helps programmer to deal with html tags , attributres , Css can be change with JavaScript . So It become most Important in website Development perspective . Any person who want to become website developer , must learn JavaScript. ==} How to download JavaScript and use it ? There is no need to download JavaScript . It is already install in your browser what you have to do is that simply open your Browser and code editor . And start coding ( I will teach you in upcoming video). ==} Important Notes about JavaScript :- Invented By - Brendan Eich In 1995 Become an ECMA standard Name in 1997 Standard official Name - ECMAScript ==} What we are going to create using JavaScript ? Build a Dynamic website. Chatting App without page Refresh and more... Robotics ( Text to voice and voice to text app ) ►TimeStamps: JavaScript Introduction 00.01 - 01.00 How to install JavaScript JavaScript In computer or laptop 01.00 - 01.30 what can you do with JavaScript 01.30 - 02.10 Important Notes about Javascript 02.10 - 02.37 Future JavaScript Project - 02.37 - 4.17 Html video Playlist :- https://www.youtube.com/watch?v=shzrlZbexow&list=PLOE0euAfhAFORsFjG0DAWoc6gV6sBU_Hs Css video Playlist :-https://www.youtube.com/watch?v=U2otWEyVvj0&list=PLOE0euAfhAFOaP6mF86d6xcJpqkm9XhmZ

Monday, 21 June 2021

find vowel and consonant in c language | mini project in c language | soham kawde

find vowel and consonant in c language | mini project in c language | soham kawde

// we are going to create program to identify vowel and consonant
#include <stdio.h>
int main(int argc, char const *argv[])
{
    char user_input;
    printf("Please enter your favourite character / alphabate \n");
    scanf("%c", &user_input);
    // time for switch statement or condition statement
    switch (user_input)
    {
    case 'a':
        printf("%c is a vowel\n", user_input);
        break;
    case 'e':
        printf("%c is a vowel\n", user_input);
        break;
    case 'i':
        printf("%c is a vowel\n", user_input);
        break;

    case 'o':
        printf("%c is a vowel\n", user_input);
        break;
    case 'u':
        printf("%c is a vowel\n", user_input);
        break;
    default:
        printf("%c is consonant \n",user_input);
        break;
    }
    return 0;
}
// code will be in the description please check there 
// and time for run 
// english language has 5 vowel a , e, i, o ,u and other charecter are consonant
// let's runn

Atm machine system mini project in c language

Atm machine system mini project in c language

#include <stdio.h>

int main()
{
    float x, y;
    char ch;
    printf("Please enter your amount\n");
    scanf("%f", &x);
    printf("\nplease choose \n c for creadit , d for debit and b for balance checking\n");
    scanf("\n%c", &ch);
    switch (ch)
    {
    case 'c':
        printf("Please enter your amount\n");
        scanf("%f", &y);
        x = x + y;
        printf("your total balace is = %f ", x);

        break;
    case 'd':
        printf("Please enter your amount for debit\n");
        scanf("%f", &y);
        if (x >= y)
        {
            x = x - y;
            printf("your total balance is = %f", x);
        }
        else
        {
            printf("Please enter amount under your account balance");
        }
        break;
    case 'b':
        printf("your total balance is = %f", x);
        break;
    default:
        printf("Please choose only c for creadit , d for debit and b for balance checking");
        break;
    }
    return 0;
}
// source code in the description
// run code

Wednesday, 16 June 2021

website development crash course 2021

code of the website video link https://www.youtube.com/watch?v=h7UoV1ACQ28&t=103s

<!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>Home page</title>
    <style>
        *{
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }
        header
        {
            width: 100%;
            display: flex;
            background-color:aqua ;
            min-height: 50px;
        }
        #logo_div{
            width: 30%;
            background-color: #000;
            color: #fff;
            /* text-align: center;  OR */
            display: flex;
            justify-content: center;
            align-items: center;

        }
        #navigation_bar{
            width:69%;
            display: flex;
            justify-content: space-around;
            align-items: center;
        }
        #navigation_bar>a{
            color: #fff;
            padding: 9px;
            background-color: #000;
            text-decoration: none;
        }
        /* Now time for hover effect */
        #navigation_bar>a:hover{
            background-color: coral;
            color: #000;
            padding: 12px;
        }
        /* second section */

        #section_two{
            width: 100%;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        #background_image_div{
            width: 100%;
            /* here we have to add an image */
            background-image: url("earth.jpg"); 
            display: flex;
            justify-content: center;
            align-items: center;
            color: #fff;
            min-height: 500px;
            font-size: 3vw;

        }
        /* third section */
        #third_section{
            width: 100%;
            display: flex;
            justify-content: space-around;
            align-items: center;
            margin-top: 50px;
            margin-bottom: 50px;
        }
        #third_section>div{
            width: 30%;
            border: 5px double greenyellow;
            min-height: 200px;
            background-color: teal;
            text-align: center;
            color: #fff;
            font-size: 1.7vw;
        }
        /* time for hover effect */
        #third_section>div:hover{
            border: 10px double lightgreen;
            background-color: darkorange;
        }
    </style>
</head>
<body>
    <!-- this will show header part of this website -->
    <header>
        <!-- logo div -->
        <div id="logo_div">
            <h1>logo part</h1>
        </div>
        <!-- navigation div -->
        <nav id="navigation_bar">
            <a href="#">Home</a>
            <a href="#">log in</a>
            <a href="#">register</a>
        </nav>
    </header>

    <!-- create section and div -->
    <section id="section_two">
        <div id="background_image_div">
                <h2>Welcome ! You are Welcome !</h2>
        </div>
    </section>
    <!-- third part which is div with heading and texts -->
    <section id="third_section">
        <div>
            <h4>heading 1</h4><br>
            <p>This is just a text . if you like this playlist please like and share this video. This is just a text . if you like this playlist please like and share this video. This is just a text . if you like this playlist please like and share this video This is just a text . if you like this playlist please like and share this video</p>
        </div>

        <div>
            <h4>heading 1</h4><br>
            <p>This is just a text . if you like this playlist please like and share this video. This is just a text . if you like this playlist please like and share this video. This is just a text . if you like this playlist please like and share this video This is just a text . if you like this playlist please like and share this video</p>
        </div>

        <div>
            <h4>heading 1</h4><br>
            <p>This is just a text . if you like this playlist please like and share this video. This is just a text . if you like this playlist please like and share this video. This is just a text . if you like this playlist please like and share this video This is just a text . if you like this playlist please like and share this video</p>
        </div>
    </section>
<style>
    footer{
        width: 100%;
        display: flex;
        justify-content: space-around;
        background-color: #000;
        min-height: 200px;
    }
    footer>div{
        width: 20%;
        display: flex;
        flex-direction: column;
        align-content: space-around;
        justify-content: center;
    }
    footer>div>strong{
        color: yellow;
    }
    footer>div>a{
        color: #fff;
        text-decoration: none;
    }
</style>
    <!-- footer part  -->
    <footer>
        <div>
            <strong>Important links</strong><br><br>
            <a href="#">link1</a><br>
            <a href="#">link1</a><br>
            <a href="#">link1</a><br>
            <a href="#">link1</a><br>
            <a href="#">link1</a><br>
        </div>
        <div>
            <strong>Our sources</strong><br><br>
            <a href="#">link1</a><br>
            <a href="#">link1</a><br>
            <a href="#">link1</a><br>
        </div>
        <div>
            <strong>Social media links</strong><br><br>
            <a href="#">link1</a><br>
            <a href="#">link1</a><br>
            <a href="#">link1</a><br>
            <a href="#">link1</a><br>
            <a href="#">link1</a><br>
        </div>
    </footer>
</body>
</html>
<!-- code will be in the description part -->

Tuesday, 15 June 2021

stop watch using c language

code of the stopwatch using c language

#include <stdio.h>
#include <windows.h> // this is for sleep function we are going to use it in furture code

int main()
{
    int h , m ,s ; // create variable for hour minutes and second
    int d = 1000; // this will use in loop for milliseconds

    printf("Set time : \n");
    scanf("%d%d%d",&h,&m,&s);
    if(h>12 || m > 59 || s > 59){
        printf("Error ! \n");
        exit(0);
    }

    // now create a loop while loop
    while(1) // this will generate infine loop
    {
        s++; // second will be increament infinitly
        if(s>59){
            m++;
            s=0;
        }
        if(m>59){
            h++;
            m = 0;
        }
        if(h>12){
            h = 1;
        }
        // now prinf some text to decorate coding or hints 
        printf("Clock time : \n");
        printf("%02d : %02d : %02d" , h, m , s);
        Sleep(d); // this is the function that we discussed before above code
        system("cls");
    }
   
}

// now run the code
// you can find this code in the description of this video

Friday, 30 October 2020

Procedural Programming

If any ask what is procedural programming than answer is in one word , procedural programming language is not secure language in programming language because their is no access specifier , there is open header which is open to everyone so that anyone can read or access your program easily.

Why people use procedural programming in their programs ?

People use procedural programming because security is not necessary in each program , let's take an example of calculator . If programmer create program to develop a calculator so programmer no need to add security in that kind of embedded system . That's why people generally use procedural programming language in their program one reason is that it is easy to learn and use .