Я начинающий программист. Я выполнил тестовую таску. И хочу, получить обратную связь по написанному мной коду.
Буду рад любому комментарию, но больше всего интересует комментарии касающиеся моего подхода к решению задачи, и что сделано не так с точки зрения читаемости кода.
Заранее благодарю.
Ссылка на GitHub:
https://github.com/barabanoveugene/front-end-task
Описание задачи:
1. Сгенерируйте массив случайных уникальных букв, количество должно быть равно 5. (не вручную, сгенерировать с помощью JS).
2. Добавить сгенерированный массив в html выделите как отдельные опции.
3. Когда пользователь выбирает любую опцию, показывать список имен из файла list.json, где первая буква совпадает с выбранной опцией.
4. Если совпадений нет, отобразить сообщение о результатах отсутствия совпадений.
ПРИМЕЧАНИЕ. После обновления каждой страницы набор уникальных букв должен быть другим.
data - это массив объектов, id: value, name: value
<body>
<div class="wrapper">
<div class="wrap">
<input class="letter" type="text" readonly>
</div>
<div class="wrap">
<input class="letter" type="text" readonly>
</div>
<div class="wrap">
<input class="letter" type="text" readonly>
</div>
<div class="wrap">
<input class="letter" type="text" readonly>
</div>
<div class="wrap">
<input class="letter" type="text" readonly>
</div>
</div>
<script src = "./dist/main.js"></script>
</body>
import { data } from './data'
import css from '../css/main.css'
const someLetters = []
const users = JSON.parse(data)
const letter = document.getElementsByClassName('letter')
const wrap = document.getElementsByClassName('wrap')
const errorText = 'Name not found'
const generationLetters = (func) => {
if (someLetters.length === 5) return someLetters;
const current = String.fromCharCode(func(97, 122)).toLocaleUpperCase()
someLetters.includes(current)
? generationLetters(func)
: someLetters.push(current)
return generationLetters(func)
}
const generationNumbers = (min, max) => {
return Math.floor(Math.random() * (max - min + 1) ) + min
}
const doVisible = (value) => {
document.getElementById(value).style.display = 'block'
}
const showText = (value, text, className = null) => {
const itemList = document.getElementById(value)
.appendChild(document.createElement('li'))
itemList.innerText = text
itemList.className = className
}
generationLetters(generationNumbers)
Array.from(wrap).forEach((item, index) => {
item.appendChild(document.createElement('ol')).id = someLetters[index]
})
Array.from(letter).forEach((item, index) => {
item.value = someLetters[index]
item.onclick = function (event) {
const user = users.filter((item) => item.name.indexOf(event.target.value) === 0)
if(user.length !== 0) {
doVisible(event.target.value)
for (let index = 0; index < user.length; index++) {
showText(event.target.value, user[index].name)
}
} else {
doVisible(event.target.value)
showText(event.target.value, errorText, 'errorText')
}
this.onclick = null
}
})
