14four · dav1dmoore · Jul 29, 2022 · Jul 29, 2022 · Jul 29, 2022 · Aug 10, 2022
diff --git a/Moore_Skills_Assessment/css/style.css b/Moore_Skills_Assessment/css/style.css
@@ -0,0 +1,179 @@
+/* Browser Reset */
+* {
+    margin:0;
+    padding:0;
+}
+
+
+/*General Body Style Set */
+body {
+    background-color: #FFFFFF;
+    color: white;
+    display: flex;
+    justify-content: space-around;
+    margin: 50px;
+    font-family:'Lucida Sans', sans-serif;
+}
+
+
+/* Layout Placement */
+.container {
+    width: 300px;
+    filter: drop-shadow(0px 2px 5px #7C7C7C);     
+}
+
+
+/* Header Style */
+#header {
+    background: linear-gradient(#3d3d3d, #252525);
+    border-top-left-radius: 15px;
+    border-top-right-radius: 15px;
+    display: flex;
+    justify-content: flex-start;
+}
+
+#header > h1 {
+    font-size: large;
+    font-weight:500;
+    padding: 15px;
+}
+
+
+/* Contact Status Style */
+.circle {
+    border-radius: 50%;
+    height: 8px;
+    margin: 10px;
+    width: 8px;
+}
+
+.flx {
+    display: flex;
+    align-items: center;
+}
+
+.family {
+    background-color: yellow;
+}
+
+.friend {
+    background-color: green;
+}
+
+.client {
+    background-color: red;
+}
+
+.info {
+    width: 100px;
+}
+
+
+/* Table Style */
+table {
+    background-color: black;
+    border-collapse:separate;
+    font-size: small;
+}
+tr {
+    border-bottom: 1px solid #131313;
+}
+
+
+/* Alternating Colors in the Table */
+tr:nth-child(odd){
+    background-color: #212121;
+}
+tr:nth-child(even){
+    background-color: #1A1A1A;
+}
+
+
+/* Table Class Styles */
+.size {
+    padding: 6px;
+    text-align: center;
+    width: 70%;
+}
+.name {
+    padding: 6px;
+    padding-right: 15px;
+}
+.number, .email{
+    color: #4F4F4F !important;
+    height:auto;
+    text-align: left;
+    padding-left: 20px;
+}
+.info {
+    text-align: left;
+    padding-left: 20px;
+}
+
+.infoDvTop {
+    background-color: #484848;
+    left:100px;
+    padding: 10px;
+    padding-left:20px;
+    position: absolute;
+    text-align: -webkit-match-parent;
+    top: 1px;
+    width: -webkit-fill-available;
+}
+
+.infoDvBottom {
+    background-color: #484848;
+    left:100px;
+    padding: 10px;
+    padding-left:20px;
+    position: absolute;
+    text-align: -webkit-match-parent;
+    top: -30px;
+    /* width: -webkit-fill-available; */
+}
+
+
+
+
+/* Footer-Input Style */
+#footer {
+    background-color: #323232;
+    border-bottom-left-radius: 15px;
+    border-bottom-right-radius: 15px;
+    display: flex;
+    justify-content: flex-end;
+}
+
+#footer > select {
+    border-radius: 5px;
+    font-size: small;
+    margin: 15px;
+}
+
+
+/* Hide Style */
+.hide {
+    display: none;
+}
+
+/* Selected Style */
+.selected {
+    background-color: #484848 !important;
+    border-bottom: none !important;
+    position: relative;
+}
+
+.notSelected {
+    background-color: black !important;
+    border-bottom:none;
+    border-right: none;
+    opacity: .2;
+}
+
+a {
+    color: #539D9E;
+}
+
+.selectedTable {
+    border-collapse: collapse;
+}
diff --git a/Moore_Skills_Assessment/index.html b/Moore_Skills_Assessment/index.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Document</title>
+    <link rel="stylesheet" href="css/style.css">
+    <script src="js/script.js"></script>
+</head>
+<body>
+    <div class="container">
+        <div id="header">
+            <h1>Contacts</h1>
+        </div>
+        <table id="tbl">
+            <tbody id="contactTable">
+            </tbody>
+        </table>
+        <div id="footer">
+            <select name="contactsFilter" id="contactsFilter">
+                <option value="contactEmail">Email address</option>
+                <option value="contactNumber">Phone number</option>
+            </select>
+        </div>
+    </div>
+</body>
+</html>
diff --git a/Moore_Skills_Assessment/js/script.js b/Moore_Skills_Assessment/js/script.js
@@ -0,0 +1,171 @@
+    // Allows DOM to load and then applies script. Allows Script call to remain in the head while not changing rendering
+document.addEventListener("DOMContentLoaded", function(){
+
+    // Document Elements
+    let filter = document.querySelector('#contactsFilter');
+    let contactEmails = document.getElementsByClassName('email');
+    let contactInfo = document.getElementsByClassName('info');
+    let nameData = document.getElementsByClassName('name');
+    let contactNumbers = document.getElementsByClassName('number');
+    let rowSelect = document.getElementsByClassName('selected');
+    let tableBdy = document.querySelector('#tbl');
+
+    // Create Auto-Incrementing ID
+    let num = 0;
+    function incrementID(){
+        num++
+        return num
+    }
+
+    //Create Contact Objects
+    let contacts = [
+        {id:`${incrementID()}`, name: 'Christian', number: '555-555-5555', email: '[email protected]', street:'6539 Wilton Ave.', city:'Culver City', state:'CA', zipcode:'90234'},
+        {id:`${incrementID()}`, name: 'Rich', number: '555-555-5555', email: '[email protected]', street:'6539 Wilton Ave.', city:'Culver City', state:'CA', zipcode:'90234'},
+        {id:`${incrementID()}`, name: 'Scott', number: '555-555-5555', email: '[email protected]', street:'6539 Wilton Ave.', city:'Culver City', state:'CA', zipcode:'90234'},
+        {id:`${incrementID()}`, name: 'Danny', number: '555-555-5555', email: '[email protected]', street:'6539 Wilton Ave.', city:'Culver City', state:'CA', zipcode:'90234'},
+        {id:`${incrementID()}`, name: 'Taka', number: '555-555-5555', email: '[email protected]', street:'6539 Wilton Ave.', city:'Culver City', state:'CA', zipcode:'90234'},
+        {id:`${incrementID()}`, name: 'Tim', number: '555-555-5555', email: '[email protected]', street:'6539 Wilton Ave.', city:'Culver City', state:'CA', zipcode:'90234'},
+        {id:`${incrementID()}`, name: 'Patrick', number: '555-555-5555', email: '[email protected]', street:'6539 Wilton Ave.', city:'Culver City', state:'CA', zipcode:'90234'},
+        {id:`${incrementID()}`, name: 'Jacques', number: '555-555-5555', email: '[email protected]', street:'6539 Wilton Ave.', city:'Culver City', state:'CA', zipcode:'90234'}
+    ]
+
+    //Create a status for the contact that determines circle color
+    let contactStatus = [
+        'family',
+        'friend',
+        'client'
+    ]
+
+    //Random function to be used to randomly select index of contact status
+    function rand(){
+        return Math.round(Math.random()*(contactStatus.length - 1))
+    }
+    rand();
+
+    //Generate table based on Contacts Object
+    function loadTable(contacts){
+        var table = document.querySelector('#contactTable');
+
+        //For Loop to build out table from contacts list
+            for(let i = 0; i < contacts.length; i++){
+
+            //Create Table Row & Table Data Elements
+            let tr = document.createElement('tr');
+            tr.setAttribute('id', contacts[i].id);
+
+            let tdAllContactInfo = document.createElement('td');
+            tdAllContactInfo.setAttribute("class", "info hide size");
+
+            // Create Information Div to be shown on name selection
+            let infoContainer = document.createElement('div');
+            if( i > 5){
+                infoContainer.setAttribute("class", "infoDvTop");
+                infoContainer.setAttribute("style", "top: -75px;");
+            } else {
+                infoContainer.setAttribute("class", "infoDvTop");
+            }
+
+            infoContainer.innerHTML = `<p><a href="mailto:${contacts[i].email}">${contacts[i].email}</a></p><br><p>${contacts[i].number}</p><br><p>${contacts[i].street}</p>${contacts[i].city} ${contacts[i].state} ${contacts[i].zipcode}<p>`;
+
+            tdAllContactInfo.appendChild(infoContainer);
+
+            // Create Email table data
+            let tdEmail = document.createElement('td');
+            tdEmail.setAttribute("class", "email size");
+            tdEmail.innerHTML = contacts[i].email;
+
+            // Create Email number data
+            let tdNumber = document.createElement('td');
+            tdNumber.setAttribute("class", "number hide size");
+            tdNumber.innerHTML = contacts[i].number;
+
+            // Create Name table data
+            let tdName = document.createElement('td');
+            tdName.setAttribute("class", "name flx");
+
+            //Employ random function to apply color based on contact status
+            tdName.innerHTML = `<div class="circle ${contactStatus[rand()]}"></div> ${contacts[i].name}`;
+
+            //Create EventListener that shows info, hides other elements on click
+            tdName.addEventListener('click', function(){
+                let selectedRow = document.getElementById(contacts[i].id)
+                if(selectedRow.classList.contains('selected')){
+                    tableBdy.classList.remove("selectedTable");
+                    if(filter.value == 'contactEmail'){
+                        showEmail();
+                    }else if(filter.value == 'contactNumber'){
+                        showNumber();
+                    }
+                } else {
+                    // This could be condensed and cleaned up. Feels extra heavy
+                tableBdy.setAttribute("class", "selectedTable");
+                addClass(contactInfo, 'hide');
+                removeClass(rowSelect, 'selected');
+                addClass(allRows, 'notSelected');
+                addClass(contactEmails, 'hide');
+                addClass(contactNumbers, 'hide');
+                selectedRow.classList.remove('notSelected');
+                selectedRow.classList.add('selected');
+                tdAllContactInfo.classList.remove('hide');
+                }
+            })
+
+            // Append all table data to Table Row, Append TR to Table
+            tr.appendChild(tdName);
+            tr.appendChild(tdAllContactInfo);
+            tr.appendChild(tdEmail);
+            tr.appendChild(tdNumber);
+            table.appendChild(tr);
+            }
+        //Return table that populates/renders HTML table
+        return table
+    }
+
+    //Invoke loadTable function with contacts as argument
+    loadTable(contacts);
+
+    //Select all table rows
+    let allRows = document.querySelectorAll ("tr");
+
+    //Filter for input contactsFilter. Show email or phone numbers:
+    filter.addEventListener('click', function(){
+        if(filter.value == 'contactEmail'){
+            showEmail();
+        }else if(filter.value == 'contactNumber'){
+            showNumber();
+        }
+    })
+
+    // Repeating function calls to minimze repeat code
+        //Add Class iterates through all the elements to apply a class, ensuring full functionality.
+    function addClass(elements, cls){
+        for(let element of elements){
+            element.classList.add(cls)
+        }
+    }
+        //Remove Class iterates through all the elements to apply a class, ensuring full functionality.
+    function removeClass(elements, cls){
+        for(let element of elements){
+            element.classList.remove(cls)
+        }
+    }
+
+        //Show Email & Number applies classes to elements to complete functionality
+    function showEmail(){
+        addClass(contactInfo, 'hide');
+        addClass(contactNumbers, 'hide');
+        removeClass(contactEmails, 'hide');
+        removeClass(rowSelect, 'selected');
+        removeClass(allRows, 'notSelected');
+        tableBdy.classList.remove("selectedTable");
+    }
+
+    function showNumber(){
+        addClass(contactInfo, 'hide');
+        addClass(contactEmails, 'hide');``
+        removeClass(contactNumbers, 'hide');
+        removeClass(rowSelect, 'selected');
+        removeClass(allRows, 'notSelected');
+        tableBdy.classList.remove("selectedTable");
+    }
+});
diff --git a/Moore_Skills_Assessment/readme.md b/Moore_Skills_Assessment/readme.md
@@ -0,0 +1,7 @@
+The skills assessent employs HTML, CSS, and JavaScript to render a general contacts page. The only place my solution does not match the image is the size of the column one in the selected table row. The size of the table data elements expand to the largest child within the parent table row. If I was going to do this project over I would consider employing divs, using grid to place them side by side, instead of a table markup to ensure an exact replica. Furthermore for ease of coding, I would employ jquery for easy, smooth transitioning. 
+
+All other functionality is present.
+
+Updated 8/11/22:
+
+This is the final submission. I utilized Steve's input to address the positioning on the elements to mirror the exact functionality requested. Furthermore, I added a small piece of javascript to adjust the style attribute on the bottom contacts so that the their information displays in the opposite direction, as the absolute positioning would have otherwise had the information content box escaping the body and covering the footer. Thank you for the chance to make improvements!