Создание гибкой базы контактов в Javascript - добавление, удаление и поиск контактов - PullRequest
Новая
       1

Создание гибкой базы контактов в Javascript - добавление, удаление и поиск контактов

0 голосов
/ 13 января 2020

Мне нужна помощь в создании базы данных контактов. Это отдельная страница, которая открывается в браузере, где пользователь может создавать новые контакты, удалять контакты и использовать панель поиска для поиска существующих контактов. Каждый контакт должен иметь имя, фамилию, номер телефона и адрес. Мне уже удалось закодировать первую часть (создание новых контактов в базе данных), но я борюсь со второй и третьей частью (удаление и поиск контактов из или в базе данных).

Мой Javascript код: 

$(document).ready(function() {

var database = [];

$('.newContact').on('click', function(event) {
event.preventDefault();

var user = {};
user.firstName = $('.firstName').val();
user.surname = $('.surname').val();
user.phoneNumber = $('.phoneNumber').val();
user.address = $('.address').val();


database.push(user);
console.log(database);

});
});

Мой html код: 

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

<head>
  <title>Codeworks</title>
  <link rel="stylesheet" href="layout.css">
</head>

<body>
  <header>
      <h1>Start of coding assignment</h1>
  </header>

  <main>

    <div class="introduction">
      <h2> What is the assignment? </h2> 
      <div class="introtext">Build a simple address book application using HTML, CSS, JavaScript and jQuery. It is a single page, that opens in the browser, where the user can create new contacts delete                              contacts, and use a search bar to find existing contacts. Each contact should have a name, surname, phone number, and address.<br>
      </div>
    </div>

    <div class="introduction">
          <h2> Create a new contact </h2> 
          <div class="introtext">Please fill in the name, surname, phone number and address in each grid below.<br> </div>
    </div>

    <div>
      <form>
       Name:
      <input class="firstName" type="text" name="firstName" id="firstName"> <br>

       Surname:
      <input class="surname" type="text" name="surname" id="surname"> <br>

      Phone Number:
      <input class="phoneNumber" type="text" name="phoneNumber" id="phoneNumber"> <br>

      Address:
      <input class="address" type="text" name="address" id="address"> <br>

      <button class='newContact' type="submit">Create new contact now!</button>   
      </form>
    </div>


<div class="introduction">
          <h2> Deleting a contact </h2> 
          <div class="introtext">Please fill in the name and surname of the person you would like to remove.<br>
          </div>
    </div>

    <div>
      <form>
      <label for="First name"> Name: </label>
      <input type="text" name="firstName" id="firstName"> <br>

      <label for="Surname"> Surname: </label>
      <input type="text" name="surname" id="surname"> <br>

      <button class='deleteContact' type="submit">Remove contact now!</button>
      </form>
    </div>  



 <div class="introduction">
          <h2> Searching a contact </h2> 
          <div class="introtext">Please fill in the name and surname of the person you would like to search.<br>
          </div>
    </div>

    <div>
      <form action='' method='get'>
      <label for="Search"> Name: </label>
      <input type="text" name="firstName" id="firstName"> <br>

      <label for="Surname"> Surname: </label>
      <input type="text" name="surname" id="surname"> <br>

      <button class='searchContact' type="submit">Search contact now!</button>

      <script src="jquery-3.4.1.min.js"></script>
      <script src='script.js'> </script>



      <div id='result'>TEXT</div>  

  </main>
<footer>   
  <h1>End of Coding assignment</h1>
</footer>

</body>

</html>

Как мне это сделать?

Полный код здесь: https://w.trhou.se/e2dgpkyskk

Ответы [ 2 ]

0 голосов
/ 13 января 2020

https://w.trhou.se/yttkvhfnpc

Я переделал свой код html и js и подумал, не могли бы вы взглянуть еще раз? Я думаю, что я добился приличного прогресса. Можете ли вы определить оставшиеся ошибки?

Несколько конкретных c вопросов: 1) Как я могу убедиться, что массив определен? 2) Функция удаления и поиска пока не работает. Что не так?

В идеале я должен был бы найти ответ к этому вечернему европейскому времени ... 

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

<head>
  <title>Codeworks</title>
  <link rel="stylesheet" href="layout.css">
</head>

<body>
  <header>
      <h1>Start of coding assignment</h1>
  </header>

  <main>
    <div class="introduction">
      <h2> What is the assignment? </h2> 
        <div class="introtext">
          Build a simple address book application using HTML, CSS, JavaScript and jQuery. <br>
          It is a single page, that opens in the browser, where the user can create new contacts delete  contacts, and use a search bar to find existing contacts.<br> 
          Each contact should have a name, surname, phone number, and address.<br>
        </div>
    </div>

    <div class="introduction">
       <h2> Create a new contact </h2> 
          <div class="introtext">
            Please fill in the name, surname, phone number and address of the person you would like to add in each grid below and press "Create new contact now".<br> 
            Please fill in the name and surname of the person you would like to remove and press "Remove contact now".<br>
            Please fill in the name and surname of the person you would like to search and press "search contact now".<br>     
          </div>
    </div>

    <form>
       Name: <input class="firstName" type="text" name="firstName" id="firstName"> <br>
       Surname: <input class="surname" type="text" name="surname" id="surname"> <br>
       Phone Number: <input class="phoneNumber" type="text" name="phoneNumber" id="phoneNumber"> <br>
       Address: <input class="address" type="text" name="address" id="address"> <br>

      <button class='newContact' type="submit">Create new contact now!</button>   
      <button class='deleteContact' type="submit">Remove contact now!</button>
      <button class='searchContact' type="submit">Search contact now!</button>
    </form>

      <div id='result'>TEXT</div>  

  </main>
<footer>   
  <h1>End of Coding assignment</h1>
</footer>
       <script src="jquery-3.4.1.min.js"></script>
       <script src='script.js'> </script>


</body>

</html> 

var database = [];

$(document).ready(function() {


$('.newContact').on('click', function(event) {
event.preventDefault();

var user = {};
user.firstName = $('.firstName').val();
user.surname = $('.surname').val();
user.phoneNumber = $('.phoneNumber').val();
user.address = $('.address').val();


database.push(user);
console.log(database);

});
});

function findUser(firstName, surname) {
    return database.find(user => user.firstName == firstName && user.surname == surname);
}

$('.searchContact').on('click', function(event) {
    event.preventDefault();

    var findUserFirstName = $('.firstName').val();
    var findUserSurname = $('.surname').val();
    var userFound = findUser(findUserFirstName,findUserSurname);  
    $('#result').text(userFound);
});


$('.deleteContact').on('click', function(event) {
    event.preventDefault();

    var deleteUserFirstName = $('.firstName').val();
    var deleteUserSurname = $('.surname').val();

    var array = [];
    var userToDelete = findUser(deleteUserFirstName, deleteUserSurname);
    const index = array.indexOf(userToDelete);
    if (index > -1) {
        database.splice(index, 1);
    }  
});
0 голосов
/ 13 января 2020

Итак, я просмотрел ваш код, и я думаю, что вам сначала нужно сосредоточиться на шаге 3: поиск контактов - если вы хотите удалить контакт, вам все равно нужно сначала найти этот контакт, верно? Итак, давайте сосредоточимся на первой части.

У вас есть эта функция здесь: 

function findUser(firstName, surname) {
    return database.find(u => database.user.firstName == deleteUserFirstName && database.user.surname == deleteUserSurname);
}

И пока вы на правильном пути, вы просто немного теряете метку. Метод find принимает функцию в качестве параметра, применяет эту функцию к каждому элементу в массиве и возвращает первый элемент в вашем массиве, который возвращает true (do c здесь ). Ваша переменная database является массивом user объектов, и ваша цель состоит в том, чтобы найти первый объект с указанными именем и фамилией, верно? Итак, вышеприведенная функция должна быть переписана следующим образом: 

function findUser(firstName, surname) {
    return database.find(user => user.firstName == firstName && user.surname == surname);
}

Теперь эта функция возьмет те значения, которые вы дадите firstName и surname, и найдете их в базе данных. Вы можете найти пользователя, шаг 3 завершен! Шаг 2 теперь очень прост - вы можете использовать эту новую и улучшенную функцию, чтобы найти пользователя для удаления: 

$('.deleteContact').on('click', function(event) {
    event.preventDefault();

    var deleteUserFirstName = $('.firstName').val();
    var deleteUserSurname = $('.surname').val();

    var userToDelete = findUser(deleteUserFirstName, deleteUserSurname);
    const index = array.indexOf(userToDelete);
    if (index > -1) {
        database.splice(index, 1);
    }  
});

Он находит индекс найденных user и затем удаляет их из database. Есть несколько вещей, которые вы можете сделать, чтобы очистить и реорганизовать ваш код (например, я рекомендую не оставлять код в анонимной функции подобным образом, а создать надлежащую функцию для удаления пользователя и вызова этого вместо), но это можно решить один раз это работает, так как кажется, что это для назначения, и у вас заканчивается время.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...