Skip to content

Commit

Permalink
Add contact now toggles form on and off
Browse files Browse the repository at this point in the history
  • Loading branch information
@Rinbo
Rinbo committed Sep 7, 2018
1 parent 717e0c1 commit d73f2ca
Show file tree
Hide file tree
Showing 3 changed files with 29 additions and 26 deletions.
2 changes: 1 addition & 1 deletion dist/bundle.js
View file

Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.

42 changes: 19 additions & 23 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -23,32 +23,28 @@
<path d="M10 3.22l-.61-.6a5.5 5.5 0 0 0-7.78 7.77L10 18.78l8.39-8.4a5.5 5.5 0 0 0-7.78-7.77l-.61.61z"/>
</svg>
<h1 class="text-4xl inline-block align-middle">Contacts</h1>
<button class="add-contact block bg-pink-dark hover:bg-pink-darker text-white font-bold py-2 px-4 rounded m-4" onClick="showForm()">Add Contact</button>
<div id="form" hidden>
<form action="#" class ="new-contact-form bg-pink-lightest shadow-md rounded px-6 pt-6 pb-8 mb-4 mx-4 overflow-hidden">
<label class="block text-pink-darker text-md font-bold mb-2" for="name">Name</label>
<input class="shadow appearance-none border rounded sm:w-full lg:w-1/4 py-2 px-3 text-pink-darker leading-tight focus:outline-none focus:shadow-outline" id="contact-name" name="name" type="text">
<label class="block text-pink-darker text-md font-bold my-2" for="email">Email</label>
<input class="shadow appearance-none border rounded sm:w-full lg:w-1/4 py-2 px-3 text-pink-darker leading-tight focus:outline-none focus:shadow-outline" id="contact-email" name="email" type="email">
<label class="block text-pink-darker text-md font-bold my-2" for="phone">Phone</label>
<input class="shadow appearance-none border rounded sm:w-full lg:w-1/4 py-2 px-3 text-pink-darker leading-tight focus:outline-none focus:shadow-outline" id="contact-phone" name="phone" type="text">
<label class="block text-pink-darker text-md font-bold my-2" for="company">Company</label>
<input class="shadow appearance-none border rounded sm:w-full lg:w-1/4 py-2 px-3 text-pink-darker leading-tight focus:outline-none focus:shadow-outline" id="contact-company" name="company" type="text">
<label class="block text-pink-darker text-md font-bold my-2" for="notes">Notes</label>
<textarea class="shadow appearance-none border rounded sm:w-full lg:w-1/4 py-2 px-3 text-pink-darker leading-tight focus:outline-none focus:shadow-outline" id="contact-notes" name="notes" type="text"></textarea>
<label class="block text-pink-darker text-md font-bold my-2" for="twitter">Twitter</label>
<input class="shadow appearance-none border rounded sm:w-full lg:w-1/4 py-2 px-3 text-pink-darker leading-tight focus:outline-none focus:shadow-outline" id="contact-twitter" name="twitter" type="text">
<input class="save-contact bg-pink-dark hover:bg-pink-darker text-white font-bold py-2 px-4 rounded m-3" type="submit" value="Save contact">
</form>
</div>
<button id="formButton" class="add-contact block bg-pink-dark hover:bg-pink-darker text-white font-bold py-2 px-4 rounded m-4">Add Contact</button>
<div id="form" class="hidden">
<form action="#" class ="new-contact-form bg-pink-lightest shadow-md rounded px-6 pt-6 pb-8 mb-4 mx-4 overflow-hidden">
<label class="block text-pink-darker text-md font-bold mb-2" for="name">Name</label>
<input class="shadow appearance-none border rounded sm:w-full lg:w-1/4 py-2 px-3 text-pink-darker leading-tight focus:outline-none focus:shadow-outline" id="contact-name" name="name" type="text">
<label class="block text-pink-darker text-md font-bold my-2" for="email">Email</label>
<input class="shadow appearance-none border rounded sm:w-full lg:w-1/4 py-2 px-3 text-pink-darker leading-tight focus:outline-none focus:shadow-outline" id="contact-email" name="email" type="email">
<label class="block text-pink-darker text-md font-bold my-2" for="phone">Phone</label>
<input class="shadow appearance-none border rounded sm:w-full lg:w-1/4 py-2 px-3 text-pink-darker leading-tight focus:outline-none focus:shadow-outline" id="contact-phone" name="phone" type="text">
<label class="block text-pink-darker text-md font-bold my-2" for="company">Company</label>
<input class="shadow appearance-none border rounded sm:w-full lg:w-1/4 py-2 px-3 text-pink-darker leading-tight focus:outline-none focus:shadow-outline" id="contact-company" name="company" type="text">
<label class="block text-pink-darker text-md font-bold my-2" for="notes">Notes</label>
<textarea class="shadow appearance-none border rounded sm:w-full lg:w-1/4 py-2 px-3 text-pink-darker leading-tight focus:outline-none focus:shadow-outline" id="contact-notes" name="notes" type="text"></textarea>
<label class="block text-pink-darker text-md font-bold my-2" for="twitter">Twitter</label>
<input class="shadow appearance-none border rounded sm:w-full lg:w-1/4 py-2 px-3 text-pink-darker leading-tight focus:outline-none focus:shadow-outline" id="contact-twitter" name="twitter" type="text">
<input class="save-contact bg-pink-dark hover:bg-pink-darker text-white font-bold py-2 px-4 rounded m-3" type="submit" value="Save contact">
</form>
</div>
<div class="contact-list m-4"></div>
</div>
<script src="./dist/bundle.js"></script>
<script>
function showForm() {
document.getElementById('form').hidden = false;
}
</script>

</body>

</html>
11 changes: 9 additions & 2 deletions src/app.js
View file
Original file line number Diff line number Diff line change
@@ -1,5 +1,10 @@
const storage = window.localStorage;

function toggleForm() {
document.getElementById('form').classList.toggle('hidden');
}


const renderContacts = () => {
const contacts = JSON.parse(storage.getItem('contacts'))

Expand Down Expand Up @@ -31,8 +36,9 @@ const renderContacts = () => {
}

document.addEventListener('DOMContentLoaded', () => {
renderContacts()
const addContactForm = document.querySelector('.new-contact-form')
renderContacts();
document.getElementById('formButton').addEventListener('click', toggleForm);
const addContactForm = document.querySelector('.new-contact-form');
addContactForm.addEventListener('submit', event => {
let clearMessage = document.querySelector('.contact-list');
clearMessage.innerHTML = ""
Expand Down Expand Up @@ -63,5 +69,6 @@ document.addEventListener('DOMContentLoaded', () => {
storage.setItem('contacts', JSON.stringify(contacts))
renderContacts()
addContactForm.reset()
document.getElementById('form').classList.add('hidden')
})
})

0 comments on commit d73f2ca

Please sign in to comment.