Crie uma aplicação gerenciadora de favoritos

Instruções

Crie uma aplicação gerenciadora de favoritos

Para este laboratório, todo o HTML e CSS foram fornecidos para você. Você usará JavaScript para completar o aplicativo Bookmark Manager para que ele possa armazenar uma coleção de favoritos no armazenamento local e ler dados dele. Objetivo: Cumprir as user stories abaixo e fazer todos os testes passarem para completar o laboratório. Histórias de Usuário: 1. Você deve ter uma função getBookmarks que retorna o array bookmarks armazenado no armazenamento local. Se a chave bookmarks ainda não foi definida, ou não contém um array válido com bookmarks, a função getBookmarks deve retornar um array vazio. 1. A chave bookmarks armazenada no armazenamento local deve ser um array de objetos de marcador. Cada objeto de marcador deve ter três chaves: name, category e url. 1. Você deve ter uma função chamada displayOrCloseForm que alterna a classe hidden em #main-section e #form-section. 1. Ao clicar em #add-bookmark-button, você deve atualizar o texto interno de .category-name para ser o valor da opção selecionada de #category-dropdown e chamar displayOrCloseForm para exibir a seção de formulário e ocultar a seção principal. 1. Ao clicar em #close-form-button, você deve executar a função para ocultar a seção de formulário e exibir a seção principal. 1. Quando você clicar em #add-bookmark-button-form, deve atualizar a chave bookmarks armazenada no armazenamento local adicionando um objeto de bookmark ao final do array. O objeto deve ter name definido com o valor do input #name, category definido com o valor da opção selecionada no dropdown de categoria, e url definido com o valor do input #url. 1. Uma vez que a chave bookmarks seja atualizada, você deve redefinir o valor de #name e #url para uma string vazia antes de executar sua função para ocultar a seção de formulário e mostrar a seção principal. 1. Você deve ter uma função chamada displayOrHideCategory que alterna a classe hidden em #main-section e #bookmark-list-section. 1. Ao clicar em #view-category-button, você deve atualizar o texto interno de .category-name para ser o valor da opção selecionada de #category-dropdown, modificar o HTML interno de #category-list de acordo com as histórias de usuário abaixo e chamar a função displayOrHideCategory. 1. Se nenhum dos favoritos no armazenamento local tiver a categoria, você deve definir o HTML interno da #category-list para um elemento p com o texto No Bookmarks Found. 1. Se um ou mais favoritos no armazenamento local tiverem a categoria selecionada, adicione um botão de opção para cada favorito ao innerHTML do #category-list. Dê a cada botão de opção um id e value definidos como o nome do favorito, e um name que seja o mesmo para todos os botões. 1. Cada botão de opção deve ter um rótulo correspondente contendo um elemento âncora com o nome do favorito e o atributo href definido para o URL do favorito. 1. Quando você clicar no #close-list-button, deve executar sua função para ocultar a #bookmark-list-section e exibir a seção principal. 1. Quando você clicar no #delete-bookmark-button, deve excluir o marcador correspondente ao botão de rádio selecionado e à categoria apropriada do armazenamento local e atualizar a lista de marcadores exibida.

O que fazer:

Testes:

Você deve ter uma função `getBookmarks`.
A função `getBookmarks` deve retornar um array.
A função `getBookmarks` deve retornar a chave `bookmarks` de `localStorage`.
Quando a chave `bookmarks` não estiver configurada em `localStorage` ou for um array vazio, a função `getBookmarks` deve retornar um array vazio.
Quando a chave `bookmarks` no `localStorage` não contiver um array válido de objetos de marcador, a função `getBookmarks` deve retornar um array vazio.
Você deve ter uma função chamada `displayOrCloseForm`.
A função `displayOrCloseForm` deve alternar a classe `hidden` em `#main-section` e `#form-section`.
Ao clicar em `#add-bookmark-button`, você deve atualizar o texto interno de `.category-name` para ser o valor da opção selecionada de `#category-dropdown`.
Ao clicar em `#add-bookmark-button`, você deve chamar `displayOrCloseForm` para exibir a seção de formulário e ocultar a seção principal.
Ao clicar em `#close-form-button`, você deve chamar `displayOrCloseForm` para ocultar a seção de formulário e exibir a seção principal.
Ao clicar em `#add-bookmark-button-form`, você deve atualizar a chave `bookmarks` armazenada no armazenamento local adicionando um objeto ao final do array. O objeto adicionado deve ter `name` definido como o valor da entrada `#name`, `category` definido como o valor da opção selecionada no menu suspenso de categorias e `url` definido como o valor da entrada `#url`.
Ao clicar em `#add-bookmark-button-form`, você deve redefinir o valor de `#name` e `#url` para uma string vazia.
Ao clicar em `#add-bookmark-button-form`, você deve executar `displayOrCloseForm` para ocultar a seção de formulário e mostrar a seção principal.
Você deve ter uma função chamada `displayOrHideCategory`.
A função `displayOrHideCategory` deve alternar a classe `hidden` em `#main-section` e `#bookmark-list-section`.
Ao clicar em `#view-category-button`, você deve atualizar o texto interno de `.category-name` para ser o valor da opção selecionada de `#category-dropdown`.
Ao clicar em `#view-category-button`, você deve adicionar um elemento `p` com o texto `No Bookmarks Found` ao HTML interno de `#category-list` se nenhum dos favoritos no armazenamento local tiver a categoria selecionada.
Quando você clicar no botão `#view-category-button`, deve modificar o HTML interno do elemento `#category-list` adicionando um botão de opção. O botão de opção deve ter os atributos `id` e `value` definidos com o nome do marcador para cada marcador na categoria selecionada. Além disso, cada botão de opção deve ter o mesmo atributo `name`.
Cada botão de opção adicionado ao HTML interno de `#category-list` deve ter um rótulo correspondente contendo um elemento âncora com o nome do favorito e o atributo `href` definido para o URL do favorito.
Cada elemento `label` deve conter um elemento âncora com o nome do favorito como texto e o atributo `href` definido para o URL do favorito.
Ao clicar em `#close-list-button`, você deve ocultar `#bookmark-list-section` e exibir a seção principal.
Quando você clicar no `#close-list-button` e então abrir qualquer categoria, o `#category-list` deve conter apenas dados relevantes para a categoria selecionada, sem duplicar entradas.
Quando você clicar no `#delete-bookmark-button`, deve excluir o marcador correspondente ao botão de rádio selecionado e à categoria apropriada do armazenamento local e atualizar a lista de marcadores exibida.

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=0.0">
    <title>Bookmark Manager</title>
    <link rel="stylesheet" href="styles.css">
</head>

<body>
    <main>
        <section id="main-section">
            <h1>Bookmark Manager</h1>
            <div id="dropdown">
                <label for="category-dropdown">Select a category:</label>
                <select id="category-dropdown" name="options">
                    <option value="news" selected>News</option>
                    <option value="entertainment">Entertainment</option>
                    <option value="work">Work</option>
                    <option value="miscellaneous">Miscellaneous</option>
                </select>
            </div>
            <div id="buttons">
                <button type="button" id="view-category-button">View Category</button>
                <button type="button" id="add-bookmark-button">Add Bookmark</button>
            </div>
        </section>

        <section id="form-section" class="hidden">
            <form>
                <h2 class="category-name"></h2>
                <div>
                    <label for="name">Name:</label>
                    <input type="text" id="name">
                </div>
                <div>
                    <label for="url">URL:</label>
                    <input type="text" id="url">
                </div>
                <div>
                    <button type="button" id="close-form-button">Go Back</button>
                    <button type="button" id="add-bookmark-button-form">Add Bookmark</button>
                </div>
            </form>
        </section>

        <section id="bookmark-list-section" class="hidden">
            <h2 class="category-name"></h2>
            <div id="category-list">
            </div>
            <div>
                <button type="button" id="close-list-button">Go Back</button>
                <button type="button" id="delete-bookmark-button">Delete Bookmark</button>
            </div>
        </section>

    </main>
    <script src="script.js"></script>
</body>

</html>

:root {
  --light-grey: #f5f6f7;
  --dark-grey: #0a0a23;
  --yellow: #f1be32;
  --golden-yellow: #feac32;
}

*,
*::before,
*::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

main {
  display: flex;
  justify-content: center;
}

body {
  background-color: var(--dark-grey);
}

.hidden {
  display: none;
}

section {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

select,
input,
label {
  margin-left: 10px;
}

div {
  padding: 30px;
  display: flex;
  justify-content: center;
}

.close-form-button {
  background: none;
  border: none;
  cursor: pointer;
}

h1, h2 {
  margin-top: 20px;
  text-align: center;
}

#category-list {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  background-color: var(--light-grey);
  align-self: center;
  width: 80%;
  margin-top: 15px;
  border-radius: 10px;
}

#category-list,
h1,
h2,
label {
  color: var(--light-grey);
}

#category-list p {
  color: var(--dark-grey);
}

button {
  cursor: pointer;
  padding: 5px;
  width: 100px;
  margin: 10px;
  color: var(--dark-grey);
  background-color: var(--golden-yellow);
  background-image: linear-gradient(#fecc4c, #ffac33);
  border-color: var(--golden-yellow);
  border-width: 3px;
}

button:hover {
  background-image: linear-gradient(#ffcc4c, #f89808);
}

section {
  margin-top: 60px;
  border: 2px solid var(--golden-yellow);
  width: fit-content;
  border-radius: 10px;
}

Preview