@EvgenJunior

Какие синтаксические и/или технические ошибки были допущенны при написании кода?

Добрый день, коллеги!
Я начинающий программист. Я выполнил тестовую таску. И хочу, получить обратную связь по написанному мной коду.
Буду рад любому комментарию, но больше всего интересует комментарии касающиеся моего подхода к решению задачи, и что сделано не так с точки зрения читаемости кода.
Заранее благодарю.
Ссылка на GitHub: https://github.com/barabanoveugene/front-end-task
Описание задачи:
1. Сгенерируйте массив случайных уникальных букв, количество должно быть равно 5. (не вручную, сгенерировать с помощью JS).
2. Добавить сгенерированный массив в html выделите как отдельные опции.
3. Когда пользователь выбирает любую опцию, показывать список имен из файла list.json, где первая буква совпадает с выбранной опцией.
4. Если совпадений нет, отобразить сообщение о результатах отсутствия совпадений.

ПРИМЕЧАНИЕ. После обновления каждой страницы набор уникальных букв должен быть другим.

data - это массив объектов, id: value, name: value

А так же дублирую код:
HTML:
<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>

JS:
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
    }
})

Заранее благодарю за обратную связь!
  • Вопрос задан
  • 140 просмотров
Пригласить эксперта
Ответы на вопрос 2
Rsa97
@Rsa97
Для правильного вопроса надо знать половину ответа
На слабенькую троечку.
Глобальные переменные, рекурсия без необходимости, тернарный оператор вместо if, работа со стилями вместо классов, переназначение onclick вместо addEventListener со всплытием. Это только то, что с ходу в глаза бросилось.
Ну и общее впечатление отсутствия единого стиля, ощущение, что куски понадёрганы из разных примеров.
Ответ написан
WblCHA
@WblCHA
const letter = document.getElementsByClassName('letter')
const wrap = document.getElementsByClassName('wrap')
const user = users.filter((item) => item.name.indexOf(event.target.value) === 0)
Почему ты называешь массивы в единственном числе?
const itemList = document.getElementById(value)
        .appendChild(document.createElement('li'))
А один элемент называешь списком?

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)
}
Это уже индусский код какой-то. И что тут забыл тернарник?
И в целом, почему тут всё пишется в глобальный someLetters? Эта функция генератор вопросов.

Array.from(wrap)
Array.from(letter)
А это что за ужас? Зачем это делать здесь и почему не сделать это по человечески? (деструктуризация)

Короче, Rsa97 всё верно написал, считай это дополнением.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы