<!DOCTYPE html> <html> <head> <title>erick_odero-portfolio</title> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edgev"> <link rel="stylesheet" href="index.css"> <script src="https://kit.fontawesome.com/631b2dc748.js" crossorigin="anonymous"></script> </head> <body> <section class="list"> <header id="header"> <h1 id="my-name">Erick O Odero</h1> <img src="https://avatars.githubusercontent.com/u/84427589?v=4" alt="Author's profile picture" width="60" height="60"> <nav class="main-menu"> <ul> <li><a href="../intro-to-programming-asteroid/index.html">Home</a></li> <li><a href="#about">About</a></li> <li><a href="#projects">Projects</a></li> <li><a href="#connect">Connect</a></li> </ul> </nav> </header> </section> <main> <section id="about"> <h1>About</h1> <p> I am healthcare worker in the field of clinical research residing in Memphis Tennessee and now an aspiring<br> Software Developer. I am currently a student with Code The Dream taking Javascript, HTML, AJAX and <br> Fetch API lessons. When I learnt of the immense potential that technology has to improve health outcomes<br> of our communities, my interest in coding was conjured and I hope to immerse myself full time in the industry. </p> </section> <section class="list"> <h1>Experience</h1> <ul id="exp"> <li>clinical Research Associate - United States</li> <li>HIV program coordinator - Kenya</li> <li>Health program coordinator - Kenya</li> <li>Health Worker Training and Capacity building(volunteer) - Vanuatu</li> </ul> </section> <section id="projects"> <h1>Projects</h1> <ul> </ul> </section> <section class="list"> <h1>My tools</h1> <ul class="tools"> <li><a href="https://code.visualstudio.com/">Visual Studio Code</a></li> <li><a href="https://www.apple.com/macbook-air/?afid=p238%7CsS5GAoNB9-dc_mtid_1870765e38482_pcrid_569734191494_pgrid_110391415659_&cid=aos-us-kwgo-mac--slid---product-">Mac Bookair</a></li> <li><a href="https://www.microsoft.com/en-us/software-download/windows10ISO">Windows 10</a></li> <li><a href="https://slack.com/intl/en-in/get-started#/createnew">Slack</a></li> <li><a href="https://www.freecodecamp.org/learn/">Freecodecamp</a></li> <li><a href="https://whimsical.com/lesson-3-1-wireframe-exercise-NbAuTttSYsijaHafZ44mvS">Whimsical</a> </li> <li><a href="https://github.com">github</a></li> </ul> </section> <section class="section"> <h1>My resume</h1> <nav> <ul> <li><a href="#">resume</a></li> </ul> </nav> </section> <section id="skills"> <h2 class="list">Skills</h2> <ul id="skillz"></ul> </section> <section id="projects"> <h2>Projects</h2> <ul> </ul> </section> </main> <!--Create leave message section and add form--> <section class="section"> <h2>Leave a Message</h2> <form name="leave_message"> <fieldset id="details"> <legend>1 Your details</legend> <label for="name">Name:</label><br> <input type="text" name="name" required="true"><br> <label for="email">Email:</label><br> <input type="email" name="email" required="true"><br> </fieldset> <fieldset id="text_message"> <legend>2 Your Message</legend> <label for="message">Message:</label><br> <textarea id="textMessage" name="message" required="true"></textarea><br> </fieldset> <button id="submit" class="btn" type="submit">Submit</button> </form> </section> <!-- Add message list section--> <section id="messages"> <h2>Messages</h2> <ul> </ul> </section> <footer></footer> <script src="index.js"></script> </body> </html>
const today = new Date(); const thisYear = today.getFullYear() const footer = document.querySelector('footer'); const copyright = document.createElement('p'); copyright.innerHTML = `<span> © Erick Odero ${thisYear}</span> `; footer.appendChild(copyright); let skills = ['html', 'CSS', 'JavaScript']; const skillsSection = document.getElementById('skills'); const skillsList = document.getElementById('skills').children[1]; for (let i = 0; i < skills.length; i++) { const skill = document.createElement('li'); skill.textContent = skills[i]; skillsList.appendChild(skill); } // Create and handle edit button const editMessage = document.querySelector('#text_message'); const editButton = document.createElement('button'); editButton.innerText = 'Edit'; editButton.type = 'button'; editButton.classList.add('btn'); editMessage.appendChild(editButton); editMessage.addEventListener('click', (e) => { const button = e.target; const span = document.createElement('span'); const editedMessage = document.createElement('input'); input.type = 'text'; console.log(newMessage); }) // Handle message form submit button const messageForm = document.querySelector('form[name="leave_message"]') messageForm.addEventListener('submit', (e) => { // prevent default refreshing behavior e.preventDefault(); // create variables for each form field // const user_name = messageForm.name.value; // const user_email = messageForm.email.value; // const user_message = messageForm.message.value; const user_name = e.target.name; const user_email = e.target.email; const user_message = e.target.message; // Display messages in list const messageSection = document.getElementById('messages'); const messageList = messageSection.children[1]; const newMessage = document.createElement('li'); newMessage.innerHTML = `<a href="mailto:${user_email.value}">${user_name.value}</a><span> wrote: ${user_message.value}</span>`; // create button element const removeButton = document.createElement('button'); removeButton.innerText = 'remove'; removeButton.type = 'button'; // handle the removeButton removeButton.addEventListener('click', (e) => { const entry = e.target.parentNode; entry.remove(); }) // reset the form messageForm.reset(); newMessage.appendChild(removeButton); messageList.appendChild(newMessage); }) const header = document.getElementById('header'); header.classList.add('sticky'); var gitHubRequest = new XMLHttpRequest(); gitHubRequest.onreadystatechange = function () { if (gitHubRequest.readyState === 4 && gitHubRequest.status ===200) { gitHubRequest.responseText; } }; gitHubRequest.open('GET', 'https://api.github.com/users/eodero/repos'); gitHubRequest.send(); gitHubRequest.addEventListener('load', (event) => { let repositories = JSON.parse(gitHubRequest.response); console.log(repositories); }); const projectSection = document.getElementById('projects'); const projectList = projectSection.lastElementChild; for (let i = 0; i < projectList.length; i++) { const project = document.createElement('li'); project.innerText += project[i]; projectList.appendChild(project); console.log(projectSection); }
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)