Make DAY finder tool using CSS and JavaScript

You want to show day name when you put date, month and year. So you can use our simple HTML, CSS & JavaScript code and make day name finder tool.

Code

<style>
body {
font-family: Arial, sans-serif;
background-color: #f5f5f5;
}

.container {
max-width: 400px;
margin: 0 auto;
padding: 20px;
border: 1px solid #ccc;
border-radius: 5px;
background-color: #fff;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

h2 {
text-align: center;
color: #444;
}

label {
font-size: 18px;
display: block;
margin-bottom: 10px;
}

/* Customized date input */
.custom-date-input {
width: 95%;
padding: 8px;
font-size: 16px;
border: 1px solid #ccc;
border-radius: 5px;
outline: none;
background: #fff url("https://image.flaticon.com/icons/svg/48/48234.svg") no-repeat right center;
background-size: 20px;
cursor: pointer;
margin: auto;
}

button {
background-color: #4CAF50;
color: #fff;
padding: 10px 20px;
font-size: 16px;
border: none;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.3s ease;
margin-top: 10px;
width: 100%;
}

button:hover {
background-color: #45a049;
}

#result {
font-size: 22px;
font-weight: bold;
text-align: center;
margin-top: 20px;
}
</style>
<div class="container">
<h2>Date to Day Finder</h2>
<label for="datepicker">Choose a date:</label>
<!-- Use a custom date input -->
<input type="date" id="datepicker" class="custom-date-input">
<button onclick="findDay()">View Day</button>
<p id="result"></p>
</div>

<script>
function findDay() {
const dateInput = document.getElementById("datepicker").value;
const selectedDate = new Date(dateInput);
const days = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"];
const dayOfWeek = days[selectedDate.getDay()];
document.getElementById("result").innerText = `${dayOfWeek}`;
}
</script>

You can check these code using our HTML code online executer. And thank you for read this code.