Більше ідей проектів для вдосконалення ваших навичок кодування

Два тижні тому я опублікував статтю, що містить 15 проектних ідей, які ви можете створити, щоб покращити свої навички кодування, і люди були дуже раді цьому ресурсу.

Крім того, сховище ідей додатків отримало майже 3000 зірок з моменту опублікування цієї статті. Це божевільно! ?

Дякую всім за це! ?

У цій публікації ми розглянемо деякі нові проекти, які були додані до сховища з тих пір.

Як коротке нагадування, усі проекти поділяються на три рівні на основі знань та досвіду, необхідних для їх виконання. Перевірте опис рівнів у сховищі.

Нижче ви знайдете 2 ідеї проекту для початківців , 4 для середнього та 3 вдосконалених проектів.

1. КАЛЬКУЛЯТОР

Рівень: 1 - початківець

Калькулятори - це не тільки один з найкорисніших доступних інструментів, але це також чудовий спосіб зрозуміти інтерфейс користувача та обробку подій у додатку. У цій задачі ви створите калькулятор, який підтримує основні арифметичні обчислення цілих чисел.

Стиль залежить від вас, тому використовуйте свою фантазію та будьте креативними! Можливо, вам також варто витратити свій час на експерименти з програмою калькулятора на своєму мобільному пристрої, щоб краще зрозуміти базову функціональність та крайні випадки.

Обмеження

  • Ви не можете використовувати eval()функцію для виконання обчислень

Історії користувачів

  • Користувач може бачити дисплей, що відображає поточний номер або результат останньої операції.
  • Користувач може побачити вхідну панель, що містить кнопки для цифр 0–9, операції - '+', '-', '/' та '=', кнопку 'C' (для очищення) та кнопку 'AC' (для очищення всіх).
  • Користувач може вводити цифри як послідовності довжиною до 8 цифр, натискаючи цифри на панелі вводу. Введення будь-яких цифр більше 8 буде проігноровано.
  • Користувач може натиснути на кнопку операції, щоб відобразити результат цієї операції: _ результат попередньої операції та останній введений номер АБО _ останні два введені числа АБО * останній введений номер
  • Користувач може натиснути кнопку «C», щоб очистити останній номер або останню операцію. Якщо останній запис користувачів був операцією, дисплей буде оновлений до значення, яке йому передувало.
  • Користувач може натиснути кнопку 'AC', щоб очистити всі внутрішні робочі зони та встановити дисплей на 0.
  • Користувач може бачити, як відображається повідомлення "ERR", якщо будь-яка операція перевищує максимум 8 цифр.

Бонусні можливості

  • Користувач може натиснути кнопку "+/-", щоб змінити знак номера, що відображається в даний момент.
  • Користувач може побачити десяткову крапку (.) На вхідній панелі, яка дозволяє вводити числа з плаваючою комою до 3-х знаків та виконувати операції з максимальною кількістю десяткових знаків, введених для будь-якого одного числа.

Корисні посилання та ресурси

  • Калькулятор (Вікіпедія)
  • MDN

Приклади проектів

2. РЕЦЕПТ ДОДАТОК

Рівень: 1 - початківець

Можливо, ви цього не усвідомлювали, але рецепти - це не що інше, як кулінарні алгоритми. Як і програми, рецепти - це низка обов’язкових кроків, які, якщо їх правильно виконувати, дають смачну страву.

Завдання програми "Рецепт" - допомогти користувачеві керувати рецептами таким чином, щоб полегшити їх дотримання.

Обмеження

  • Для початкової версії цього додатка дані рецептів можуть кодуватися як файл JSON. Після впровадження початкової версії цього додатка ви можете розширити його, щоб зберегти рецепти у файлі або базі даних.

Історії користувачів

  • Користувач може побачити список назв рецептів
  • Користувач може натиснути заголовок рецепта, щоб відобразити картку рецепта, що містить заголовок рецепту, тип їжі (сніданок, обід, вечеря або закуска), кількість людей, яких він обслуговує, рівень складності (початковий, середній, просунутий), список інгредієнтів (включаючи їх кількість) та етапи підготовки.
  • Користувач натискає заголовок нового рецепта, щоб замінити поточну картку новим рецептом.

Бонусні можливості

  • Користувач може побачити фото, на якому показано, як виглядає предмет після його підготовки.
  • Користувач може шукати рецепт, якого немає у списку назв рецептів, ввівши назву страви у вікно пошуку та натиснувши кнопку «Пошук». Будь-який API рецептів з відкритим кодом може бути використаний як джерело для рецептів (див. The MealDB нижче).
  • Користувач може побачити список рецептів, що відповідають пошуковим термінам
  • Користувач може натиснути назву рецепта, щоб відобразити його карту рецептів.
  • Користувач може побачити попереджувальне повідомлення, якщо не знайдено відповідного рецепта.
  • Користувач може натиснути кнопку "Зберегти" на картках рецептів, розташованих через API, щоб зберегти копію у цьому файлі рецепта програм або базі даних.

Корисні посилання та ресурси

  • Використання Fetch
  • Аксіос
  • API MealDB

Приклади проектів

3. КРЕСЛЕННЯ ДОДАТОК

Рівень: 2 - середній

Створюйте цифрові ілюстрації на полотні в Інтернеті, щоб ділитися ними в Інтернеті, а також експортувати як зображення.

Історії користувачів

  • Користувач може малювати за canvasдопомогою миші
  • Користувач може змінити колір
  • Користувач може змінити розмір інструменту
  • Користувач може натиснути кнопку, щоб очистити canvas

Бонусні можливості

  • Користувач може зберегти ілюстрацію як зображення ( .png, .jpgі т.д. формат)
  • Користувач може використовувати різні форми ( rectangle, circle, starі т.д.)
  • Користувач може поділитися ілюстрацією в соціальних мережах

Корисні посилання та ресурси

  • Дізнайтеся, як створити програму для малювання за допомогою p5js

Приклади проектів

4. ПЕРЕКЛАДНИК EMOJI

Рівень: 2 - середній

Смайли стали мовою сучасного суспільства. Вони є веселим та швидким способом спілкування, але також надзвичайно виразним механізмом передачі емоцій та реакцій.

Завдання програми Emoji Translator - перекласти текст, введений користувачем, у еквівалентну рядок смайлів, перекладених з одного або декількох слів оригінального тексту, та слів, для яких немає відповідних смайлів.

Історії користувачів

  • Користувач може ввести рядок слів, цифр та розділових знаків у текстове поле
  • Користувач може натиснути кнопку "Перекласти", щоб перекласти слова з введеного тексту у відповідні смайли.
  • Користувач може побачити попереджувальне повідомлення, якщо натиснуто кнопку "Перекласти", але текстове поле вводу було порожнім або незмінним порівняно з останнім перекладом.
  • Користувач може бачити текстові елементи у введеному тексті, перекладені на їх еквівалентні смайли у вихідному текстовому полі. Елементи тексту, для яких немає смайлів, залишаться незмінними.
  • Користувач може натиснути кнопку «Очистити», щоб очистити текстові поля вводу та виводу.

Бонусні можливості

  • Розробник застосує функцію синоніму смайлів, щоб програма могла перекласти на смайлики різноманітніші слова.
  • Користувач може вибрати мову, в яку вводиться введений текст, зі спадного списку мов.

Корисні посилання та ресурси

Повний список смайлів v12.0

Приклади проектів

Emoji Translate

5. ДОДАТОК ГЕНЕРАТОРА МЕМ

Рівень: 2 - середній

Дозволити користувачам створювати власні меми, додаючи текст над зображенням.

Історії користувачів

  • Користувач може завантажити зображення, яке з’явиться на полотні
  • Користувач може додати текст у верхній частині зображення
  • Користувач може додати текст у нижній частині зображення
  • Користувач може вибрати колір тексту
  • Користувач може вибрати розмір тексту
  • Користувач може зберегти отриманий мем

Бонусні можливості

  • Користувач може вибрати сімейство шрифтів для тексту
  • Користувач може поділитися мемом у соціальних мережах (твіттер, reddit, facebook тощо)
  • Користувач може перетягувати текст навколо та розміщувати його куди завгодно поверх зображення
  • Користувач може малювати фігури поверх зображення (кола, прямокутники або вільний малюнок за допомогою миші)

Корисні посилання та ресурси

Робота з полотном дуже зручна завдяки бібліотеці p5js.

Приклади проектів

Генератор мемів від imgflip

6. НАБИРАЮЧА ПРАКТИКА

Рівень: 2 - середній

Деякі речі настільки очевидні, що їх можна легко пропустити. Як розробник ваша здатність швидко та точно друкувати - це один із факторів, який впливає на продуктивність вашої розробки. Завдання програми Typing Practice - надати вам практику друку разом із метриками, щоб ви могли виміряти ваш прогрес.

На практиці друкування відображається слово, яке ви повинні ввести протягом певного інтервалу часу. Якщо слово введено неправильно, воно залишається на екрані, а інтервал часу залишається незмінним. Але при правильному наборі слова відображається нове слово, а інтервал часу трохи зменшується.

Сподіваємось, ця повторювана практика допоможе вам покращити як швидкість друку, так і точність.

Історії користувачів

  • Користувач бачить, як у вікні програми відображаються слова з інтервалом часу.
  • Користувач може бачити кількість успішних спроб та загальну кількість спроб у полі оцінок.
  • Користувач може натиснути кнопку «Почати практику», щоб розпочати практичну сесію.
  • Користувач може бачити підказку, що відображається у текстовому полі.
  • Користувач може почати вводити слово у полі введення тексту.
  • Користувач може бачити набрані літери, якщо вводиться неправильна буква, і поле введення тексту буде очищено.
  • Користувач може побачити повідомлення поруч із полем введення тексту, в якому вказується, що користувач повинен спробувати ще раз, якщо введено неправильний лист.
  • Користувач може бачити кількість загальних спроб, збільшених у полі оцінки.
  • Користувач може побачити привітання, якщо слово введено правильно.
  • Користувач бачить, що часовий інтервал слів має бути зменшений на невелику кількість, якщо слово введено правильно.
  • Користувач може бачити кількість успішних спроб, збільшених у полі оцінки, якщо слово було правильно введено.
  • Користувач може натиснути кнопку «Зупинити практику», щоб зупинити практику.

Бонусні можливості

  • Користувач може почути унікальний звуковий сигнал, коли відображається нове слово, правильно вводиться слово або вводиться неправильна буква.
  • Користувач може увійти в додаток
  • Користувач може бачити сукупну статистику ефективності за всі свої практичні заняття.

Корисні посилання та ресурси

  • клавіатура
  • setInterval

Приклади проектів

Викладач набору тексту Twiddler

7. ЛІФТ

Рівень: 3 - вдосконалений

Дуже важко думати про світ без ліфтів. Особливо, якщо вам доводиться щодня ходити вгору і вниз по 20 сходових маршів. Але, якщо подумати, ліфти були однією з оригінальних реалізацій подій та обробників подій задовго до появи веб-додатків на сцені.

Завдання програми "Ліфт" - імітувати роботу ліфта і, що ще важливіше, як обробляти події, що виникають, коли мешканці будівель користуються ним. Ця програма імітує мешканців, які закликають ліфт з будь-якого поверху та натискають кнопки всередині ліфта, щоб вказати поверх, який вони хочуть відвідати.

Обмеження

  • Ви повинні застосувати один обробник подій для кнопок вгору та вниз на кожному поверсі. Наприклад, якщо є 4 поверхи, слід застосовувати один обробник подій, а не 8 (дві кнопки на поверх).
  • Подібним чином для всіх кнопок на панелі керування в ліфті повинен бути застосований єдиний обробник подій, а не унікальний обробник подій для кожної кнопки.

Історії користувачів

  • Користувач може побачити схему перерізу будівлі з чотирма поверхами, шахтою ліфта, ліфтом та кнопкою вгору на першому поверсі, кнопками вгору та вниз на другому та третьому поверхах та кнопкою вниз на четвертому поверсі.
  • Користувач може побачити панель управління ліфтом із кнопкою на кожному з поверхів збоку від схеми.
  • Користувач може натиснути кнопку вгору та вниз на будь-якому поверсі, щоб зателефонувати в ліфт.
  • Користувач може розраховувати, що натискання кнопок вгору та вниз на будь-якому поверсі для подання запиту на ліфт буде в черзі та обслуговуватиметься в тій послідовності, в якій було натиснуто.
  • Користувач може бачити, як ліфт рухається вгору-вниз по шахті на підлогу, до якої його викликали.
  • Користувач може натиснути панель керування ліфтом, щоб вибрати поверх, куди він повинен їхати.
  • Користувач може очікувати, що ліфт зупиниться на 5 секунд, очікуючи натискання кнопки підлоги на панелі управління. Якщо протягом цього часу кнопка підлоги не буде натиснута, ліфт обробить наступний запит на дзвінок.
  • Користувач може розраховувати, що ліфт повернеться на перший поверх, коли немає запитів на обробку.

Бонусні можливості

  • Користувач може побачити попереджувальне сповіщення, якщо кількість запитів на ліфт перевищує максимально дозволену кількість. Це обмеження залишається за розробником.
  • Користувач може почути звук, коли ліфт заходить на поверх.
  • Користувач може бачити, як мешканець випадково прибуває на поверх, щоб вказати, коли користувач повинен натиснути кнопку виклику ліфта вгору або вниз на цьому поверсі.
  • Користувач може вказати інтервал часу між новими мешканцями, які прибувають, щоб зателефонувати в ліфт.

Корисні посилання та ресурси

Черга першого входу, першого виходу (Вікіпедія)

Приклади проектів

8. ДОДАТОК СИМУЛЯТОРУ ШВИДКИХ ЇЖ

Рівень: 3 - вдосконалений

Додаток Fast Food імітує роботу простого ресторану на винос і покликаний допомогти розробнику застосувати свої знання про обіцянки та принципи твердого дизайну.

Ця програма імітує клієнтів ресторану на винос, що розміщують замовлення та чекають, коли їх підготують і доставлять на прилавок. Після оформлення замовлення клієнт чекає оголошення, перш ніж забрати його та перейти до їдальні.

Історії користувачів, з яких складається цей додаток, зосереджуються навколо чотирьох різних ролей:

  • Користувач - кінцевий користувач, що використовує додаток
  • Замовник - змодельований Замовник
  • Order Taker - модельований Order Taker
  • Cook - імітація Cook
  • Сервер - імітований Сервер

У цій програмі є чимало історій користувачів. Не переживайте, хоча. Не поспішайте замальовувати не просто інтерфейс, а те, як різні актори (ролі) взаємодіють та поступово створюють додаток, дотримуючись принципів Agile.

Обмеження

  • Квитки на замовлення можуть бути представлені у вигляді двох різних типів обіцянок - один сервер чекає, поки Кухар готує замовлення, а інший, на який чекає Клієнт, перебуваючи на лінії обслуговування.
  • Використовуйте рідний еквівалент JS Promises будь-якою мовою, яку ви вибрали для розробки. Розробники JS повинні використовувати рідну Promises, а не async/await.
  • Створіть цю програму за допомогою функцій рідної мови. Ви НЕ можете використовувати симуляційний пакет або бібліотеку.
  • Нові клієнти надходять у рядок замовлення через фіксований інтервал часу. Іншими словами, нові клієнти отримують постійну швидкість.
  • Замовлення квитків також виконується через фіксований інтервал часу. Вони виконуються з постійною швидкістю.

Історії користувачів

Робота програми

  • Користувач може побачити область введення, яка дозволяє ввести часовий інтервал для прибуття клієнта та часовий інтервал для виконання кухарем замовлення квитка .
  • Користувач може побачити індивідуальне попереджувальне повідомлення, якщо інтервал прибуття клієнта або інтервал виконання замовлення введено неправильно.
  • Користувач може розпочати моделювання, натиснувши кнопку Пуск.
  • Користувач може побачити область рядка замовлення, що містить текстове поле, що показує кількість клієнтів, які очікують на розміщення замовлення.
  • Користувач може побачити область замовлення, що містить текстові поля із номером замовлення, який наразі приймається.
  • Користувач може побачити кухонну зону, що містить текстове поле із номером замовлення , який готується, і текстове поле із переліком замовлень на очікування послідовно, а також підрахунок кількості замовлень на очікування.
  • Користувач може побачити область самовивозу, що містить текстове поле з номером замовлення, який зараз доступний для замовлення Клієнтом, і текстове поле, що відображає кількість клієнтів, які очікують у рядку обслуговування.
  • Користувач може зупинити моделювання в будь-який час, натиснувши кнопку Зупинити.

Бонусні можливості

  • Користувач може вказати, скільки часу потрібно, щоб Організатор Замовлення створив замовлення .
  • Користувач може вказати, скільки часу потрібно Серверу, щоб доставити замовлення замовнику.
  • Користувач може вказати загальну кількість часу для запуску моделювання після натискання кнопки «Пуск».
  • Користувач може бачити анімований вигляд Клієнтів та замовлень, коли вони рухаються по робочому процесу.

Корисні посилання та ресурси

  • Симулятор швидкого харчування - логічний робочий процес
  • Agile Manifesto & 12 Principles of Agile Software
  • ТВЕРДІ Принципи, які повинен знати кожен розробник
  • Використання обіцянок
  • Пообіцяй

9. ІГРА SHELL

Рівень: 3 - вдосконалений

Гра «Шелл» - це класична гра в азартні ігри, яка бере свій початок ще в Стародавній Греції. Для гри потрібні три снаряди, горошина, спритність рук оператора та гострі навички спостереження гравця. Це також класична шахрайська гра, оскільки оператору легко обдурити гравця. Слава Богу, що останній не є наміром цього додатка.

Ця гра Shell призначена для надання графічного інтерфейсу до класичної гри в оболонку та надання гравцеві чесної гри. Наша гра малює на полотні три снаряди разом із горохом, переміщує горошину під одну із оболонок і перемішує оболонки протягом певного проміжку часу. Потім користувач повинен натиснути на оболонку, під якою, на його думку, схований горох. Користувачеві дозволяється продовжувати відгадування, поки не буде знайдено горошину.

Історії користувачів

  • Користувач може побачити полотно з трьома черепашками та горошину.
  • Користувач може натиснути оболонку, під якою має бути прихований горох.
  • Користувач може бачити рух гороху під оболонкою, на яку клацнули.
  • Користувач може натиснути кнопку "Перемішати", щоб розпочати анімоване перемішування снарядів протягом 5 секунд.
  • Користувач може натиснути на оболонку, під якою вона вважає, що горох прихований, коли анімація зупиняється.
  • Користувач може бачити, як піднімається оболонка, на яку клацнули, щоб виявити, чи горошок захований під нею.
  • Користувач може продовжувати клацати оболонками, поки горох не буде знайдений.
  • Користувач може побачити привітальне повідомлення, коли горох знаходиться
  • Користувач може запустити нову гру, клацнувши оболонку, під якою має бути прихований горох (крок №2 вище). Потім описані вище кроки повторюються.

Бонусні можливості

  • Користувач може побачити панель оцінок, що містить кількість виграшів та кількість зіграних ігор.
  • Користувач може бачити, як збільшується кількість зіграних ігор, коли горошинка захована під оболонкою
  • Користувач може бачити, як збільшується кількість виграшів, коли горошинка виявляється при першій здогадці.
  • Користувач може бачити оболонку, що приховує горох для анімації (колір, розмір або якийсь інший ефект), коли на неї клацають (правильна здогадка).

Корисні посилання та ресурси

  • Гра Shell (Вікіпедія)
  • Javascript HTML DOM анімація
  • Бібліотека анімації p5js

Приклади проектів

Висновок

Не забудьте ознайомитись із попередньою статтею та сховищем, якщо хочете знайти більше ідей щодо програм / проектів.

Крім того, якщо інформація з цієї статті та з репозитарію вам якось була корисною, обов’язково поставте їй зірочку?; таким чином інші можуть це знайти і отримати вигоду теж! Дякую!

Чи є у вас пропозиції щодо того, як ми могли б загалом покращити цей проект? Повідомте нас! Ми хотіли б почути ваш відгук!

Вас запрошують до участі у своїх власних ідеях! Ми можемо зробити це сховище ресурсом, що стосується ідей програм.

Спочатку опубліковано на www.florin-pop.com.