index.html

<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>RMS Visualization Tool</title>
	<link rel="stylesheet" href="style.css">
	<link href='https://unpkg.com/boxicons@2.1.4/css/boxicons.min.css' rel='stylesheet'>		
	<script src="https://d3js.org/d3.v6.min.js"></script>
</head>

<body class="dark-mode">
	<button id="toggle-button"><i type="solid" class='bx bxs-sun'></i></button>
	<p class="pageTitle"> RMS of Sinusoidal Wave </p>
	<div id="main-container">
        <div style="display: flex;">
            <div id="waveDisplay" style="width: 600px; height: 300px;"></div>
            <div style="width: 100px; margin-left: 20px;">
                <label for="peakValueSlider">Peak Value: <span id="peakValueDisplay">2</span></label>
                <input type="range" id="peakValueSlider" min="1" max="10" value="2">
                <p>RMS Value: <span id="rmsDisplay"></span></p>
                <label for="toggleSquare">Show Squared Wave:</label>
                <input type="checkbox" id="toggleSquare" checked>
            </div>
        </div>
    </div>
    <script src="script.js"></script>
</body>

</html>