EXERCISE 1.Change Text on Button Click
PROGRAM:
<body>
<h1 id="text">welcome JavaScript</h1>
<button id="but" onclick="changetext()">change</button>
<script>
const heading = document.getElementById("text")
function changetext() {
heading.innerText="welcome DOM";
}
</script>
OUTPUT:
EXERCISE 2. Light ON/OFF
PROGRAM:
<body>
<img id="bulb-img" src="https://www.w3schools.com/js/pic_bulboff.gif" alt="">
<button style="color: green; padding: 10px 15px; border-radius: 20px; font-size: medium;" id="bnt1" onclick="bulb_change()">ON</button>
<!-- <button id="butt2" onclick="bulb_normal()">off</button> -->
<script>
function bulb_change() {
const bnt = document.getElementById("bnt1")
const bulb = document.getElementById("bulb-img")
if(bulb.src == "https://www.w3schools.com/js/pic_bulboff.gif"){
bulb.src = "https://www.w3schools.com/js/pic_bulbon.gif"
bnt.innerText="OFF";
bnt.style.color="red"
}
else{
bulb.src = "https://www.w3schools.com/js/pic_bulboff.gif"
bnt.innerText="ON";
bnt.style.color="green"
}
}
OUTPUT:
EXERCISE 3. Count Number
PROGRAM:
<body>
<h1>Count = <span id="number">0</span></h1>
<button id="butt_add" onclick="increase()">+</button>
<button id="butt_sub" onclick="decrease()">-</button>
<button id="but_reset" onclick="Reset()">Reset</button>
<script>
const number_input = document.getElementById("number")
let i = 0;
function increase() {
i++;
number_input.innerText = i;
}
function decrease(){
if(i > 0){
i--;
number_input.innerText = i;
}
}
function Reset() {
i = 0;
number_input.innerText = i;
}
OUTPUT:
EXERCISE 4. Live Character Counter
PROGRAM:
<body>
<input id="user-input" type="text" oninput="calculate()">
<h1 id="result">Count = <span id="number">0</span></h1>
<script>
function calculate() {
const num = document.getElementById("number")
const user = document.getElementById("user-input")
num.innerText = user.value.length;
}
OUTPUT:
