To design a website to calculate the area of a circle and volume of a cylinder using JavaScript.
Requirement collection.
Creating the layout using HTML and CSS.
Write JavaScript to perform calculations.
Choose the appropriate style and color scheme.
Validate the layout in various browsers.
Validate the HTML code.
Publish the website in the given URL.
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>volumeofcylinder</title>
<link rel="stylesheet" href="{% static 'css/mathvolume.css' %}">
</head>
<body>
<div class="container">
<div class="formview">
<div class="banner">
VOLUME OF CYLINDER
</div>
<div class="content">
<form action="" method="GET">
{% csrf_token %}
<div class="forminput">
<label for="value_radius">radius=</label>
<input type="text" name="value_radius" id="value_radius">
</div>
<div class="forminput">
<label for="value_height">height=</label>
<input type="text" name="value_height" id="value_height">
</div>
<div class="forminput">
<button type="button" name="button_volume" id="button_volume">volume</button>
</div>
<div class="forminput">
<label for="value_c">answer=</label>
<input type="text" name="value_c" id="value_c" readonly>
</div>
</form>
</div>
</div>
</div>
<script src="/static/js/mathvolume.js"></script>
</body>
</html>
volumeBtn = document.querySelector('#button_volume');
volumeBtn.addEventListener('click',function(e){ txtR = document.querySelector('#value_radius'); txtH = document.querySelector('#value_height'); txtC = document.querySelector('#value_c');
let c;
c = 3.14*parseFloat(txtR.value)*parseFloat(txtR.value)*parseFloat(txtH.value);
txtC.value = c;
});
{% load static %}
<!DOCTYPE html>
<html>
<head>
<title>areaofcircle</title>
<link rel="stylesheet" href="{% static 'css/matharea.css' %}">
</head>
<body>
<div class="container">
<div class="formview">
<div class="banner">
AREA OFCIRCLE
</div>
<div class="content">
<form action="" method="GET">
{% csrf_token %}
<div class="forminput">
<label for="value_radius">radius=</label>
<input type="text" name="value_radius" id="value_radius">
</div>
<div class="forminput">
<button type="button" name="button_area" id="button_area">area</button>
</div>
<div class="forminput">
<label for="value_c">answer=</label>
<input type="text" name="value_c" id="value_c" readonly>
</div>
</form>
</div>
</div>
</div>
<script src="/static/js/matharea.js"></script>
</body>
</html>
areaBtn = document.querySelector('#button_area');
areaBtn.addEventListener('click',function(e){ txtR = document.querySelector('#value_radius'); txtC = document.querySelector('#value_c');
let c;
c = 3.14*parseFloat(txtR.value)*parseFloat(txtR.value)
txtC.value = c;
});
Thus a website is designed for the maths calculation and is hosted in the URL http://dhayanitha.student.saveetha.in:8000/mathvolumeofcylinder and http://dhayanitha.student.saveetha.in:8000/matharea . HTML code is validated.