dedemenezes

import { Controller } from "@hotwired/stimulus";

export default class extends Controller {
  // AS SOON AS THE data-controller appears in the page
  static targets = ['giftName', 'giftPrice', 'listItems', 'suggestionList', 'searchInput']

  connect() {
    console.log(this.giftNameTarget);
    console.log(this.giftPriceTarget);
    console.log(this.listItemsTarget);

dedemenezes

dedemenezes

Background and Objectives

Today we will build a Christmas list, just like you did back in the Intro to Ruby module, but this time it'll have a real front-end!

We will be creating a form via which we can upload gifts to our list. We will also be using an API to get gift ideas we can add to our list.

The Bootstrap stylesheet is already linked in the index.html file for you so feel free to use their pre-made classes or have a go at making your own in style.css!

Note: there will be no rake for this challenge! To see if your page is working, you'll have to test it out yourself in the browser.

dedemenezes

puts 'Welcome to Chritmas Gift List'
user_input = nil

gift_list = [{ name: 'Laptop', status: false }, { name: 'Flamengo Shirt', status: false }]
# indexes     0                                  1

while user_input != 'quit'
  # 1. Give the user a new option (MARK)
  puts 'Which action [list|add|delete|mark|quit]?'

dedemenezes

# RECAP!

# Data type

# String
"Le Wagon"
# Integer
12
# Float
12.2

dedemenezes

git init
-> start using git in a new project folder

git status
-> check which files have been changed

git add filename

git commit --message "your message" || git commit -m "your message"
-> create a commit (save point)

dedemenezes

# 1. Define alphabet array
# 2. Split string into array of letters
# 3. Iterate over letters array
# For each letter
# 4. Shift letter three letter behind in the alphabet
# 4.1 Identify the letter index in the alphabet
# 4.2 Subtract 3 from index
# 4.3 Access new alphabet letter
# 6. Join shifted letters array into string

dedemenezes

Git Cheatsheet ;)

• git init -> starts tracking your folder with git
• git status -> checks what files have been changed
• git add filename -> stage the changes
• git commit --message "a meaningful message"
• git commit -m "a meaningful message" -> create a "savepoint"
• git push origin master -> pushes the changes (commits) to github
• git diff filename -> checks the difference from the last commit
• git log

dedemenezes

import Trix from 'trix';

window.Trix = Trix; // Don't need to bind to the window, but useful for debugging.
const { lang } = Trix.config

const initTrix = () => {
  console.log("INIT TRIX!");
  // Trix.config.blockAttributes.heading1.tagName = 'h3'
  Trix.config.toolbar.getDefaultHTML = getDefaultHTML.bind(this)
  // this.addForegroundButtonConfig()

dedemenezes

import { Controller } from "@hotwired/stimulus"
import Trix from 'trix'
const { lang } = Trix.config

// Connects to data-controller="trix"
export default class extends Controller {
  static targets = ['editor']

  connect() {
    document.addEventListener('trix-before-initialize', () => {