function, arrow function & onclick function 🔒

zahid-jibon · zahid-jibon · commit 33eeba00e88a · 2022-09-04T01:27:50.000+06:00
diff --git a/CSS/style.css b/CSS/style.css
@@ -0,0 +1,13 @@
+body{
+    background-color: black;
+    color: white;
+}
+
+.top{
+    text-align: center;
+    margin: 10px;
+}
+
+#title{
+    text-align: center;
+}
diff --git a/index.html b/index.html
@@ -4,9 +4,45 @@
     <meta charset="UTF-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+    <!-- Boostrap CSS -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
+
+    <!-- Custome CSS -->
+    <link rel="stylesheet" href="./CSS/style.css">
     <title>JS Practice</title>
 </head>
 <body>
+
+   <h1 class="top">Java-Script Practice</h1>
+
+   <br>
+
+    <h2 id="heading"></h2>
+
+    <br>
     
+    <h3 id="write"></h3>
+
+    <br>
+
+    <!-- Function -->
+
+    <button id="plus"  type="button" class="btn btn-danger" onclick="sum()">Click me</button>
+
+    <br>
+
+    <h3 id="title"></h3>
+    <button type="button" class="btn btn-danger" onclick="display()">Display</button>
+    <button  type="button" class="btn btn-danger" onclick="back()">Back</button>
+
+    
+
+   <!-- Boostrap JS -->
+   <script src="https://cdn.jsdelivr.net/npm/jquery@3.5.1/dist/jquery.slim.min.js" integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
+   <script src="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/js/bootstrap.bundle.min.js" integrity="sha384-Fy6S3B9q64WdZWQUiU+q4/2Lc9npb8tCaSX9FK7E8HnRr0Jz8D6OP9dO5Vg3Q9ct" crossorigin="anonymous"></script>
+
+    <!-- Custome JS -->
+   <script src="./js/script.js"></script>
 </body>
 </html>
diff --git a/js/script.js b/js/script.js
@@ -0,0 +1,32 @@
+// intro
+
+document.getElementById("heading").innerHTML="Hello Zahid";
+document.getElementById("heading").style.color="red";
+document.getElementById("heading").style.backgroundColor="yellow";
+
+// Write Method
+
+document.write("Thank you for comming Here");
+
+// Alert Method
+
+window.alert("Do you really want to see this ??");
+
+// Functiion
+
+// sum
+const sum = ()=>{
+    var a = 7.5;
+    var b = 5;
+    var c = a + b;
+    console.log("The value of a+b is: " ,c);
+};
+
+// arrow function
+ const display = ()=>(
+    document.getElementById("title").innerHTML="Yo Hoo!"
+ );
+
+ const back = ()=>(
+    document.getElementById("title").style.display="none"
+ );
