Answer to Question #266273 in HTML/JavaScript Web Application for sivavalluri

Question

Answer to Question #266273 in HTML/JavaScript Web Application for sivavalluri

Answers>

Programming & Computer Science>

HTML/JavaScript Web Application

Question #266273

Create a student Management system using JavaScript, Bootstrap, CSS, and HTML

Expert's answer

index.html


<html>
    <head>
        <link rel="stylesheet" href="style.css">
        <link rel="stylesheet" href="//use.fontawesome.com/releases/v5.0.7/css/all.css">
        
    </head>


    <body>
        <h1>Contact Management System</h1>
        <div class="cms-table-container" id="cmsTableContainer">
            <div class="cms-table-row">
                <div class="cms-table-column cms-name cms-header">Name</div>
                <div class="cms-table-column cms-phone cms-header">Phone</div>
                <div class="cms-table-column cms-address cms-header">Address</div>
                <div class="cms-table-column cms-header cms-add-entry-column" id="cmsAddNewEntry">+</div>
            </div>
            <span id="tableBody"></span>    
        </div>


        <div class="disable-modal" id="backdrop"></div>
        <div class="disable-modal" id="newPersonModal">
                <h1>Add New Person</h1>


                <label for="newPersonName">Name</label>
                <input type="text" id="newPersonName">


                <label for="newPersonPhone">Phone</label>
                <input type="text" id="newPersonPhone">


                <label for="newPersonAddress">Address</label>
                <input type="text" id="newPersonAddress">


                <button id="newPersonCancelBtn">Cancel</button>
                <button id="newPersonSubmitBtn">Submit</button>
        </div>


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

script.js

const tableKey = 'cms-table';


let cmsTable;
let cmsTableDemo = {
    'Dave Rapoza': {
        'phone': '766-786-7868',
        'address': '1234 Sunshine Ave, Denver, Co, 80125'
    },
    'Wylie Beckert': {
        'phone': '555-123-6789',
        'address': '9876 Artist Way, Seattle, WA, 66541'
    }    
}; 


let enableDisableNameInput = (option) => {
    let newPersonName = document.getElementById('newPersonName');


    if(option === 'enable')
        newPersonName.disabled = false;
    else if (option === 'disable')
        newPersonName.disabled = true;
}


let refreshDOMTable = () => {  


    let cmsTableKeys = Object.keys(cmsTable);
    let tableContainer = document.getElementById('cmsTableContainer');
    let oldTableBody = document.getElementById('tableBody');
    tableContainer.removeChild(oldTableBody);


    let newTableBody = document.createElement('span');
    newTableBody.id = 'tableBody';
    tableContainer.appendChild(newTableBody);


    for (let i = 0; i < cmsTableKeys.length; i++) {
        let currentRow = document.createElement('div');
        let currentNameCol = document.createElement('div');
        let currentPhoneCol = document.createElement('div');
        let currentAddressCol = document.createElement('div');
        let currentEditBtn = document.createElement('div');
        let currentDeleteBtn = document.createElement('div');


        currentRow.className = 'cms-table-row';
        currentNameCol.className = 'cms-table-column cms-name';
        currentPhoneCol.className = 'cms-table-column cms-phone';
        currentAddressCol.className = 'cms-table-column cms-address';
        currentEditBtn.className = 'cms-table-column cms-edit';
        currentDeleteBtn.className = 'cms-table-column cms-delete';


        currentNameCol.innerHTML = cmsTableKeys[i];
        currentPhoneCol.innerHTML = cmsTable[cmsTableKeys[i]].phone;
        currentAddressCol.innerHTML = cmsTable[cmsTableKeys[i]].address;


        currentEditBtn.innerHTML = '<i class="fas fa-edit"></i>';
        currentDeleteBtn.innerHTML = '<i class="fas fa-trash"></i>';


        currentRow.appendChild(currentNameCol);
        currentRow.appendChild(currentPhoneCol);
        currentRow.appendChild(currentAddressCol);
        currentRow.appendChild(currentEditBtn);
        currentRow.appendChild(currentDeleteBtn);
        newTableBody.appendChild(currentRow);


    }


    let enableDisableNewUserModal = (option) => {
        let newPersonName = document.getElementById('newPersonName');
        let newPersonPhone = document.getElementById('newPersonPhone');
        let newPersonAddress = document.getElementById('newPersonAddress');
        newPersonName.value = '';
        newPersonPhone.value = '';
        newPersonAddress.value = '';


        let newPersonModal = document.getElementById('newPersonModal');
        let backdrop = document.getElementById('backdrop');


        newPersonModal.className = `${option}-modal`;
        backdrop.className = `${option}-modal`;


    }


    let addNewEntryBtn = document.getElementById('cmsAddNewEntry');
    let editBtns = document.getElementsByClassName('cms-edit')
    let deleteBtns = document.getElementsByClassName('cms-delete');


    let newPersonSubmitBtn = document.getElementById('newPersonSubmitBtn');
    let newPersonCancelBtn = document.getElementById('newPersonCancelBtn');


    newPersonSubmitBtn.addEventListener('click', () => {
        let newPersonName = document.getElementById('newPersonName').value.trim();
        let newPersonPhone = document.getElementById('newPersonPhone').value.trim();
        let newPersonAddress = document.getElementById('newPersonAddress').value.trim();
    
        if(newPersonName === '')
            document.getElementById('newPersonName').className = 'input-err';
        else 
            document.getElementById('newPersonName').className = '';   


        if(newPersonPhone === '')
            document.getElementById('newPersonPhone').className = 'input-err';
        else 
            document.getElementById('newPersonPhone').className = '';   


        if(newPersonAddress === '')
            document.getElementById('newPersonAddress').className = 'input-err';
        else 
            document.getElementById('newPersonAddress').className = ''; 
            
        if(newPersonName !== '' && newPersonPhone !== '' && newPersonAddress !== '' ) {
            let newPerson = {};
            cmsTable[newPersonName] = {
                'phone': newPersonPhone,
                'address': newPersonAddress
            }
            localStorage.setItem(tableKey, JSON.stringify(cmsTable));
            enableDisableNewUserModal('disable');
            refreshDOMTable();
        }
    });


    newPersonCancelBtn.addEventListener('click', () => {
        enableDisableNewUserModal('disable');
    });
    addNewEntryBtn.addEventListener('click', () => {
        enableDisableNewUserModal('enable');
    });   
    
    for(let i = 0; i < editBtns.length; i++) {
        editBtns[i].addEventListener('click', ($event) => {
            let nameToEdit = $event.target.parentElement.children[0].innerText;         
            let personToEdit = cmsTable[nameToEdit];


            enableDisableNewUserModal('enable');


            let newPersonName = document.getElementById('newPersonName');
            let newPersonPhone = document.getElementById('newPersonPhone');
            let newPersonAddress = document.getElementById('newPersonAddress');
            newPersonName.value = nameToEdit;
            newPersonPhone.value = personToEdit.phone;
            newPersonAddress.value = personToEdit.address; 
            
            enableDisableNameInput('disable');
        })
    }


    for (let i = 0; i < deleteBtns.length; i++) {
        deleteBtns[i].addEventListener('click', ($event) => {
            let nameToDelete = $event.target.parentElement.children[0].innerText;
            let isSure = window.confirm('Are you sure you want to delete ' + nameToDelete + '?');
            if(isSure)
                deleteUserFromTable(nameToDelete);
        })
    }


}


let deleteUserFromTable = (userName) => {
    let tempTable = {};
    let cmsTableKeys = Object.keys(cmsTable);
    for(let i = 0; i < cmsTableKeys.length; i++) {
        if(userName !== cmsTableKeys[i]) {
            tempTable[cmsTableKeys[i]] = cmsTable[cmsTableKeys[i]];
        }
    }
    cmsTable = tempTable;
    localStorage.setItem(tableKey, JSON.stringify(cmsTable));
    refreshDOMTable();
}


let init = () => {
    
    if(localStorage.getItem(tableKey)) {
        cmsTable = JSON.parse(localStorage.getItem(tableKey));
    }  else {
        cmsTable = cmsTableDemo;
        localStorage.setItem(tableKey, JSON.stringify(cmsTable));
    }   


    refreshDOMTable();
}


init();

styles.css

@import url('https://fonts.googleapis.com/css?family=Open+Sans&display=swap');


body {
    background-image: url('bg-image1.jpg');
    color: white;
    background-size: cover;
    background-repeat: no-repeat;
    overflow-x: hidden;
    padding: 0;
    margin: 0;
    font-family: 'Open Sans', sans-serif;
}


h1 {
    font-family: sans-serif;
    text-align: center;
    margin-top: 20px;
    font-size: 48px;
    text-shadow: 5px 5px 5px black;
}


.cms-table-container {
    font-size: 20px;
    margin-top: 35px;
    width: 80%;
    margin: auto;
}


.cms-table-row {
    display: flex;
}


.cms-table-column {
    background-color: rgb(127,146,186);
    margin: 2px;
    padding: 15px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}


.cms-name {
    flex-basis: 20%;
}


.cms-phone {
    flex-basis: 20%
}


.cms-address {
    flex-grow: 2;
    flex-basis: 20%;
}


.cms-header {
    background-color: rgb(127,146,186);
    font-weight: bolder;
}


.cms-edit, .cms-delete, .cms-add-entry-column {
    flex-basis: 5%;
    text-align: center;
    cursor: pointer;
}


#newPersonModal {
    width: 500px;
    padding: 10px;
    border-radius: 5px;
    z-index: 99;
    top: 50px;
    position: absolute;
    margin-left: calc(50% - 250px);
    background-color: rgb(127,146,186);
}


#newPersonModal input {
    display: block;
    margin-bottom: 15px;
    padding: 10px;
    border: 3px;
    width: 100%;
}


.input-err {
    background-color: red;
}


#backdrop {
    width: 100%;
    height: 100%;
    position: fixed;
    background-color: rgba(0, 0, 0, 0.8);
    z-index: 50;
    top: 0;
    left: 0;
}


#newPersonSubmitBtn {
    background-color: rgb(47, 95, 151);
}


#newPersonCancelBtn {
    background-color: rgb(151, 47, 47);
}


button {
    padding: 15px;
    border-radius: 5px;
    border: none;
    float: right;
    margin: 5px;
    cursor: pointer;
}


button:hover {
    padding: 13px;
}


.disable-modal {
    visibility: hidden;
}


.enable-modal {
    visibility: visible;
}


i{
    pointer-events: none;
}

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

Comments

No comments. Be the first!

Answer to Question #266273 in HTML/JavaScript Web Application for sivavalluri

Comments

Leave a comment

Related Questions