Code-the-Dream-School · kirt-desai · Oct 31, 2023 · Dec 11, 2023 · Dec 11, 2023 · Dec 12, 2023
diff --git a/css/index.css b/css/index.css
@@ -0,0 +1,98 @@
+body {
+  background-color: #f2f2f2;
+  color: #333333;
+  font-family: Arial, sans-serif;
+  margin-bottom: 20px;
+}
+
+a, p {
+  font-family: 'Raleway', sans-serif;
+}
+
+ul#skills li {
+  background-color: #e6f7ff;
+  border: 1px solid #b3e6ff;
+  padding: 10px;
+  margin-bottom: 10px;
+}
+
+ul#experience li {
+  background-color: #f2f2f2;
+  border: 1px solid #ccc;
+  padding: 10px;
+  margin-bottom: 10px;
+}
+
+ul #messages li {
+  background-color: #f2f2f2;
+  border: 1px solid #ccc;
+  padding: 10px;
+  margin-bottom: 10px;
+}
+
+.button {
+  background-color: #007bff;
+  color: #fff;
+  padding: 10px 20px;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.button:hover {
+  background-color: #0056b3;
+}
+
+label {
+  font-size: 16px;
+  color: #333;
+}
+.section {
+  margin-bottom: 20px;
+}
+
+.section:last-child {
+  margin-bottom: 0;
+}
+
+input[type="text"],
+textarea {
+  font-size: 14px;
+  padding: 10px;
+  border: 1px solid #ccc;
+  border-radius: 4px;
+}
+
+input[type="text"],
+textarea {
+  margin-bottom: 10px;
+}
+
+input[type="submit"] {
+  padding: 10px 20px;
+  background-color: #007bff;
+  color: #fff;
+  border: none;
+  border-radius: 4px;
+  cursor: pointer;
+}
+
+.footer {
+  padding: 20px;
+  background-color: #f9f9f9;
+}
+
+@media screen and (max-width: 768px) {
+
+}
+
+@media screen and (min-width: 769px) and (max-width: 1024px) {
+
+}
+
+@media screen and (min-width: 1025px) {
+
+}
+
+
+
diff --git a/index.html b/index.html
@@ -0,0 +1,62 @@
+<html>
+  <head>
+    <title> My Webpage </title>
+    <meta charset="UTF-8">
+    <meta name="author" content="Kirtan Desai">
+    <link rel="stylesheet" href="css/index.css">
+  </head>
+
+  <body>
+
+<h1>Kirtan Desai</h1>
+<section>
+About
+I’m Kirtan Desai I’m currently a sophomore at UTSA, majoring in cybersecurity. My experience consists of working as an intern at Code2College Labs as a programmer of multiple languages. The skills and knowledge I taken away from these experiences allows me to be a worker that endeavors to help increase productivity.  I’m hardworking, driven, and a quick thinker about the problem in front of me in a work environment. 
+</section>
+
+<section>   
+Experience
+  <ul>
+<li>Code2college</li>
+<li>BigCommerce</li>
+  </ul>
+</section>
+
+<section id="skills">
+  <ul>
+  <h2>Skills</h2>
+  </ul>
+</section>
+
+<section>
+Connect
+  <ul>
+<li>[email protected]</li>
+<li>https://github.com/kirt-desai</li>
+<li>https://www.facebook.com/profile.php?id=100077605797062</li>
+  </ul>
+</section>
+
+<section>
+  <h2>Leave a Message</h2>
+<form name="leave_message">
+  <label for="usersName">Name:</label>
+  <input type="text" name="usersName" required>
+
+  <label for="usersEmail">Email:</label>
+  <input type="email" name="usersEmail" required>
+
+  <label for="usersMessage">Message:</label>
+  <textarea name="usersMessage" required></textarea>
+
+  <button type="submit">Submit</button>
+</form>
+    </section>
+<section id="messages">
+  <h2>Messages</h2>
+  <ul></ul>
+</section>
+    <footer id="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('December 12, 2023, 5:05:00');
+
+var thisYear = today.getFullYear();
+const footer = document.querySelector("#footer");
+var copyright = document.createElement("p");
+
+const copyright = document.getElementById(thisYear).innerHTML;
+footer.appendChild(copyright);
+
+const skills = [ "Java", "Python", "Javascript", "HTML", "CSS", "Microsoft Excel Level 3", "Access Level 1", "Powerpoint", "Microsoft Azure", "Tableau", "Linux"];
+const skillsSection = document.querySelector("#skills");
+const skillsList = skillsSection.querySelector('ul');
+
+for (let i = 0; i < skills.length; i++) {
+  const skill = document.createElement("li");
+  skill.innerText = skills[i];
+  skillsList.appendChild(skill);
+}
+
+const messageForm = document.querySelector('form[name="leave_message"]');
+messageForm.addEventListener('submit', function(event) {
+
+  const usersName = event.target.usersName.value;
+  const usersEmail = event.target.usersEmail.value;
+  const message = event.target.message.value;
+  console.log(usersName, usersEmail, message);
+
+  event.preventDefault();
+  const messageSection = document.querySelector('#messages');
+  const messageList = messageSection.querySelector('ul');
+  const newMessage = document.createElement('li');
+  newMessage.innerHTML = `
+    <a href="mailto:${usersEmail}">${usersName}</a>
+    <span>${usersMessage}</span>
+    `;
+  const removeButton = document.createElement('button');
+  removeButton.innerText = 'remove';
+  removeButton.type = 'button';
+  removeButton.addEventListener('click', function() {
+    const entry = removeButton.parentNode;
+    entry.remove(); 
+  });
+  newMessage.appendChild(removeButton);
+  messageList.appendChild(newMessage);
+  messageForm.reset();
+});