Answer to Question #276943 in HTML/JavaScript Web Application for sai krishna

Question

Answer to Question #276943 in HTML/JavaScript Web Application for sai krishna

Question #276943

Purpose: Build a Contact Picker plugin in HTML, CSS, Javascript with the below specifications. Screens: Default Plugin screen: The plugin must be collapsed as its default state. It has a toggle button that allows the user to view the plugin in the expanded mode. Expanded screen: 1. It consists of a four main components i. List of contacts ii. Search bar on the top iii. Quick navigation bar on the right iv. Toggle button 2. The list of contacts should load the data from a JSON and sorted alphabetically. 3. As you type in the search bar the list should filter based on the query string in the search bar 4. The Quick Navigation Bar consists of First characters of the name and allows the user to just to the name starting with the character. 5. On click of the toggle button the contact list should go back to the collapsed view.

Expert's answer

<!doctype html>
<html lang="en">
<meta charset="utf-8">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">


    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <link rel="icon" href="img/MetroUI_Phone_Alt.png">
    <link href="https://fonts.googleapis.com/css?family=Pacifico" rel="stylesheet">
    <link rel="stylesheet" type="text/css" href="css/contact.css">


    <title>Contacts</title>
  </head>
  <body>
    <div class="container">
      <h1> Contacts </br><small>By Will Smith</small></h1>
         <div class="jumbotron">
            <form class="formContent">
                <label></label>
                <p>First name here: </p>
                <input  name="Contact" placeholder="Let's get  your first name: " class="inputForm"></br></br></br>
                <p>Second name here: </p>
                <input  name="Contact" placeholder="Let's get  your second name: " class="inputForm"></br></br></br>
                <button id="onClick" class="btn btn-primary btn-lg">SAVE</button>
                <button id="onClick" class="btn btn-success btn-lg">CANCEL</button>
            </form>
         </div>


    </div>


    <script type="text/javascript" src="main.js"></script>
    <script type="text/javascript" src="http://chancejs.com/chance.min.js"></script>
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
  </body>
</html>

Learn more about our help with Assignments: Programming & Computer Science

Comments

No comments. Be the first!

Answer to Question #276943 in HTML/JavaScript Web Application for sai krishna

Comments

Leave a comment

Related Questions