Nolra / front_course_2023

charity course
7 stars 0 forks source link

DOM #9

Open Nolra opened 1 year ago

Nolra commented 1 year ago

Code: https://github.com/Nolra/front-course/tree/dom

Читаем: https://developer.mozilla.org/ru/docs/Web/API/Document/createElement https://developer.mozilla.org/ru/docs/Web/API/Element/remove https://developer.mozilla.org/ru/docs/Web/API/Element/append https://developer.mozilla.org/ru/docs/Web/API/Element/prepend https://developer.mozilla.org/ru/docs/Web/API/Element/after https://developer.mozilla.org/ru/docs/Web/API/Element/before https://developer.mozilla.org/ru/docs/Web/API/Node/cloneNode

https://learn.javascript.ru/event-delegation

Домашнее задание:

1)  

    Напишите следующий небольшой тест
    Он выглядит как один блок с вопросом и тремя вариантами ответа

    варианты ответа реализованы через радио-кнопку (выбрать можно только один)
    radioButton.checked может быть true или false

    После выбора становится доступна кнопка "проверить" (до этого она disabled)

    После нажатия на кнопку вы скрываете предыдущий вопрос и показываете следующий.

    В конце после последнего вопроса вы должны отобразить текст, который сообщит 
    на сколько вопросов пользователь ответил правильно.

    Это ознает, что вы должны собирать ответы пользователя, например в массив, и затем
    сравнить его с правильными ответами и показать сколько правильно, сколько нет.

    JavaScript это Java?
        Нет.
        Да.
        Возможно.

    проверить

    Сколько параментров можно передать в фукнцию?
        Сколько указано при ее создании
        Минимум один.
        Сколько угодно.

    проверить

    Массивы это объекты?
        Не совсем.
        Нет.
        Да, это спископодобные объекты.

    проверить

2) 

    Задача на развитие планирования написания интерфейсов и понимание механики приложений:

    Напишем логическую структуру для игры "крестики-нолики"

    Вы можете реализовать саму игру (в описании, сам код писать НЕ нужно), 
    а так же модальное окно с результатом партии - победа крестиков, победа ноликов, ничья
    кроме того нужно сбрасывать результаты игры после уведомления о том, что игра окончена

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

    например (можно продолжить, или написать самому/самой): 

    1. Нужно сверстать макет для игры из девяти блоков
        - нужно написать html структуру
        - у html блоков, которые будут служить как места для клика (заполнения Х или O)
        нужно задать доп. атрибуты data-x data-y(соотвественно матрице), чтобы получать их потом
        при клике через dataset
        - нужно задать css стили html элементам
    2. В js нужно получить и сохранить в переменные для дальнейшего использования html элементы.
        - потребуется родительский элемент блоков для манипуляций и использовать event.target
        - или же нужно использовать сами блоки и прослушивать события на них через перебор массива
    2. Нужно создать матрицу, для инициализации данных игры при старте
        - для этого нужно создать массив из трех вложенных массивов в каждом из которых будет по три элемента
    3. Эта матрица будет изменятся при нажатии на соотвествующий пустой блок
        - необходимо прослушивать событие click и проверять по какому именно элементу кликнули
        - нужно обновлять состояние матрицы, заполняя её соотвественно тому элементу на который нажали
    4. ...
voidaugust commented 1 year ago

https://github.com/pashbespaloff/homework/tree/dom

Vykrutasy commented 1 year ago

https://github.com/Vykrutasy/dom-project/tree/version-16.04

NastyaKamalova commented 1 year ago

https://github.com/NastyaKamalova/firstCSS/tree/march-project

https://github.com/NastyaKamalova/TabsAndComponents

voidaugust commented 1 year ago

https://pashbespaloff.github.io/march-project/

https://github.com/pashbespaloff/march-project

UPD 26.04.2023. Добавил конвертер валют ещё свой.

andrisfree commented 1 year ago

https://github.com/andrisfree/dom-project

nedostatoksna commented 1 year ago

https://nedostatoksna.github.io/course-front-end/
https://github.com/nedostatoksna/course-front-end/tree/DOM-project