Coding Assisement

Que.1 Write the code to access element which is having id as "text"
Project: click Here

  <!DOCTYPE html>
  <html>
    <head>
      <title>access element</title>
    </head>
    <body>
    <h1 id="text">This is text id</h1>
  
    <script>
      const element = document.getElementById("text");
      console.log(element); // <h1 id="text">This is text id</h1>
    </script>
  </body>
  </html>

Que.2 Write the code to access element which is having tag as "h1"
Project: click Here

  <!DOCTYPE html>
  <html>
    <head>
      <title>access element</title>
    </head>
    <body>
    <h1>This is text in h1 tag</h1>
    <script>
      const element = document.getElementsByTagName("h1");
      
      console.log(element); // HTMLCollection [h1]
     
      let content = element[0].innerText;
      console.log(content); // This is text in h1 tag
  
    </script>
  </body>
  </html>

Que.3 Write the code to access element which is having class as "box"
Project: click Here

  <!DOCTYPE html>
  <html>
    <head>
      <title>access element</title>
    </head>
    <body>
    <div class="box">box-1</div>
    <script>
      const element = document.getElementsByClassName("box");
      
      console.log(element); // HTMLCollection(1)
     
      let content = element[0].innerText;
      console.log(content); // box-1
  
    </script>
  </body>
  </html>

Que.4 <h1>Hello </h1>
Change the heading from "Hello" to "Hello World" using DOM functions
Project: click Here

  <!DOCTYPE html>
  <html>
  <head>
  	<title>Change heading text using DOM functions</title>
  </head>
  <body>
  	<h1 id="myHeading">Hello</h1>
  	<script>
  		const heading = document.getElementById("myHeading");
  		heading.textContent = "Hello World";
  	</script>
  </body>
  </html>

Que.5 Create three cards on HTML page and arrange them using flex property in row or horizontal direction and also create button at the bottom named "Change Flex direction". When user clicks on this button, the cards arrangement should be changed to vertical direction.
Project: click Here

  <!DOCTYPE html>
  <html>
  <head>
  	<title>Flexbox cards</title>
  	<style>
  		.container {
  			display: flex;
  			flex-wrap: wrap;
  			justify-content: space-around;
  		}
  
  		.card {
  			background-color: #ff0808;
  			padding: 10px;
  			margin: 10px;
  			width: 200px;
  			height: 200px;
  		}
  	</style>
  </head>
  <body>
  	<div class="container">
  		<div class="card">Card 1</div>
  		<div class="card">Card 2</div>
  		<div class="card">Card 3</div>
  	</div>
  	<button id="changeFlexDirection">Change Flex Direction</button>
  
  	<script>
  		const button = document.getElementById("changeFlexDirection");
  		const container = document.querySelector(".container");
  
  		button.addEventListener("click", function() {
  			container.style.flexDirection = "column";
  		});
  	</script>
  </body>
  </html>

Que.6 What’s the difference between window vs document?

Que.7 <h1>Hello </h1>
Add one style attribute and give text color as red and id attribute and give the id value as "heading" in the above given h1 tag using DOM functions
Project: click Here

            
  <!DOCTYPE html>
  <html>
  <head>
  	<title>Change heading style using DOM functions</title>
  </head>
  <body>
  	<h1 id="heading">Hello</h1>
  	<script>
  		const heading = document.getElementById("heading");
  		heading.setAttribute("style", "color: red;");		
  	</script>
  </body>
  </html>

Que.8 Create an HTML page having content as Hello world and a button named Replace Text. When user will click on this button page content should be changed to "Welcome to Elevation academy"
Project: click Here

  <!DOCTYPE html>
  <html>
  <head>
  	<title>click on button</title>
  </head>
  <body>          
      <p id="text">Hello world</p>
      <button onclick="replaceText()">Replace Text</button>
    
      <script>
        function replaceText() {
          const text = document.getElementById("text");
          text.innerText = "Welcome to Elevation academy";
        }
      </script>
    </body>
  </html>

Que.9 Write code to implement timer clock using JS -- display HH:MM:SS -- the time should keep updating every second
Project: click Here

            
  <!DOCTYPE html>
  <html>
    <head>
      <title>timer clock using JS</title>
    </head>
    <body>
      <h1 id="timer">00:00:00</h1>
  
      <script>
        setInterval(function () {
          const timer = document.getElementById("timer");
          const now = new Date();
          const hours = now.getHours().toString().padStart(2, "0");
          const minutes = now.getMinutes().toString().padStart(2, "0");
          const seconds = now.getSeconds().toString().padStart(2, "0");
          const currentTime = hours + ":" + minutes + ":" + seconds;
          timer.innerText = currentTime;
        }, 1000);
      </script>
    </body>
  </html>

Que.10 Project: click Here

11. DOM