Что написать для тренировки на js с нуля?

Question

[Максим]

Всем привет!

Я в самом начале изучения JS, с теорией более менее знаком. Посоветуйте - что написать для тренировки? От самого легкого к сложного.

На сегодняшний день уже умею верстать адаптивно, использую БЭМ и препроцессор, разбираюсь со сборкой. Но хочется углубиться в JS :)

Всем спасибо за ответы!

Comments

[sim3x]

Решите вначале свой предыдущий вопрос

Answer 1

[shmatuan]

Из того, что часто может пригодится в вебе

• Паралакс
  
• слайдер
  
• генерацию таблиц из js
  
• сортировку таблиц
  
• общение с сервером
  
• Плеер (аудио/видео)
  
• Работа со временем (momentjs)
  
• Подгрузка постов при скроле
  
• Движение блоков при скроле
  
• Пагинация
  
• Модалка
  
• Взаимодействие с изображениями (фильтр, обрезка, ...)
  
• Кастомные селекты, датапикеры
  
• Табы
  

+ можешь поискать топ сайтов и попробовать повторить интересные штуки из них
+ jQuery
+ фрейморки, например Vue
+ node js

Answer 2

[Сергей]

Смотря сколько времени хотите потратить.
Можно создать проект с нуля. Например, сервис для хранения собственных заметок. Определяете цели, которые будет выполнять приложение (создать заметку, удалить, редактировать, искать по категории). Можете и API написать (welcome to node.js), если хотите сохранять заметки на сервере. Не хотите писать API - можете использовать другие сервисы, которые дадут возможность делать "серверную" работу за Вас, Вам лишь надо с ними "общаться" с клиентской стороны (например, Google Firebase). Если не хотите и этого - можно сохранять заметки локально в браузере (localStorage, IndexedDB). Создавая проект Вы и столкнетесь с написанием и модалок, и кнопок, и пагинации, и очень много всего другого, что пригодится в реальной работе.
Еще варианты:
- Приложение для хранения просмотренных фильмов (и фильмов, которые хочется посмотреть. Впечатления, личная оценка)
- PWA приложение, которое копирует функционал какого-то мобильного приложения (смотрите Google Play, AppStore)
- API, которое будет выдавать сгенерированные (фейковые) данные (faker.js)
- WhatApp / Viber / Telegram / Facebook bot для отправки актуальной погоды / курса валют, пр.

Можете написать то, что пригодится Вам. Например, телеграм бот, который бы присылал Вам новинки фильмов, которые появились на торрентах. Это node.js.

Можете написать игру на canvas. Можете не на canvas. Просто JS + CSS.
Еще Варианты:
- 2048
- Лабиринт, где что-то куда-то двигается
- Угадай число (скрипт "загадывает" число, ты вводишь свое - он тебе говорит, больше оно или меньше и пока не угадаешь)
- Любая другая с использованием популярных js-движков для игр (https://github.com/collections/javascript-game-engines)

Можете переписать какую-то JS-библиотеку (смотрите на Гитхабе).
Можете написать свою библиотеку. Начните с малого: допустим, она будет генерировать случайные строки. Или имена, фамилии и эмайлы.
Еще варианты:
- Редактор текста
- Проверка паролей на устойчивость
- Валидация (паролей, имен, фамилий, телефонов, эмайлов) - привет, регулярные выражения
- Генерация случайных пикселей на canvas
- Библиотека-helper: пишете свои функции-велосипеды при работе с данными (спарсить json, склонировать объект, пр.)

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

Answer 3

[Сергей]

Создай json файл и от него генерируй какое-нибудь симпатичное ленивое дерево. К примеру в начале у тебя грузится дерево из 3-х групп. По нажатию на группу происходит загрузка данных. В этот момент ты делаешь анимацию этого действия. Получив данные дорисовываешь дерево новыми данными. В качестве api можешь взять json-server https://github.com/typicode/json-server

Вариаций реализации куча - от винильного ( чистого ) js до использования фреймворка или библиотек - ( angular, react, vue ).

Answer 4

[xmoonlight]

1. Напишите игру "крестики-нолики".
2. Напишите игру "Арканоид".
3. Напишите игру "Сокобан".

Бонус (как обычно, но для ценителей жанра): тут

Command and Conquer is the grand-daddy of all Real Time Strategy games and is probably the game that made the genre popular.

Answer 5

[Pavel]

Exercism.io для тренировки теории

Comments

[Владимир Соломыкин]

Крутя-а-ак! Даже не слышал о таком. А с чего там лучше начинать?

[Pavel]

Владимир Соломыкин, ну выбираешь язык который тебя интересует, в данном случае js, идёшь в так называемый language track и там поочерёдно задачи выполняешь. Главные задачи менторы проверяют и говорят что не так, а подзадачи делаешь, смотришь что всё ок и сравниваешь с комьюнити решениями, учишься у комьюнити.

Answer 6

[Vladyslav Kolodka]

Лично я бы, если с нуля, не писал бы сразу проект, а начал с демок. Так как знаний на начальных этапах чтоб сделать правильно еще не хватает, и по сути учишься костыли писать. Можно взять learn.javascript.ru, повыполнять задания к статьям, сделать свои небольшие демо проекты к каждой статье (а идеи точно появяться в ходе изучения этих статей, так же как и вопросы на которые можно получить ответ попробовав что-то в тех же демках). А вот потом уже думать о том чтоб написать что-то более крупное, для закрепления изученного материала.

Answer 7

[0ffff0]

Напишите игру сапёр

Answer 8

[Uwe_Boll]

портани DooM