Project Title : Address Book

S/w Used : HTML, CSS, JavaScript with LocalStorage for storing data (little Bootstrap)

Framework Used : Text Editor

Description : A small addressbook which is having name, email, contact no, and city which is having CRUD operations.

Till Today :

• From v1.0, design changed completely.
• Code done for Adding new Contact with modal window.
• And whenever new entry added that will get displayed in the table dynamically with del and edit buttons.
• Delete button action also done.
• Alignment I could not able to do well, so took chatGPT help.

To Do:

• Edit action and Search are pending.
• Add New screen is not getting closed after adding – has to be rectified.
• Design should get changed in AddNew screen
• Table – Headings font size should get changed. (As used bootstrap table class – th is not getting changed through css – have to research in it.
• Some Code duplication is there, have to be optimized like keep in one function (inside validationPassed & addNewContact).

Technical WorkFlow:

function validationPassed : This function checks all the fields are not empty.

function getAddrBook : This function returns an Array which extracts the existing contacts from localStorage, if available, and parse it. Otherwise an empty array will be returned.

function addNewContact : If validationPassed, then new contact entry is created from 4 fields (Name, Email, ContactNo and City), together will form an object and pushed into addrBook array (got through getAddrBook) and will get saved into localStorage. showBook() function is getting called immediately to show the added contact.

function showBook() : This is actually a table where rows(contacts) with delete and edit buttons are getting added dynamically and will be shown.

function deleteCont(idx) : As the name suggests it will take the index of the array as input and delete the contact when the delete button pressed.

Output till now :

AddNew Screen:

gitlab : https://gitlab.com/Sugirtha/Kaniyam.git

Hoisting :
we can use variable before creating

message = “hello” // without creating variable
console.log(message);
var message; // this type of declaration is hoisting type in JavaScript.

// Hoisting

/ Hoisting

function codeHoist(){
a = 10;
let b = 50;
}
codeHoist();
console.log(a); //10
console.log(b); //Reference Error b is not defined

JavaScript is a versatile programming language primarily used to create dynamic and interactive features on websites.
JavaScript is a scripting language that allows you to implement complex features on web pages.
Browsers have Interpreters. It will converts JAVASCRIPT code to machine code.
Browsers have its own interpreters like

• Chrome – V8-engine
• Edge – Chakra

JavaScript- Identifiers :

var message; –> Variable (Identifier)
message = ‘Javascript’;

func sayHello() {
console.log(‘Hello’)
}

//sayHello Is the identifier for this function.

//variables , objects,functions,arrays ,classes names are identifiers in js.

SCOPE :
In JavaScript, scope refers to the context in which variables and functions are accessible. It determines the visibility and lifetime of these variables and functions within your code. There are three main types of scope in JavaScript.

Global Scope:.

• Variables declared outside any function or block have global scope.
• These variables are accessible from anywhere in the code

example :

let globalVar = "I'm global";

function test() {
  console.log(globalVar); // Accessible here
}

test();
console.log(globalVar); // Accessible here too

Function Scope

• Variables declared within a function are local to that function.
• They cannot be accessed from outside the function.

example :

function test() {
  let localVar = "I'm local";
  console.log(localVar); // Accessible here
}

test();
console.log(localVar); // Error: localVar is not defined

Block Scope:

• Introduced with ES6, variables declared with let or const within a block (e.g., inside {}) are only accessible within that block

example :

{
  let blockVar = "I'm block-scoped";
  console.log(blockVar); // Accessible here
}

console.log(blockVar); // Error: blockVar is not defined

Keywords | Reserved Words

Keywords are reserved words in JavaScript that cannot use to indicate variable labels or function names.

Variables

variables ==> stored values ==> it will stored to ram / It will create separate memory.so we need memory address for access the values.

Stores Anything :
JavaScript will store any value in the variable.

Declaring Variable :

 * Var
 * let
 * const    

we can declare variable using above keywords:

Initialize Variable :

Using assignment operator to assign the value to the variables.

var text = "hello";

Hoisting :
we can use variable before creating

message = “hello” // without creating variable
console.log(message);
var message; // this type of declaration is hoisting type in JavaScript.

// Hoisting

/ Hoisting

function codeHoist(){
a = 10;
let b = 50;
}
codeHoist();
console.log(a); //10
console.log(b); //Reference Error b is not defined

JavaScript is a versatile programming language primarily used to create dynamic and interactive features on websites.
JavaScript is a scripting language that allows you to implement complex features on web pages.
Browsers have Interpreters. It will converts JAVASCRIPT code to machine code.
Browsers have its own interpreters like

• Chrome – V8-engine
• Edge – Chakra

JavaScript- Identifiers :

var message; –> Variable (Identifier)
message = ‘Javascript’;

func sayHello() {
console.log(‘Hello’)
}

//sayHello Is the identifier for this function.

//variables , objects,functions,arrays ,classes names are identifiers in js.

SCOPE :
In JavaScript, scope refers to the context in which variables and functions are accessible. It determines the visibility and lifetime of these variables and functions within your code. There are three main types of scope in JavaScript.

Global Scope:.

• Variables declared outside any function or block have global scope.
• These variables are accessible from anywhere in the code

example :

let globalVar = "I'm global";

function test() {
  console.log(globalVar); // Accessible here
}

test();
console.log(globalVar); // Accessible here too

Function Scope

• Variables declared within a function are local to that function.
• They cannot be accessed from outside the function.

example :

function test() {
  let localVar = "I'm local";
  console.log(localVar); // Accessible here
}

test();
console.log(localVar); // Error: localVar is not defined

Block Scope:

• Introduced with ES6, variables declared with let or const within a block (e.g., inside {}) are only accessible within that block

example :

{
  let blockVar = "I'm block-scoped";
  console.log(blockVar); // Accessible here
}

console.log(blockVar); // Error: blockVar is not defined

Keywords | Reserved Words

Keywords are reserved words in JavaScript that cannot use to indicate variable labels or function names.

Variables

variables ==> stored values ==> it will stored to ram / It will create separate memory.so we need memory address for access the values.

Stores Anything :
JavaScript will store any value in the variable.

Declaring Variable :

 * Var
 * let
 * const    

we can declare variable using above keywords:

Initialize Variable :

Using assignment operator to assign the value to the variables.

var text = "hello";

<html>
<head>
    <title>Simple Calculator</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="Sugirtha">
    <meta name="description" content="Calculator using HTML, CSS, JavaScript">   
    <link rel="stylesheet" href="calc.css">
</head>
<body>
    <h2 align="center">CALCULATOR</h2>
<div class="borderContainer">
<div class="container" >
<div class="resultsContainer" ><input type="text" id="results" name="results" class="result" readonly></div>
<div class="numPadContainer">
    <p>
    <input type="button" value="7" class="button black" onclick='calc("7")'>
    <input type="button" value="8" class="button black" onclick='calc("8")'>
    <input type="button" value="9" class="button black" onclick='calc("9")'>
    <input type="button" value="/" class="button opr" onclick='calc("/")'>
    </p>
    <p>
    <input type="button" value="4" class="button black" onclick='calc("4")'>
    <input type="button" value="5" class="button black" onclick='calc("5")'>
    <input type="button" value="6" class="button black" onclick='calc("6")'>
    <input type="button" value="*" class="button opr" onclick='calc("*")'>
   </p>
    <p>
    <input type="button" value="1" class="button black" onclick='calc("1")'>
    <input type="button" value="2" class="button black" onclick='calc("2")'>
    <input type="button" value="3" class="button black" onclick='calc("3")'>
    <input type="button" value="-" class="button opr" onclick='calc("-")'>
    </p>
    <p>
    <input type="button" value="0" class="button black" onclick='calc("0")'>
    <input type="button" value="00" class="button black" onclick='calc("00")'>
    <input type="button" value="." class="button black" onclick='calc(".")'>
    <input type="button" value="+" class="button opr" onclick='calc("+")'>

    </p>
    <p>
    <input type="button" value="mod" class="button opr" onclick='calc("%")'>
    <input type="button" value="C" class="button red" onclick='results.value=""'>
    <input type="button" value="=" class="button orange" onclick='doOper()' >

   </p>
</div>
</div>
</div>
<script>
    var answered=false;
    function calc(val) 
    {
        optrs = "+-*/%"
        if (answered && !optrs.includes(val)) 
        {
         
                //alert("not included opr - clearing ans")
                document.getElementById("results").value="";
                
            
        }
        document.getElementById("results").value += val;
        answered=false;
    }
    function doOper()
    {
        try
        {
            dispAns(eval(document.getElementById("results").value));
            
        }
        catch
        {
            dispAns("Input Error");
        }
    }
    function dispAns(output) 
    {
        document.getElementById("results").value = output;
        answered=true;
    }

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

body 
{
    background-color:black;
    color:lightgrey;
}



.borderContainer 
{
    position:relative;
    top:10px;
    left:36%;
    width:370;
    height:500;
    background-color: lightgrey;
}
.container
{
    position:relative;
    left:8%;
    top:25px;
    width:310px;
    height:450px;
    background-color:#3d4543;
    border-radius:3px;
}
.numPadContainer
{
    position:relative;
    left:25px;
    top:40px; 
}
.result
{
    position:relative;
    left:24px;
    top:28px;
    background-color:#bccd95;
    color:black;
    text-align:right;
    height:40px;
    width:260px;
    border-radius:10px;
    border-color:white;
}
.button
{
    position:relative;
    color:white;
    border:none;
    border-radius:8px;
    cursor:pointer;
    width:48px;
    height:42px;
    margin-left:10px;
}
.button.black
{
    background-color:#303030; 
    border-radius:8px;
    border-bottom:black 2px solid;  
    border-top:2px 303030 solid; 
}
.button.red
{
    background-color:#cf1917;  
    border-bottom:black 2px solid; 
    font-weight:bold;
}
.button.opr
{
    background-color:grey;  
    border-bottom:black 2px solid; 

}
.button.orange
{
    background-color:orange;
    border-bottom:black 2px solid;
    width:110px;
    font-weight:bold;
}

OUTPUT:

Code: TBD

<html>
    <head>
        <title> Password Validation </title>
        <style>
            body {
                background-color:black;
                color:green;
            }
            h1 {
                text-align:center;
                text-decoration:underline;
            }
           .inputTxt{
                color:black;
                background-color:lightgrey;
                border:green 2px solid;
                padding-left:10px;
                width:170px;
                height:24px;
                }
            .lbl {
                 padding:25px;
                 font-weight:bold;
                   
                }
            
            .button {
                background-color:lightgreen;
                color: black;
                border:2px solid green;
                border-radius:15px;
                font-size: 15px;
                vertical-align:9px;
                font-family:"sans-serief";
                font-variant:small-caps;
                font-weight:bold;
                width:170px;
                height:30px;
                text-align:center;
            }
            
        </style>
    </head>
    
    <body>
        <h1 > Password Validation </h1>
            <div align="center">
                <br>
                <form id="frmPw">
                    <table align="center">
                    <tr> 
                        <td> <label for = "idPw" class="lbl"> Password</label> </td>
                        <td> <input type="Password" name="namPw" id="idPw" class="inputTxt" placeholder="Pls enter the Password" minlength=8 maxlength=12>  </td>
                    </tr>
                    </table>
                <br><br>
                <input type="button" value="CLEAR" class="button" onclick="doClear()">&nbsp;&nbsp;
                <input type="submit" value="SUBMIT" class="button" onclick="validatePw()">
                </form>
            </div>
    </body>

    <script>
        function validatePw() {
            const pw = document.getElementById("idPw").value;
            var msg="";
            if (pw.length>12) msg += "Max 12 characters.  Limit exceeded....";
            else if (pw.length<8) msg += "Min 8 characters needed...";
            var containsNumbers = /\d/.test(pw); //TBD
            if (!containsNumbers) msg += "Atleast one digit expected    ";
            var containsUcaseAlphabet = /[A-Z]/.test(pw);  
            if (!containsUcaseAlphabet) msg+="Atleast one Upper Case Alphabet expected  ";
            var containsSpecial = /[!@#$%^&*]/.test(pw); 
            if (!containsSpecial) msg+="Atleast one Special Character expected";             
            if (msg  !== null && msg!='')  //TBD
            {
                alert(msg);
                return false;
            }
            else 
            {
                alert("Password Validation passed successfully...");
                return true;
            }
        }

        function doClear() {
            document.getElementById("frmPw").reset();      
        }
    </script>
</hmtl>

Output:

<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scaler=1">
    <style>
        body {
            background-color:black;
            color:green;
        }
        h1 {
            text-align:center;
            font-family:"courier";
            font-size:3em;
        }
        .inputTxt{
            background-color:lightgrey;
            width:250px;
            height:30px;
            color:black;
            border:green 2px solid;
            position:absolute;
            top:85px;
            left:560px;
            padding-left:10px;
            font-size:20px;
            font-family:"courier";
        }
        .todoList {
            border:solid 2px white;
            background-color:lightgreen;
            color:black;
            width:250px;
            position:fixed;
            top:115px;
            left:558px;
        }
        .lstitm {
             border:solid 0.5px green;
        }
        .delBtn {
            background-color:darkgreen;
            color:white;
            cursor:pointer;
            border:solid 2px black;
        }
        .paraText {
            padding:15px;
           // font-weight:bold;
            font-size:20px;
            font-family:"courier";
         }

    </style>
</head>
<body>
    <h1> TO-DO LIST</h1>
    <div id="divToDo" class="todoList"></div>
    <input id="txtInput" class="inputTxt" placeholder="Type your Task">  
    <script>
        var cnt=0;   //Maintain cnt for number of tasks here initialize to 0
        const input = document.getElementById("txtInput");     //Taking text control and assigning in input
        input.addEventListener("keydown",
            function(event) 
            {
                if (event.key=="Enter" && !input.value=="")   //Enter key pressed and textbox is not empty
                {
                    const para = document.createElement("para");
                    para.className="paraText";
                    para.textContent = input.value;           //assigning input value into para

                    const del = document.createElement("span"); //Delete button "x"
                    del.textContent = "X";          
                    del.className = "delBtn";

                    const listitem = document.createElement("div"); //creating parent container for both para(input text) and del
                    listitem.className="lstitm";
                    listitem.appendChild(del);
                    listitem.appendChild(para);

                    const list = document.getElementById("divToDo");  //adding that div listitem into another parent div(id=divToDo)
                    list.appendChild(listitem);
                    cnt++;                              //while adding the listitem, increment the count
                    input.value = "";
    
                    del.addEventListener("click",
                        function() 
                        {
                            cnt--;          //del button pressed, so count decremented and listitem removed
                            this.parentElement.remove();
                            if (cnt==0) 
                            {
                                alert("Wow!  Awesome!!! You have completed all Works!!! Now Plant a Tree...");
                            }
                        });           
                }
            });
    </script>

</body>
</html>

Output:

<html>
    <head>
        <title> SSLC Marks </title>
        <style>
            body 
            {
                background-color:black;
                color:pink;
                font-family:arial;
            }
            h1 
            {
            text-align:center;
            color:pink;
            font-variant:small-caps;
            }

            th {
                background-color:pink;
                color:black;
                font-size: 20px;
                font-variant:small-caps;
               }
           .inputTxt{
                color:black;
                background-color:lightgrey;
                border:green 2px solid;
                padding-left:10px;
                width:170px;
                height:30px;
                font-size:20px;
                font-family:"Arial";
                }
            .lbl {
                 padding:25px;
                 font-weight:bold;
                   
                }
            
            .button {
                background-color:lightgrey;
                color: black;
                border:2px solid pink;
                border-radius:15px;
                font-size: 15px;
                vertical-align:9px;
                font-family:"sans-serief";
                font-variant:small-caps;
                font-weight:bold;
                width:170px;
                height:30px;
                text-align:center;
            }
            .output {
                font-family:"Arial";
                font-size:20px;
                font-weight:bold;
                padding-left:25px;
            }


            
        </style>
    </head>
    
    <body>
        <h1> SSLC Marks </h1>
        <table border="1" align=center>
            <thead>
                <th>Subjects</th> <th>Marks</th> 
            </thead>
            <tbody>
            <form id="frmMarks">
            <tr> 
                <td > <label for = "idTamil" class="lbl"> Tamil</label> </td>
                <td> <input type="text" name="txtTamil" id="idTamil" class="inputTxt">  </td>
            </tr>
            <tr> 
                <td> <label for = "idEng"  class="lbl"> English</label> </td>
                <td> <input type="text" name="txtEng" id="idEng" class="inputTxt"> </td>
            </tr>
            <tr> 
                <td> <label for = "idMath" class="lbl"> Maths</label> </td>
                <td> <input type="text" name="txtMath" id="idMath" class="inputTxt"> </td>
            </tr>
            <tr> 
                <td> <label for = "idSci"  class="lbl"> Science</label> </td>
                <td> <input type="text" name="txtSci" id="idSci" class="inputTxt"> </td>
            </tr>
            <tr> 
                <td> <label for = "idSS"  class="lbl"> Social Science</label> </td>
                <td> <input type="text" name="txtSS" id="idSS" class="inputTxt"> </td>
            </tr>
            <tr><td></td></tr<tr><td></td></tr>
             <tr> 
                <td> <label for = "idTot" class="output">Total Marks</label> </td>
                <td align="center"><output name="totMarks" id="idTot" class="output" form="frmMarks"></output</td>
            </tr>  
             <tr> 
                <td > <label for = "idPercent" class="output">Percentage %</label> </td>
                <td align="center"><output name="percent" id="idPercent" class="output" form="frmMarks"></output</td>
            </tr>  
        </tbody>
        </table>
        <br><br>
        <div align="center">
            <input type="button" value="CLEAR" class="button" onclick="doClear()"> &nbsp;&nbsp;&nbsp;
            <input type="button" value="CALC TOTAL & %"  class="button" onclick="calcTot()">
        </div>
        </form>

    </body>
    
    <script>
        function calcTot() {
            const tot = parseInt(document.querySelector("#idTamil").value) + parseInt(document.querySelector("#idEng").value) + parseInt(document.querySelector("#idMath").value) + parseInt(document.querySelector("#idSci").value) + parseInt(document.querySelector("#idSS").value);
            document.querySelector("#idTot").innerHTML = tot;
            alert(tot/5);
            document.getElementById("idPercent").innerHTML = Math.round((tot/5)*100)/100+"%";
        }
        function doClear() {
            document.querySelector("#frmMarks").reset();
            document.querySelector("#idTot").innerHTML="";    
            document.getElementById("idPercent").innerHTML="";       
        }
    </script>
</hmtl>

Output:

Git is a powerful version control system which used to manage the code across multiple users and track changes across different versions.

Installation:

Download and install GIT from the below path

https://git-scm.com/download/win

Once installed, Git can be used as a version control system through various commands.
You can configure Git for a specific folder on your computer, allowing you to manage all changes to existing files and the addition of new files within that folder

Basic commands:

1. git init:

This will initialize new repository in the current directory. This also creates .git directory and store all version control information.

2. git config:

git config --global user.name "Ranjith "

git config --global user.mail "ranjith201099@gmail.com"

3. git status

Shows the current status of working area like staged, untracked and unstaged.

4. git add

add changes from working directory to the staging area, preparing them to commit.

To add specific file: git add "filename.py"

To add all changes git add .

5. git commit

git commit -m "<message>"

Commits the staged changes with descriptive mesage

6. git log

Displays the list of commit history for the repository.
It will show commit id, author, dates and commit changes
Creating a branch

git branch <branch_name> - to create branch

git checkout <branch_name> - to switch to the new branch

git branch -b <branch_name> 

to create and switch to branch
git branch - to view all the branches (current branch will be highlighted with asterisk)

Merge a branch:

Once completed work on a branch and want to integrate it into another branch (like master), merging comes to place.

It means all the changes we have made in <branch_name> will be merged with master branch.
First, switch to the branch you want to merge into: git checkout master

Then, use git merge <branch_name> to merge your branch.

Deleting branch
Once the code changes in <branch_name> merged into <master> branch, we might need to delete branch.

use git branch -d <branch_name> to delete branch

Functions

Functions are pieces of code that we can reuse again and again in our code

Function Declaration - JavaScript Hoisting

syntax:

function functionName( ){

// code block

}

functionName()  //calling function

Example:

function msg( ){

console.log("Hii...Hello");

}

msg()  //calling function
//msg()

output:

Hii...Hello
//Hii...Hello

A function declaration defines a named function.It's hoisted,
meaning you can call it before it's defined.

Calling the function:

HOSTING

msg()  // valid  HOSTING

function msg( ){

console.log("Hii...Hello");


}

output:

Hii...Hello

Function Parameters and Arguments

syntax:

                        //input 
function functionName( parameter ){

// code block   //output

}

functionName( arguments)  //calling function

Functions can take parameters, which act as placeholders for the values
that will be passed to the function.The passing value is called an argument.

function msg( name ){

console.log("Hii...Hello" + name);

}

msg( "ranjith") ;
msg( "kumar") ;


output:

Hii...Hello ranjith

multiple parameters

function msg( name ,age){

console.log("Hii", + name +" my age"+age);

}

msg( "ranjith",25) ;
msg( "kumar",20) ;

Default Parameter


function printer(color){

console.log("print document in ${color} color");

}

//printer("blue") 
printer("blue") 

output:

document coloe blue color

//red override
function printer(color="black"){

console.log("print document in ${color} color");

}

//printer("red") 
printer( ) 

output:

//document coloe red color

document coloe black color

 Function with Return Type

function add( a,b){
     return a+b;

}

 let sum = add(10,20); //variable vechu assign panni print pannrom
 console.log(sum);  //30

 //console.log(add(10,20);   check pls

 Function Expression

A function expression defines a function inside an expression.
It's not hoisted, so you can't call it before it's defined.

syntax:

    variable      keyword
let functionName=function ( ){

   //code block

}

functionName()   // calling function

Ex:

           //don't change 
 let msg = function( ){   // function() indha typelaa kandippa irukkanum

 console.log("good morning");

}

msg( ) ;  //good morning 

With Argument

//msg( "ranjith") ;   // exp not hositing

let msg = function( name ){

console.log("good morning ${name}");

}

msg( "ranjith") ;  //good morning ranjith

Function Expression with Return Type

let mul = function (a,b){
   return a*b;

};

let result = mul( 5,2 ){
console.log(result); //10

 //console.log(mul(4,7));

 Arrow Function

 Arrow functions provide a concise syntax and do not bind their own 'this'. They are not hoisted.

 syntax:

    variable      keyword
let functionName=( ) =>{

   //code block

}

functionName()   // calling function

Example:

let evening = ( ) =>{

 console.log("good evening everyone");

}

evening ()   // good evening everyone 

With Argument

//not hoisting

let evening = ( name ) =>{

 console.log("good evening " + name);

}

evening ("ajith")   // good evening ajith

 Arrow Function with Return Type

 let sub =( a,b ) =>{
    return a - b ;
 };

  console.log( sub(10,6); // 4

Shorter Way

let sub =(a,b) => a-b;

console.log(sub(10,6)); //4

Function Calling Other Function

                       //ranjith
 function welcomeShopper(name){

 console.log(" welcome ${name} ! enjoy yoyr shopping experience")

}              //ranjith
    function main(name){

   // welcomeShopper(name); // direct calling
                   //ranjith
   let ShopperName-name;  // variableassign and after calling
                   //ranjith
   welcomeShopper(ShopperName); // calling top welcomeshopper

  };

  main("ranjith")  // welcome ranjith ! enjoy your.....

Anonymous Functions: Later on Course on Arrays

serTimeout(() => {

   console.log(" anonymous function executed");

 },2000 // 2sec delay  

 output: anonymous function executed

Scope of variables will on functions and loops

var: Function scoped.

Ex:

function demo(){
    var a =20;
    console.log(a); 

  }
demo();
console.log(a)  //error function outside calling

let: Block scoped.
const: Block scoped.

 Ex:

 function demo(){
     var a =20;
     console.log(a); 

   if (true){

   var x = "var";
   let y = "let";
   const z = ""const;     /// block scop

   console.log(x);
   console.log(y);    // all working good ...if block
   console.log(z);

  }
   console.log(x); // outer block code run successfully  (var)   
   console.log(y);   // error  (let)
   console.log(z);   // error not defienfd  (const)

 demo();

console.log(a)

Truthy and Falsy Values:

in Javascript, truthy and falsy values are used to determine whether a value evaluate to true or false in a boolean
context.this concept is crucial for controlling the flow of your program using conditions like if statement.

Falsy Values: 0," ",null,NaN,false,undefined 

console.log(Boolean(0)); //false

console.log(Boolean(undefined)); //false

console.log(Boolean(' '));  //empty false

console.log(Boolean(null)); //false

console.log(Boolean(NaN)); //false not a number

console.log(Boolean(false)); //false

Truthy Values: any value that is not Falsy :

console.log(Boolean(1)); //true

console.log(Boolean(1833933)); //true

console.log(Boolean(-1)); //true

console.log(Boolean("hello")); //true

console.log(Boolean(1)); //true

console.log(Boolean([])); //true empty array

console.log(Boolean({})); //true empty object

console.log(function (){}); //true

Example:

           t     f
let cash =255  //0 ; 
    //conditions false  statement block not run
if (cash){
  console.log("you can buy burger with drink"); 
}else{
   console.log("you can buy burger"); 
}else{
   console.log("you don't have money"); 
}

let a;
console.log(a); //false

output:
undefined 

let a = 10;
console.log(a); //true

let a = null;
console.log(a); //false

Decision Making: if, if...else, else if


Decision making or control flow in programmming is the way we coontrol the execution
of code based on certain conditions.this allows the program to make choicces and execute diff code paths.


Example 1: if statement

syntax:

if (condition){

  //code block 

}

Example:

             f    f   t
let temp =  #24  #25  25;


if (temp>=25);
{

console.log("it is hot outside");

} 

Example 2: if...else statement

syntax:

if (condition){

  //code block 

}
else{

   //code block 

}

Example 1:

if (temp>=25);

{

console.log("it is hot outside");

}
else{

console.log("it is cold outside");

}

Example 2:

let isRaining= #true false;

if (isRaning);
{

console.log("take an umbrella");

}
else{

console.log(" you don't need an umbrella");

}

Example 3: else if statement

syntax:

if (condition){

  //code block 

}
else if(condition){

   //code block 

}
else{

   //code block 

}

Example:

let time=14;

if (time<12){

console.log("good morning"); 

}
else if(time<18){

 console.log("good afternoon");  

}
else{

 console.log("good evening");  

}

Example 4: Nested if statements

Variables

let age= 16;
let iswithparents=true;
let idproof=true;

Decision logic

if (age>=18);{

  if(idproof);
    console.log("you can visit the mall and can able to watch the movie"); 
  } else{
     console.log("you can visit te mall"); 
  }
}else{
     if(iswithparents);
        console.log("you can visit the play area"); 
  } else{
     console.log("you are not allowed in the play are"); 
  }

}

Example:

let day=1;

if(day===1){
  console.log("monday"); 
}
else if(day===2){
  console.log("thuesday"); 
}
else if(day===3){
  console.log("wenday"); 
}
else if(day===4){
  console.log("thuesday"); 
}
else if(day===5){
  console.log("friday"); 
}
else{
console.log("in valid"); 
}

Switch Statement

syntax:

switch(vale){
  case 1:
     //code block  
      break;
  case 2:    
    //code block  
       break;
  case 3:
      //code block  
       break;
  Default:
      //code block  
       break;
}

Exmple1:

let day=3;

switch(day){

  case 1:
      console.log("monday"); 
      break;
  case 2:
      console.log("thuesday"); 
      break;
  case 3:
      console.log("wensday"); 
      break;
  case 4:
      console.log("thresday"); 
      break;
  case 5:
      console.log("friday"); 
      break;
   default:
      console.log("invalid"); 
}

output:

wensday

Exmple2:

let choice='tea';

switch(choice){

   case 'coffee':
      console.log("you choose coffee monday"); 
      break;
   case 'tea':
      console.log(" you choose tea thuesday"); 
      break;
    case 'water':
      console.log(" you choose water thuesday"); 
      break;
    default:
      console.log("invalid"); 
}

output:

you choose tea 

Ternary Operator

short hand if else

let isadmin =true;

/*if(isadmin){
  console.log("am  admin");
}
else{
   console.log("am  user");
} */

                 true        .
let userrole = isadmin ? " am admin ":" am user ";
console.log(userrole);

let mark=60;
     var        cond      if       else
let result = mark>=30 ? " pass ":" fail ";
              //true
//let result = 25>=30 ? " pass ":" fail ";

console.log(result); 

output:

pass

Datatypes

• Javascript is Dynamic Typing

• Primitive and Object Type

Primitive Data Types:

1.Number - Represents both integer and floating-point numbers.

let age=10;  #equal two apram enna num,str,bool ex...automatic convert pannikum enna datatype nu.
console.log(age);
console.log(typeof age); 

output:
10
number

age="25";
console.log(age);
console.log(typeof age); 

output:
string

float number:

let price=19.99;
console.log(price);
console.log(typeof price); 

output:
19.999
number

2.String - Represents a sequence of characters.

let greeting="Hello World.!"
console.log(greeting);
console.log(typeof greeting); 

output:
string

3.Boolean - Represents a logical entity and can have two values: true or false.

let isActive=true;
console.log( isActive);
console.log(typeof  isActive);

let isActive=false;
console.log( isActive);
console.log(typeof  isActive); 

4.Undefined - A variable that has been declared but not assigned a value.

let name;  #Error undefined
console.log( a);
console.log(typeof a); 

5.Null - Represents the intentional absence of any object value.

let name-null:
console.log(name);
console.log(typeof name); 

6.Symbol - Represents a unique and immutable value, often used as object property keys.

let unique=symbol("key"); #custom symbol
console.log(unique);
console.log(typeof unique); 

output:
symbol("key")

7.BigInt - Represents whole numbers larger than 2^53 - 1 (the largest number JavaScript can reliably represent with the Number type).

let largeNumber=BigInt(68690356789000833);

let largeNumber=68690356789000833n; #using the n notation

console.log( largeNumber);
console.log(typeof largeNumber); 

output:
68690356789000833n

Non-Primitive Data Types

1.Object

Represents a collection of properties, each consisting of a key (usually a string)
and a value (which can be any data type, including another object.

let person={

  name-'ranjith'.
  age=25,
  isEmployed=true;
}

console.log( person); //total laa print agum
console.log( person .name);  // name only
console.log( person .age);  // age only
console.log( person .isEmployed);

console.log(typeof  person); 

2.Array

A special type of object used for storing ordered collections of values.

let number=[1,2,5,4,8];
console.log( number);

let mixdata=[1,'2',true,false,null,[1,2,'5',"str"] ,undefined ];
console.log( mixdata);

3.Function

A special type of object that is callable and can perform an action.

function invite( ){
   console.log( "you are invitd");
}
invite()

**4.Date - A built-in object for handling dates and times.**

let now- new Date;
console.log( now);

outut:
date wed jul 24 2024 09.00:51 Gmt( indian stamdard)

Jscript print :

console.log("Hello World ");

Variables & Values

• The var keyword was used in all JavaScript code from 1995 to 2015.

• The let and const keywords were added to JavaScript in 2015.

• The var keyword should only be used in code written for older browsers.

Java script identifiers :

• All JavaScript variables must be identified with unique names.


• These unique names are called identifiers.

• Identifiers can be short names (like x and y) or more descriptive names (age, sum, totalVolume).

• The general rules for constructing names for variables (unique identifiers) are:

• Names can contain letters, digits, underscores, and dollar signs.

Names must begin with a letter.

Names can also begin with $ and (but we will not use it in this tutorial).

Names are case sensitive (y and Y are different variables).

Reserved words (like JavaScript keywords) cannot be used as names.

What is Good?

- let and const have block scope.

- let and const can not be redeclared.

- let and const must be declared before use.

- let and const does not bind to this.

- let and const are not hoisted.

What is Not Good?

- var does not have to be declared.

- var is hoisted.

- var binds to this.

Declare var variable :

var a; #Error undefined 

Initialize the variable :

var a = 10;

Redeclaration allowed :

var a = 100;
console.log(a);

Output :
100

Declare let variable :

let b;

Initialize the variable :

let b = 10;

Redeclaration is not allowed :

let b =100; 

Reassignment is allowed :

b = 200;
console.log(b);

cons must Declare & initialize 1st line :

const PI=31415 ;
//fixed Value Called Constant
console.log (PI);

Reassignment is not allowed :

const c = 1;
c = 2;
console.log(c);

Naming conventions :

correct way :

Correct camel Case convention :
let userName = 'John'; 

Underscore is not recommended but valid :

let user_Name ='Max'; 

start from Underscore :

let _userName ='Doe'; 

start from dollar symbol :

let $userName='Evo' ; 

string concatenate :

console.log('Welcome + userName);
console.log("Hi + userName);
console.log('Bye + userName);

Incorrect variable names :

Invalid: variable names cannot start with a number

let 5date= 5;

Resrved keywords (Functions):

let new = "data";
let function = 20;

Symbols in variable names :

let #function = 'data'; 
let @function = 'data';
let John&Jane = 'Friends'; 

let $function = 'data';  
#this one is correct

Scope of variables will on functions & loops :

var: Function scoped.
let: Block scoped.
const: Block scoped 

Maya, a developer working on a new website, was frustrated with slow load times caused by using cookies to store user data. One night, she discovered the Web Storage API, specifically Local Storage, which allowed her to store data directly in the browser without needing constant communication with the server.

She starts to explore,

The localStorage is property of the window (browser window object) interface allows you to access a storage object for the Document’s origin; the stored data is saved across browser sessions.

1. Data is kept for a longtime in local storage (with no expiration date.). This could be one day, one week, or even one year as per the developer preference ( Data in local storage maintained even if the browser is closed).
2. Local storage only stores strings. So, if you intend to store objects, lists or arrays, you must convert them into a string using JSON.stringfy()
3. Local storage will be available via the window.localstorage property.
4. What’s interesting about them is that the data survives a page refresh (for sessionStorage) and even a full browser restart (for localStorage).

Excited with characteristics, she decides to learn more on the localStorage methods,

setItem(key, value)

Functionality:

• Add key and value to localStorage.
• setItem returns undefined.
• Every key, value pair stored is converted to a string. So it’s better to convert an object to string using JSON.stringify()

Examples:

• For a simple key, value strings.

// setItem normal strings
window.localStorage.setItem("name", "maya");

• Inorder to store objects, we need to convert them to JSON strings using JSON.stringify()

// Storing an Object without JSON stringify
const data = {
  "commodity":"apple",
  "price":43
};
window.localStorage.setItem('commodity', data);
var result = window.localStorage.getItem('commodity');
console.log("Retrived data without jsonified, "+ result);

getItem(key)

Functionality: This is how you get items from localStorage. If the given key is not present then it will return null.

Examples
Get a simple key value pair

// setItem normal strings
window.localStorage.setItem("name", "goku");

// getItem 
const name = window.localStorage.getItem("name");
console.log("name from localstorage, "+name);

removeItem(key)

Functionality: Remove an item by key from localStorage. If the given key is not present then it wont do anything.

Examples:

• After removing the value will be null.

// remove item 
window.localStorage.removeItem("commodity");
var result = window.localStorage.getItem('commodity');
console.log("Data after removing the key "+ result);

clear()

Functionality: Clears the entire localStorage
Examples:

• Simple clear of localStorage

// clear
window.localStorage.clear();
console.log("length of local storage - after clear " + window.localStorage.length);

length

Functionality: We can use this like the property access. It returns number of items stored.
**Examples: **

//length
console.log("length of local storage " + window.localStorage.length);

When to use Local Storage

1. Data stored in Local Storage can be easily accessed by third party individuals.
2. So its important to know that any sensitive data must not sorted in Local Storage.
3. Local Storage can help in storing temporary data before it is pushed to the server.
4. Always clear local storage once the operation is completed.

localStorage browser support

localStorage as a type of web storage is an HTML5 specification. It is supported by major browsers including IE8. To be sure the browser supports localStorage, you can check using the following snippet:

if (typeof(Storage) !== "undefined") {
    // Code for localStorage
    } else {
    // No web storage Support.
}

Maya is also curious to know where it gets stored ?

Where the local storage is saved ?

Windows

• **Firefox: **C:\Users\\AppData\Roaming\Mozilla\Firefox\Profiles\\webappsstore.sqlite, %APPDATA%\Mozilla\Firefox\Profiles\\webappsstore.sqlite
• **Chrome: **%LocalAppData%\Google\Chrome\User Data\Default\Local Storage\

Linux

• Firefox: ~/.mozilla/firefox//webappsstore.sqlite
• Chrome: ~/.config/google-chrome/Default/Local Storage/

Mac

• Firefox: ~/Library/Application Support/Firefox/Profiles//webappsstore.sqlite, ~/Library/Mozilla/Firefox/Profiles//webappsstore.sqlite
• Chrome: ~/Library/Application Support/Google/Chrome//Local Storage/, ~/Library/Application Support/Google/Chrome/Default/Local Storage/

Simple Hands-On

https://syedjafer.github.io/localStrorage/index.html

Limitations:

1. Do not store sensitive user information in localStorage
2. It is not a substitute for a server based database as information is only stored on the browser
3. localStorage is limited to 5MB across all major browsers
4. localStorage is quite insecure as it has no form of data protection and can be accessed by any code on your web page
5. localStorage is synchronous, meaning each operation called would only execute one after the other

Now, Maya is able to resolve her quest of making her website faster, with the awareness of limitations !!!

கணியம் அறக்கட்டளை ஏற்பாடு செய்த பைத்தான் பயிற்சி வகுப்பின் மூலம் தொல்காப்பிய மெய்ம்மயக்கத்திற்கு ஒரு விளையாட்டு நிரல் எழுத முடிந்தது. அது இன்னும் ஊக்கத்தை அளித்தது. பயிற்றுநர் செய்யது சாபர் அவர்கள் நன்றிக்குரியவர்.
from meymayakkamfinal1 import *

print ("மெய்ம்மயக்கம் விளையாட்டை விளையாடலாமா")
print ("மெய்ம்மயக்க விளையாட்டை விளையாடப் படிநிலைகளுள் ஒன்றைத் தெரிவுசெய்க")

படிநிலைகள் = [
"1. க்+க",
"2. ங்+கங",
"3. ச்+ச",
"4. ஞ்+சஞய",
"5. ட்+கசடப",
"6. ண்+கசஞடணபமயவ",
"7. த்+த",
"8. ந்+தநய",
"9. ப்+ப",
"10. ம்+பமயவ",
"11. ய்+கசதபஞநமயவங",
"12. ர்+கசதபஞநமயவங",
"13. ழ்+கசதபஞநமயவங",
"14. வ்+வ",
"15. ல்+கசபலயவ",
"16. ள்+கசபளயவ",
"17. ற்+கசபற",
"18. ன்+கசஞபமயவறன",
"19. ர, ழ குற்று ஒற்று ஆகா"
]

print (படிநிலைகள் )

விதிகள் = [meymayakkam1, meymayakkam2, meymayakkam3, meymayakkam4, meymayakkam5, meymayakkam6, meymayakkam7, meymayakkam8, meymayakkam9, meymayakkam10, meymayakkam11, meymayakkam12, meymayakkam13, meymayakkam14, meymayakkam15, meymayakkam16, meymayakkam17, meymayakkam18, meymayakkam19]

விளையாடும்_களமுறை = 5

while விளையாடும்களமுறை > 0:
விளையாடும்களமுறை = விளையாடும்_களமுறை - 1

தெரிவுசெய் = input("விளையாடும் விதியைத் தெரிவுசெய் : ")
print (தெரிவுசெய் )
உள்ளீட்டுச்சொல் = input("ஒரு சொல்லைத் தருக : ")

if தெரிவுசெய் == "1" and meymayakkam1(உள்ளீட்டுச்சொல்):
        print ("மெய்ம்மயக்க விதி1இன்படி சரியான சொல்")
elif தெரிவுசெய் == "2" and meymayakkam2(உள்ளீட்டுச்சொல்):
        print ("மெய்ம்மயக்க விதி2இன்படி சரியான சொல்")
else:
    print ("மெய்ம்மயக்க விதிகளின்படி இது தவறான சொல். மீண்டும் விளையாடுங்கள்.")

Chrome App Link: https://chromewebstore.google.com/detail/huggingbuddy/hhkbebgakgkljpipmdblnabnoagemohb

If anyone would like to contribute more
GitHub Code: https://github.com/angu10/HuggingBuddy

Introducing HuggingBuddy: Your Friendly Companion for Reading Research Papers

Are you tired of feeling overwhelmed by complex research papers? Do you wish you had a friendly companion to help you understand the key ideas and insights? Look no further! Introducing HuggingBuddy, the user-friendly Chrome extension that simplifies the process of reading and understanding research papers from Hugging Face.

🤗 AI-Powered Summaries

HuggingBuddy harnesses the power of artificial intelligence to generate concise summaries of research papers. Say goodbye to hours of reading and hello to quick and easy understanding. With HuggingBuddy, you can grasp a paper's main ideas and contributions in just a few minutes.

❓ Interactive Q&A

Curious to learn more? HuggingBuddy has got you covered. The extension generates up to 5 relevant questions based on the paper's content, allowing you to explore and understand the research more deeply. Simply click on a question, and HuggingBuddy will provide a detailed answer using the advanced Gemini language model.

🎨 Customizable Reading Experience

We understand that everyone has different preferences when it comes to reading. That's why HuggingBuddy allows you to personalize your reading experience. Choose from various themes to suit your style and enable text-to-speech functionality to listen to the summaries and answers on the go.

🤝 Integration with Hugging Face

HuggingBuddy seamlessly integrates with the Hugging Face platform, giving you direct access to many research papers. No more searching through multiple websites or repositories. With HuggingBuddy, all the knowledge you need is just a click away.

🌟 Open Source and Community-Driven

HuggingBuddy is an open-source project licensed under the Apache License 2.0. We believe in the power of collaboration and encourage anyone to contribute to the project. Whether you're a developer, researcher, or enthusiast, you can help make HuggingBuddy better for everyone.

We welcome contributions in various forms, including:

• 🐛 Bug reports and feature requests
• 💻 Code contributions and pull requests
• 📚 Documentation improvements
• 🧪 Testing and feedback

By contributing to HuggingBuddy, you'll join a vibrant community of individuals passionate about making research more accessible and understandable. Together, we can create a powerful tool that benefits researchers, students, and anyone interested in exploring scientific knowledge.

🚀 Powered by Gemini API

HuggingBuddy leverages Google's cutting-edge Gemini API to generate summaries and provide interactive features. The Gemini API is a state-of-the-art language model that excels at natural language understanding and generation.

We are grateful to Google for making the Gemini API available and enabling us to build innovative tools like HuggingBuddy.

Ready to dive into the world of research papers with a friendly companion by your side? Install HuggingBuddy today and experience the joy of understanding complex ideas with ease. Happy reading! 📖🤗