Please enable JavaScript.

Coggle requires JavaScript to display documents.

Javascript Projects, git hub users, calorie tracker, book list, task list,…

- - - - nav
      - card with search field
      - fetch profile data
        
        app.js → grab search field and add keyup event listener
        
        check for text input
        
        github.js → create GitHub class
        
        add client_id, and client_secret properties
        
        create async getUser(user) function
        
        create profileReponse URL
        
        create json data and return (object)
        
        two api's (users and repos
        
        https://api.github.com/users/username
        
        https://api.github.com/users/repos
        
        app.js → instantiate new GitHub object top
        
        make call
        
        github.getUser(userText).then((data) => { ... }
        
        render the profile in the DOM
        
        ui.js → create UI class
        
        create property for profile html element
        
        create method : showProfile(user)
        
        build a template literal → insert into profile element
        
        display
        
        profile pic
        
        user avatar
        
        profile info
        
        company
        
        website
        
        location
        
        member creation
        
        profile badges
        
        followers
        
        public repos
        
        following
        
        app.js → instantiate UI class
        
        display alerts
        
        clear profile → ui.clearProfile()
        
        → set profile innerHTML to nothing
        
        alert → ui.showAlert(msg, className)
        
        show alert if no user is found
        
        pass in class name
        
        clear out alert before showing → clearAlert();
        
        display repos
        
        call ui.showRepos(data.repos);
        
        show repos
        
        loop through repo array
        
        display repo name
        
        display 3 badges
        
        create API call in getUser → latest 5 repos
- - - - Storage, Item, UI, App
    - - Add Item to Data
        
        Add Item to UI
        
        display total calories
        
        the edit state
        
        update functionality
        
        add event listeners for update → itemUpdateSubmit
        
        get Item input → getItemInput()
        
        update in data structure → updateItem(name, calories) on ItemContorller
        
        update in UI → `updateListItem(item)
        
        2 more items...
        
        delete and clear
        
        4 more items...
        
        move into the edit state
        
        setIntiState() → hide edit ctrl, show add ctrl, clear inputs
        
        create event listeners for edit icon
        
        set targets to currentItem → setCurrentItem(item)
        and currentListItem →setCurrentListItem(e.target.parentNode.parentNode)
        
        const itemEditClick= function (e) { ... }
        
        grab item id
        
        grab Item from ItemController → getItemById(id)
        
        add item to form → addItemToForm
        
        2 more items...
        
        add item { ... }
        
        get total calories from item controller
        
        loop through data and add total
        
        set data variable
        
        show total calories in UI controller
        
        set span to total calories
        
        UI Controller → create add Item
        
        add item
        
        create new element (div)
        
        add id and class list
        
        insertAdjacentElement(beforeend, listItem)
        
        clear inputs
        
        create a function to load all event listeners → App Controller
        
        call from init()
        
        add item to data
        
        get item inputs
        
        create new item and call ItemController → add item (pass inputs)
        
        (validate) and add new Item (contructor)
        
        push to data (stor)
        
        return Item
      - get dat from Item Controller → const items = ItemController.getItems()
      - UI Controller is responsible for rendering the list
        
        create poplulateListItems(items) function → call from App.init()
    - - create item constructor
        
        data (state) → items, currentItem, totalCalories
        
        controls the data in the app
    - - main application → initializes app
- - - - handles the book object
      - function Book(title, author, isbn) { ... }
      - this.title - title;
    - - set of prototype methods
    - - grab form elements → add submit event
      - set up variables for form values
    - - const book = new Book(title, author, isbn);
    - - const ui = new UI();
      - ui.addBookToList(book);
      - construct UI element - div
    - - UI.prototype.clearFields = function () { ... }
    - - construct alert method
      - UI.prototype.showAlert = function (message, className) { ... }
        
        construct new div
        
        append text node w/ message
        
        insert before → form
        
        disappear after 2 seconds
      - delete book
        
        need to use event delegation for anything that is dynamically added
        
        add event listener
        
        check for target id
        
        show alert upon success
        
        create delete book UI function
- - - - e.g. form : const form = document.querySelector("#task-form");
      - task list, clear button, filter, task input
      - create add task functionality
        
        add form submit event listener →loadEventListeners();
        
        create addTask function
        
        create new li element
        
        append new text node w/ input value
        
        add class name (delete-item)
        
        append link
        
        append li element to ul
        
        clear input
        
        create remove element functionality
        
        add new event listener (click) to task list (ul) → use event delegation (dynamic elements)
        
        create removeTask function
        
        target link (a tag) with class name (delete-item)
        
        remove parent element (li) from list (ul)
        
        wrap in a confirm
        
        create clear tasks functionality
        
        add event listener (click) to clear tasks button
        
        create clearTasks function
        
        two options
        
        clear inner html
        
        loop through parent and remove children (firstChild) - faster
        
        filter tasks functionality
        
        add event listener (keyup)
        
        create filterTasks function
        
        set variable for text value : e.target.value.toLowerCase()
        
        grab all list items with have a class of .collection-item
        
        loop through all items with for each
        
        3 more items...
        
        persist task data to local storage
        
        add function to addTask → pass in input value
        
        1 more item...
        
        show stored tasks inside the ul
        
        2 more items...
        
        delete from local storage
        
        2 more items...
    - - create form for task name submission
      - create task list container : container → row → col → card
      - create card-action (display tasks)
      - create card-content (input tasks)
- - - - conatiner→ row→ 6 column grid
      - create centered card
        
        add heading
        
        create form w/ id → form-groups
        
        ( $ + % + years ) number inputs → id & placeholder
        
        submit button
        
        create results
        
        use disabled input fields ( do not need form)
        
        payments, total payment, total interest
        
        loading animation
    - - create submit event listener
      - create function calculateResults
        
        grab all UI elements → setup const variables
        
        input fields :amount, interest, years
        
        result fields: monthly, total payment, interest
        
        set up initial calculations
        
        for principal, calculated interest, calculated payments as floats
        
        compute monthly payments
        
        display result values
        
        check if monthly is finite → display error
        
        monthly payment, total payment, total interest
      - create error message
        
        build the element with JS → use create element method
        
        build function showError (in check statement)
        
        create new div → document.createElement('div');
        
        create error styling
        
        add text node → use argument
        
        get UI elements
        
        card, heading
        
        insert above heading → use card.insertBefore(errorDiv, heading)
        
        clear error after 3 seconds → use setTimeout(clearError, 3000);
        
        user experience
        
        implement loading image, improve user experience
        
        use CSS to initially hide the loader and results → display : none
        
        delay the calculate results process → use a function within event listener
        
        show loader → on click → display : block
        
        hide results → display : none
        
        use setTimeout() → call calculate results after two seconds
        
        show results and hide spinner → on success, on error