StackOverflow 1

by dollysingh3192

HTML

<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>titlegenerator</title>
    <link rel="stylesheet" href="css/main.css">

</head>

<body>
    <div id="greenscreen">

        <!--Logos-->
        <!--DB-->

        <div id="db-box">
        </div>

        <!--Campus-->

        <div id="campus-box">
        </div>

    </div>
    <div id="hiddenUI">
        <a href="javascript:void(0);" class="hide" id="hide-db-logo"><svg xmlns="http://www.w3.org/2000/svg"
                class="icon icon-tabler icon-tabler-circle-minus" width="32" height="32" viewBox="0 0 24 24"
                stroke-width="1.5" stroke="#2c3e50" fill="none" stroke-linecap="round" stroke-linejoin="round">
                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                <circle cx="12" cy="12" r="9" />
                <line x1="9" y1="12" x2="15" y2="12" />
            </svg></a>
            <a href="javascript:void(0);" class="hide" id="hide-campus-logo"><svg xmlns="http://www.w3.org/2000/svg"
                class="icon icon-tabler icon-tabler-circle-minus" width="32" height="32" viewBox="0 0 24 24"
                stroke-width="1.5" stroke="#2c3e50" fill="none" stroke-linecap="round" stroke-linejoin="round">
                <path stroke="none" d="M0 0h24v24H0z" fill="none" />
                <circle cx="12" cy="12" r="9" />
                <line x1="9" y1="12" x2="15" y2="12" />
            </svg></a>
    </div>

    <script src="javascript/script.js"></script>
</body>

</html>

CSS

/*GENERAL*/

body, html {
    margin: 0;
    padding: 0;
}

#greenscreen {
    position: relative;
    width: 1920px;
    height: 1080px;
    background: #00B140;
}

/*LOGOS*/

#db-box {
    position: absolute;
    display: block;
    width: 500px;
    height: 120px;
    top: 120px;
    background: white;
    box-shadow: 0px -3px 12px 0px rgba(0, 0, 0, 0.5);
}

#campus-box {
    position: relative;
    display: block;
    width: 395px;
    height: 160px;
    left: 1350px;
    border-radius: 0px 0px 8px 8px;
    background: white;
    box-shadow: 0px -3px 12px 0px rgba(0, 0, 0, 0.5);
}

/*GUI*/

#hiddenUI {
    position: absolute;
    top: 0;
    left: 0;
    height: 1080px;
    width: 1920px;
    display: none;
}

.hide {
    display: inline-block;
    background-color: red;
    width: 32px;
    height: 32px;
    cursor: pointer;
    text-align: center;
    position: absolute;
    padding: 0;
    border: 0;
    border-radius: 50%;
}

#hide-db-logo {
    top: 225px;
    left: 485px;
}

#hide-campus-logo {
    top: 145px;
    left: 1730px;
}

.deactivated {
    opacity: 20%;
}

JavaScript

/*Switch between Display and Edit Mode*/

function toggleHideUI() {
  var HideUI = document.getElementById("hiddenUI");
  if (HideUI.style.display === "block") {
    hideHiddenElements();
    HideUI.style.display = "none";
  } else {
    showHiddenElements();
    HideUI.style.display = "block";
  }
};

/* EventListener for "Enter" Keybind */

document.addEventListener("keydown", (e) => {
  if (e.code == "Enter") {
    toggleHideUI();
  }
});

/*Hide hidden elements (class = "deactivated") for Display Mode */

function hideHiddenElements() {
  var HiddenElements = document.getElementsByClassName("deactivated");
  for (i = 0; i < HiddenElements.length; i++) {
    HiddenElements.item(i).style.display = "none";
  }
};

/*Show hidden elements (class = "deactivated") for Edit Mode */

function showHiddenElements() {
  var HiddenElements = document.getElementsByClassName("deactivated");
  for (i = 0; i < HiddenElements.length; i++) {
    HiddenElements[i].style.display = 'block';
  }
}


/*Toggle DB Logo in upper left corner*/

document.getElementById("hide-db-logo").onclick = function toggleDBLogo() {
  document.getElementById("db-box").classList.toggle("deactivated");
}

/*Toggle Campus Logo in upper right corner*/

document.getElementById("hide-campus-logo").onclick = function toggleCampusLogo() {
  document.getElementById("campus-box").classList.toggle("deactivated");
}