CS4082 Report

by Annika Jungfleisch (22359923)

My website showcases my personal information, previous courses I took, previous work experiences and projects I have worked on. The goal of this assignment was to have a website that can be used as my personal portfolio. To the main webpage, I linked a second webpage I created that list all my skills in detail.
When first opening this website, you will be asked to input your name and organisation, This information will be stored in the cookies.
Below the websites title, 'Annika's Portfolio', is the Information section that includes my contact details.
This section includes my full name, my phone number (I might have rearranged the numbers), my email address and my current location.
Below that is my so called Selection Bar. This includes an introduction to the different parts of my portfolio website.

1. Education

This part displays three courses I took last semester when its corresponding button is pressed.

2. Work experience

This part displays three work experiences of mine. I included my most recent work experiences. Similar to the Education display, a button click is needed to reveal this information.

3. Projects

Upon clicking the corresponding button, it displays one of my three projects. All of which were created within this module.
The first two are parts of Assignment 1, where as the third project is a Lab Assignment from Week 04.
Clicking either of those buttons will reveal a section below that I called MainDiv.
Below it is a clear button that will make the section disappear again. Next to it is a suprise button that will make a random project appear and rotate between them every 30 sec. This can be stopped by clicking the Stop button.
Second to last, is a log out button that will bring you to google.com and delete the saved cookies.
Lastly, is a link to this report.

IMAGES:

All of my images are screenshots from webpages I have created. I retrieved all of them on April 2nd 2023.

OUTSIDE RESOURCES:

Below is the list of code that I copied from outside resources like W3Schools, Stock Overflow and Bootstrap. This includes the code from my HTML, CSS and JavaScript files. The specific part of the website from where I took the code is linked to the website's name.

INDEX AND SKILL PAGE:
1. From Bootstrap
I used the Menu items example for my code.
<div class="btn-group"> <button class="btn brown btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" data-bs-auto-close="true" aria-expanded="false"> My Skills </button> <ul class="dropdown-menu"> <li><a class="dropdown-item" href="mySkills.html#Basic">Basic Skills</a></li> <li><a class="dropdown-item" href="mySkills.html#Communication">Communication Skills</a></li> <li><a class="dropdown-item" href="mySkills.html#Teamwork">Teamwork Skills</a></li> <li><a class="dropdown-item" href="mySkills.html#Problem">Problem Solving & Analytics Skills</a></li> <li><a class="dropdown-item" href="mySkills.html#Initiative">Using Initiative</a></li> <li><a class="dropdown-item" href="mySkills.html#Projects">Projects/Portfolio/Volunteering </a></li> <li><a class="dropdown-item" href="mySkills.html#Additional">Additional</a></li> </ul> </div>


INDEX PAGE:
1. From Stack Overflow
<form action="https://google.com"> <input type="submit" value="Log Out" onclick="deleteCookieRefreshFinal();" /> </form>


JAVASCRIPT:
1. From Lab Assignment Week 09
// sets cookies function setCookie(cname, cvalue, exminutes) { var d = new Date(); d.setTime(d.getTime() + (exminutes * 60 * 1000)); var expires = "expires="+d.toUTCString(); document.cookie = cname + "=" + cvalue + ";" + expires + ";path=/"; } // gets cookies function getCookie(cname) { var name = cname + "="; var ca = document.cookie.split(';'); for(var i = 0; i <ca.length; i++) { var c = ca[i]; while (c.charAt(0) == ' ') { c = c.substring(1); } if (c.indexOf(name) == 0) { return c.substring(name.length, c.length); } } return ""; } // loads cookies input text field function checkCookie(){ var user = getCookie("username"); var organisation = getCookie("organisation"); if (user != "" && organisation != "") { } else { user = prompt ("Please enter your name:", ""); organisation = prompt ("Please enter your organisation:", ""); if (user != "" && user != null && organisation != "" && organisation != null) { setCookie("username", user, 60); //defines minutes setCookie("organisation", organisation, 60); } } } //deletes cookies function deleteCookie() { setCookie("username", "", -1); setCookie("organisation", "", -1); } function deleteCookieRefresh() { deleteCookie(); } function deleteCookieRefreshFinal () { deleteCookie(); }

2. From Tutorials Tonight
//gets JSON file function showData(){ fetch("JSON/Education.json") // converts json file to a useful data type .then(response => response.json()) .then(data => createEduList(data)); fetch("JSON/WorkExperience.json") // converts json file to a useful data type .then(response => response.json()) .then(data => createWorkList(data)); fetchProjects(); } [...] //gets JSON file function fetchProjects() { fetch("JSON/Projects.json") // converts json file to a useful data type .then(response => response.json()) .then(data => createProjectsList(data)); }

3. From Tutorials Tonight
I use this webpage for a second part of my code.
//Education Display function createEduList(data) { const eduUL = document.createElement('ol'); //creating a list (displaying json in a list format) for (let i = 0; i <data.education.length; i++) { // Create Course element const courseLI = document.createElement('li'); courseLI.innerHTML = data.education[i].course; // Add semester to course element const semesterUL = document.createElement('ul'); const semesterLI = document.createElement('li'); semesterLI.innerHTML = data.education[i].semester; semesterUL.appendChild(semesterLI); // Add semester to courseLI courseLI.appendChild(semesterUL); // Append course list to eduUL eduUL.appendChild(courseLI); } // Add mainUL to educationDisplay document.getElementById("educationDisplay").appendChild(eduUL); //when button is clicked, json is displayed } //Work Experience Display function createWorkList(data) { const workUL = document.createElement('ol'); //creating a list (displaying json in a list format) for (let i = 0; i <data.workExperience.length; i++) { // Create company element const companyLI = document.createElement('li'); companyLI.innerHTML = data.workExperience[i].company; // Add dates to company element const datesUL = document.createElement('ul'); const datesLI = document.createElement('li'); datesLI.innerHTML = data.workExperience[i].dates; datesUL.appendChild(datesLI); // Add dates to companyLI companyLI.appendChild(datesUL); // Append company list to workUL workUL.appendChild(companyLI); } // Add mainUL to workDisplay document.getElementById("workDisplay").appendChild(workUL); //when button is clicked, json is displayed } Projects Display function createProjectsList(data) { const projectsUL = document.createElement('ul'); [...] // Create title element for the current project const titleLI = document.createElement('li'); titleLI.innerHTML = data.projects[currentProjectIndex].title; // Add year to title element const yearUL = document.createElement('ul'); const yearLI = document.createElement('li'); yearLI.innerHTML = data.projects[currentProjectIndex].year; yearUL.appendChild(yearLI); titleLI.appendChild(yearUL); // Add summary to title element const summaryUL = document.createElement('ul'); const summaryLI = document.createElement('li'); summaryLI.innerHTML = data.projects[currentProjectIndex].summary; summaryUL.appendChild(summaryLI); titleLI.appendChild(summaryUL); // Add link to title element; const aTag = document.createElement('a'); aTag.innerHTML = 'Link to my website'; aTag.setAttribute('href', data.projects[currentProjectIndex].link); aTag.setAttribute('target', '_blank'); titleLI.appendChild(aTag); // Add image to title element const imageUL = document.createElement('ul'); [...] //Add image to imageUL imageUL.appendChild(imageLI); //Append image list to titleLI titleLI.appendChild(imageUL); // Add description to title element const descriptionUL = document.createElement('ul'); descriptionUL.setAttribute('id', 'descriptionUL'); // Add an ID for easy reference const descriptionLI = document.createElement('li'); descriptionLI.innerHTML = data.projects[currentProjectIndex].description; descriptionUL.appendChild(descriptionLI); descriptionUL.style.display = "none"; // shows descriptionUL //Append description list to titleLI titleLI.appendChild(descriptionUL); // Add title list to projectsUL projectsUL.appendChild(titleLI); // Add mainUL to projectsDisplay document.getElementById("projectSection").appendChild(projectsUL); }

4. The next part of code is a combination of codes from multiple webpages.
From Web Developer
From Web Developer
From Soft Author
From Linuxhint
const imageLI = document.createElement("img"); imageLI.src = data.projects[currentProjectIndex].image; imageLI.style.width = "50%"; imageLI.style.width = "50%"; // Add event listener for "mouseenter" event on image element imageLI.addEventListener('mouseenter', function() { hover(); }); // Add event listener for "mouseleave" event on image element imageLI.addEventListener('mouseleave', function() { hover(); }); [...] //displays description on mouse hovering function hover() { if (descriptionUL.style.display === "block") { descriptionUL.style.display = "none"; // shows descriptionUL } else { descriptionUL.style.display = "block"; // hides descriptionUL } }

5. From W3Schools
[...] timeoutId = setTimeout(() => { // store the timeout ID surprise(max); }, 30000); } //stops 30 sec random rotation between projects function stop(){ clearTimeout(timeoutId); // clear the timeout using the stored timeout ID }

JAVASCRIPT FUNCTIONS:

Below is the list of functions I produced.
  1. function setCookie(cname, cvalue, exminutes)
  2. function getCookie(cname)
  3. function checkCookie()
  4. function deleteCookie()
  5. function deleteCookieRefresh()
  6. function deleteCookieRefreshFinal()
  7. function showSection(id)
  8. function clearSections()
  9. function showData()
  10. function createEduList(data)
  11. function createWorkList(data)
  12. function createProjectsList(data)
  13. function hover()
  14. function fetchProjects()
  15. function next()
  16. function previous()
  17. function surprise(max)
  18. function stop()