Skip to content

[FE]: code challenge (le hoang dai) #272

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
craftpine wants to merge 1 commit into
base: main
Choose a base branch
from
Open

[FE]: code challenge (le hoang dai) #272

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
29 changes: 29 additions & 0 deletions src/problem1/main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,29 @@
var sum_to_n_a = function (n) {
if (n < 1) {
return 0
}

let sum = 0;
for (let i = 1; i <= n; i++) {
sum += i;
}
return sum
};

var sum_to_n_b = function (n) {
if (n < 1) {
return 0
}
return n + sum_to_n_b(n - 1)
};

var sum_to_n_c = function (n) {
if (n < 1) {
return 0
}
return n * (n + 1) / 2
};

console.log(sum_to_n_a(5))
console.log(sum_to_n_b(5))
console.log(sum_to_n_c(5))
143 changes: 126 additions & 17 deletions src/problem2/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,27 +1,136 @@
<html>

<!DOCTYPE html>
<html lang="en" class="dark">
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Fancy Form</title>

<!-- You may add more stuff here -->
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Swap</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet" />
<script src="https://cdn.tailwindcss.com"></script>
<script>
tailwind.config = {
darkMode: 'class',
theme: {
extend: {
fontFamily: { sans: ['Inter', 'system-ui', 'sans-serif'] },
}
}
}
</script>
<link href="style.css" rel="stylesheet" />
</head>
<body class="min-h-screen flex items-center justify-center p-5 font-sans bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-white transition-colors duration-200">

<div class="w-full max-w-[440px]">

<!-- Theme toggle -->
<div class="flex justify-end mb-3">
<button id="theme-toggle" type="button"
class="p-2 rounded-lg bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 text-gray-500 dark:text-gray-400 hover:bg-gray-50 dark:hover:bg-gray-700 transition-colors outline-none">
<!-- Sun: shown in dark mode (click to go light) -->
<svg id="icon-sun" class="w-5 h-5" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<circle cx="12" cy="12" r="5"/>
<line x1="12" y1="1" x2="12" y2="3"/><line x1="12" y1="21" x2="12" y2="23"/>
<line x1="4.22" y1="4.22" x2="5.64" y2="5.64"/><line x1="18.36" y1="18.36" x2="19.78" y2="19.78"/>
<line x1="1" y1="12" x2="3" y2="12"/><line x1="21" y1="12" x2="23" y2="12"/>
<line x1="4.22" y1="19.78" x2="5.64" y2="18.36"/><line x1="18.36" y1="5.64" x2="19.78" y2="4.22"/>
</svg>
<!-- Moon: shown in light mode (click to go dark) -->
<svg id="icon-moon" class="w-5 h-5 hidden" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M21 12.79A9 9 0 1 1 11.21 3 7 7 0 0 0 21 12.79z"/>
</svg>
</button>
</div>

<div class="bg-white dark:bg-gray-800 rounded-2xl p-6 border border-gray-200 dark:border-gray-700 shadow-sm">

<!-- Header -->
<div class="mb-5">
<h2 class="text-xl font-bold">Swap</h2>
<p class="text-sm text-gray-500 dark:text-gray-400 mt-0.5">Exchange tokens instantly</p>
</div>

<body>
<!-- You Pay -->
<div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-4 border border-gray-200 dark:border-gray-700 transition-colors focus-within:border-indigo-400 dark:focus-within:border-indigo-500">
<div class="mb-2">
<span class="text-[11px] font-semibold uppercase tracking-widest text-gray-400 dark:text-gray-500">You pay</span>
</div>
<div class="flex items-center gap-2.5">
<div class="relative flex-shrink-0">
<button class="flex items-center gap-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-xl px-3 py-2 font-semibold text-sm transition-all min-w-[126px] hover:border-indigo-400 dark:hover:border-indigo-500 outline-none" id="from-btn" type="button">
<img class="w-6 h-6 rounded-full object-contain flex-shrink-0" id="from-icon" src="" alt="" />
<span id="from-symbol">Select</span>
<svg id="from-chevron" class="w-3.5 h-3.5 ml-auto text-gray-400 transition-transform flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg>
</button>
<div class="hidden absolute top-full mt-1.5 left-0 w-56 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl z-50 shadow-lg overflow-hidden" id="from-dropdown">
<div class="flex items-center gap-2 px-3 py-2.5 border-b border-gray-100 dark:border-gray-700">
<svg class="w-4 h-4 text-gray-400 flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
<input class="flex-1 bg-transparent outline-none text-sm placeholder-gray-400 dark:placeholder-gray-500" type="text" placeholder="Search token..." id="from-search" autocomplete="off" />
</div>
<ul class="max-h-52 overflow-y-auto py-1 dropdown-scroll" id="from-list"></ul>
</div>
</div>
<input class="flex-1 bg-transparent outline-none text-2xl font-bold text-right w-0 min-w-0 placeholder-gray-300 dark:placeholder-gray-600" type="number" id="input-amount" placeholder="0.00" min="0" step="any" />
</div>
<p class="hidden text-xs text-red-500 mt-2" id="amount-error"></p>
</div>

<!-- You may reorganise the whole HTML, as long as your form achieves the same effect. -->
<form onsubmit="return !1">
<h5>Swap</h5>
<label for="input-amount">Amount to send</label>
<input id="input-amount" />
<!-- Swap arrow -->
<div class="flex justify-center my-2">
<button class="w-9 h-9 bg-gray-50 dark:bg-gray-900 border border-gray-200 dark:border-gray-700 rounded-xl flex items-center justify-center text-indigo-500 hover:bg-indigo-500 hover:text-white hover:border-indigo-500 transition-all outline-none group" id="swap-direction" type="button">
<svg class="w-[17px] h-[17px] transition-transform duration-300 group-hover:rotate-180" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
<path d="M7 16V4m0 0L3 8m4-4l4 4"/>
<path d="M17 8v12m0 0l4-4m-4 4l-4-4"/>
</svg>
</button>
</div>

<label for="output-amount">Amount to receive</label>
<input id="output-amount" />
<!-- You Receive -->
<div class="bg-gray-50 dark:bg-gray-900 rounded-xl p-4 border border-gray-200 dark:border-gray-700">
<div class="mb-2">
<span class="text-[11px] font-semibold uppercase tracking-widest text-gray-400 dark:text-gray-500">You receive</span>
</div>
<div class="flex items-center gap-2.5">
<div class="relative flex-shrink-0">
<button class="flex items-center gap-2 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-600 rounded-xl px-3 py-2 font-semibold text-sm transition-all min-w-[126px] hover:border-indigo-400 dark:hover:border-indigo-500 outline-none" id="to-btn" type="button">
<img class="w-6 h-6 rounded-full object-contain flex-shrink-0" id="to-icon" src="" alt="" />
<span id="to-symbol">Select</span>
<svg id="to-chevron" class="w-3.5 h-3.5 ml-auto text-gray-400 transition-transform flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5"><polyline points="6 9 12 15 18 9"/></svg>
</button>
<div class="hidden absolute top-full mt-1.5 left-0 w-56 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-xl z-50 shadow-lg overflow-hidden" id="to-dropdown">
<div class="flex items-center gap-2 px-3 py-2.5 border-b border-gray-100 dark:border-gray-700">
<svg class="w-4 h-4 text-gray-400 flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2"><circle cx="11" cy="11" r="8"/><line x1="21" y1="21" x2="16.65" y2="16.65"/></svg>
<input class="flex-1 bg-transparent outline-none text-sm placeholder-gray-400 dark:placeholder-gray-500" type="text" placeholder="Search token..." id="to-search" autocomplete="off" />
</div>
<ul class="max-h-52 overflow-y-auto py-1 dropdown-scroll" id="to-list"></ul>
</div>
</div>
<input class="flex-1 bg-transparent outline-none text-indigo-500 text-2xl font-bold text-right w-0 min-w-0 placeholder-gray-300 dark:placeholder-gray-600 cursor-default" type="text" id="output-amount" placeholder="0.00" readonly />
</div>
</div>

<!-- Rate bar -->
<div class="mt-3 px-3 py-2 bg-indigo-50 dark:bg-indigo-950/40 border border-indigo-100 dark:border-indigo-900/60 rounded-xl text-sm text-gray-500 dark:text-gray-400 items-center gap-2" id="rate-bar" style="display:none"></div>

<!-- Global error -->
<p class="hidden text-[13px] text-red-500 mt-2.5 text-center" id="global-error"></p>

<!-- Confirm -->
<button class="confirm-btn w-full mt-4 py-3.5 bg-indigo-600 hover:bg-indigo-700 rounded-xl text-white text-sm font-bold tracking-widest flex items-center justify-center gap-2.5 transition-colors duration-200 outline-none" id="confirm-btn" type="button">
<span id="btn-text">CONFIRM SWAP</span>
<span class="hidden w-[18px] h-[18px] rounded-full border-2 border-white/30 border-t-white animate-spin" id="spinner"></span>
</button>

</div>
</div>

<!-- Toast -->
<div class="fixed bottom-7 left-1/2 -translate-x-1/2 translate-y-20 opacity-0 bg-green-50 dark:bg-green-950 border border-green-300 dark:border-green-800 text-green-700 dark:text-green-400 px-5 py-3 rounded-xl flex items-center gap-2 text-sm font-semibold pointer-events-none z-[999] whitespace-nowrap transition-all duration-300" id="toast">
<svg class="w-4 h-4 flex-shrink-0" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" stroke-linecap="round" stroke-linejoin="round"><polyline points="20 6 9 12 4 10"/></svg>
<span id="toast-msg"></span>
</div>

<button>CONFIRM SWAP</button>
</form>
<script src="script.js"></script>
</body>

</html>
Loading