dedemenezes · January 29, 2025 19:36
diff --git a/gift_controller.js b/gift_controller.js
 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);
    this.loadFromLocalStorage();
  }

  loadFromLocalStorage() {
    const keys = Object.keys(window.localStorage);
    // {Boat: '1200', T-Shirt: '4'}

    keys.forEach((key) => {
      // read the value from the localStorage
      const value = window.localStorage[key];
      // build the list item
      const listItem = `<li>${key} - ${value}</li>`;

      // add to the list
      this.listItemsTarget.insertAdjacentHTML('beforeend', listItem);
    });
  }

  handleNewGiftForm(event) {
    // Prevent the default behavior
    event.preventDefault();
    console.log('RUNNIG handleNewGiftForm');

    // Extract 'name' and 'price' from input values
    const giftName = this.giftNameTarget.value;
    const giftPrice = this.giftPriceTarget.value;

    // Create the list item
    const userListItem = `<li>${giftName} - ${giftPrice}</li>`;

    // Add to the ordered list
    this.listItemsTarget.insertAdjacentHTML('beforeend', userListItem);

    window.localStorage[giftName] = giftPrice;

    // Clean the input
    this.giftNameTarget.value = "";
    this.giftPriceTarget.value = "";
  }

  addNewGiftFromSuggestion(e) {
    const item = e.currentTarget.parentElement;
    // 2. Add it to the gift list
    console.log(this.listItemsTarget);
    this.listItemsTarget.appendChild(item);

    // Add to the local storage
    // name should be the key
    // price should be the value

    // 1. Remove the button from the suggestion
    e.currentTarget.remove();
    console.log(item.innerText.split('-'));
    // ['Silicon Power 256GB SSD 3D NAND A55 SLC Cache Performance Boost SATA III 2.5 ', ' 109']
    const giftName = item.innerText.split('-')[0];
    const giftPrice = item.innerText.split('-')[1];
    window.localStorage[giftName] = giftPrice;
  }

  handleNewGiftSuggestion(event) {
    // avoid page refreshes
    event.preventDefault();

    // Clear the suggestion list
    this.suggestionListTarget.innerHTML = '';

    // Extract selected category value
    const category = this.searchInputTarget.value;

    // Fetch the api for the products for the specific category
    fetch(`https://fakestoreapi.com/products/category/${category}`) // make http request
      .then(response => response.json()) // parse the response
      .then((data) => {
        // iterate through each one of the objects inside the array
        data.forEach((suggestion) => {
          // Create the list item using createElement
          const listItemAsString = `<li>${suggestion.title} - ${suggestion.price}
          <button class='btn btn-info btn-sm' data-action="click->gift#addNewGiftFromSuggestion">Add</button></li>`;
          this.suggestionListTarget.insertAdjacentHTML('beforeend', listItemAsString);
        });
      });
  }
 }
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <link
      href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
      rel="stylesheet"
      integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
      crossorigin="anonymous"
    />

    <script type="importmap">
      {
        "imports": {
          "@hotwired/stimulus": "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js"
        }
      }
    </script>
    <script src="index.js" type="module"></script>

    <link rel="stylesheet" href="style.css" />
  </head>
  <body>
    <div class="app-container" data-controller="gift">
      <h1 class="text-center my-4">🎁🎄 Christmas List 🎄🎁</h1>
      <ol id="list-items" data-gift-target="listItems"></ol>

      <div class="divider"></div>

      <h2>Add a new item</h2>
      <!-- data-controller-name-target='targetName' -->
       <!-- data-action="EVENT->controller-name#callback" -->
      <form action="#" data-action="submit->gift#handleNewGiftForm">
        <div class="d-flex gap-4 align-items-end mb-3">
          <div class="w-50">
            <label for="name" class="form-label">Name</label>
            <input type="text" class="form-control" id="gift-name" data-gift-target="giftName">
          </div>
          <!-- EMMET -->
          <div class="w-50">
            <label for="price">Price</label>
            <input type="number" class="form-control" id="gift-price" data-gift-target="giftPrice">
          </div>
        </div>
        <input type="submit" class="btn btn-success w-100">
      </form>

      <div class="divider"></div>

      <h3>Find ideas! 💡</h3>

      <ol id="suggestions" data-gift-target="suggestionList"></ol>

      <!--
      <select name="" id="">
          <option value="important-text">USer friendly text</option>
      </select>
      -->


      <form action="#" id="search-form" data-action="submit->gift#handleNewGiftSuggestion">
        <label>What would you like to search for?</label>
        <div class="d-flex align-items-center gap-2 mt-2">
          <select class="form-select w-75" id="search-input" data-gift-target="searchInput">
            <option value="electronics">Electronic</option>
            <option value="jewelery">Jewelery</option>
            <option value="men's clothing">Men's clothing</option>
            <option value="women's clothing">Women's clothing</option>
          </select>
          <input type="submit" class="w-25 btn btn-success" value="Search">
        </div>
      </form>
    </div>

  </body>
 </html>
diff --git a/index.js b/index.js
 import { Application } from "@hotwired/stimulus";
 import HelloController from './controllers/hello_controller.js';
 import GiftController from './controllers/gift_controller.js';

 window.Stimulus = Application.start();

 Stimulus.register("hello", HelloController);
 Stimulus.register("gift", GiftController);
	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);
	this.loadFromLocalStorage();
	}

	loadFromLocalStorage() {
	const keys = Object.keys(window.localStorage);
	// {Boat: '1200', T-Shirt: '4'}

	keys.forEach((key) => {
	// read the value from the localStorage
	const value = window.localStorage[key];
	// build the list item
	const listItem = `<li>${key} - ${value}</li>`;

	// add to the list
	this.listItemsTarget.insertAdjacentHTML('beforeend', listItem);
	});
	}

	handleNewGiftForm(event) {
	// Prevent the default behavior
	event.preventDefault();
	console.log('RUNNIG handleNewGiftForm');

	// Extract 'name' and 'price' from input values
	const giftName = this.giftNameTarget.value;
	const giftPrice = this.giftPriceTarget.value;

	// Create the list item
	const userListItem = `<li>${giftName} - ${giftPrice}</li>`;

	// Add to the ordered list
	this.listItemsTarget.insertAdjacentHTML('beforeend', userListItem);

	window.localStorage[giftName] = giftPrice;

	// Clean the input
	this.giftNameTarget.value = "";
	this.giftPriceTarget.value = "";
	}

	addNewGiftFromSuggestion(e) {
	const item = e.currentTarget.parentElement;
	// 2. Add it to the gift list
	console.log(this.listItemsTarget);
	this.listItemsTarget.appendChild(item);

	// Add to the local storage
	// name should be the key
	// price should be the value

	// 1. Remove the button from the suggestion
	e.currentTarget.remove();
	console.log(item.innerText.split('-'));
	// ['Silicon Power 256GB SSD 3D NAND A55 SLC Cache Performance Boost SATA III 2.5 ', ' 109']
	const giftName = item.innerText.split('-')[0];
	const giftPrice = item.innerText.split('-')[1];
	window.localStorage[giftName] = giftPrice;
	}

	handleNewGiftSuggestion(event) {
	// avoid page refreshes
	event.preventDefault();

	// Clear the suggestion list
	this.suggestionListTarget.innerHTML = '';

	// Extract selected category value
	const category = this.searchInputTarget.value;

	// Fetch the api for the products for the specific category
	fetch(`https://fakestoreapi.com/products/category/${category}`) // make http request
	.then(response => response.json()) // parse the response
	.then((data) => {
	// iterate through each one of the objects inside the array
	data.forEach((suggestion) => {
	// Create the list item using createElement
	const listItemAsString = `<li>${suggestion.title} - ${suggestion.price}
	<button class='btn btn-info btn-sm' data-action="click->gift#addNewGiftFromSuggestion">Add</button></li>`;
	this.suggestionListTarget.insertAdjacentHTML('beforeend', listItemAsString);
	});
	});
	}
	}
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8" />
	<meta name="viewport" content="width=device-width, initial-scale=1.0" />
	<title>Document</title>
	<link
	href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
	rel="stylesheet"
	integrity="sha384-QWTKZyjpPEjISv5WaRU9OFeRpok6YctnYmDr5pNlyT2bRjXh0JMhjY6hW+ALEwIH"
	crossorigin="anonymous"
	/>

	<script type="importmap">
	{
	"imports": {
	"@hotwired/stimulus": "https://unpkg.com/@hotwired/stimulus/dist/stimulus.js"
	}
	}
	</script>
	<script src="index.js" type="module"></script>

	<link rel="stylesheet" href="style.css" />
	</head>
	<body>
	<div class="app-container" data-controller="gift">
	<h1 class="text-center my-4">🎁🎄 Christmas List 🎄🎁</h1>
	<ol id="list-items" data-gift-target="listItems"></ol>

	<div class="divider"></div>

	<h2>Add a new item</h2>
	<!-- data-controller-name-target='targetName' -->
	<!-- data-action="EVENT->controller-name#callback" -->
	<form action="#" data-action="submit->gift#handleNewGiftForm">
	<div class="d-flex gap-4 align-items-end mb-3">
	<div class="w-50">
	<label for="name" class="form-label">Name</label>
	<input type="text" class="form-control" id="gift-name" data-gift-target="giftName">
	</div>
	<!-- EMMET -->
	<div class="w-50">
	<label for="price">Price</label>
	<input type="number" class="form-control" id="gift-price" data-gift-target="giftPrice">
	</div>
	</div>
	<input type="submit" class="btn btn-success w-100">
	</form>

	<div class="divider"></div>

	<h3>Find ideas! 💡</h3>

	<ol id="suggestions" data-gift-target="suggestionList"></ol>

	<!--
	<select name="" id="">
	<option value="important-text">USer friendly text</option>
	</select>
	-->


	<form action="#" id="search-form" data-action="submit->gift#handleNewGiftSuggestion">
	<label>What would you like to search for?</label>
	<div class="d-flex align-items-center gap-2 mt-2">
	<select class="form-select w-75" id="search-input" data-gift-target="searchInput">
	<option value="electronics">Electronic</option>
	<option value="jewelery">Jewelery</option>
	<option value="men's clothing">Men's clothing</option>
	<option value="women's clothing">Women's clothing</option>
	</select>
	<input type="submit" class="w-25 btn btn-success" value="Search">
	</div>
	</form>
	</div>

	</body>
	</html>
	import { Application } from "@hotwired/stimulus";
	import HelloController from './controllers/hello_controller.js';
	import GiftController from './controllers/gift_controller.js';

	window.Stimulus = Application.start();

	Stimulus.register("hello", HelloController);
	Stimulus.register("gift", GiftController);