JAVASCRIPT CA2111 20/1/2023

Ch5 Document Object Model

1.qor program kusoo daawacaayo taaga iyo qoraalka ku dhex qoran?
   <h1 id="demo">welcome to somalia</h1>
    <script>
   
        let h=document.getElementById("demo")
        console.log(h)
   
    </script>
Ans: <h1 id="demo">welcome to somalia</h1>
2.qor program soo daawacaayo qoraalka taaga ku dhex jiro bis?
  <p id="aniso">hello anisa</p>
    <script>
        let a=document.getElementById("aniso")
        console.log(a.textContent)

    </script>
Ans:hello anisa
3.qor program markaa buttonka click siiso qoraalka taaga ku dhex qoran
uu u badalaayo qoraal kale ?
  <h1 id="aniso">welcome to the world</h1>
    <script>
        function myfun(){
            let p=document.getElementById("aniso").innerHTML="somalia waa dalka
ugu fiican africa"
        }
    </script>
    <button onClick="myfun()">Riix Halkan</button>
Ans: somalia waa dalka ugu fiican africa

4.qor program marka buttonka click lasiiyo taaga qoraalka ku qoran uu

background kiisa iyo fontsize kiisa iyo colorkiisa isbadalaayo?
  <p id="demo">welcome to js</p>

    <script>

PREPARED BY ANISA HASSAN ABDULLAHI

JAVASCRIPT CA2111 20/1/2023

        function myfun(){

           
           
           
            document.getElementById("demo").style.fontSize="60px"
            document.getElementById("demo").style.background="yellow"
            document.getElementById("demo").style.color="red"
           
        }

    </script>
    <button onClick="myfun()">riix halkan</button>
Ans:………
5.qor program marka buttonka click lasiiyo uu qoraalka taga ku qoran
qarsamaayo?
   <h1 id="demo">hello world</h1>
    <script>
        function myfun(){
            document.getElementById("demo").style.display="none"

        }
    </script>
    <button onClick="myfun()">
        click sii
    </button>
6.qor program marka hore qoraalka uu qarsan yahay marka buttonka
click lasiiyana uu qoraalka soo muuqanaayo?
   <h1 id="demo" style="display:none;">welcome to somalia</h1>
    <script>
        function myfun(){
            document.getElementById("demo").style.display="block"

        }
    </script>
    <button onClick="myfun()">click sii</button>
7.qor program aad kusoo aqrineesid getElementsByName adigoo
sheegaayo total genderka?
     <script>

PREPARED BY ANISA HASSAN ABDULLAHI

JAVASCRIPT CA2111 20/1/2023

        function myfun(){
            let a=document.getElementsByName("gender")
            alert("total gender"+a.length)
        }
    </script>
    <form >
     male:<input type="radio" name="gender" value="male">
     female: <input type="radio" name="gender" value="female">
     <input type="button"  value="click here" onClick="myfun()">
    </form>
8.qor program adigoo isticmaaleesid getElementsByTagName adigoo
sheegaayo taaga aa u yeertay inta xabo ee Meesha ku qoran?
 <p>welcome anisa</p>
    <p>welcome anisa</p>
    <p>welcome anisa</p>
    <p>welcome anisa</p>
    <script>
        function myfun(){
            let s=document.getElementsByTagName("p")
            document.write("total paraghraph:"+s.length)
        }
    </script>
    <form >
        <input type="button" value="click here" onClick="myfun()">
    </form>
9.qor program adigoo isticmaalaayo getElementsByClassName adigoo
colorka ka badalaayo all tagska?
<P class="demo">first paraghraph</P>
<P class="demo">second paraghraph</P>
<P class="demo">third paraghraph</P>
<script>

function myfun(){
    let a=document.getElementsByClassName("demo")
    a[0].style.color="red"
    a[1].style.color="yellow"
    a[2].style.color="blue"

}
</script>
<button onClick="myfun()">click here</button>
Or
Qaabkana waa qaab oo condition ku xiran yahay..

PREPARED BY ANISA HASSAN ABDULLAHI

JAVASCRIPT CA2111 20/1/2023

<P class="demo">first paraghraph</P>

<P class="demo">second paraghraph</P>
<P class="demo">third paraghraph</P>
<script>
    function myfun(){
        let s=document.getElementsByClassName("demo")
        for(let i=0;i<s.length;i++){
            s[i].style.color="blue"
            s[i].style.fontsize="20px"
            s[i].style.backgroundColor="red"
        }

    }
</script>
<button onClick="myfun()">click here</button>
10.qor program insertBefore kuu sameenaayo?
   <p>first</p>
    <p>second</p>
    <p>third</p>
    <script>
        function myfun(){
            let r=document.body.getElementsByTagName("p")
            document.body.insertBefore(r[2],r[0])
        }
    </script>
    <button onClick="myfun()">click siii</button>
   <p>first</p>
    <p>second</p>
    <p>third</p>
    <script>
        function myfun(){
            let r=document.body.getElementsByTagName("p")
            document.body.insertBefore(r[2],r[0])
        }
    </script>
    <button onClick="myfun()">click siii</button>
10.
   <p>And if you go chasing
    <span class="animal">rabbits</span></p>
    <p>And you know you're going to fall</p>
    <p>Tell 'em a <span id="character">hookah smoking
    <span class="animal">caterpillar</span></span></p>
    <p>Has given you the call</p>

PREPARED BY ANISA HASSAN ABDULLAHI

JAVASCRIPT CA2111 20/1/2023

    <script>
        function count(selector){
            return document.querySelectorAll(selector).length
        }
        console.log(count("p"))
    </script>

11.setInterval
   <p id="demo">50</p>
    <script>
        let count=document.getElementById("demo")
        let countdown=function(){
            count.textContent=parseFloat(count.textContent)-1
        }
        window.setInterval(countdown,1000)
    </script>
12.setTimeout
   <p id="demo">60</p>
    <script>
        let count=document.getElementById("demo")
        let countdown=function(){
            count.textContent=parseInt(count.textContent)-1
        }
        window.setTimeout(countdown,1000)
    </script>
13.window clearTimeout
  <p id="demo">
        60
        <script>
            let count=document.querySelector("#demo")
            let countdown=function(){
                let current=parseInt(count.textContent)
                if(current>0){
                    count.textContent=current-1
                }
                else{
                    window.clearTimeout(timer)
                }
            }
            let timer=window.setInterval(countdown,100)
        </script>
14.javascript program marka la abuuraayo qaabka loo abuuro
 <script>
       let paragraph=document.createElement("p")

PREPARED BY ANISA HASSAN ABDULLAHI

JAVASCRIPT CA2111 20/1/2023

      paragraph.id="demo"
      paragraph.setAttribute("id","anisa")
      paragraph.textContent="welcome to somalia"
      document.body.appendChild(paragraph)
     
       console.log(paragraph)
 </script>
15.html qoraal lagu qoray iyo mid javascript lagu qoray marka la
isbarbardhiigaayo?
    <h1 id="re">hello world</h1>
    <script>
        let head=document.createElement("h1")
        let h1=document.getElementById("re")
        head.setAttribute("class","anisa")
        head.textContent="hello anisa"
        document.body.appendChild(head)
        document.body.replaceChild(head,h1)
        document.body.removeChild(h1)
        document.body.insertBefore(head,h1)
        console.log(head)
    </script>

Quizkii 2aad

1.write a program to enter two numbers and multiply it?

   <form>
        number1: <input type="text" placeholder="enter num1" id="num1">
        number2: <input type="text" placeholder="enter num2" id="num2">
        <button onClick="myfun()">click here</button>
    </form>
    <script>
        function myfun(){
            let num1=Number(document.getElementById("num1").value)
            let num2=Number(document.getElementById("num2").value)
           let num3=num1*num2
           document.write(num3)
        }
    </script>
2.write a program to modify font color of 3 paragraph using TagName?
    <p>first paragraph</p>
    <p>second paragraph</p>

PREPARED BY ANISA HASSAN ABDULLAHI

JAVASCRIPT CA2111 20/1/2023

    <p>third paragraph</p>
    <button onClick="myfun()">click here</button>
    <script>
        function myfun(){
            let p=document.getElementsByTagName("p")
            for(let i=0;i<p.length;i++){
                p[i].style.color="red"
            }
               
           

        }
    </script>
3.write a javascript program to modify background color of paragraph?
   <script>
        let a=document.createElement("p")
        a.textContent="welcome to javascript"
        a.style.background="cyan"
        document.body.appendChild(a)
        console.log(a)
    </script
4.write a javascript program to change the font size of 3 paragraph using
querySelectorAll?
  <p class="demo">first paragraph</p>
    <p class="demo">second paragraph</p>
    <p class="demo">third paragraph</p>
    <button onClick="myfun()">clcik here</button>
   
    <script>
     function myfun(){
        let p=document.querySelectorAll(".demo")
        for(let i=0;i<p.length;i++){
            p[i].style.fontSize="30px"
           
        }
     }
    </script>

5.write a program to create input elements?

<form>
        <input type="text">
    </form>

PREPARED BY ANISA HASSAN ABDULLAHI

JAVASCRIPT CA2111 20/1/2023

6.write a program to create button using javascript?

  <script>
        let btn=document.createElement("button")
        btn.textContent="click here"
        document.body.appendChild(btn)
        console.log(btn)
    </script
7.write a program that counts how many input tag in your page?
    <form >
        <input type="text">
        <input type="text">
        <input type="text">
        <input type="text">
        <input type="text">
        <button onClick="myfun()">click here</button>
    </form>
    <script>
        function myfun(){
            let a=document.getElementsByTagName("input")
            document.write(a.length)
        }
    </script>
8.write a program to modify button color?
    <button onClick="myfun()">click here</button>
    <script>
     function myfun(){
        let s=document.getElementsByTagName("button")
        s[0].style.background="blue"
        s[0].style.width="10%"
     }
    </script>
9.write a program to enter number and then square that number?
  <form >
       number: <input type="text" placeholder="enter number" id="anisa">
       <button onClick="myfun()">clcik here</button>
    </form>
    <script>
        function myfun(){
            let num=Number(document.getElementById("anisa").value)
            number=num*num
            document.write(number)
        }

PREPARED BY ANISA HASSAN ABDULLAHI

JAVASCRIPT CA2111 20/1/2023

    </script>
10.write a program to create 5 paragraph Elements?
 <script>
       let p1=document.createElement("p")
       let p2=document.createElement("p")
       let p3=document.createElement("p")
       let p4=document.createElement("p")
       let p5=document.createElement("p")
       console.log(p1,p2,p3,p4,p5)
 </script>

PREPARED BY ANISA HASSAN ABDULLAHI