Skip to content

Instantly share code, notes, and snippets.

@utkrishta
Created March 3, 2022 23:36
Show Gist options
  • Save utkrishta/3432d1f37c307d9d5d624d031d3d0e9a to your computer and use it in GitHub Desktop.
Save utkrishta/3432d1f37c307d9d5d624d031d3d0e9a to your computer and use it in GitHub Desktop.
Display Days of the week and highlight current day
<div class="opening-hours">
<div class="row">
<div class="col-12"><h4>Our Business Hours</h4></div>
</div>
<div class="row" id="Sunday">
<div class="col-6 day">Sunday</div>
<div class="col-6 text-md-end hours">Open 24 Hrs</div>
</div>
<div class="row" id="Monday">
<div class="col-6 day">Monday</div>
<div class="col-6 text-md-end hours">Open 24 Hrs</div>
</div>
<div class="row" id="Tuesday">
<div class="col-6 day">Tuesday</div>
<div class="col-6 text-md-end hours">Open 24 Hrs</div>
</div>
<div class="row" id="Wednesday">
<div class="col-6 day">Wednesday</div>
<div class="col-6 text-md-end hours">Open 24 Hrs</div>
</div>
<div class="row" id="Thursday">
<div class="col-6 day">Thursday</div>
<div class="col-6 text-md-end hours">Open 24 Hrs</div>
</div>
<div class="row" id="Friday">
<div class="col-6 day">Friday</div>
<div class="col-6 text-md-end hours">Open 24 Hrs</div>
</div>
<div class="row" id="Saturday">
<div class="col-6 day">Saturday</div>
<div class="col-6 text-md-end hours">Open 24 Hrs</div>
</div>
</div>
<script>
//Bold the day on Opening Hours
document.addEventListener('DOMContentLoaded', function(event) {
var event = new Date();
var options = {weekday: 'long'};
options = event.toLocaleDateString('en-US', options);
var check = document.getElementById(options);
if (check) {
document.getElementById(options).style.fontSize = '1.15rem';
document.getElementById(options).style.fontWeight = '900';
}
});
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment