├── app.js ├── index.html └── style.css /app.js: -------------------------------------------------------------------------------- 1 | ///// Class 1 Date 1-1-2023 2 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 7 | java SCript Basic Full Course 1-1-2023 8 | 9 | 10 | 11 | 12 | 13 | 14 |
15 | 16 | 17 |
18 |

Welcome to JavaScript Course with Sultan Muhammad Essa 514

19 |

20 | 21 | 22 | 23 | 24 | 25 |
26 |

Content

27 | 
  28 |                                                     

  29 |                                                         
  • JavaScript Introduction page (1) code line (45)
    • 
  30 |                                                         
  • WhereTo page (2) code line (62)
    • 
  31 |                                                         
  • Output page (3) code line (177)
    • 
  32 |                                                         
  • JavaScript Syntax page (4) code line (293)
    • 
  33 |                                                         
  • JavaScript Comment page (5) code line (340)
    • 
  34 |                                                         
  • JavaScript Variable page (6) code line (389)
    • 
  35 |                                                         
  • JavaScript Operators page (7) code line (480)
    • 
  36 |                                                         
  • JavaScript Arithmetic Operators page (8) code line (811)
    • 
  37 |                                                         
  • JavaScript Assignment Operators page (9) code line (951)
    • 
  38 |                                                         
    • 
  39 |                                                         
    • 
  40 |                                                     
    
  41 |
    42 |
    43 | 44 | 45 |


    46 | 47 | 48 | 49 | 50 | 51 |
    52 |
    1
    53 | 54 |

    JavaScript Introduction



    55 |

    JavaScript is the most popular programming language in the world.
    56 | JavaScript is the programming language of HTML and the Web.
    57 | Programming makes computers do what you want them to do.
    58 | JavaScript is easy to learn.

    59 |
  • java script can change html content
    • 60 |
  • java script can change html Attribute
    • 61 |
  • java script can change html Style CSS
    • 62 |

    63 | 64 | 65 | 66 | 67 | 68 | 69 |


    70 | 71 |
    72 |
    2
    73 | 74 | 75 |

    Note:please remove the space from closing tag(body) at bottom of examples.

    76 |

    The <"script"> Tag

    77 |

    In HTML, JavaScript code must be inserted between <"script"> and <"/script"> tags.



    78 | 79 | Example:=:

    80 | 81 | 
      82 | 
  83 |     <script>
  84 |     document.getElementById("demo").innerHTML = "My First JavaScript";
  85 |     </script>
  86 | 
  87 |


    88 | 89 |

    JavaScript in <"head">

    90 |

    In this example, a JavaScript function is placed in the <"head"> section of an HTML page. 91 | The function is invoked (called) when a button is clicked:



    92 | 93 | 94 | 95 | 96 | 97 | 98 | Example 99 | <!DOCTYPE html> 100 | <html> 101 | <head> 102 | <script> 103 | function myFunction() { 104 | document.getElementById("demo").innerHTML = "Paragraph changed."; 105 | } 106 | </script> 107 | </head> 108 | <body> 109 | <h1>My Web Page</h1> 110 | <p id="demo">A Paragraph</p> 111 | <button type="button" onclick="myFunction()">Try it</button> 112 | </ body> 113 | </html> 114 | 115 | 116 | 117 | 118 |

    JavaScript in <"body">

    119 |

    In this example, a JavaScript function is placed in the <"body"> section of an HTML page.
    120 | The function is invoked (called) when a button is clicked:

    121 | 122 | 123 | 124 | <!DOCTYPE html> 125 | <html> 126 | <body> 127 | 128 | <h1>My Web Page</h1> 129 | 130 | <p id="demo">A Paragraph</p> 131 | 132 | <button type="button" onclick="myFunction()">Try it</button> 133 | 134 | <script> 135 | function myFunction() { 136 | document.getElementById("demo").innerHTML = "Paragraph changed."; 137 | } 138 | </script> 139 | 140 | </ body> 141 | </html> 142 | 143 | 144 | 145 | 146 | 147 |

    External JavaScript

    148 |

    Scripts can also be placed in external files. 149 | External scripts are practical when the same
    150 | code is used in many different web pages. 151 | JavaScript files have the file extension .js. 152 | To use an external script, put the name of the script
    153 | file in the src (source) attribute of the <"script"> tag:

    154 | 155 | 156 | 157 | <!DOCTYPE html> 158 | <html> 159 | <body> 160 | <script src="myScript.js"></script> 161 | </ body> 162 | </html> 163 | 164 | 165 | 166 | 167 | 168 | 169 |

    External JavaScript Advantages

    170 |

    Placing JavaScripts in external files has some advantages: 171 |
  • It separates HTML and code
    • 172 |
  • It makes HTML and JavaScript easier to read and maintain
    • 173 |
  • Cached JavaScript files can speed up page loads
    • 174 |

    175 | 176 | 177 | 178 |


    179 | 180 | 181 | 182 |
    183 |
    3
    184 |

    Note:please remove the space from closing tag(body) at bottom of examples.

    185 | 186 | 187 | 188 | 189 |

    JavaScript Output

    190 |
    191 |

    JavaScript Display Possibilities

    192 | 193 |

    JavaScript can "display" data in different ways:


    194 | 200 | 201 |
    202 | 203 | 204 | 205 |

    Using window.alert()

    206 |

    You can use an alert box to display data:


    207 | Example: 208 | 209 | <!DOCTYPE html> 210 | <html> 211 | <body> 212 | 213 | <h1>My First Web Page</h1> 214 | <p>My first paragraph.</p> 215 | 216 | <script> 217 | window.alert("Can you want to learn JavaScript"); 218 | </script> 219 | 220 | </body > 221 | </html> 222 | 223 |

    224 | 225 |

    Using document.write()

    226 |

    For testing purposes, it is convenient to use document.write()::



    227 | Example: 228 | 229 | <!DOCTYPE html> 230 | <html> 231 | <body> 232 | 233 | <h1>My First Web Page</h1> 234 | <p>My first paragraph.</p> 235 | 236 | <script> 237 | document.write(5 + 6); 238 | </script> 239 | 240 | </body > 241 | </html> 242 | 243 |

    244 | 245 | 246 |

    Using innerHTML

    247 |

    To access an HTML element, JavaScript can use the document.getElementById(id) method.
    248 | The id attribute defines the HTML element. The innerHTML property defines the HTML content:



    249 | 250 | Example:: 251 | 252 | <!DOCTYPE html> 253 | <html> 254 | <body> 255 | 256 | <h1>My First Web Page</h1> 257 | <p>My First Paragraph</p> 258 | 259 | <p id="demo"></p> 260 | 261 | <script> 262 | document.getElementById("demo").innerHTML = 5 + 6; 263 | </script> 264 | 265 | </body > 266 | </html> 267 | 268 |

    269 | 270 | 271 | 272 |

    Using console.log()

    273 |

    In your browser, you can use the console.log() method to display data.
    274 | Activate the browser console with F12, and select "Console" in the menu.



    275 | 276 | Example: 277 | 278 | <!DOCTYPE html> 279 | <html> 280 | <body> 281 | 282 | <h1>My First Web Page</h1> 283 | <p>My first paragraph.</p> 284 | 285 | <script> 286 | console.log(1 + 6); 287 | </script> 288 | 289 | </body > 290 | </html> 291 | 292 | 293 |

    294 | 295 | 296 | 297 | 298 |
    299 |
    4
    300 |

    Note:please remove the space from closing tag(body) at bottom of examples.



    301 | 302 |

    JavaScript Syntax




    303 |

    JavaScript Programs



    304 |

    A computer program is a list of "instructions" to be "executed" by the computer.
    305 | In a programming language, these program instructions are called statements. 306 | JavaScript is a programming language. 307 | JavaScript
    statements are separated by semicolons.



    308 | 309 | Example: 310 | 311 | var x = 5; 312 | var y = 6; 313 | var z = x + y; 314 |

    315 | 316 | 317 |

    JavaScript Statements

    318 |

    JavaScript statements are composed of: 319 | Values, Operators, Expressions, Keywords, and Comments.



    320 | 321 | 322 |

    JavaScript Values

    323 |

    The JavaScript syntax defines two types of values: Fixed values and variable values. 324 | Fixed values are called literals. Variable values are called variables.

    325 | 326 | 327 |

    JavaScript Literals

    328 |

    The most important rules for writing fixed values are:
    329 | Numbers are written with or without decimals:


    330 | example of numbers:
    331 | 7,14,12 332 |


    333 | 334 | Strings are text, written within double or single quotes:

    335 | Example of String

    336 | "Sultan"

    337 | "Muhammad"


    338 | 339 |

    340 | 341 |
    342 | 343 | 344 | 345 |
    346 | 347 |
    5
    348 |

    Note:please remove the space from closing tag(body) at bottom of examples.

    349 | 350 | 351 |

    JavaScript Comments

    352 |

    avaScript comments can be used to explain JavaScript code, and to make it more readable.
    353 | JavaScript comments can also be used to prevent execution, when testing alternative code.



    354 | 355 | 356 | 357 |

    Single Line Comments

    358 |

    Single line comments start with //. 359 | Any text between // and the end of the line, will be ignored by JavaScript (will not be executed).
    360 | This example uses a single line comment before each line, to explain the code:

    361 | 362 | Example:
    363 | 364 | // Change heading: 365 | document.getElementById("myH").innerHTML = "My First Page"; 366 | // Change paragraph: 367 | document.getElementById("myP").innerHTML = "My first paragraph."; 368 | 369 | 370 |

    371 | 372 | 373 | 374 |

    Multi-line Comments

    375 |

    Multi-line comments start with /* and end with */. 376 | Any text between /* and */ will be ignored by JavaScript. 377 | This example uses a multi-line comment (a comment block) to explain the code:

    378 | Example:
    379 | 380 | /* 381 | The code below will change 382 | the heading with id = "myH" 383 | and the paragraph with id = "myP" 384 | in my web page: 385 | */ 386 | document.getElementById("myH").innerHTML = "My First Page"; 387 | document.getElementById("myP").innerHTML = "My first paragraph."; 388 | 389 | 390 |




    391 | 392 | 393 | 394 |
    395 | 396 |
    6
    397 |

    Note:please remove the space from closing tag(body) at bottom of examples.



    398 | 399 | 400 |

    JavaScript Variables


    401 |

    402 | JavaScript variables are containers for storing data values. 403 | In this example, x, y, and z, are variables:

    404 | There are theee type of variable such as:
  • Let
  • Const
  • Var ::ab sa phala wala variable(var ha)



    • 405 | 406 | Example:
    407 | 408 | var x = 5; 409 | var y = 6; 410 | var z = x + y; 411 |

    412 |

    413 | From the example above, you can expect:
    414 |
  • x stores the value 5
    • 415 |
  • y stores the value 6
    • 416 |
  • z stores the value 11
    • 417 |



    418 | 419 | 420 | 421 |

    Data Types


    422 |

    There are two types of data types such as

    423 |

  • primitive data type
  • non primitive data type

    • 424 |

    425 | 426 |

    Primitive Data Type


    427 |

    there are five types of primitive data type Such as

    428 |
  • String
    • 429 |
  • Number
    • 430 |
  • Booleans
    • 431 |
  • undefine
    • 432 |
  • null


    • 433 | 434 |

    435 | 436 | 437 |

    String



    438 |

    A string can be any text inside double or single quotes like "sultan" sultan is a string


    439 | Example of String:

    440 |
  • "Sultan"
    • 441 |
  • "Muhammad"
    • 442 |
  • "Essa"


    • 443 | 444 | 445 | 446 |

    Number



    447 |

    448 | Example:

    449 |
  • 1
    • 450 |
  • 51
    • 451 |
  • 7
    • 452 |



    453 | 454 | 455 |

    Booleans


    456 |

    Boleans which basically means they can be true or false ,on or off and close or open etc .


    457 |
  • True
    • 458 |
  • False


    • 459 | 460 | 461 | 462 | 463 |

    undefine

    464 |

    A variable that has not been assigned a value



    465 | Example::

    466 |
  • let a;


    • 467 | 468 | 469 | 470 |

    Null

    471 |

    'Null' is a keyword in JavaScript that signifies 'no value' or nonexistence of any value.



    472 | Example:

    473 | let a=null; 474 | 475 |

    476 | 477 | 478 | 479 |

    Primitive Data Type



    480 |

    Such a data which is not easily changed, means data is changed in difficult way
    481 | There are two tyes of primitive data type 482 |
  • Array
    • 483 |
  • Object
    • 484 |



    485 | 486 | 487 | 488 |

    Array



    489 |

    An array is a special variable, which can hold more than one value at a time. The Syntax of array is different from object An array is start from square brackets.



    490 | Example:
    491 | 492 | let arry(variable name which u want)=["Sultan","Muhammad","Essa"] 493 | 494 | Note:for more detail please visit portion. 495 | 496 |

    497 | 498 | 499 | 500 | 501 |

    Object



    502 |

    An object is a special variable which can hold more than one value at a time.The syntax of array is different from array object is start with curly brackets



    503 | 504 | Example:
    505 | 506 | let obj={ 507 | Fname:"Sultan" 508 | Mname:"Muhammad" 509 | Lname:"Essa-514" 510 | } 511 | 512 | 513 |


    514 |

    515 | 516 | 517 | 518 | 519 |
    520 |
    7
    521 |

    Note:please remove the space from closing tag(body) at bottom of examples.



    522 | 523 | 524 |

    JavaScript Operators



    525 |

    JavaScript Arithmetic Operators



    526 | 527 |

    Arithmetic operators are used to perform arithmetic on numbers (literals or variables).



    528 | 529 | 531 | 532 | 533 | 534 | 535 | 536 | 537 | 538 | 539 | 540 | 541 | 542 | 543 | 544 | 545 | 546 | 547 | 548 | 549 | 550 | 551 | 552 | 553 | 554 | 555 | 556 | 557 | 558 | 559 | 560 | 561 | 562 | 563 |
    530 |
    operatorDescription
    +Addition
    -subtraction
    *multiplication
    /division
    %modulus
    ++increment
    --decrement


    564 | 565 | 566 | 567 | 568 |

    Addition operator:


    569 |

    The addition operator (+) adds numbers



    570 | Example:
    571 | 572 | var x = 5; 573 | var y = 2; 574 | var z = x + y; 575 |

    576 | 577 | 578 | 579 | 580 | 581 |

    Subtraction operator:


    582 |

    The subtraction operator (-) subtract numbers.



    583 | Example:
    584 | 585 | var x = 5; 586 | var y = 2; 587 | var z = x - y; 588 |

    589 | 590 | 591 | 592 | 593 |

    Multiplication operator:


    594 |

    The multiplication operator (*) multiplies numbers.



    595 | Example:
    596 | 597 | var x = 5; 598 | var y = 2; 599 | var z = x * y; 600 |

    601 | 602 | 603 | 604 | 605 | 606 |

    Divide operator:


    607 |

    The divide operator (/) divide numbers.



    608 | 609 | Example:
    610 | 611 | var x = 5; 612 | var y = 2; 613 | var z = x / y; 614 |

    615 | 616 | 617 | 618 |

    increment operator:


    619 |

    The increment operator (++) increment number.



    620 | 621 | Example:
    622 | 623 | var x = 1; 624 | var y = 7; 625 | var z =++x; 626 |

    627 | 628 | 629 | 630 | 631 |

    decrement operator:


    632 |

    The decrement operator (--) decrement number.



    633 | 634 | Example:
    635 | 636 | var x = 3; 637 | var y = 7; 638 | var z =--x; 639 |

    640 | 641 | 642 | 643 |

    JavaScript Assignment Operators



    644 |

    Assignment operators assign values to JavaScript variables.



    645 | 646 | 648 | 649 | 650 | 651 | 652 | 653 | 654 | 655 | 656 | 657 | 658 | 659 | 660 | 661 | 662 | 663 | 664 | 665 | 666 | 667 | 668 | 669 | 670 | 671 | 672 | 673 | 674 | 675 | 676 | 677 | 678 | 679 | 680 | 681 | 682 | 683 | 684 | 685 | 686 | 687 | 688 |
    647 |
    OpreatorsExampleSame As
    =x=yx=y
    +=x+=yx=x+y
    -=x-=yx=x-y
    *=x*=yx=x*y
    /=x/=yx=x/y
    %=x%=yx=x%y


    689 | 690 | 691 |

    Assignment operator(=)



    692 |

    The assignment operator (=) assigns a value to a variable.



    693 | Example:
    694 | var x=7;

    695 | 696 | 697 | 698 |

    addition assignment operator (+=)



    699 |

    The addition assignment operator (+=) adds a value to a variable.



    700 | Example:
    701 | var x = 10; 702 | x += 5;

    703 | 704 | 705 | 706 |

    Subtraction assignment operator (-=)



    707 |

    The Subtraction assignment operator (-=) Subtract a value to a variable.



    708 | Example:
    709 | var x = 10; 710 | x -= 5;

    711 | 712 | 713 | 714 |

    Multplication assignment operator (*=)



    715 |

    The Multiplication assignment operator (*=) Multiply a value to a variable.



    716 | Example:
    717 | var x = 7; 718 | x *= 2;

    719 | 720 | 721 |

    Division assignment operator (/=)



    722 |

    The Division assignment operator (/=) Divide a value to a variable.



    723 | Example:
    724 | var x = 7; 725 | x /= 6;

    726 | 727 | 728 |

    JavaScript String Operators



    729 |

    The + operator can also be used to add (concatenate) strings.



    730 | 731 | Example:

    732 | txt1 = "Sultan";
    733 | txt2 = "Muhammad";
    734 | txt3 = txt1 + " " + txt2;

    735 | The result of txt3 will be:

    736 | Sultan Muhammad 737 |

    738 | 739 | 740 | 741 |

    Adding Strings and Numbers



    742 |

    Adding two numbers, will return the sum, but adding a number and a string will return a string:



    743 | Example:

    744 | x = 2 + 5;
    745 | y = "5" + 5;
    746 | z = "Sultan" + 5;

    747 | 748 | The result of x, y, and z will be:
    749 | 7
    750 | 55
    751 | Sultan

    752 | 753 | 754 | 755 |

    JavaScript Comparison and Logical Operators



    756 | 757 | 759 | 760 | 761 | 762 | 763 | 764 | 765 | 766 | 767 | 768 | 769 | 770 | 771 | 772 | 773 | 774 | 775 | 776 | 777 | 778 | 779 | 780 | 781 | 782 | 783 | 784 | 785 | 786 | 787 | 788 | 789 | 790 | 791 | 792 | 793 | 794 | 795 | 796 | 797 | 798 | 799 | 800 | 801 | 802 | 803 | 804 | 805 | 806 | 807 | 808 |
    758 |
    OperatorsDescription
    ==equal to
    ===equal value and equal type
    !=not equal
    !== Not equal value or not equal type
    >Greater Than
    <Less than
    >=greater than or equal to
    <Less than or equal to
    ?Ternatry operator
    809 | 810 | 811 | 812 |


    813 | 814 | 815 |
    816 |
    8
    817 |

    Note:please remove the space from closing tag(body) at bottom of examples.



    818 | 819 |

    JavaScript Arithmetic



    820 |

    JavaScript Arithmetic Operators



    821 | 822 |

    Arithmetic operators perform arithmetic on numbers (literals or variables).



    823 | 824 | 825 | 827 | 828 | 829 | 830 | 831 | 832 | 833 | 834 | 835 | 836 | 837 | 838 | 839 | 840 | 841 | 842 | 843 | 844 | 845 | 846 | 847 | 848 | 849 | 850 | 851 | 852 | 853 | 854 | 855 | 856 | 857 | 858 | 859 | 860 | 861 | 862 | 863 | 864 | 865 | 866 | 867 |
    826 |
    OperatorDescription
    +Addition
    -Subtraction
    *Multiplication
    /Division
    %Modulus
    ++Increment
    --Decrement


    868 | 869 | 870 | 871 |

    Operators and Operands



    872 |

    The numbers (in an arithmetic operation) are called operands. 873 | The operation (to be performed between the two operands) is defined by an operator.



    874 | 875 | 876 | 878 | 879 | 880 | 881 | 882 | 883 | 884 | 885 | 886 | 887 | 888 | 889 | 890 |
    877 |
    operandoperatoroperand
    12*14


    891 | 892 | 893 | 894 |

    Adding operator



    895 |

    The addition operator (+) adds numbers:



    896 | Example:
    897 | var x = 5;
    898 | var y = 2;
    899 | var z = x + y;

    900 | 901 | 902 |

    Subtraction operator



    903 |

    The subtraction operator (-) subtracts numbers.



    904 | Example:
    905 | var x = 5;
    906 | var y = 2;
    907 | var z = x - y;
    908 | 909 | 910 | 911 |

    Multiplication operator



    912 |

    The multiplication operator (*) multiplies numbers.



    913 | Example:
    914 | var x = 5;
    915 | var y = 2;
    916 | var z = x * y;
    917 | 918 | 919 |

    Division operator



    920 |

    The division operator (/) divides numbers.



    921 | Example:
    922 | var x = 5;
    923 | var y = 2;
    924 | var z = x / y;

    925 | 926 | 927 | 928 |

    Modular operator



    929 |

    The modular operator (%) returns the division remainder.



    930 | Example:
    931 | var x = 5;
    932 | var y = 2;
    933 | var z = x % y;

    934 | 935 | 936 | 937 | 938 |

    Increment operator



    939 |

    The increment operator (++) increments numbers.



    940 | Example:
    941 | var x = 5;
    942 | x++;
    943 | var z = x;

    944 | 945 | 946 |

    Decrement operator



    947 |

    The decrement operator (--) decrements numbers.



    948 | Example:
    949 | var x = 5;
    950 | x--;
    951 | var z = x;

    952 | 953 | 954 |


    955 | 956 |
    957 |
    9
    958 |

    Note:please remove the space from closing tag(body) at bottom of examples.



    959 | 960 | 961 |

    JavaScript Assignment Operators



    962 |

    Assignment operators assign values to JavaScript variables.



    963 | 964 | 965 | 968 | 969 | 970 | 971 | 972 | 973 | 974 | 975 | 976 | 977 | 978 | 979 | 980 | 981 | 982 | 983 | 984 | 985 | 986 | 987 | 988 | 989 | 990 | 991 | 992 | 993 | 994 | 995 | 996 | 997 | 998 | 999 | 1000 | 1001 | 1002 | 1003 | 1004 | 1005 | 1006 | 1007 | 1008 | 1009 | 1010 |
    966 | 967 |
    OperatorExampleSame As
    =x=yx=y
    +=x+=yx=x+y
    -=x-=y x=x-y
    *=x*=yx=x*y
    /=x/yx=x/y
    %=x%yx=x%y


    1011 | 1012 | 1013 |

    = Assignment operator



    1014 |

    The = assignment operator assigns a value to a variable.



    1015 | Example:

    1016 | var a=10; 1017 | let b=5;

    1018 | 1019 | 1020 |

    += Assignment operator



    1021 |

    The += assignment operator adds a value to a variable.



    1022 | Example:
    1023 | var x=10; 1024 | x+=5;


    1025 | 1026 | 1027 |

    -= Assignment operator



    1028 |

    The -= assignment operator subtracts a value from a variable.



    1029 | Exxample:
    1030 | var x=10; 1031 | x-=5;


    1032 | 1033 | 1034 | 1035 |

    *= Assignment operator



    1036 |

    The *= assignment operator multiplies a variable.



    1037 | Example:
    1038 | var x=10; 1039 | x*=5;
    1040 | 1041 | 1042 |

    /= Assignment operator




    1043 |

    The /= assignment divides a variable



    1044 | Example:
    1045 | var x=10; 1046 | var x=5;

    1047 | 1048 | 1049 |

    %= Assignment operator



    1050 |

    The %= assignment operator assigns a remainder to a variable.



    1051 | Example:
    1052 | var x=10; 1053 | x%=5;

    1054 | 1055 | 1056 |

    ^= Assignment operator




    1057 |

    The *= assignment operator multiplies a variable



    1058 | Example:

    1059 | var d=10; 1060 | d+=2;

    1061 |
    alam jamal kamal hanger alam janam


    1062 | 1063 |

    Assignment



    1064 |
    The *= assignment operator multiplies a variable.


    1065 | 1066 | 1067 | 1068 | 1069 | 1070 |

    this is heading



    1071 |

    Lorem ipsum dolor sit amet consectetur adipisicing elit. Vel reprehenderit quod suscipit odit!



    1072 | Example:
    1073 | var x= 10; 1074 |
    1075 | 1076 | 1077 | 1078 | 1079 | 1080 | 1081 |
    1082 | 1083 | 1084 | 1085 | 1086 | 1087 |
    1088 | 1089 | 1090 | 1091 | 1092 | 1093 | 1094 | 1095 | -------------------------------------------------------------------------------- /style.css: -------------------------------------------------------------------------------- 1 | *{ 2 | margin: 0; 3 | padding: 0; 4 | box-sizing: border-box; 5 | } 6 | a{ 7 | color:red; 8 | } 9 | h1 { 10 | color: red; 11 | } 12 | 13 | /* Specific styling for the #well id */ 14 | #well { 15 | color: red; 16 | font-size: 2rem; /* Responsive font size */ 17 | } 18 | 19 | /* Styling the container with id #wel */ 20 | #wel { 21 | background-color: greenyellow; 22 | padding: 20px; 23 | text-align: center; 24 | height: auto; 25 | width: 80%; 26 | margin: 0 auto; 27 | border-radius: 10px; 28 | } 29 | 30 | /* Responsive adjustments */ 31 | @media (max-width: 768px) { 32 | #wel { 33 | width: 90%; /* Slightly narrower width on smaller screens */ 34 | } 35 | 36 | #well { 37 | font-size: 1.5rem; /* Slightly smaller font size */ 38 | } 39 | } 40 | 41 | @media (max-width: 480px) { 42 | #wel { 43 | width: 95%; /* Maximum width for small screens */ 44 | padding: 10px; /* Reduce padding */ 45 | } 46 | 47 | #well { 48 | font-size: 1.2rem; /* Smaller font size for mobile screens */ 49 | } 50 | } 51 | 52 | /* for content */ 53 | /* Basic reset */ 54 | * { 55 | margin: 0; 56 | padding: 0; 57 | box-sizing: border-box; 58 | } 59 | 60 | body { 61 | font-family: Arial, sans-serif; 62 | background-color: #f4f4f4; 63 | } 64 | 65 | /* Content container styling */ 66 | #content { 67 | background-color: yellowgreen; 68 | text-align: left; /* Change to left-align for better readability */ 69 | height: auto; /* Let the height be determined by content */ 70 | max-height: 80vh; /* Prevent overflow by setting a max height */ 71 | width: 80%; 72 | margin: 0 auto; 73 | overflow-y: auto; 74 | border: 7px double red; 75 | border-radius: 20px; /* Simplified for better responsiveness */ 76 | padding: 20px; /* Add padding for better spacing */ 77 | } 78 | 79 | /* Responsive typography */ 80 | h1 { 81 | font-size: 2rem; 82 | margin-bottom: 20px; 83 | } 84 | 85 | h3 { 86 | font-size: 1.2rem; 87 | line-height: 1.5; 88 | } 89 | 90 | li { 91 | list-style-type: none; 92 | margin: 10px 0; 93 | } 94 | 95 | a { 96 | text-decoration: none; 97 | color: blue; 98 | } 99 | 100 | /* Media queries for responsiveness */ 101 | @media (max-width: 768px) { 102 | #content { 103 | width: 90%; 104 | padding: 15px; 105 | } 106 | 107 | h1 { 108 | font-size: 1.8rem; 109 | } 110 | 111 | h3 { 112 | font-size: 1rem; 113 | } 114 | } 115 | 116 | @media (max-width: 480px) { 117 | #content { 118 | width: 95%; 119 | padding: 10px; 120 | } 121 | 122 | h1 { 123 | font-size: 1.5rem; 124 | } 125 | 126 | h3 { 127 | font-size: 0.9rem; 128 | } 129 | 130 | li { 131 | margin: 8px 0; 132 | } 133 | } 134 | 135 | 136 | main{ 137 | background-color: black; 138 | 139 | } 140 | 141 | #intro{ 142 | background-color: transparent; 143 | color: greenyellow; 144 | text-align: center; 145 | height: 70vh; 146 | width: 80%; 147 | margin: 0% auto; 148 | overflow-y: auto; 149 | border: 7px double darkred; 150 | 151 | 152 | } 153 | #whereto{ 154 | background-color: transparent; 155 | color: greenyellow; 156 | 157 | text-align: center; 158 | height: 80vh; 159 | width: 80%; 160 | margin: 0% auto; 161 | border: 7px double darkred; 162 | 163 | overflow-y: scroll; 164 | } 165 | 166 | #output{ 167 | background-color: transparent; 168 | color: greenyellow; 169 | text-align: center; 170 | height: 80vh; 171 | width: 80%; 172 | margin: 0% auto; 173 | overflow-y: auto; 174 | border: 7px double darkred; 175 | } 176 | #JavaScripSyntax{ 177 | background-color: transparent; 178 | color: greenyellow; 179 | text-align: center; 180 | height: 80vh; 181 | width: 80%; 182 | margin: 0% auto; 183 | overflow-y: auto; 184 | border: 7px double darkred; 185 | } 186 | #javascriptcoment{ 187 | background-color: transparent; 188 | color: greenyellow; 189 | text-align: center; 190 | height: 80vh; 191 | width: 80%; 192 | margin: 0% auto; 193 | overflow-y: auto; 194 | border: 7px double darkred; 195 | } 196 | #javascriptVariable{ 197 | background-color: transparent; 198 | color: greenyellow; 199 | text-align: center; 200 | height: 80vh; 201 | width: 80%; 202 | margin: 0% auto; 203 | overflow-y: auto; 204 | border: 7px double darkred; 205 | } 206 | 207 | 208 | #operators{ 209 | background-color: transparent; 210 | color: greenyellow; 211 | text-align: center; 212 | height: 80vh; 213 | width: 80%; 214 | margin: 0% auto; 215 | overflow-y: auto; 216 | border: 7px double darkred; 217 | } 218 | #arithmetic{ 219 | background-color: transparent; 220 | color: greenyellow; 221 | text-align: center; 222 | height: 80vh; 223 | width: 80%; 224 | margin: 0% auto; 225 | overflow-y: auto; 226 | border: 7px double darkred; 227 | } 228 | 229 | #Assignment{ 230 | background-color: transparent; 231 | color: greenyellow; 232 | text-align: center; 233 | height: 80vh; 234 | width: 80%; 235 | margin: 0% auto; 236 | overflow-y: auto; 237 | border: 7px double darkred; 238 | } 239 | #jhuhgd{ 240 | background-color: transparent; 241 | color: greenyellow; 242 | text-align: center; 243 | height: 80vh; 244 | width: 80%; 245 | margin: 0% auto; 246 | overflow-y: auto; 247 | border: 7px double darkred; 248 | } 249 | #jhuhgd{ 250 | background-color: transparent; 251 | color: greenyellow; 252 | text-align: center; 253 | height: 80vh; 254 | width: 80%; 255 | margin: 0% auto; 256 | overflow-y: auto; 257 | border: 7px double darkred; 258 | } 259 | #jhuhgd{ 260 | background-color: transparent; 261 | color: greenyellow; 262 | text-align: center; 263 | height: 80vh; 264 | width: 80%; 265 | margin: 0% auto; 266 | overflow-y: auto; 267 | border: 7px double darkred; 268 | } --------------------------------------------------------------------------------