renamed

2021-11-25 20:26:58 +05:30
parent 1a19d738a9
commit 569d90f511
52 changed files with 0 additions and 177 deletions
@@ -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>
@@ -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>
@@ -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>