{"id":23810409,"url":"https://github.com/zingarelli/what-to-pack-list","last_synced_at":"2026-04-15T12:38:50.026Z","repository":{"id":161149819,"uuid":"533502409","full_name":"zingarelli/what-to-pack-list","owner":"zingarelli","description":"Dynamically add/update/remove items in a list of things to pack before traveling","archived":false,"fork":false,"pushed_at":"2022-12-16T20:49:24.000Z","size":23,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":1,"default_branch":"main","last_synced_at":"2025-10-30T02:47:31.608Z","etag":null,"topics":["css","html","javascript","localstorage-api","vitrinedev"],"latest_commit_sha":null,"homepage":"https://what-to-pack-list.vercel.app","language":"CSS","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/zingarelli.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-09-06T21:06:49.000Z","updated_at":"2022-09-16T14:21:56.000Z","dependencies_parsed_at":null,"dependency_job_id":"6819dc71-dc56-49bf-af4a-d2f623222d48","html_url":"https://github.com/zingarelli/what-to-pack-list","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/zingarelli/what-to-pack-list","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zingarelli%2Fwhat-to-pack-list","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zingarelli%2Fwhat-to-pack-list/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zingarelli%2Fwhat-to-pack-list/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zingarelli%2Fwhat-to-pack-list/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/zingarelli","download_url":"https://codeload.github.com/zingarelli/what-to-pack-list/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/zingarelli%2Fwhat-to-pack-list/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":31842191,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-04-15T11:29:19.690Z","status":"ssl_error","status_checked_at":"2026-04-15T11:29:19.171Z","response_time":63,"last_error":"SSL_read: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["css","html","javascript","localstorage-api","vitrinedev"],"created_at":"2025-01-02T00:14:24.011Z","updated_at":"2026-04-15T12:38:49.997Z","avatar_url":"https://github.com/zingarelli.png","language":"CSS","funding_links":[],"categories":[],"sub_categories":[],"readme":"# What-to-pack List 🎒\n\n[Veja esta página em português](#detalhes-do-projeto)\n\nA website in which is possible to add/remove/update items in a list, so you don't forget what to put in your backpack before traveling.\n\n| :placard: Vitrine.Dev |     |\n| -------------  | --- |\n| :sparkles: Nome        | **Mochila de viagem**\n| :label: Tecnologias | html, css, javascript\n| :rocket: URL         | https://what-to-pack-list.vercel.app\n| :fire: Course     | https://www.alura.com.br/curso-online-javascript-web-armazenando-dados-navegador\n\n![](https://user-images.githubusercontent.com/19349339/206853655-3d36f09b-61fe-4c6e-8b34-8792fdf6448d.png#vitrinedev)\n\n## Project details\n\nYou need to fill in the form with the item's name and quantity and click on \"Save\". The item will then be added to a list that appears to the right of the screen (or below the backpack, if you're viewing the website in your phone). If you try to insert an item that is already on the list, the item will be updated in the list with the new quantity. \n\nEvery item in the list has a red button. When clicked, the item will be removed from the list.\n\nThe list will still be available even if you close your browser.\n\n![gif of adding and removing items in the backpack](https://user-images.githubusercontent.com/19349339/206853444-d19991d0-3207-49dc-a596-7658db7d6c64.gif)\n\nHTML and CSS content were already created prior to the beginning of the course. We developed the JavaScript file and made some modifications to HTML and CSS when needed.\n\n## Credits\n\nThis project was developed in a course from [Alura](https://www.alura.com.br) called \"JavaScript na Web: armazenando dados no navegador\" (JavaScript on the Web: storing data in your browser), where we learn how to use Local Storage to persist data in the browser.\n\nThe picture for the backpack was created by [Tricia Katz](https://codepen.io/triciaakatz/details/LbWVPj) using only CSS. Amazing work! \n\nInstructor: [Pedro Marins](https://github.com/pedromarins).\n\n## What we learned\nWe use local storage to persist data in the browser:\n\n```javascript\n    localStorage.setItem(key, value) //add JSON data to Local Storage\n    localStorage.getItem(key) //get JSON data from Local Storage\n``` \nWhenever the page is loaded, we get data from local storage or create an empty array if no data is available. This array will hold every item in the \"what-to-pack list\" and is used to interact with data and the local storage, by using methods such as `JSON.parse()`, `JSON.stringify()`, `find()`, `findIndex()`, `push()` and `splice()`.\n\nWe also manipulate the DOM to add/remove/update items on screen, by using methods such as `querySelector()`, `createElement()`, `appendChild()` and `remove()`.\n\n## Additional feature: responsiveness\nAs an additional feature, I added specific styles for screens up to 940px (tablet) and up to 425px (mobile), using media queries.\n\n---\n\n## Detalhes do projeto\n\nUm site em que é possível adicionar, remover e atualizar itens em uma lista (estilizada como uma mochila), para que você não se esqueça do que precisa levar para uma viagem.\n\nHá um formulário com dois campos a serem preenchidos: o nome e a quantidade de um item. Após clicar em \"Save\", o item será adicionado a uma lista que irá aparecer no lado direito da tela (ou abaixo, caso esteja vendo o site em uma tela de celular). Ao tentar inserir um item que já esteja na lista, ele será atualizado com a nova quantidade informada.\n\nTodos os itens na lista possuem um botão vermelho que, quando clicado, remove este item da lista.\n\nOs dados da lista são salvos localmente, então eles continuarão aparecendo em seu navegador mesmo ao fechá-lo.\n\n![gif mostrando adição e remoção de itens da mochila](https://user-images.githubusercontent.com/19349339/206853444-d19991d0-3207-49dc-a596-7658db7d6c64.gif)\n\nOs conteúdos em HTML e CSS foram disponibilizados pelo curso, mas fiz algumas modificações necessárias para adicionar novas funcionalidades e tornar a página responsiva para diferentes tamanhos de tela. O foco do curso foi desenvolver a parte de JavaScript.\n\n## Créditos\n\nEste projeto foi desenvolvido em um curso de JavaScript da  [**Alura**](https://www.alura.com.br) chamado \"JavaScript na Web: armazenando dados no navegador\", em que aprendia a utilizar o \"Local Storage\" do navegador para persistir dados.\n\nA imagem da mochila foi criada pela [**Tricia Katz**](https://codepen.io/triciaakatz/details/LbWVPj) usando apenas CSS. Ficou incrível!\n\n**Instrutor do curso**: [**Pedro Marins**](https://github.com/pedromarins).\n\n## O que aprendemos\n\nNós utilizamos o objeto \"localStorage\" para persistir dados no navegador: \n\n```javascript\n    localStorage.setItem(key, value) //add JSON data to Local Storage\n    localStorage.getItem(key) //get JSON data from Local Storage\n``` \n\nToda vez que a página é carregada, obtemos dados do local storage ou, caso não haja dados, criamos um array vazio. O array irá armazenar todos os itens da lista e será o meio de transitar os dados no local storage, utilizando métodos como `JSON.parse()`, `JSON.stringify()`, `find()`, `findIndex()`, `push()` e `splice()`.\n\nTambém manipulamos o DOM para adicionar, remover e atualizar os itens na tela, usando métodos como `querySelector()`, `createElement()`, `appendChild()` e `remove()`.\n\n## Funcionalidade adicional: responsividade\n\nComo funcionalidade adicional, eu também criei estilos de CSS específicos para telas até 940px (tablet) e até 425px (celular), utilizando media queries.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzingarelli%2Fwhat-to-pack-list","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fzingarelli%2Fwhat-to-pack-list","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fzingarelli%2Fwhat-to-pack-list/lists"}