107 809
Assignments Done
100%
Successfully Done
In December 2024
In December 2024
Your physics assignments can be a real challenge, and the due date can be really close — feel free to use our assistance and get the desired result.
Physics
Be sure that math assignments completed by our experts will be error-free and done according to your instructions specified in the submitted order form.
Math
Our experts will gladly share their knowledge and help you with programming projects. Keep up with the world’s newest programming trends.
Programming
Answer to Question #318198 in HTML/JavaScript Web Application for vicky
Question #318198
Capital and Country
The goal of this coding exam is to quickly get you off the ground with HTML select element
Use the below reference image
https://assets.ccbp.in/frontend/content/dynamic-webapps/capital-and-country-op.gif
Achieve the design with HTML, CSS, and functionality with JS
- When the capital name is changed in the HTML select element then the text content in the HTML paragraph element should be the country name of the selected capital.
Warning
Do not delete the prefilled code in JS.
Note
HTML option element should consist of selected as an attribute for the value newDelhi by default.
Javascript:
let countries = {
paris: "France",
london: "United Kingdom",
newYork: "USA",
newDelhi: "India"
};
Expert's answer
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Capital and Country</title>
</head>
<body>
<div class="wrapper">
<div class="container">
<h1 class="title">Capital and Country</h1>
<div class="content">
<select name="capital" id="capital" class="capital" onchange="changeCapital(this)">
<option value="France">Paris</option>
<option value="United Kingdom">London</option>
<option value="USA">New York</option>
<option selected value="India">New Delhi</option>
</select>
<p class="text">is the capital of?</p>
</div>
<div class="country">
<p id="country">India</p>
</div>
</div>
</div>
<style>
.wrapper {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background-color: #000;
}
.container {
width: 450px;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #fff;
padding: 30px;
}
.container p {
margin: 0;
padding: 0;
}
.title {
font-size: 48px;
font-weight: bold;
color: #454545;
text-align: center;
padding: 0;
margin: 0;
}
.content {
display: flex;
justify-content: flex-start;
align-items: center;
font-size: 20px;
padding: 30px 18px;
}
.capital {
height: 40px;
margin-right: 24px;
padding: 10px 10px;
font-size: 16px;
font-weight: 500;
}
.country {
padding: 0 18px;
font-size: 24px;
font-weight: bold;
}
</style>
<script>
function changeCapital(select) {
let country = document.getElementById('country');
country.innerText = select.value;
}
</script>
</body>
</html>
Learn more about our help with Assignments: Programming & Computer Science
Comments
Leave a comment