Healthcare Career Insight Tool

This project was a case assigned to us by Fontys and the Catharina hospital in Eindhoven, where we, a team of 3 Fontys students, were tasked by the Catharina Hospital to create a prototype application with the goal of helping their employees gain a better understanding of their career perspectives and growth.

The prototype had several requirements:

Mobile resolution, the target audience has access to this device at all times
Dutch language, the main language of the hospital is Dutch
Guest and User view, with the guest view not requiring a user account
Career page, where available healthcare functions and courses could be viewed
Favourites, where healthcare functions and courses of interest can be saved
Selftest, where one can do a test and receive recommendations

With these in mind, I created a design within the prototyping software Adobe XD across several iterations, based on feedback from the team and the stakeholders from the Catharina Hospital. Once the entire interactive flow had been mapped out in Adobe XD, the final prototype was coded in HTML, CSS, and JavaScript. I was responsible for large parts of the code as well.

One example of this is the log in screen, where I made heavy use of flexbox to position all the elements, as well as the before pseudo-element to apply a background. The resulting code is:

HTML

Copy to Clipboard

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <meta name="theme-color" content="#009578">

<title>Inloggen</title>
        <link rel="stylesheet" href="css/style.css">
        <link rel="stylesheet" href="css/index.css">
        <link href="https://fonts.googleapis.com/icon?family=Material+Icons"rel="stylesheet">

</head>
    <body>
        <div class="body-container">
            <div class="body-wrapper">

<div class="logo-header">
                    <div class="logo-text-wrapper">
                        <h5>catharina</h5>
                        <div class="logo-subtitle">
                            <p class="blue-text">een santeon </p><p class="purple-text">ziekenhuis</p>
                        </div>
                    </div>
                    <img decoding="async" src="Images/catharinaLogo.png" class="logo">
                </div>

<div class="product-container">
                    <div class="product-wrapper">
                        <h5>ziekenhuis</h5>
                        <p>CARRIÈRE APP</p>
                    </div>
                </div>

<div class="username-wrapper">
                                <span class="material-icons md-28">account_circle</span>
                                <input type="text" name="degebruikersnaam" class="username-field" placeholder="Gebruikersnaam">
                            </div>
                            <div class="password-wrapper">
                                <span class="material-icons md-28">lock</span>
                                <input type="password" name="dewachtwoord" class="password-field" id="thePassword" placeholder="Wachtwoord">
                                <span id="password-visibility" class="material-icons md-28" onclick="passwordVisibility()">visibility</span>
                            </div>

</div>
        </div>
    </body>
</html>

CSS

Copy to Clipboard

body {
    overflow-x: hidden;
    height: 100vh;
    background-color: violet;
}

h5 {
    color: var(--darkpurple);
    font-weight: 700;
    font-size: 40px;
}

.white-corner {
    display: flex;
    position: absolute;
    height: 20em;
    width: 20em;
    background-color: violet;
    transform: rotate(45deg);
    top: -200px;
    right: -220px;
    z-index: 1;
}

.body-container {
    position: relative;
    height: 100vh;
    width: 100vw;
    background-color: #ebebeb;
    overflow-y: hidden;
}

.body-container:before {
    content: ' ';
    display: block;
    position: absolute;
    left: 0;
    top: 10%;
    width: 100%;
    height: 100%;
    background-image: url('/Images/backgroundIndex.jpg');
    background-repeat: no-repeat;
    background-position: left 19.5% top 25%;
    background-size: cover;
  }

.body-wrapper {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    height: 100%;
    margin-left: 3.5vh;
    margin-right: 3.5vh;
}

.logo-header {
    display: flex;
    flex-direction: row;
    justify-content: flex-end;
    align-items: flex-end;
    margin-top: 3.5vh;
    z-index: 2;
}

.logo-text-wrapper {
    margin-bottom: 1vh;
    margin-right: 2vh;
}

.logo-subtitle {
    display: flex;
    flex-direction: row;
}

.logo-subtitle > p {
    font-size: 105%;
    font-weight: 700;
}

.blue-text {
    color: var(--blue);
}

.purple-text {
    color: var(--darkpurple)
}

.logo {
    width: 6em;
    height: 6em;
    padding-bottom: 0.3em;
    z-index: 2;
}

.shape-container {
    position: absolute;
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    z-index: 1;
}

.shape-small {
    position: fixed;
    top: 90px;
    left: -75px;
    width: 162px;
    height: 201px;

}

.shape-large {
    position: fixed;
    top: 397px;
    right: -180px;
    width: 412px;
    height: 512px;
}

.product-container {
    display: flex;
    justify-content: flex-end;
    margin-top: 17.5vh;
    margin-bottom: 10vh;
    height: 25vh;
    z-index: 2;
}

.product-wrapper {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    height: 225px;
    width: 225px;
    border-radius: 50%;
    background-image: linear-gradient(var(--bluegreen), #c9e5e1e7);
}

.product-wrapper > h5, p {
    color: white;
}

.product-wrapper > h5 {
    font-size: 30px;
    font-weight: 700;
}

.product-wrapper > p {
    font-size: 18px;
    font-weight: 400;
    letter-spacing: 3.5px;
}

.login-container {
    position: relative;
    height: 10vh;
    z-index: 5;
}

.button-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
}

.username-wrapper, .password-wrapper {
    display: flex;
    flex-direction: row;
    margin-top: 2.25vh;
    margin-bottom: 2.25vh;

align-items: center;

height: 5vh;
    background-color: white;
    border-radius: 5vh;
}

.login-wrapper > .password-wrapper > .material-icons.md-28 {
    margin-left: 0.75vh;
    margin-right: 0.25vh;
    color: var(--darkpurple);
}

.login-wrapper > .username-wrapper > .material-icons.md-28 {
    margin-left: 0.75vh;
    margin-right: 0.25vh;
    color: var(--darkpurple);
}

#password-visibility {
    right: 1vh;
    position: absolute;
}

.username-field, .password-field {
    padding-left: 0.75vh;
    padding-right: 1.8vh;
    height: 95%;
    width: 100%;
    color: var(--darkpurple);
    font-weight: 600;
    font-size: 14px;
    outline: none;
    border: none;
    border-radius: 0vh 5vh 5vh 0vh;
    background: none
}

span#myPassword {
    right: 3vh;
    position: absolute;
}

.button-guest, .button-member {
    padding: 1vh 2.5vh 1vh 2.5vh;
    color: white;
    border-radius: 0.5vh;
    font-weight: 700;
    font-size: 19px;
    border: none;
    outline: none;
}

.button-member {
    background-color: var(--darkpurple);
    padding-right: 4vh;
    padding-left: 4vh;
}

.button-guest {
    background-color: var(--blue)
}

#password-visibility {
    cursor: pointer;
}

/* BUGFIXES || NEGATING CSS FROM STYLE.CSS */
.label > .label-content > h2, p {
    display: block;
    width: auto;
}

.label-content {
    width: auto;
}

A second example is the search page, which is linked to the search bar on the homepage as well. The latter stores the searched keyword in session storage before applying it as value of the input. A for loop iterates through the length of all .label elements and compares the value of H2 to the search term in order to filter them. In addition to this, there are buttons that filter by type as well. They work in a similar way, the difference being that compare the id of the label to the value of a variable called currentFilter. The resulting code is:

HTML

Copy to Clipboard

<body>
        <nav>
            <ul>
                <li><a href="/zoeken.html"><span id="button-highlight" class="material-icons md-36">search</span></a></li>
                <li><a href="/afdelingen.html"><span class="material-icons md-36">supervised_user_circle</span></a></li>
                <li><a href="/home.html"><span class="material-icons md-36">home</span></a></li>
                <li><a href="/favorieten.html"><span class="material-icons md-36">bookmarks</span></a></li>
                <li><a href="/zelftest.html"><span class="material-icons md-36">assessment</span></a></li>
            </ul>
        </nav>

<div class="page-header">
            <a href="#" onclick="javascript:window.history.back(-1);return false;"><span class="material-icons md-48">arrow_back_ios</span></a>
            <h1>Zoeken</h1>
        </div>

<div class="search-wrapper">
                    <span class="material-icons md-28">search</span>
                    <input type="text" class="search-field" placeholder="Zoeken">
                </div>

<div class="filter-wrapper">
                    <div id="filter-alles" class="filter">Alles</div>
                    <div id="filter-afdeling" class="filter">Afdeling</div>
                    <div id="filter-functie" class="filter">Functie</div>
                    <div id="filter-opleiding" class="filter">Opleiding</div>
                </div>

<div class="label-container">
                    <a href="#">
                        <div id="filter-afdeling" class="label afdeling">
                            <div class="label-content">
                                <h2>Afdeling 1</h2>
                                <p>Bekijk hier alle informatie van de afdeling</p>
                            </div>
                            <span class="material-icons md-66">supervised_user_circle</span>
                        </div>
                    </a>
                    <a href="#">
                        <div id="filter-afdeling" class="label afdeling">
                            <div class="label-content">
                                <h2>Afdeling 2</h2>
                                <p>Bekijk hier alle informatie van de afdeling</p>
                            </div>
                            <span class="material-icons md-66">supervised_user_circle</span>
                        </div>
                    </a>
                    <a href="detailFuncties.html">
                        <div id="filter-functie" class="label functie">
                            <div class="label-content">
                                <h2>Functie 1</h2>
                                <p>Bekijk hier alle informatie van de functie</p>
                            </div>
                            <span class="material-icons md-66">account_circle</span>
                        </div>
                    </a>
                    <a href="detailFuncties.html">
                        <div id="filter-functie" class="label functie">
                            <div class="label-content">
                                <h2>Functie 2</h2>
                                <p>Bekijk hier alle informatie van de functie</p>
                            </div>
                            <span class="material-icons md-66">account_circle</span>
                        </div>
                    </a>
                    <a href="detailOpleidingen.html">
                        <div id="filter-opleiding" class="label opleiding">
                            <div class="label-content">
                                <h2>Opleiding 1</h2>
                                <p>Bekijk hier alle informatie van de opleiding</p>
                            </div>
                            <span class="material-icons md-66">shopping_bag</span>
                        </div>
                    </a>
                    <a href="detailOpleidingen.html">
                        <div id="filter-opleiding" class="label opleiding">
                            <div class="label-content">
                                <h2>Opleiding 2</h2>
                                <p>Bekijk hier alle informatie van de opleiding</p>
                            </div>
                            <span class="material-icons md-66">shopping_bag</span>
                        </div>
                    </a>
                </div>

</div>
        </div>
        <script src="js/zoeken.js"></script>
    </body>
</html>
© 2022 GitHub, Inc.
Terms
Privacy
Security
Status
Docs
Contact G

JS

Copy to Clipboard

const filters = document.querySelectorAll('.filter');
const searchBar = document.querySelector('.search-field');
let currentFilter = 'filter-alles';
let currentSearch = '';

function applyFilter() {
    // CHANGE COLORS OF FILTER BUTTONS AND UPDATE CURRENTFILTER TO TARGET
    for (let j = 0 ; j < filters.length; j++) {
        if (filters[j].id === currentFilter) {
            filters[j].style.backgroundColor = 'var(--darkpurple)';
        }

else  {
            filters[j].style.backgroundColor = 'var(--lightpurple)';
        }
    }

// CHANGE VISIBILITY OF LABELS AFTER CLICKING FILTER
    const labels = document.querySelectorAll('.label');
    for (let j = 0 ; j < labels.length; j++) {
        if (currentFilter === 'filter-alles' || labels[j].id === currentFilter) {

// CONVERT LABEL TITLE TO LOWER CASE
            let labelTitle = labels[j].getElementsByTagName('H2')[0].innerText.toLowerCase();
            
            // CHECK WHETHER TITLE MATCHES SEARCH STRING
            if (labelTitle.indexOf(currentSearch) === -1 ) {
                labels[j].style.display = 'none';
            }

else {
                labels[j].style.display = 'flex';
            }
        }

else  {
            labels[j].style.display = 'none';
        }
    }
}

// PULL STORED TEXT FROM SESSION STORAGE (FROM HOME.HTML SEARCHBAR)
let storedSearch = sessionStorage.getItem("searchStorage");

if (storedSearch !== null ) {
    // ADD STORED SEARCH TERM INTO INPUT FIELD AND CLEAR STORED DATA AFTER USE
    document.querySelector('input.search-field').value = storedSearch;
    currentSearch = storedSearch.toLowerCase();
    applyFilter();
    sessionStorage.removeItem("searchStorage");
}

// ADD EVENTLISTENER THAT DETECTS SEARCH INPUT
searchBar.addEventListener('input', function (e) {

// CONVERT SEARCH INPUT TO LOWER CASE
    currentSearch = e.target.value.toLowerCase();
    applyFilter();
    }
);

// LOOP THROUGH ALL FILTERS
for (let i = 0 ; i < filters.length; i++) {
    filters[i].addEventListener("click", function (e) {
        currentFilter = e.target.id;
        applyFilter();  
    });
}

For the rest of the code, see the repository on GitHub: https://github.com/Nickvd96/CatharinaHospitalPossibilities/blob/main/js/zoeken.js