Description
ISHAAN OHRI
18BCE0265
Question:
Write a program to demonstrate the concept of JavaScript DOM. Design an e- newspaper using DOM with following feature:
ii. Customize the advertisements page based on the requirement
Validate the form for empty field submissions.
Code: index.html
<!DOCTYPE html>
<html lang=”en”>
<head>
<meta charset=”UTF-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1.0″>
<title>E-Newspaper</title>
<meta charset=”utf-8″>
<meta name=”viewport” content=”width=device-width, initial-scale=1″>
<link rel=”stylesheet”
href=”//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css”>
<link rel=”stylesheet” href=”./style.css”>
<script src=”https://code.jquery.com/jquery-1.12.4.js”></script>
<script src=”https://code.jquery.com/ui/1.12.1/jquery-ui.js”></script>
<script src=”./main.js”></script>
</head>
<body>
<h1 align=”center”>Times of India</h2>
<hr>
<br>
<span>
<div id=”left”>
<img id=”ad-left” height=”1000px” width=”200px” src=”./ad1.gif”>
<br>
<button id=”change-left” onclick=”changeLeft()”>Change Ad</button>
</div>
<div id=”news”>
<br>
<h2 id=”heading-1″>Eight assembly seats vacant in Uttar Pradesh, EC to decide on bypolls</h2>
<img id=”img-1″ width=”500px” src=”news1.jpg”>
<br>
<h2 id=”heading-2″>WHO’s global COVAX plan: All you need to know about Covid-19 vaccine access plan</h2>
<img id=”img-2″ width=”500px” src=”news2.jpg”>
</div>
<div id=”right”>
<img id=”ad-right” height=1000px width=”200px” src=”./ad3.png”> <br>
<button id=”change-right” onclick=”changeRight()”>Change
Ad</button>
</div>
</span>
</body>
</html>
style.css
#news{
width: 1000px; margin: 0 auto; padding-left: 15%; padding-right: 20%; display: inline-block;
}
#left{
display: inline-block;
}
#right{
display: inline-block;
}
#change-left{
background-color: brown; color: white; margin-left: 20%; font-size: medium;
}
#change-right{
background-color: brown; color: white; margin-left: 20%; font-size: medium;
}
script.js
$( function() {
if(day == 24){ document.getElementById(‘heading-1’).innerHTML=”69,239 Covid Cases In India In 24 hours, Over 30 Lakh Total Cases”;
document.getElementById(‘content-1’).innerHTML=”India recorded single-day jump of 69,239 coronavirus cases in the last 24 hours, taking the tally to 30,44,940 cases, the Union Health Ministry said this morning. About 22,80,566 lakh people have recovered. 56,706 Covid-linked deaths have been registered so far;
912 patients have died since yesterday, according to the official data. The recovery rate stood at 74.89 per cent this morning. India is behind Brazil and the US in the number of cases in the world.”;
document.getElementById(‘img-1’).src = ‘./news3.jpg’;
document.getElementById(‘content-2’).innerHTML=”The residents of a four-storey house in Gurgaon have been moved out after the building tilted following heavy rain. The building in Sector 46 has been vacated, the police told news agency ANI. Gurgaon near Delhi, the Millennium City with multiple malls, highrises and offices of multinational companies, has been severely challenged in two days of heavy downpour. The area where the building is located was severely flooded after yesterday’s downpour, according to the police. Haryana: Police vacated a four-storey building in Gurugram’s Sector-46 after it bent on one side, following heavy downpour in the region.”;
document.getElementById(‘img-2’).src = ‘./news4.jpg’;
}else if(day == 25){
document.getElementById(‘heading-1’).innerHTML=”Eight assembly seats vacant in Uttar Pradesh, EC to decide on bypolls”;
document.getElementById(‘img-1’).src = ‘./news1.jpg’;
document.getElementById(‘heading-2’).innerHTML=”WHO’s global COVAX plan: All you need to know about Covid-19 vaccine access plan”;
document.getElementById(‘img-2’).src = ‘./news2.jpg’;
}else{
}
});
}
);
function changeLeft(){ if(document.getElementById(‘ad-left’).src.includes(‘ad1’)){ document.getElementById(‘ad-left’).src = ‘./ad2.gif’
}else{
document.getElementById(‘ad-left’).src = ‘./ad1.gif’ }
}
function changeRight(){ if(document.getElementById(‘ad-right’).src.includes(‘ad3’)){ document.getElementById(‘ad-right’).src = ‘./ad4.gif’
}else{
document.getElementById(‘ad-right’).src = ‘./ad3.png’ }
}
Output:
Reviews
There are no reviews yet.