renamed
This commit is contained in:
Karan
parent
1a19d738a9
commit
569d90f511
@ -1,50 +0,0 @@
|
||||
<!doctype html>
|
||||
<html>
|
||||
|
||||
<head>
|
||||
<title>JS Tester</title>
|
||||
<style>
|
||||
.active {
|
||||
display: block !important;
|
||||
}
|
||||
|
||||
.myText {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.title {
|
||||
font-size: 1.5em;
|
||||
background-color: #ddd;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="title">Title #1</div>
|
||||
<div class="myText">Just some text #1</div>
|
||||
<div class="title">Title #2</div>
|
||||
<div class="myText">Just some text #2</div>
|
||||
<div class="title">Title #3</div>
|
||||
<div class="myText">Just some text #3</div>
|
||||
</div>
|
||||
<script>
|
||||
const menus = document.querySelectorAll('.title');
|
||||
const openText = document.querySelectorAll('.myText');
|
||||
|
||||
menus.forEach((el) => {
|
||||
el.addEventListener('click', (e) => {
|
||||
console.log(el.nextElementSibling);
|
||||
remover();
|
||||
el.nextElementSibling.classList.toggle('active');
|
||||
})
|
||||
})
|
||||
|
||||
function remover() {
|
||||
openText.forEach((ele) => {
|
||||
ele.classList.remove('active');
|
||||
})
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
35
chapter 9.1
35
chapter 9.1
@ -1,35 +0,0 @@
|
||||
<div >
|
||||
<button onclick="message(this)">Button 1</button>
|
||||
<button onclick="message(this)">Button 2</button>
|
||||
</div>
|
||||
<script>
|
||||
function message(el){
|
||||
console.dir(el);
|
||||
}
|
||||
</script>
|
||||
|
||||
|
||||
|
||||
|
||||
<!doctype html>
|
||||
<html>
|
||||
<head>
|
||||
<title>JS Tester</title>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="myEle">One</div>
|
||||
<div class="myEle">Two</div>
|
||||
<div class="myEle">Three</div>
|
||||
<div class="myEle">Four</div>
|
||||
<div class="myEle">Five</div>
|
||||
</div>
|
||||
<script src="app.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
const eles = document.querySelectorAll('.myEle');
|
||||
console.log(eles);
|
||||
eles.forEach((el)=>{
|
||||
console.log(el);
|
||||
})
|
||||
@ -1,31 +0,0 @@
|
||||
<!DOCTYPE html>
|
||||
<html>
|
||||
<head> <title>Complete JavaScript Course</title>
|
||||
</head>
|
||||
<body>
|
||||
<div id="message">Complete JavaScript Course</div> <div id="output"></div>
|
||||
<script>
|
||||
window.onload = build;
|
||||
const myArray = ["Laurence", "Mike", "John", "Larry", "Kim", "Joanne", "Lisa", "Janet", "Jane"];
|
||||
const message = document.getElementById('message');
|
||||
function build() {
|
||||
let html = "<h1>My Friends Table</h1><table>";
|
||||
myArray.forEach((item, index) => {
|
||||
html += `<tr data-row="${index}"><td>${item}</td>`;
|
||||
html += `<td class="box">${index + 1}</td></tr>`;
|
||||
})
|
||||
html += '</table>';
|
||||
document.getElementById('output').innerHTML = html;
|
||||
const boxes = document.querySelectorAll('#output .box');
|
||||
boxes.forEach((el) => {
|
||||
el.addEventListener('click', (e) => {
|
||||
let par = el.closest('[data-row]')
|
||||
let temp = par.getAttribute('data-row');
|
||||
let tempName = par.firstChild.textContent;
|
||||
message.innerHTML = `${tempName } is in row #${temp}`;
|
||||
})
|
||||
})
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
61
voter
61
voter
@ -1,61 +0,0 @@
|
||||
<!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>
|
||||
Loading…
x
Reference in New Issue
Block a user