DOM-CSS

AzharAli-github · AzharAli-github · commit 20f1e9b4783e · 2023-01-29T14:17:46.000+05:00
diff --git a/JavaScript/Advance/DOM/6. DOM CSS/Images/js-logo.png b/JavaScript/Advance/DOM/6. DOM CSS/Images/js-logo.png
diff --git a/JavaScript/Advance/DOM/6. DOM CSS/index.html b/JavaScript/Advance/DOM/6. DOM CSS/index.html
@@ -0,0 +1,26 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>DOM-CSS</title>
+    <link rel="stylesheet" href="style.css">
+</head>
+
+<body>
+    <h1>DOM CSS</h1>
+    <h2>Example One</h2>
+    <p id="textOne">Hello there</p>
+    <button onclick="DisplayOne()">Click</button>
+    <h2>Example Two</h2>
+    <p id="textTwo">Hello there</p>
+    <button onclick="DisplayTwo()">Click</button>
+    <h2>Example Three</h2>
+    <p id="textThree">Hello there</p>
+    <button onclick="DisplayThree()">Click</button>
+    <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/JavaScript/Advance/DOM/6. DOM CSS/script.js b/JavaScript/Advance/DOM/6. DOM CSS/script.js
@@ -0,0 +1,20 @@
+let textOne = document.getElementById('textOne');
+
+function DisplayOne() {
+    textOne.style.color = "red";
+}
+
+let textTwo = document.getElementById('textTwo');
+
+function DisplayTwo() {
+    textTwo.style.fontSize = "30px";
+}
+
+let textThree = document.getElementById('textThree');
+
+function DisplayThree() {
+    textThree.style.fontFamily = "monospace";
+    textThree.style.fontSize = "30px";
+    textThree.style.color = "blue";
+    textThree.style.fontWeight = "700";
+}
diff --git a/JavaScript/Advance/DOM/6. DOM CSS/style.css b/JavaScript/Advance/DOM/6. DOM CSS/style.css
@@ -0,0 +1,3 @@
+h2 {
+    font-family: monospace;
+}

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+h2 {`
	`2`	`+ font-family: monospace;`
	`3`	`+}`