Noise Ordinance Clock

by trentHarlem

HTML

<div id='container'>
  <h1 id='clock'>
  </h1>
  <p id='message'>

  </p>
</div>

CSS

@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@500;900&display=swap');

* {
  background: black;
  font: 1.3em system-ui;
  text-align: center;
}

#container {
  display: flex;
  flex-direction: column;
}

h1#clock {
  display: flex;
  flex-direction: row;
  /* font: 2.5em 'Orbitron', sans-serif; */
  position: relative;
  /*  background: #131313; */
  background: #0000ff33;
  border-radius: 8px;
  box-shadow: 0 0 3px;
  color: #ff0000aa;
  height: 100px;
  text-align: center;
  margin: auto;
  width: 390px;
}

#clock span {
  background: #0000ff33;

  color: rgba(255, 0, 0, 0.5);
  text-align: center;

}

#sec {
min-width: 120px;
}

span#ampm {
  position: absolute;
  font: 0.4em 'Orbitron', sans-serif;
  right: 0px;
  height: 100%;
}

#message {
  position: relative;
  top: 0px;
  left: 0px;
  color: black;
  text-align: center;
  text-shadow: whitesmoke 1px 1px 9px;
}

JavaScript

let jamming = false; // Needs user input
let hour

function clock() {
  const now = new Date();
  const time = now.toTimeString();
  let slickMin = time.slice(3, 5);
  let slickSec = time.slice(6, 8);
   hour = now.getHours();
  let twHour = hour.toString()

  function amp() {
    if (hour < 12) {
      ampm = 'AM'
    } else ampm = 'PM';
    return ampm;
  }
  amp();
  if (hour == 0)
    hour += 12;
  appClock = document.getElementById('clock')
  appClock.innerHTML = `<span>${hour}</span><span id='blink'>:</span><span>${slickMin}</span><span id='sec'>:${slickSec}</span><span id='ampm'>${ampm}</span>`;
  message = document.getElementById('message')
  message.innerHTML = '.•†©†•..•†©†•..•†©†•.';

}

setInterval(clock, 1000);

if (hour <= 7 || hour >= 22 && jamming === true) {
  console.log('Remember the Noise Ordinance! No Loud Activity between 10PM! - 7AM!')
} else if (hour >= 8 && hour <= 21 && jamming === true || jamming === false) {
  console.log('No Trouble! Jam Away!')
}