This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
// 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)); |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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 */ |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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() {} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
.colorbox-container { | |
display: flex; | |
align-items: center; | |
justify-content: center; | |
height: 70px; | |
width: 200px; | |
border-radius: 5px; | |
padding: 20px; | |
text-align: center; | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
function App() { | |
return ( | |
<div className='App'> | |
<ColorBox backgroundHex='2a2b2e' /> | |
</div> | |
); | |
} |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
import './ColorBox.css'; | |
const ColorBox = ({ backgroundHex }) => { | |
return ( | |
<div | |
className='colorbox-container' | |
style={{ backgroundColor: `#${backgroundHex}` }} | |
> | |
{`#${backgroundHex}`} | |
</div> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<title>Welcome back</title> | |
</head> | |
<body> | |
<p>Hello World!</p> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<p id="date"> | |
<span id="day"></span> | |
<span id="dot">·</span> | |
<span id="month"></span> | |
<span id="slash">/</span> | |
<span id="num-date"></span> | |
</p> |