console.log("hello world"); 
console.log(2 + 2); 
console.log(["haris", "faizan", "afnan"]);//Array
console.log([22, 1, 44, 55, 66]); //Array
//OBJECTS   
console.log({
    name: "haris",
    marks: 77
});
console.warn('this is for warning');
console.error("Error messages");
console.clear();  //clear console

// let & const
let age;
age = 2;
age = 33;
console.log(age);
const section = "9th";
// section = "10th" this will through an error
console.log(section);

//DATA TYPES PREMETIVE AND REFRENCE DATA TYPE
//PREMETIVE 
let string = "this is a string";
console.log(string, typeof (string));
let number = 33;
console.log(number, typeof (number));
let booLean = true;
console.log("Data type is " + (typeof booLean));
let nullVar = null;
console.log("Data type is ", typeof (nullVar));
let undef = undefined;
console.log("Data type is " + (typeof undef));
// Reference Data Types
let myarr = [1, 2, 3, 4, false, "string"];
console.log("Data type is " + (typeof myarr));
// Object Literals
let stMarks = {
    harry: 89,
    Shubham: 36,
    Rohan: 34
}
console.log(typeof stMarks);
//FUNCTION
function findName() {
}
console.log(typeof findName);
//DATE
let date = new Date();
console.log(typeof date);
              

let myVAr=10;
console.log(myVAr, (typeof myVAr));
//method one String() Number()
let myVArr = String(10);
console.log(myVArr, (typeof myVArr));
// method second toString
let myVarrr=11;
console.log(myVarrr.toString());
// method third parseInt parseFloat
let number = parseInt('10.11');//output 10
number = parseFloat('10.11');//output 10.11
console.log(number, (typeof number));
//toFixed() used to show decimal
// TYPE COERSION
let coersion = '10';
let coersion2 = 20;
console.log(coersion + coersion2);//addition concatinate

 //strings
let namee = "haris";
nickName = "meezan";
//concatinate method one
console.log(namee + nickName);
//concattinate method 2
console.log(namee.concat(" is my name"));
//functions of strings
let newName = "functions of strings";
console.log(newName);
console.log(newName.length);
console.log(newName.toLowerCase());
console.log(newName.toUpperCase());
//index of
console.log(newName[0]);
console.log(newName.charAt(0));
console.log(newName.indexOf('s'));
console.log(newName.lastIndexOf("s"));
//check 
console.log(newName.endsWith('strings')); //returns boolean
console.log(newName.includes('strings')); //returns boolean
console.log(newName.substring(0, 9)); //return strings from 0 to 9
console.log(newName.slice(0, 9)); //from start
console.log(newName.slice(-4)); //from end 
console.log(newName.split(' '));//make an array 
console.log(newName.replace('strings', 'replaced'));
//Template litrals
let myHtml = ` hello ${newName} template litrals `;
document.body.innerHTML = myHtml;

let marks = [33, 22, 44, 66, 77, 99];
const fruits = ['orange', 'apple', 'banana'];
const mixed = [55, 'strings', [3, 8]];
//array constructor
const arr = new Array(23, 44, 55, 77, 'yeap buddy');
//index starts from 0
console.log(marks[2]); //output 44
//property  &  method
console.log(arr.length);
//check array is present
console.log(Array.isArray(arr)); //return boolean
arr[1] = 'haris';
console.log(arr);
//index of
let value = marks.indexOf(33);
console.log(value);
//mutating or modifying arrays
marks.push(34); //push at the end
marks.unshift(99); //push at the starting
marks.pop();//delete end element
marks.shift(); //delete start element
marks.splice(1, 2);//takes two paramter start and how many i.e delete element from 1 to two more
marks.reverse();//reverse of an array
let marks2 = [1, 2, 3, 4, 5];
marks = marks.concat(marks2);
console.log(marks);
//OBJECTS
let myObj = {
    name: 'faizan', //key : values
    channel: 'wreckeverthing',
    isActive: true,
    markas: [22, 22, 222, 11, 12]
}
console.log(myObj); //show obj
//access objects with two methods
//Method one
console.log(myObj.markas); //show name inobj 
console.log(myObj['markas']); //show markas inobj 
//Method two
console.log(myObj.name); //show name in obj 
console.log(myObj['name']); //show name in obj 

const age = 23;
if (age == 13) { //simple condition check
    console.log("Age is 23");
}
else if (age == 22) { //nested if else
    console.log("Age is 22");
}
else if (age === 23) { //condition and datatype check
    console.log("Age is 23");
}
else if (age != 23) { //not equal to
    console.log("Age if not 23");
}
else if (age !== 23) { //not equal to and check datatype
    console.log("Age if not 23");
}
else {
    console.log("Age is not 23 or 22");
}
//boolean
const driver = true;
if (driver) {
    console.log("driver is present");
}
else {
    console.log("driver is absent");
}
//AND && OR ||
if (driver && age) {//AND = both condition should be true
    console.log("driver and age is defined");
}
if (driver || khaberkos) {  //OR = atleast one condition  should be true

    console.log("one is defined");
}
              }

const haris = 22;
console.log(haris == 22 ? 'haris is 22' : 'haris is not 22');

switch (haris) {
case 20:
console.log("haris is 20");
break;
case 21:
console.log("haris is 21");
break;
case 22:
console.log("haris is 22");
break;
default:
console.log("age is unknown");
break;

      let a = 1;
while (a < 10) { //while loop
    console.log(a);
    a++;
}
for (a = 10; a < 20; a++) { //for loop
    console.log(a);
}
do { //do-while loop
    console.log(a)
    a++;
} while (a < 10);
//foreach
let arr = [1, 2, 3, 4, 5];
arr.forEach(function (element) //element,index,array can also be used
{
    console.log(element);
});
//break; to break a loop
//continue to skip a loop   
let obj = {
    name: 'haris',
    age: 11,
    os: 'kali-linux',
    pro: 'professional'
}
for (let key in obj) {
    console.log(`${key} of an object is ${obj[key]}`)
              }
              

function greet(name = "meezan") {
console.log(`${name} Happy Birthday`);
}
let name = 'haris';
greet();
//return value
function salam(namee = "meezan") {
    let msg = ` As-salam ${namee}`;
    return msg;
}
let val = salam();
console.log(val);
//var is function scoped
//let is block scope
              

console.log("Welcome to DOM");
let a = document;
// a = document.form[0];
a = document.links;
a = document.body;
//make an array of html tags
Array.from(a).forEach(function (element) {
    console.log(element);
});
console.log(a);

//Single
let element = document.getElementById('myfirst');
// element = element.className;
// element = element.childNodes;
// element = element.parentNode;
element.style.color = 'red';
//in innerHTML we can use html tags
element.innerHTML = "hi buddy";
element.innerText = "hello yeap buddy";
console.log(element);
// for getting innerHTML console.log(element.innerHTML);
//QUERY SELECTOR
let sel = document.querySelector('#myfirst');
sel = document.querySelector('div');
sel.style.color = 'green';
console.log(sel);
//Multi
let elem = document.getElementsByClassName('child');
elem = document.getElementsByTagName('div');
Array.from(elem).forEach(element => {
    element.style.color = 'blue';
}); 
console.log(elem);//[0],[1] etc
              

let cont = document.querySelector(".container");
console.log(cont.childNodes); //it counts everthing even comments
console.log(cont.children); //so we use this instead of childNodes
let nodeName = cont.childNodes[1].nodeName;
let nodeType = cont.childNodes[1].nodeType;
// console.log(nodeName)
// console.log(nodeType)
let container = document.querySelector('div.container'); //div having class container
// console.log(container.children[1].children[0].children); //children second's his children first's  his childrens
console.log(container.firstChild); //first child 
console.log(container.firstElementChild); //first element child
console.log(container.lastChild); //last child
console.log(container.lastElementChild);//last element child
console.log(container.childElementCount); // Count of child elements (children)
console.log(container.firstElementChild.parentNode); //parent of this child
console.log(container.firstElementChild.nextSibling); //next child
console.log(container.firstElementChild.nextElementSibling); //next element child
console.log(container.firstElementChild.nextElementSibling.nextElementSibling); //next element child's sibling 

document.getElementById('heading').addEventListener('click', function (e) { //mouseover is aslo a event listner
console.log("you have click the heading");
// console.log(e);
let varr;
// location.href ="harismalik.netlify.com"
varr = e.target;
varr = e.target.className;
varr = e.target.id;
//where you clicked with respect to browser windows
varr = e.clientX;
varr = e.clientX;
//where you clicked 
varr = e.offsetX;
varr = e.offsetY;
console.log(varr)
});

//key and value
localStorage.setItem('Name', 'haris');
//get an item from local storage
let nam = localStorage.getItem('Name');
//remove all
// localStorage.clear(); 
//remove a particular one
// localStorage.removeItem('Name');
console.log(nam);
//covert to array
let ary = ['hi', 'hello', 'sawadi-kha'];
localStorage.setItem("pubg", JSON.stringify(ary)); //takes object and returns string
let pubgary = JSON.parse(localStorage.getItem('pubg')); //takes string and return object
console.log(pubgary);
//session storage
// clears data after logged out
//replace localStorage with session and it will wotk as a session without any error