├── README.md
├── index5.html
├── index1.html
├── index7.html
├── index3.html
├── index4.html
├── index6.html
├── index2.html
└── todo.html


/README.md:
--------------------------------------------------------------------------------
1 | # js-basic-projects


--------------------------------------------------------------------------------
/index5.html:
--------------------------------------------------------------------------------
1 | <button id="btn" onclick="up()">change colour</button>
2 | 
3 | <script>
4 |     var btn=document.getElementById("btn")
5 |     function up(){
6 |         btn.style.backgroundColor="blue"
7 |     }
8 | </script>


--------------------------------------------------------------------------------
/index1.html:
--------------------------------------------------------------------------------
 1 | <h1 id = "h1">Hello world</h1>
 2 | <button onclick="change()">change</button>
 3 | <script>
 4 |     var h1 = document.getElementById("h1")
 5 |     console.log(h1.textContent)
 6 |     function change()
 7 |     {
 8 |     h1.textContent="Bye world"
 9 |     }
10 | 
11 | </script>


--------------------------------------------------------------------------------
/index7.html:
--------------------------------------------------------------------------------
 1 | <h1 onclick="deleteitem(event)">1</h1>
 2 | <h1 onclick="deleteitem(event)">2</h1>
 3 | <h1 onclick="deleteitem(event)">3</h1>
 4 | <h1 onclick="deleteitem(event)">4</h1>
 5 | 
 6 | <script>
 7 |     function deleteitem(event){
 8 |         event.target.remove()
 9 |     }
10 | </script>
11 | 


--------------------------------------------------------------------------------
/index3.html:
--------------------------------------------------------------------------------
 1 | <input id="inputbox" onkeyup="update()">
 2 | <h1 id="result"></h1>
 3 | <script>
 4 |     var inputbox=document.getElementById("inputbox")
 5 |     var result=document.getElementById("result")
 6 |     function update()
 7 |     {
 8 |         result.textContent=inputbox.value
 9 |     }
10 | </script>


--------------------------------------------------------------------------------
/index4.html:
--------------------------------------------------------------------------------
 1 | <button onclick="update()">Add</button>
 2 | <div id="result">
 3 | 
 4 | </div>
 5 | 
 6 | <script>
 7 |     var div=document.getElementById("result")
 8 | 
 9 |     function update(){
10 |         var listitem=document.createElement("h1")
11 |         listitem.textContent="hello"
12 |         div.append(listitem)
13 |     }
14 | </script>


--------------------------------------------------------------------------------
/index6.html:
--------------------------------------------------------------------------------
 1 | <h1 id="res">Name</h1>
 2 | <button onclick="up(event)">praveen</button>
 3 | <button onclick="up(event)">Muthu</button>
 4 | <button onclick="up(event)">Raja</button>
 5 | <button onclick="up(event)">Keerthana</button>
 6 | <script>
 7 |     var h1=document.getElementById("res")
 8 |     function up(event){
 9 |         h1.textContent=event.target.textContent
10 |     }
11 | </script>


--------------------------------------------------------------------------------
/index2.html:
--------------------------------------------------------------------------------
 1 | <input id ="num1">
 2 | <input id="num2">
 3 | <button onclick="resultfunction()">add</button>
 4 | <p id="result">Result</p>
 5 | <script>
 6 |     var box1=document.getElementById("num1")
 7 |     var box2=document.getElementById("num2")
 8 |     var result=document.getElementById("result")
 9 | 
10 |     function resultfunction(){
11 |         var box1value = Number(box1.value)
12 |         var box2value = Number(box2.value)
13 |         var total = box1value+box2value
14 |         result.textContent=total
15 |     }
16 | </script>


--------------------------------------------------------------------------------
/todo.html:
--------------------------------------------------------------------------------
 1 | <input id="input">
 2 | <button onclick="add()">Add</button>
 3 | <ul id="list-container">
 4 |     <li>good morning strat your day
 5 |         <button onclick="deleteItem(event)">Thankyou</button>
 6 |     </li>
 7 | </ul>
 8 | 
 9 | <script>
10 |     var ul=document.getElementById("list-container")
11 |     var input=document.getElementById("input")
12 |     function add(){
13 |         var listitem=document.createElement("li")
14 |         listitem.innerHTML=input.value + "<button onclick='deleteItem(event)'>ThankYou</button>"
15 |         ul.append(listitem)  
16 |         }
17 |         function deleteItem(event){
18 |             event.target.parentElement.remove()
19 |         }
20 | </script>


--------------------------------------------------------------------------------