aaamibor
@aaamibor
Картограф, программист и фанат СПО

Первый опыт. Покритикуете?

Здравствуйте!
Выставляю на ваш справедливый и в меру придирчивый суд своё самое первое творение на HTML + JavaScript + CSS.
Периодическая таблица Д.И. Менделеева.
Посмотреть в действии можно вот тут.
Общий принцип работы прост.
В HTML находится основной костяк: заголовки, основная таблица, таблицы лантаноидов и актиноидов. Сами по себе таблицы пустые, снабжены id и классами.
На body навешены слушатели событий onload и onresize. В обоих случаях запускается одна и та же JS-функция, которая берёт из JSON-файла данные об элементах и раскидывает по таблице.
Наконец, стиль CSS определяет шрифты, выключку и всё такое.
Подробности и перспективы напишу в комментариях, буду благодарен за критику, вопросы и пожелания.
  • Вопрос задан
  • 441 просмотр
Решения вопроса 2
twobomb
@twobomb
Почему оно такое большое, можно сделать чтобы хотя-бы в монитор влезло без скрола.
Не очевидно, что элементы кликабельные. Нужно сделать эффект наведения и смену мыши.
А еще у всех элементов одна и та же относительная атомная масса.
Мобильной версии нет
Ответ написан
Seasle
@Seasle Куратор тега JavaScript
Помог - отметь решением \( ゚ヮ゚)/
1. Почитайте как правильно создавать репозиторий для GitHub Pages или включать его в настройках.
2. Было бы намного лучше если бы таблицы внутри ячеек таблицы не использовали.
3. У таблиц Лантаноидов и Актиноидов почему-то border-collapse есть, а в главной таблице - нет.
4. Меня (возможно и не только меня) смущает название файлов, все начинаются с Mendele.

Теперь разбор кода:
CSS
1.
* {
	font-family: "Verdana", sans-serif;
}
простого
body {
    font-family: Verdana, sans-serif;
}
достаточно.
2. Для таблиц можно было дать один и тот же класс.
3.
.oneElemLaAc {
	font-size: 90%;  
}
тут почитайте про em и rem.
JavaScript
1. Зачем использовать шаблонные строки и вставлять внутри конкатенацию?
`... <td class="elSignSgOne" rowspan="2">` + elSign + `</td> ...`
заменить на
`... <td class="elSignSgOne" rowspan="2">${elSign}</td> ...`

2. Все var лучше заменить на let.
3. В функции clickOnElement используется цикл while, почитайте о .closest().
4. Лучше не использовать .onclick и подобные, .addEventListener (документация) намного лучше.
5. Вызовы функций из HTML лучше перенести в JS. Причем, изучить debounce и throttle механизмы. Поможет при написании функции, которая вызывается при изменении окна.
6. oneElem['number'] и подобные можно просто заменить на oneElem.number.
7. innerHTML конечно удобная штука, но, я считаю, лучше использовать API для работы с DOM (document.createElement(), .append(), .remove() и так далее), что поможет писать код более декларативным и куда-то складывать такие элементы, чтобы в дальнейшем не искать их на странице.
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

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

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