1 Востаннє редагувалося Tar (10.02.2018 13:41:40)

Тема: Оцініть маленький навчальний проект будь ласка!

Початківець.
Завдання - виводити цитати випадковим чином,реалізувати можливість вибору автора.
ajax тільки почав розбирати тому дуже хотілось попрактикуватись та спробувати на практиці щось зробити.
Буду вдячний за критику!

https://taras19.github.io/Random_Quote/
https://github.com/Taras19/Random_Quote

Зробив зміни.Намагався виправити помилки.
https://taras19.github.io/Random_Quote_new/
https://github.com/Taras19/Random_Quote_new
- select оформив за допомогою css
- відмовився від nice-select
- додав трохи коментарів
- намагався трохи впорядкувати js
- використав прелоадер
- при першому завантаженні цитати тепер різні(було таке зауваження)

Подякували: ostap34PHP, NaharD, 0xDADA11C7, /KIT\, flatliner, 221VOLT7

2 Востаннє редагувалося /KIT\ (08.07.2021 13:48:27)

Re: Оцініть маленький навчальний проект будь ласка!

Класно, тільки навіщо потрібно "show" в description.json? Для ідентифікацій показаних цитат?

Подякували: Tar, ostap34PHP2

3

Re: Оцініть маленький навчальний проект будь ласка!

Відразу кидається в очі: на кнопці "Наступна", текст вилазить за межі кнопки

Подякували: Tar, flatliner2

4

Re: Оцініть маленький навчальний проект будь ласка!

/KIT\ написав:

Класно, тільки навіщо потрібно "show" в description.json? Для ідентифікацій показаних цитат?

Так!

5

Re: Оцініть маленький навчальний проект будь ласка!

vladkrivtsun написав:

Відразу кидається в очі: на кнопці "Наступна", текст вилазить за межі кнопки

Там hover ефект, рішення по оформленню кнопки піддивився на інших ресурсах захотілось розібратись як працює , зразу і використав для себе.
По кнопці залишилось одне питання в якому не зміг розібратись(тому на мобільних і змінив оформлення) на мобільному якщо відбувається click по кнопці спочатку кнопка отримує сірий фон який потім перекриває #4AB9F2, намагався боротись з цим сірим фоном але без результату маю підозру на 

background-color: buttonface;

але переоприділити не зміг.Можливо хтось підскаже як це можна зробити.

6

Re: Оцініть маленький навчальний проект будь ласка!

Tar написав:

але переоприділити не зміг.Можливо хтось підскаже як це можна зробити.

треба скористуватися !important
приклад:

color:#fff !important;
Подякували: Tar1

7

Re: Оцініть маленький навчальний проект будь ласка!

Будь ласка

https://ukr-mova.in.ua/assets/uploads/images/Mova_01.png

Подякували: Tar1

8

Re: Оцініть маленький навчальний проект будь ласка!

При завантаженні сторінки одна й та ж цитата. jQuery. Навіщо там jQuery? Це жа навчальний проект. Не осилюєте стилізувати випадаючий список чи не хочете вчитися?

Подякували: leofun011

9 Востаннє редагувалося javascriptIsLife (06.02.2018 22:59:09)

Re: Оцініть маленький навчальний проект будь ласка!

Потрібно було зробити об'єкт  ключі якого це імена (або кодові позначення) письменників що вказують на  об'єкти які представляють собою конкретного письменника і містять масив цитат і властивості які вказують на фото і інші атрибути а то зараз є, наприклад, 5 об'єктів для Ліни Костенко і всі ці об'єкти 5 разів повторюють інформацію через властивості alt, src, author, show.

authors = {
  "Ліна Костенко": {
      quotes: [],
      src: "img/kostenko.jpg",
      alt: "Ліна Костенко"
   }
}

Коментарі погані тому що вони мало що пояснюють і писати коментарі для вказування на очевидні речі на зразок

  /* запит на сервер */
  var xhr = new XMLHttpRequest();

не варто. Краще б прокоментували для чого потрібна та чи інша змінна а то на початку коду програми є купа змінних а для чого вони незрозуміло.
Отак оформляти текст програми не потрібно:

       if(){
          
        }
        else if()

В коді є отакий рядок

/* загальна довжина списку */
lengthCurrentList.innerHTML = list.length;

Відлік починається від нуля і тут потрібно додавати 1 до властивості length. На сторінці 5 цитат Ліни Костенко а вказано що 4.

Подякували: Tar, leofun01, NaharD3

10

Re: Оцініть маленький навчальний проект будь ласка!

javascriptIsLife написав:

При завантаженні сторінки одна й та ж цитата. jQuery. Навіщо там jQuery? Це жа навчальний проект. Не осилюєте стилізувати випадаючий список чи не хочете вчитися?

jQuery використав виключно для плагіна nice-select хотів спробувати з ним попрацювати.

11

Re: Оцініть маленький навчальний проект будь ласка!

javascriptIsLife написав:

Потрібно було зробити об'єкт  ключі якого це імена (або кодові позначення) письменників що вказують на  об'єкти які представляють собою конкретного письменника і містять масив цитат і властивості які вказують на фото і інші атрибути а то зараз є, наприклад, 5 об'єктів для Ліни Костенко і всі ці об'єкти 5 разів повторюють інформацію через властивості alt, src, author, show.

authors = {
  "Ліна Костенко": {
      quotes: [],
      src: "img/kostenko.jpg",
      alt: "Ліна Костенко"
   }
}

Коментарі погані тому що вони мало що пояснюють і писати коментарі для вказування на очевидні речі на зразок

  /* запит на сервер */
  var xhr = new XMLHttpRequest();

не варто. Краще б прокоментували для чого потрібна та чи інша змінна а то на початку коду програми є купа змінних а для чого вони незрозуміло.
Отак оформляти текст програми не потрібно:

       if(){
          
        }
        else if()

В коді є отакий рядок

/* загальна довжина списку */
lengthCurrentList.innerHTML = list.length;

Відлік починається від нуля і тут потрібно додавати 1 до властивості length. На сторінці 5 цитат Ліни Костенко а вказано що 4.

У кожного автора по 4 цитати list.length=4 додавати 1 не потрібно(якщо я правильно вас зрозумів,
Отак оформляти текст програми не потрібно: - можна детальніше я початківець і ще дуже багато чого не знаю!

Подякували: FakiNyan1

12

Re: Оцініть маленький навчальний проект будь ласка!

Дійсно 4. Пишіть

if (…) {
  …
} else {
  …
}

або

if (…) 
{
  …
}
else
{
  …
}

А не

           if(){
              
            }
            else if()
Подякували: Tar1

13

Re: Оцініть маленький навчальний проект будь ласка!

length на то і length, аби показувати загальну кількість елементів

14 Востаннє редагувалося ostap34PHP (07.02.2018 16:25:11)

Re: Оцініть маленький навчальний проект будь ласка!

Tar написав:
javascriptIsLife написав:

При завантаженні сторінки одна й та ж цитата. jQuery. Навіщо там jQuery? Це жа навчальний проект. Не осилюєте стилізувати випадаючий список чи не хочете вчитися?

jQuery використав виключно для плагіна nice-select хотів спробувати з ним попрацювати.

Не тратьте трафік користувача без потреби, краще використайте маленьке рішення на чистому js.
Наприклад:
https://www.cssscript.com/elegant-selec … la-select/
https://www.cssscript.com/demo/elegant- … la-select/
Також, якщо дуже потрібно, можна використати zepto - замісь jquery.

Подякували: 0xDADA11C7, Tar, /KIT\, leofun014

15

Re: Оцініть маленький навчальний проект будь ласка!

            if(optionSelected === "Всі автори"){
              item.show = false;
            }
            else if(optionSelected === item.author){
              item.show = false;
            }

Тут взагалі однакові дії в обох гілках, їх треба об'єднати:

            if(optionSelected === "Всі автори" || optionSelected === item.author){
              item.show = false;
            }

чи навіть

            if(["Всі автори",item.author].indexOf(optionSelected) > -1){
              item.show = false;
            }
Подякували: ostap34PHP, FakiNyan, Tar4

16 Востаннє редагувалося Tar (10.02.2018 13:42:34)

Re: Оцініть маленький навчальний проект будь ласка!

Зробив зміни.Намагався виправити помилки.
https://taras19.github.io/Random_Quote_new/
https://github.com/Taras19/Random_Quote_new
- select оформив за допомогою css
- відмовився від nice-select
- додав трохи коментарів
- намагався трохи впорядкувати js
- використав прелоадер
- при першому завантаженні цитати тепер різні(було таке зауваження)
Ще хочу в прелоадері відобразити відсоток завантаження але ще не розібрався як це можна зробити.
xhr.onprogress - дасть можливість відслідкувати завантаження запиту цитат а мені потрібно
відслідкувати процес завантаження сторінки (html+css+img+js)

Подякували: ostap34PHP, 221VOLT3

17

Re: Оцініть маленький навчальний проект будь ласка!

Для відображення відсотку завантаження використав pace.js в Chrome,Opera працює нормально .

18

Re: Оцініть маленький навчальний проект будь ласка!

vladkrivtsun написав:

Відразу кидається в очі: на кнопці "Наступна", текст вилазить за межі кнопки

так, трохи дивно вигляда

19 Востаннє редагувалося 221VOLT (12.02.2018 13:29:14)

Re: Оцініть маленький навчальний проект будь ласка!

код не дивився, мудрувати що фон змусить епілептика працювати фабрикою виробництва піни до вогнегасників - не буду,

загалом -- класно, мені подобається  *THUMBSUP*

Подякували: Tar1

20

Re: Оцініть маленький навчальний проект будь ласка!

221VOLT написав:

код не дивився, мудрувати що фон змусить епілептика працювати фабрикою виробництва піни до вогнегасників - не буду,

загалом -- класно, мені подобається  *THUMBSUP*

якщо будете мати можливість подивіться код будь ласка

Подякували: 221VOLT1