karenying

// calculates relative luminance given a hex string
export function getLuminance(hex) {
  const rgb = hexToRGB(hex);

  for (const key in rgb) {
    let c = rgb[key];
    c /= 255;

    c = c > 0.03928 ? Math.pow((c + 0.055) / 1.055, 2.4) : (c /= 12.92);

karenying

// takes in hex string and converts to decimal number
function hexToDecimal(hex_string) {
  return parseInt(hex_string, 16);
}

/* converts a hex string to an object with 'r', 'g', 'b' 
as the keys and their respective values */
function hexToRGB(hex) {
  const r = hexToDecimal(hex.substring(0, 2));
  const g = hexToDecimal(hex.substring(2, 4));

karenying

export const textColors = {
  BLACK: '000000',
  WHITE: 'ffffff',
};

// calculates contrast ratio between two hex strings
export function contrastRatioPair(hex1, hex2) {}

/* converts a hex string to an object with 'r', 'g', 'b' 
as the keys and their respective values */

karenying

import { textColors, contrastRatioPair, getLuminance } from './helper';

export default class Color {
  // takes in hex string without '#'
  constructor(hex) {
    this.hex = hex;
  }

  // returns luminance as a number between 0 and 1
  get luminance() {}

karenying

.colorbox-container {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 70px;
  width: 200px;
  border-radius: 5px;
  padding: 20px;
  text-align: center;
}

karenying

function App() {
  return (
    <div className='App'>
      <ColorBox backgroundHex='2a2b2e' />
    </div>
  );
}

karenying

import './ColorBox.css';

const ColorBox = ({ backgroundHex }) => {
  return (
    <div
      className='colorbox-container'
      style={{ backgroundColor: `#${backgroundHex}` }}
    >
      {`#${backgroundHex}`}
    </div>

karenying

    const DAYS = ['sun', 'mon', 'tue', 'wed', 'thu', 'fri', 'sat'];

    const date = new Date();
    const currDay = date.getDay();
    const day = DAYS[currDay];
    const month = date.getMonth() + 1;
    const numDate = date.getDate();

    document.querySelector('#day').innerHTML = day;
    document.querySelector('#month').innerHTML = month;

karenying

            <p id="date">
                <span id="day"></span>
                <span id="dot">&middot</span>
                <span id="month"></span>
                <span id="slash">/</span>
                <span id="num-date"></span>
            </p>

karenying

    const date = new Date();
    const currHour = date.getHours();

    let timeframe;

    if (currHour >= 6 && currHour <= 11) {
        timeframe = 'morning';
    } else if (currHour >= 12 && currHour <= 16) {
        timeframe = 'afternoon';
    } else if (currHour >= 17 && currHour <= 20) {