Here is the all code for placing on index.html at a row/at a time.
<table style="width:100%;">
<tbody><tr>
<td>
<div class="date" id="date"></div>
<script type="text/javascript" src="date/endate.js"></script>
</td>
<td>
<div class="bndate">
<span id="date-today"> </span>
<script type="text/javascript" src="date/bndate.js"></script>
<script>dateToday('date-today', 'bangla'); </script>
</div>
</td>
<td>
<div>
<div class="suntime" id="suntime"></div>
<script type="text/javascript" src="date/sunset.js"></script>
</div>
</td>
<td>
<div style="float: right;">
<form action="https://www.google.com/search" method="GET" class="search-form">
<input type="text" name="q" placeholder="Search..." required>
<button type="submit">Search</button>
</form>
</div>
</td>
</tr></tbody>
</table>
N.B: Please insert this code where you want to show the date, sunrise and sunset time in home page.
Here is the css code for designing the display
.bndate{
display: flex;
color: blue;
margin-top: -5px;
margin-bottom: 0px;
}
.suntime{
display: flex;
color: red;
margin-top: -5px;
margin-bottom: 0px;
}
.search-form {
display: flex;
float: right;
margin-top: -5px;
margin-bottom: 0px;
}
.search-form input {
padding: 5px;
border: none;
border-radius: 4px 0 0 4px;
}
.search-form button {
padding: 5px 10px;
border: none;
background-color: #3498DB;
color: white;
border-radius: 0 4px 4px 0;
cursor: pointer;
}
.search-form button:hover {
background-color: #4a54e1;
}
********************************
endate.js file code here
bndate.js file code here
sunset.js file code here