Skip to content

Commit d10e9c8

Browse files
nguyenbn7nguyenbn7
committed
add more projects
1 parent cc87553 commit d10e9c8

32 files changed

+1497
-0
lines changed

‎.github/workflows/deploy_to_gh_page.yml‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2,6 +2,7 @@
22
name: Deploy static content to Pages
33
env:
44
VITE_GITHUB_PAGE_URL: ${{ secrets.VITE_GITHUB_PAGE_URL }}
5+
VITE_UNPLASH_API_KEY: ${{ secrets.VITE_UNPLASH_API_KEY }}
56

67
on:
78
# Runs on pushes targeting the default branch

‎src/calculator/index.css‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
@import "tailwindcss";
2+
3+
@layer base {
4+
button {
5+
@apply min-h-[50px] text-[20px] font-[450] rounded-[5px] bg-[rgb(192,191,191)];
6+
}
7+
8+
button:hover {
9+
@apply brightness-110;
10+
}
11+
12+
button:active {
13+
@apply translate-y-[1px];
14+
}
15+
}
16+
17+
@layer utilities {
18+
#display::-webkit-scrollbar {
19+
@apply w-[10px];
20+
}
21+
22+
#display::-webkit-scrollbar-track {
23+
@apply bg-[#f1f1f1];
24+
}
25+
26+
#display::-webkit-scrollbar-thumb {
27+
@apply bg-[#888];
28+
}
29+
30+
#display::-webkit-scrollbar-thumb:hover {
31+
@apply bg-[#555];
32+
}
33+
}

‎src/calculator/index.html‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
<!doctype html>
2+
<html lang="en" class="box-border">
3+
4+
<head>
5+
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<meta http-equiv="X-UA-Compatible" content="IE=7" />
8+
9+
<link rel="shortcut icon" href="/favicon.svg" type="image/svg+xml" />
10+
11+
<script type="module" src="index.css"></script>
12+
<title>Calculator</title>
13+
</head>
14+
15+
<body class="min-h-screen bg-gradient-to-r from-[#373b44] to-[#4286f4] flex flex-col justify-center items-center">
16+
<div class="bg-white w-[400px] rounded-[12px] shadow-[0_5px_30px_-5px_rgba(0,0,0,0.6)] max-md:w-[95%]">
17+
<div class="bg-black text-white flex items-center justify-end rounded-[10px_10px_0_0]">
18+
<h1 class="p-[25px] text-[45px] font-['Lucida_Console',_sans-serif] font-thin overflow-x-auto" id="display">
19+
0
20+
</h1>
21+
</div>
22+
23+
<div class="grid grid-cols-4 gap-[10px] p-[10px]">
24+
<button class="bg-[grey] text-white text-[30px] operator-btns" value="+">+</button>
25+
<button class="bg-[grey] text-white text-[30px] operator-btns" value="-">-</button>
26+
<button class="bg-[grey] text-white text-[30px] operator-btns" value="*">×</button>
27+
<button class="bg-[grey] text-white text-[30px] operator-btns" value="/">÷</button>
28+
<button value="7" class="number-btns">7</button>
29+
<button value="8" class="number-btns">8</button>
30+
<button value="9" class="number-btns">9</button>
31+
<button value="4" class="number-btns">4</button>
32+
<button value="5" class="number-btns">5</button>
33+
<button value="6" class="number-btns">6</button>
34+
<button value="1" class="number-btns">1</button>
35+
<button value="2" class="number-btns">2</button>
36+
<button value="3" class="number-btns">3</button>
37+
<button class="decimal" value="." id="decimal-btn">.</button>
38+
<button value="0" class="number-btns">0</button>
39+
<button class="bg-[rgb(224,69,69)] text-white hover:brightness-90" value="C" id="clear-btn">C</button>
40+
<button class="col-[-2] row-[2_/span_4] bg-[rgb(13,206,87)] operator-btns" value="=">=</button>
41+
</div>
42+
</div>
43+
44+
<script type="module" src="index.js"></script>
45+
</body>
46+
47+
</html>

‎src/calculator/index.js‎

Lines changed: 99 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,99 @@
1+
let display = document.getElementById('display');
2+
let operatorBtns = [
3+
.../** @type {HTMLCollectionOf<HTMLButtonElement>} */ (document.getElementsByClassName('operator-btns')),
4+
];
5+
let numberBtns = [
6+
.../** @type {HTMLCollectionOf<HTMLButtonElement>} */ (document.getElementsByClassName('number-btns')),
7+
];
8+
let decimalBtn = /** @type {HTMLButtonElement | null} */ (document.getElementById('decimal-btn'));
9+
let clearBtn = /** @type {HTMLButtonElement | null} */ (document.getElementById('clear-btn'));
10+
11+
let firstValue = 0;
12+
let operatorValue = '';
13+
let awaitingNextValue = false;
14+
15+
function addDecimal() {
16+
if (awaitingNextValue) return;
17+
18+
if (display && !display.textContent?.includes('.')) {
19+
display.textContent = `${display.textContent}.`;
20+
}
21+
}
22+
23+
/**
24+
* @param {string} number
25+
*/
26+
function sendNumberValue(number) {
27+
if (awaitingNextValue && display) {
28+
display.textContent = number;
29+
awaitingNextValue = false;
30+
return;
31+
}
32+
33+
if (display) {
34+
const currentDisplayValue = display.textContent?.trim();
35+
display.textContent = currentDisplayValue === '0' ? number : currentDisplayValue + number;
36+
}
37+
}
38+
39+
function clearAll() {
40+
firstValue = 0;
41+
operatorValue = '';
42+
awaitingNextValue = false;
43+
if (display) {
44+
display.textContent = '0';
45+
}
46+
}
47+
48+
/**
49+
* @param {string} operator
50+
*/
51+
function addOperator(operator) {
52+
const currentValue = Number(display?.textContent);
53+
54+
if (operatorValue && awaitingNextValue) {
55+
operatorValue = operator;
56+
return;
57+
}
58+
59+
if (!firstValue) {
60+
firstValue = currentValue;
61+
} else {
62+
const calculation = calculate[operatorValue](firstValue, currentValue);
63+
if (display) {
64+
display.textContent = '' + calculation;
65+
}
66+
firstValue = calculation;
67+
}
68+
69+
awaitingNextValue = true;
70+
operatorValue = operator;
71+
}
72+
73+
/**
74+
* @type {{[operator: string]: (first: number, second: number) => number}}
75+
*/
76+
const calculate = {
77+
'/': (/** @type {number} */ firstNumber, /** @type {number} */ secondNumber) => firstNumber / secondNumber,
78+
'*': (/** @type {number} */ firstNumber, /** @type {number} */ secondNumber) => firstNumber * secondNumber,
79+
'+': (/** @type {number} */ firstNumber, /** @type {number} */ secondNumber) => firstNumber + secondNumber,
80+
'-': (/** @type {number} */ firstNumber, /** @type {number} */ secondNumber) => firstNumber - secondNumber,
81+
'=': (/** @type {number} */ firstNumber, /** @type {number} */ secondNumber) => secondNumber,
82+
};
83+
84+
addEventListener('DOMContentLoaded', () => {
85+
numberBtns.forEach((ele) => {
86+
if (display) {
87+
ele.addEventListener('click', () => sendNumberValue(ele.textContent ?? ''));
88+
}
89+
});
90+
91+
operatorBtns.forEach((ele) => {
92+
ele.addEventListener('click', () => {
93+
addOperator(ele.value);
94+
});
95+
});
96+
97+
decimalBtn?.addEventListener('click', addDecimal);
98+
clearBtn?.addEventListener('click', clearAll);
99+
});

‎src/gradient-generator/index.css‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
@import "tailwindcss";

‎src/gradient-generator/index.html‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!doctype html>
2+
<html lang="en">
3+
4+
<head>
5+
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<meta http-equiv="X-UA-Compatible" content="IE=7" />
8+
9+
<link rel="shortcut icon" href="/favicon.svg" type="image/svg+xml" />
10+
11+
<script type="module" src="index.css"></script>
12+
<title>Gradient Generator</title>
13+
</head>
14+
15+
<body class="font-['Raleway',sans-serif] text-black/50 text-center top-[15%] tracking-[.25em] h-screen">
16+
<h1 class="font-bold text-5xl uppercase w-full my-7">Gradient Generator</h1>
17+
18+
<div class="flex items-center justify-center text-base font-semibold tracking-normal">
19+
<select class="py-[.375rem] pr-9 pl-3" name="direction" id="direction">
20+
<option value="right" selected>right</option>
21+
<option value="left">left</option>
22+
<option value="top">top</option>
23+
<option value="bottom">bottom</option>
24+
</select>
25+
<input class="mx-2 my-3" type="color" name="color1" id="color1" />
26+
<input class="mx-2 my-3" type="color" name="color2" id="color2" />
27+
</div>
28+
29+
<h2 class="text-xl font-semibold my-3">Current CSS Background</h2>
30+
31+
<h3 class="font-extrabold text-base tracking-[.01em]" id="display-css-text"></h3>
32+
33+
<script type="module" src="index.js"></script>
34+
</body>
35+
36+
</html>

‎src/gradient-generator/index.js‎

Lines changed: 72 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,72 @@
1+
const DEFAULT_COLOR_1 = '#00ff00'; // GREEN
2+
const DEFAULT_COLOR_2 = '#ff0000'; // RED
3+
4+
const directionSelector = /** @type {HTMLSelectElement} */ (document.getElementById('direction'));
5+
const inputColor1 = /** @type {HTMLInputElement} */ (document.getElementById('color1'));
6+
const inputColor2 = /** @type {HTMLInputElement} */ (document.getElementById('color2'));
7+
8+
const displayCSSText = /** @type {HTMLElement} */ (document.getElementById('display-css-text'));
9+
10+
/**
11+
* @type {{[directionValue: string] : string}}
12+
*/
13+
const directionDict = {
14+
left: 'to left',
15+
right: 'to right',
16+
top: 'to top',
17+
bottom: 'to bottom',
18+
};
19+
20+
/**
21+
* @param {string} color1
22+
* @param {string} color2
23+
* @param {string} directionValue
24+
*/
25+
function generateGradientText(directionValue, color1, color2) {
26+
const direction = directionDict[directionValue];
27+
if (direction) return `linear-gradient(${direction}, ${color1}, ${color2})`;
28+
return `linear-gradient(to right, ${color1}, ${color2})`;
29+
}
30+
31+
/**
32+
* @param {HTMLElement} body
33+
* @param {HTMLElement} display
34+
* @param {HTMLInputElement} input1
35+
* @param {HTMLInputElement} input2
36+
* @param {string} direction
37+
*/
38+
function update(body, display, direction, input1, input2) {
39+
const cssText = generateGradientText(direction, input1.value, input2.value);
40+
41+
body.style.background = cssText;
42+
display.textContent = `${body.style.background};`;
43+
}
44+
45+
/**
46+
* @param {HTMLElement} body
47+
* @param {HTMLElement} display
48+
* @param {HTMLInputElement} input1
49+
* @param {HTMLInputElement} input2
50+
* @param {string} direction
51+
*/
52+
function init(body, display, direction, input1, input2) {
53+
input1.value = DEFAULT_COLOR_1;
54+
input2.value = DEFAULT_COLOR_2;
55+
56+
update(body, display, direction, input1, input2);
57+
}
58+
59+
addEventListener('DOMContentLoaded', () => {
60+
init(document.body, displayCSSText, directionSelector.value, inputColor1, inputColor2);
61+
62+
inputColor1.addEventListener('input', () =>
63+
update(document.body, displayCSSText, directionSelector.value, inputColor1, inputColor2),
64+
);
65+
inputColor2.addEventListener('input', () =>
66+
update(document.body, displayCSSText, directionSelector.value, inputColor1, inputColor2),
67+
);
68+
69+
directionSelector.addEventListener('change', () =>
70+
update(document.body, displayCSSText, directionSelector.value, inputColor1, inputColor2),
71+
);
72+
});

‎src/infinity-scroll/ambient.d.ts‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
type UnplashPhoto = {
2+
alt_description: string;
3+
links: {
4+
html: string;
5+
};
6+
urls: {
7+
regular: string;
8+
};
9+
};

‎src/infinity-scroll/index.css‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,3 @@
1+
@import url("https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap");
2+
3+
@import "tailwindcss";

‎src/infinity-scroll/index.html‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
<!doctype html>
2+
<html lang="en" class="box-border">
3+
4+
<head>
5+
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<meta http-equiv="X-UA-Compatible" content="IE=7" />
8+
9+
<link rel="shortcut icon" href="/favicon.svg" type="image/svg+xml" />
10+
11+
<script type="module" src="index.css"></script>
12+
<title>Infinity Scroll</title>
13+
</head>
14+
15+
<body class="min-h-screen font-['Bebas Neue',_sans-serif] bg-gradient-to-r from-[#c9d6ff] to-[#e2e2e2]">
16+
<!-- Title -->
17+
<h1 class="text-center mt-[25px] mb-[15px] text-[40px] tracking-[5px] max-sm:text-[20px]">
18+
Unsplash API - Infinite Scroll
19+
</h1>
20+
21+
<!-- Loader -->
22+
<div class="fixed top-0 bottom-0 left-0 right-0 bg-white/80 items-center justify-center hidden" id="loader">
23+
<img alt="Loading" id="loader-image" />
24+
</div>
25+
26+
<!-- Image container -->
27+
<div class="my-[10px] mx-[30%] max-sm:m-[10px]" id="image-container"></div>
28+
<script type="module" src="index.js"></script>
29+
</body>
30+
31+
</html>

0 commit comments

Comments
 (0)