Code-the-Dream-School · jocl0110 · Oct 31, 2023 · Oct 31, 2023 · Oct 31, 2023 · Nov 3, 2023
diff --git a/index.html b/index.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <title>My Portofolio</title>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    </head>
+    <body>
+        <header>
+            <h1>I'm Jose Luis Izquierdo Hernandez</h1>
+        </header>
+        <section>
+            <h2>About me</h2>
+            <p>I am an student in Code The Dream</p>
+        </section>
+        <section>
+            <h2>Experience</h2>
+            <p>1 month in PSSI</p>
+            <p>4 month in Walmart</p>
+        </section>
+        <section id="skills">
+            <h2>Skills</h2>
+            <ul>
+
+            </ul>
+        </section>
+        <section>
+        <h2>Connect</h2>
+        <p><a href="mailto:[email protected]">Email Me</a></p>
+        <p><a href="https://www.linkedin.com/in/jose-luis-izquierdo-hernandez-938064245">My LinkedIn</a></p>
+</section>
+    <section>
+        <h2>Leave a Message</h2>
+        <form name="leave_message">
+            <label>Your Name:<input type="text" name="usersName" required></label><br>
+            <label>Email Address:<input type="email" name="usersEmail" required></label><br>
+            <label>Your Message:<textarea name="usersMessage" required></textarea></label><br>
+            <button type="submit">Submit</button>
+        </form>
+    </section>
+    <section id="messages">
+        <h2>Messages</h2>
+        <ul>
+
+        </ul>
+    </section>
+    <footer></footer>
+    <script src="/js/index.js"></script>
+    </body>
+</html>
+
diff --git a/js/index.js b/js/index.js
@@ -0,0 +1,46 @@
+const today = new Date();
+const thisYear = today.getFullYear();
+const footer = document.querySelector('footer');
+const copyright = document.createElement('p');
+
+const skillsSection = document.getElementById('skills');
+const skills = ['HTML5', 'CSS', 'JavaScript', 'Teamwork', 'Problem Solving', 'Algorithms' ];
+const skillsList = skillsSection.querySelector('ul');
+
+
+
+copyright.innerHTML = `Jose Izquierdo ${thisYear}`;
+footer.appendChild(copyright);
+
+for(let i = 0; i < skills.length; i++){
+    let skill = document.createElement('li');
+    skill.textContent = skills[i];
+    skillsList.appendChild(skill);
+}
+
+// It didn't let me use the document.getElementsByName method in the line #22. 
+const messageForm = document.querySelector('form');
+messageForm.addEventListener('submit', (e) => {
+    e.preventDefault();
+    const usersName = e.target.usersName.value;
+    const usersEmail = e.target.usersEmail.value;
+    const usersMessage = e.target.usersMessage.value;
+    console.log(usersName)
+    console.log(usersEmail)
+    console.log(usersMessage)
+    const messageSection = document.getElementById('messages');
+    const messageList = messageSection.querySelector('ul');
+    const newMessage = document.createElement('li');
+    newMessage.innerHTML = `<a href="mailto:${usersEmail}">${usersName} </a><span>wrote you ${usersMessage}</span>`;
+    const removeButton = document.createElement('button');
+    removeButton.textContent = 'remove';
+    removeButton.type = "button";
+    removeButton.addEventListener('click', (e) => {
+        const entry = removeButton.parentNode;
+        entry.remove();
+
+    })
+    newMessage.appendChild(removeButton);
+    messageList.appendChild(newMessage);
+    messageForm.reset();
+})