maciejpedzi.ch/assets/js/script.js

82 lines
3.0 KiB
JavaScript
Raw Normal View History

2020-11-27 23:12:38 +01:00
const input = document.querySelector('#cmd');
const cmdHistoryElement = document.querySelector('#cmd-history');
const today = new Date();
2020-12-31 11:56:56 +01:00
const currentYear = today.getFullYear();
2020-11-27 23:12:38 +01:00
const cmdHistory = [];
let cmdIndex = 0;
2021-01-01 12:17:06 +01:00
document.querySelector('#current-year').textContent = currentYear;
2020-11-27 23:12:38 +01:00
input.focus();
input.addEventListener('blur', (evt) => input.focus());
window.addEventListener('keypress', (evt) => {
2020-12-13 18:01:59 +01:00
const command = input.value.trim();
2020-11-27 23:12:38 +01:00
2020-12-13 18:01:59 +01:00
if (evt.key === 'Enter' && command.length > 0) {
const cmdToSave = document.createElement('p');
const output = document.createElement('p');
cmdToSave.textContent = `> ${command}`;
cmdHistoryElement.append(cmdToSave);
2020-11-27 23:12:38 +01:00
2020-12-13 18:01:59 +01:00
switch (command.toLowerCase()) {
default:
output.style.color = 'red';
output.textContent = `ERROR: Unknown command '${command}'`;
break;
case 'about':
2020-12-31 11:56:56 +01:00
const timeDiff = today.getTime() - new Date('2005-05-08').getTime();
2021-01-01 12:17:06 +01:00
const age = Math.floor(timeDiff / (3600 * 24 * 365 * 1000));
2020-12-31 11:56:56 +01:00
2020-12-13 18:01:59 +01:00
output.textContent = `Maciej Pedzich is a ${age}-year-old high school student from Kielce, Poland.
2020-11-27 23:12:38 +01:00
He makes web applications using Vue.js, Node.js, Express and MongoDB/PostgreSQL, but he likes experimenting with other solutions too.
He believes that by being creative and cooperating with others, you can achieve success.
2020-12-31 11:56:56 +01:00
When not coding, he is probably watching an F1 race, or playing retro video games.`;
2020-12-13 18:01:59 +01:00
break;
2021-01-05 22:13:31 +01:00
case 'cls':
cmdHistoryElement.textContent = '';
break;
2020-12-13 18:01:59 +01:00
case 'contact':
output.innerHTML = `Email address:
2020-11-27 23:12:38 +01:00
<a href="mailto:contact@maciejpedzi.ch">contact@maciejpedzi.ch</a>`;
2020-12-13 18:01:59 +01:00
break;
case 'github':
window.open('https://github.com/maciejpedzich');
break;
case 'help':
output.innerHTML = `<p>about - shows everything you need to know about Maciej</p>
2021-01-05 22:13:31 +01:00
<p>cls - clears screen</p>
<p>contact - displays contact information</p>
2021-01-01 12:17:06 +01:00
<p>github - opens Maciej's Github profile</p>
2020-11-27 23:12:38 +01:00
<p>help - displays a list of available commands</p>
2020-12-13 18:01:59 +01:00
<p>skills - presents a set of current skills</p>
2021-01-05 22:13:31 +01:00
<p>If on desktop/laptop, use up and down arrows to retype commands</p>`;
2020-12-13 18:01:59 +01:00
break;
case 'skills':
output.innerHTML = `<p>Frontend: HTML, CSS, JavaScript, TypeScript, Vue.js</p>
2020-11-27 23:12:38 +01:00
<p>Backend: JavaScript, TypeScript, Node.js, Express</p>
<p>Database: MongoDB, PostgreSQL</p>
2021-01-05 22:13:31 +01:00
<p>Tooling: Git, Visual Studio Code, Bash, Windows PowerShell, Postman</p>
<p>Hosting/Deployment: Netlify, Heroku, Amazon Web Services, MongoDB Atlas</p>`;
2020-12-13 18:01:59 +01:00
break;
}
2020-11-27 23:12:38 +01:00
2020-12-13 18:01:59 +01:00
cmdHistory.push(command);
cmdHistoryElement.append(output);
input.value = '';
input.scrollIntoView();
}
});
window.addEventListener('keydown', (evt) => {
if (cmdHistory.length > 0) {
if (evt.key === 'ArrowUp') {
cmdIndex - 1 >= 0 ? cmdIndex-- : (cmdIndex = cmdHistory.length - 1);
input.value = cmdHistory[cmdIndex];
} else if (evt.key === 'ArrowDown') {
cmdIndex + 1 < cmdHistory.length ? cmdIndex++ : (cmdIndex = 0);
input.value = cmdHistory[cmdIndex];
}
}
2020-11-27 23:12:38 +01:00
});