Commit

2021-11-24 20:46:13 +05:30
parent 7bd1867b6a
commit 7c614785bd
29 changed files with 0 additions and 0 deletions
@@ -0,0 +1,7 @@
+<body>
+    <div id="one">Hello World</div>
+<script>
+    const myEle = document.getElementById("one");
+    console.log(myEle);
+</script>
+</body>
@@ -0,0 +1,7 @@
+    <div >Hello World 1</div>
+    <div >Hello World 2</div>
+    <div >Hello World 3</div>
+<script>
+    const myEles = document.getElementsByTagName("div");
+    console.log(myEles[1]);
+</script>
@@ -0,0 +1,9 @@
+<body>
+    <div class="ele">Hello World 1</div>
+    <div >Hello World 2</div>
+    <div class="ele">Hello World 3</div>
+<script>
+    const myEles = document.getElementsByClassName("ele");
+    console.log(myEles[0]);
+</script>
+</body>
@@ -0,0 +1,37 @@
+<!DOCTYPE html>
+<html>
+
+<head>
+    <title>Complete JavaScript Course</title>
+    <style>
+        .holder {
+            display: inline-block;
+            width: 300px;
+            height: 300px;
+            border: 1px solid black;
+            padding: 10px;
+        }
+
+        .active {
+            background-color: red;
+        }
+    </style>
+</head>
+
+<body> 
+      <div class="holder">   
+            <div id="output"></div>   
+    </div>   
+    <script>     
+        const ele = document.querySelector('.holder');
+        ele.addEventListener('mouseover', () => { this.classList.add('active'); })
+        ele.addEventListener('mouseout', () => { this.classList.remove('active'); })
+        ele.addEventListener('mousemove', coordin);
+        function coordin() {
+            let html = "X:" + event.clientX + " | Y:" + event.clientY;
+            document.getElementById('output').innerHTML = html;
+        }
+    </script>
+</body>
+
+</html>
@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html>
+<head>    <title>Complete JavaScript Course</title>   
+</head>
+<body>   
+        <div> 
+        <input type="text" id="addItem">       
+        <input type="button" id="addNew" value="Add to List">
+    </div>      
+      <h1>Shopping List</h1> 
+    <ol id="sList"> </ol> 
+     
+    <script> 
+        const myItem = document.querySelector('#addItem');
+        const btn = document.querySelector('#addNew');
+        const myList = document.querySelector('#sList');
+        btn.addEventListener('click', (e) => {
+            let val = myItem.value;
+            const li = document.createElement('li');
+            li.textContent = val;
+            myList.append(li);
+        })
+    </script>
+</body>
+</html>
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+<html>
+<head>
+    <title>Star Rater</title>
+    <style>
+        .stars ul {
+            list-style-type: none;
+            padding: 0;
+        }
+        .star {
+            font-size: 2em;
+            color: #ddd;
+            display: inline-block;
+        }
+        .orange {
+            color: orange;
+        }
+        .output {
+            background-color: #ddd;
+        }
+    </style>
+</head>
+
+<body>
+    <ul class="stars">
+        <li class="star">&#10029;</li>
+        <li class="star">&#10029;</li>
+        <li class="star">&#10029;</li>
+        <li class="star">&#10029;</li>
+        <li class="star">&#10029;</li>
+    </ul>
+    <div class="output"></div>
+    <script>
+        const starsUL = document.querySelector('.stars');
+        const output = document.querySelector('.output');
+        const stars = document.querySelectorAll('.star');
+        stars.forEach((star, index) => {
+            star.starValue = (index + 1);
+            star.addEventListener('click', starRate);
+        })
+
+        function starRate(e) {
+                output.innerHTML = `You Rated this ${e.target.starValue} stars`;
+                stars.forEach((star, index) => {
+                if (index < e.target.starValue) {
+                    star.classList.add('orange');
+                } else {
+                    star.classList.remove('orange');
+                }
+            })
+        }
+
+    </script>
+</body>
+</html>
@@ -0,0 +1,61 @@
+<!DOCTYPE html>
+<html>
+
+<head>    <title>Complete JavaScript Course</title>   
+</head>
+
+<body>   
+    <div id="message">Complete JavaScript Course</div>   
+    <div>     
+        <input type="text" id="addFriend">
+        <input type="button" id="addNew" value="Add Friend">
+    </div>   
+    <table id="output"></table>   
+    <script>
+        window.onload = build;
+        const myArray = ["Laurence", "Mike", "John", "Larry"];
+        const message = document.getElementById('message');
+        const addNew = document.getElementById('addNew');
+        const newInput = document.getElementById('addFriend');
+        const output = document.getElementById('output');
+
+        addNew.onclick = function () {
+            const newFriend = newInput.value;
+            adder(newFriend, myArray.length, 0);
+            myArray.push(newFriend);
+        }
+
+        function build() {
+            myArray.forEach((item, index) => {
+                adder(item, index, 0)
+            })
+        }
+
+        function adder(name, index, counter) {
+            const tr = document.createElement('tr');
+            const td1 = document.createElement('td');
+            td1.classList.add('box');
+            td1.textContent = index + 1;
+            const td2 = document.createElement('td');
+            td2.textContent = name;
+            const td3 = document.createElement('td');
+            td3.textContent = counter;
+            tr.append(td1);
+            tr.append(td2);
+            tr.append(td3);
+            tr.addEventListener('click', (e) => {
+                console.log(tr.lastChild);
+                let val = Number(tr.lastChild.textContent);
+                val++;
+                tr.lastChild.textContent = val;
+            })
+            output.appendChild(tr);
+        }
+
+
+
+
+    </script>
+</body>
+
+</html>