diff --git a/css/style.css b/css/style.css index a31eeb4..d9befd9 100644 --- a/css/style.css +++ b/css/style.css @@ -22,11 +22,18 @@ body { } #container { + display: flex; + flex-direction: row; + align-items: center; + justify-content: center; + text-align: center; height: 100%; width: 100%; +} - align-content: center; +#container > * { + width: 50%; } [data-tooltip] { @@ -71,10 +78,11 @@ input { white-space: preserve; color: var(--color); - padding: 2em; + max-height: 100%; + overflow-y: auto; } -#switch_theme { +#switch_theme, #help { text-decoration: underline; cursor: pointer; } @@ -90,4 +98,10 @@ input { .image-grid > * { max-width: 50%; max-height: 50%; +} + +@media screen and (max-width: 798px) { + #container { + flex-direction: column !important; + } } \ No newline at end of file diff --git a/index.html b/index.html index c789332..534322a 100644 --- a/index.html +++ b/index.html @@ -14,14 +14,15 @@
-

welcome to my website

-

switch theme

- -

press Enter to run command

-

use 'help' to list all commands

- - [guest@website ~]$ - +
+

welcome to my website

+

switch theme

+ +

press Enter to run command

+

use 'help' to list all commands

+ [guest@website ~]$ + +
diff --git a/js/script.js b/js/script.js index 8dd9c6f..cb58359 100644 --- a/js/script.js +++ b/js/script.js @@ -4,6 +4,36 @@ function updateAge() { age.textContent = difference.toFixed(4); } +// process command function +function processCommand() { + const [commandName, ...args] = command.value.split(' ') || [command.value] + const suppliedCommand = COMMANDS.find(c => c.name === commandName) + + if (!suppliedCommand) { + result.textContent = 'invalid command'; + return + } + + const { arguments, output } = suppliedCommand; + for (const i in arguments) { + const argument = arguments[i] + + if (argument.required && !args[i]) { + result.textContent = `argument ${argument.name} is missing`; + return + } + + const errorMessage = argument.check(argument.multiword ? args.join(' ') : args[i]) + + if (typeof errorMessage === 'string') { + result.textContent = `error while executing ${suppliedCommand.name}: ${errorMessage}`; + return + } + } + + result.innerHTML = output(...args).replaceAll(TAB, '') +} + // wrapper for setInterval const runEvery = (task, ms) => { task() @@ -37,34 +67,7 @@ command?.addEventListener('focusout', () => { }) command?.addEventListener('keydown', e => { - if (e.key === 'Enter') { - const [commandName, ...args] = e.target.value.split(' ') || [e.target.value] - const command = COMMANDS.find(c => c.name === commandName) - - if (!command) { - result.textContent = 'invalid command'; - return - } - - const { arguments, output } = command; - for (const i in arguments) { - const argument = arguments[i] - - if (argument.required && !args[i]) { - result.textContent = `argument ${argument.name} is missing`; - return - } - - const errorMessage = argument.check(argument.multiword ? args.join(' ') : args[i]) - - if (typeof errorMessage === 'string') { - result.textContent = `error while executing ${command.name}: ${errorMessage}`; - return - } - } - - result.innerHTML = output(...args).replaceAll(TAB, '') - } + if (e.key === 'Enter') processCommand() }) // run all tasks @@ -74,4 +77,10 @@ command?.focus() // initial theme configuration const theme = localStorage.getItem('theme'); if (theme === 'dark') - document.body.classList.add('dark') \ No newline at end of file + document.body.classList.add('dark') + +// listen to help tooltip +help.addEventListener('click', () => { + command.value = 'help'; + processCommand(); +}) \ No newline at end of file