compleate practice

saiful-global · saiful-global · commit 9b553e81c9c2 · 2026-04-05T15:32:56.000+06:00
diff --git a/README.md b/README.md
@@ -0,0 +1 @@
+# javascript-practice-6-
diff --git a/css/style.css b/css/style.css
@@ -0,0 +1,3 @@
+/* h3{
+    background: linear-gradient(90deg, #1100ff ,#9d00ff);
+} */
diff --git a/index.html b/index.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Class 22 practice</title>
+    <link rel="stylesheet" href="css/style.css">
+</head>
+<body>
+ 
+    <div id="demo">
+        <h1></h1>
+    </div>
+    <br>
+    <br>
+    <button onclick="add()">Add BG</button>
+    <button onclick="r()">Radius</button>
+    <button onclick="t()">text</button>
+    <button onclick="c()">text center</button>
+
+
+<script src="js/script.js"></script>    
+</body>
+</html>
diff --git a/js/script.js b/js/script.js
@@ -0,0 +1,178 @@
+// DOM ->Document Object Model
+
+// let head = document.getElementById('demo')
+// head.innerHTML = 'hello'
+
+// let head = document.getElementsByClassName('demo')
+// head[0].innerHTML = 'Saiful'
+
+// let head = document.getElementsByTagName('h1')
+// head[0].innerHTML = 'adad'
+
+// let head = document.querySelector('h1')
+// head.innerHTML = 'adksdn'
+
+// let head = document.querySelector('.demo')
+// head.innerHTML = 'adksdn'
+
+// let headings = document.querySelectorAll('h2')
+// console.log(headings);
+
+// selecting attribute / set attribut
+
+// let div = document.getElementById('demo')
+// // console.log(div.getAttribute('width'));
+// // console.log(div.getAttribute('height'));
+// div.innerHTML = '<h1>Hi</h1>'
+
+
+
+// let input = document.querySelector('input')
+// // let h3 = document.querySelector('h3')
+// // console.log(input.value);
+// // console.log(h3.textContent);
+// input.setAttribute('value',10)
+
+
+function add () {
+    let div = document.getElementById('demo')
+    div.style.width = '200px'
+    div.style.height = '200px'
+    div.style.background = 'linear-gradient(90deg, #1100ff ,#9d00ff)'
+    div.style.transition = 'all linear .3s'
+}
+function r() {
+    let div = document.getElementById('demo')
+    div.style.borderRadius = '50%'
+    div.style.transition = 'all linear .3s'
+}
+function t() {
+    let div = document.getElementById('demo')
+    div.innerHTML = 'SAIFUL'
+    div.style.color = 'red'
+    div.style.fontSize = '50px'
+    div.style.transition = 'all linear .3s'
+}
+function c() {
+    let div = document.getElementById('demo')
+    div.style.textAlign = 'center'
+    div.style.lineHeight = '200px'
+    div.style.color = 'white'
+    div.style.background = 'linear-gradient(90deg, #ff5900ff ,#9d00ff)' 
+    div.style.transition = 'all linear .3s'
+}
+
+// events
+ 
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+

Original file line number	Diff line number	Diff line change
`@@ -0,0 +1,3 @@`
	`1`	`+/* h3{`
	`2`	`+ background: linear-gradient(90deg, #1100ff ,#9d00ff);`
	`3`	`+} */`