html_css_js

  1: Create a function that takes two numbers as parameters and returns their sum. JS: // Create a function that takes two numbers as parameters and returns their sum. const button = document . querySelector ( " button " ) ; function sum ( one , two ) {     return one + two ; } button . addEventListener ( " click " , () => {         let $i1 = document . querySelector ( " #i1 " ) . value ;     let $i2 = document . querySelector ( " #i2 " ) . value ;     let area = sum ( Number ($i1) , Number ($i2)) ;         console . log ( " Sum: " , area) ; } ) HTML: < body class =" mx-3 ">     < section class =" flex gap-10 pb-7 ">         < div >             < p > Input : 1 </ p >< input id =" i1 " class =" border-2 " type =" text " required >         </ div >     ...

Table of contents: Weather app 1. Weather app: https: //openweathermap.org/ api key => 8172555a7c0dd29c40cb373ff1c73e51 api call => https: //api.openweathermap.org/data/2.5/weather?lat={lat}&lon={lon}&appid={API key} >

Bootstrap Grid: In  col-md-4 ,  -4  means each column will take 4/12 of row and  -md  means this property will be applied till md breakpoint. <! DOCTYPE html > < html lang =" en "> < head >     < meta charset =" UTF-8 ">     < meta name =" viewport " content =" width=device-width, initial-scale=1.0 ">     < title > Document </ title >     < link rel =" stylesheet " href =" node_modules/bootstrap/dist/css/bootstrap.css ">     < link rel =" stylesheet " href =" style.css ">     < style >         body {             background-color : # 292d3e ;         }         . c {             background-color : lightblue ;         }         . cc {             bor...

  <! DOCTYPE html > < html lang =" en "> < head >     < meta charset =" UTF-8 ">     < meta name =" viewport " content =" width=device-width, initial-scale=1.0 ">     < title > Document </ title >     < style >         : root {             font-size : 10px ;         }         body {             font-size : 1.6rem ;         }         . cont {             border : 2px solid black ;             display : flex ;         }         . elements {             margin : 0.5em ;             border : 2px solid blue ;             padding : 1em ; ...

 Table of contents Link .js to .html and error Commands Variables Get element by id Taking input from the user Type conversion Math functions Calculate Hypoteneus (practice program) Counter (practice program) Random number generator String methods and functions Slice Method chaining If, else if, else If else (Practice Program) Switch Statement Logical Operators (&&, ||, ! ) Loops Break and continue Nested Loops Functions, nested functions, function expression, and arrow function Template Literals VAR vs LET Number guessing game Temperature converter Array Maps Objects This keyword Class Static variables and functions Inheritance Super Keyword Getters and Setters Instanceof operator Passing Object to function Array to Objects Anonymous Objects Simple Garage System Error handling setTimeout( ) setInterval( ) Date Object Simple Clock Program Synchronous and Asynchronous Code Console.time( ) Important Points: If  indexof () ; returns  - 1 , it means this  elemen...