diff --git a/index.html b/index.html new file mode 100644 index 0000000..c8ec17d --- /dev/null +++ b/index.html @@ -0,0 +1,91 @@ + + + + + + + Document + + + +
+
+

Contacts

+
+
+
+
+
Christian
+
+
christian@yahoo.com
+ + +
+
+
+
Rich
+
+
rich@tripod.com
+ + +
+
+
+
Scott
+
+
scott@mailinator.com
+ + +
+
+
+
Danny
+
+
danny@hotmail.com
+ + +
+
+
+
Taka
+
+
taka@myspace.com
+ + +
+
+
+
Tim
+
+
tim@netscape.com
+ + +
+
+
+
Patrick
+
+
patrick@live.com
+ + +
+
+
+
Jacques
+
+
jacques@aol.com
+ + +
+
+
+ +
+ + + \ No newline at end of file diff --git a/main.js b/main.js new file mode 100644 index 0000000..92a0163 --- /dev/null +++ b/main.js @@ -0,0 +1,48 @@ +const contacts = document.querySelectorAll('.contact-info'); +const overlay = document.getElementById('overlay'); +const contactContainer = document.getElementById('phone-contact-container'); +const sort = document.getElementById('sort'); + +overlay.addEventListener('click', e => { + e.stopPropagation(); + e.target.classList.remove('show'); + contacts.forEach(e => { + e.parentElement.classList.remove('selected'); + Array.from(e.children).forEach((child, index) => { + if(index !== 0){ + child.classList.add('hidden'); + } + if(child.classList.contains('contact-email')){ + const strippedString = child.innerHTML.replace(/(<([^>]+)>)/gi, ""); + child.innerHTML = strippedString; + } + }); + }); +}) + +contactContainer.addEventListener('click', e => { + const contact = e.target.closest('.phone-contact'); + const contactInfo = contact.querySelector('.contact-info'); + overlay.classList.add('show'); + contact.classList.add('selected'); + Array.from(contactInfo.children).forEach(child => { + child.classList.remove('hidden'); + if(child.classList.contains('contact-email')){ + const innerHtml = child.innerHTML; + child.innerHTML = `${innerHtml}`; + } + + }); +}); + +sort.addEventListener('change', selectEvent => { + contacts.forEach(e => { + if(!e.firstElementChild.classList.contains(`contact-${selectEvent.target.value}`)){ + let target = e.querySelector(`.contact-${selectEvent.target.value}`); + target.classList.remove('hidden'); + target.remove(); + e.insertAdjacentElement('afterbegin', target); + e.children[1].classList.add('hidden'); + } + }); +}); \ No newline at end of file diff --git a/styles.css b/styles.css new file mode 100644 index 0000000..3358828 --- /dev/null +++ b/styles.css @@ -0,0 +1,187 @@ +:root { + --header-grey: #313131; + --row-light-grey: #212121; + --row-dark-grey: #1A1A1A; + --green: #07FD1C; + --red: #FF020A; + --yellow: #FFF801; + --blue-font: #05EDF9; + --muted-font: gray; + --selected-background: dimgray; +} + +* { + box-sizing: border-box; +} + +body { + margin: 0px; + display: flex; + flex-direction: column; + justify-content: center; + align-items: center; + height: 100vh; + width: 100vw; + color: #fff; + font-family: Arial, Helvetica, sans-serif; +} + +a { + color: var(--blue-font); +} + +.phone-container { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: center; + border-radius: 12px; + max-width: 320px; + width: 100%; + -webkit-box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px; + -moz-box-shadow: rgba(0,0,0,0.3) 0 1px 3px; + box-shadow: rgba(0, 0, 0, 0.3) 0 1px 3px; + position: relative; +} + +.phone-container .overlay{ + position: absolute; + top: 0px; + left: 0px; + width: 100%; + height: 100%; + background-color: rgba(0,0,0,0.6); + z-index: 0; +} + +.phone-container .overlay.show{ + z-index: 2; +} + +.phone-container .phone-header { + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + background-color: var(--header-grey); + width: 100%; + border-top-right-radius: 12px; + border-top-left-radius: 12px; + padding: 0px 24px; + height: 60px; +} + +.phone-container .phone-header .phone-title { + font-size: 24px; +} + +.phone-container .phone-contact-container { + display: flex; + flex-direction: column; + justify-content: flex-start; + align-items: flex-start; + width: 100%; + position: relative; + overflow-x: hidden; + background-color: var(--row-dark-grey); +} + +.phone-container .phone-contact-container .phone-contact { + display: flex; + flex-direction: row; + width: 100%; + align-items: flex-start; + justify-content: space-between; + border-top: solid 1px black; + position: relative; + z-index: 1; +} + +.phone-container .phone-contact-container .phone-contact.selected { + z-index: 3; + background-color: var(--selected-background); +} + +.phone-contact-container .phone-contact:nth-child(even) { + background: var(--row-light-grey); +} +.phone-contact-container .phone-contact:nth-child(odd) { + background: var(--row-dark-grey); +} + +.phone-container .phone-contact-container .phone-contact .contact-name { + padding: 8px 16px 8px 16px; + border-right: solid 1px black; + width: 50%; + height: 100%; + display: flex; + flex-direction: row; + justify-content: flex-start; + align-items: center; + font-size: 15px; +} + +.phone-container .phone-contact-container .phone-contact .contact-name::before { + width:8px; + height:8px; + border-radius:50%; + content: ""; + margin-right: 12px; +} + +.phone-container .phone-contact-container .phone-contact .contact-name.red::before { + background: var(--red); +} + +.phone-container .phone-contact-container .phone-contact .contact-name.green::before { + background: var(--green); +} + +.phone-container .phone-contact-container .phone-contact .contact-name.yellow::before { + background: var(--yellow); +} + +.phone-container .phone-contact-container .phone-contact .contact-info { + display: flex; + flex-direction: column; + width: 100%; + align-items: flex-start; + justify-content: center; + padding: 8px 0px 8px 16px; + color: var(--muted-font); + font-size: 14px; +} + +.phone-container .phone-contact-container .phone-contact.selected .contact-info { + position: absolute; + top: 0px; + left: 35%; + background-color: dimgray; + color: white; + background-color: var(--selected-background); +} + +.phone-container .phone-contact-container .phone-contact .contact-info .contact-email { + margin-bottom: 8px; +} + +.phone-container .phone-contact-container .phone-contact .contact-info .contact-phone { + margin-bottom: 8px; +} + +.phone-footer { + display: flex; + flex-direction: row; + justify-content: flex-end; + align-items: center; + background-color: var(--header-grey); + width: 100%; + height: 50px; + border-bottom-right-radius: 12px; + border-bottom-left-radius: 12px; + padding: 0px 24px; +} + +.hidden { + display: none; +} \ No newline at end of file