4.3 homework assignment

index.html

@@ -22,12 +22,38 @@ <h1>Hi, my name is John Gutierrez</h1>
     </ul>
   </section>
   <!-- Connect-->
-  <section>
-    <a href="https://github.com/">This is my GitHub</a>
-    <a href="https://www.instagram.com/">This is my Instagram</a>
-    <a href="https://www.example.com/">This is my portfolio</a>
-    <p> email me at  <a href = "mailto:[email protected]">[email protected]</a></p>
+  <section id = "skills">
+    <h2> Skills</h2>
+    <ul></ul>
   </section>
-
+      <section>
+           <section>
+           <h2>Leave a Message</h2>
+          <form name = "leave_message">
+             <label>Name</label><br />
+            <input type = "text" name = "usersName" required = true><br />
+            <label>Email</label><br />
+             <input type = "email" name = "usersEmail" required = true><br />
+             <label>Message</label><br />
+             <textarea name = "usersMessage" required = true></textarea>
+            <button type = "Submit">Submit</button>
+            </form>
+           </section>
+              <section id = "messages">
+                <h2>Messages</h2>
+                <ul>
+
+                </ul>
+              </section>
+    <footer id = "footer" >
+      <a href="https://github.com/">Github</a>
+        <a href="https://www.instagram.com/">Instagram</a>
+        <a href="https://www.example.com/">Portfolio</a>
+        <p> Contact me <a href = "mailto:[email protected]">[email protected]</a></p>
+
+    </footer>
+  </section>
+  <script src = "js/index.js"></script>
+
 </body>
 </html>

js/index.js

@@ -0,0 +1,91 @@
+//QUERIES
+const footer = document.getElementById('footer');
+const messageForm = document.getElementsByName('leave_message')[0]
+const SkillsSection = document.getElementById('skills')
+const SkillsList = SkillsSection.querySelector('ul')
+const messageSection = document.getElementById('messages')
+const messageList =  messageSection.querySelector('ul')
+
+
+//RENDER FUNCTIONS
+function renderCopyRight(){
+   const today = new Date()
+   const thisyear = today.getFullYear()
+   const copyright = document.createElement('p');
+
+   copyright.innerHTML = `${thisyear}`
+   footer.appendChild(copyright)    
+
+}
+
+function renderSkills(){
+   const Skills = ["game Development","Website Developer"]
+
+   for(let i = 0; i<Skills.length; i++){
+      const skill = document.createElement('li')
+      skill.innerText = Skills[i]
+      SkillsList.appendChild(skill)
+   }
+}
+
+
+//EVENT HANDLERS
+
+function deleteMessage(event){
+   let removebutton = event.target
+   let message = removebutton.parentNode
+
+   // don't remove only the button, but remove the entire message
+   message.remove()
+
+}
+
+function submit(event){
+   //prevent it from refreshing the whole page 
+   event.preventDefault()
+
+   const Name = event.target.usersName.value
+   const Email = event.target.usersEmail.value
+   const usersMessage = event.target.usersMessage.value
+   const newMessage = document.createElement('li')
+   newMessage.innerHTML = `<a href = "mailto:${Email}"> ${Name}</a> <span>${Email} ${usersMessage}</span> `
+   //clear all inputs
+   event.target.reset()
+
+   //REMOVE BUTTON FOR MESSAGES
+   const removebutton = document.createElement('button')
+         console.log(removebutton)
+   removebutton.innerHTML = "remove"
+   removebutton.setAttribute("type","button")
+
+
+
+   console.log("RemoveButton",removebutton)
+   console.log("Messages",messages)
+   //TODO can't access null messages, it's inside the handler
+   newMessage.appendChild(removebutton)
+   removebutton.addEventListener("click",deleteMessage)
+   messageList.appendChild(newMessage)
+}
+
+
+//LOADINGPAGE
+renderCopyRight()
+renderSkills()
+messageForm.addEventListener("submit",submit)
+
+
+
+// //REMOVE BUTTON FOR MESSAGES
+// const removebutton = document.createElement('button')
+
+// removebutton.innerHTML = "remove"
+// removebutton.setAttribute("type","button"
+// )
+// const messages = document.getElementById("Inbox")
+
+// console.log("RemoveButton",removebutton)
+// console.log("Messages",messages)
+// //TODO can't access null messages, it's inside the handler
+// messages.appendChild(removebutton)
+// removebutton.addEventListener("click",entry)