Home

Welcome to the homepage wiki!

Template

For the template I used https://volodymyrkushnir.com/

I used base.css in the basic stylу base.css available here https://binary-studio-academy.github.io/stage-2/assets/stylesheets/base.css

I made changes to the file base.css replacing vendor-prefixed ::-webkit-details-marker to standard ::marker on line 651

details > summary::marker {
  margin-left: 0.25em;
  margin-right: 0.25em;
}

style.css

And added my own styles

To add a frame change to red added

.color.red::before {
  background-color: red;
}

To achieve an accessibility score of 100, a title w4 was added to the lighthouse

h4 {
  font-size: 0.75rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  margin: 0 0 1em 0;
}

Styles with animation have been added to change the avatar frame

.avatar {
  border: 5px solid pink;
  border-radius: 50%;
  animation: animate-avatar 5s linear infinite;
}

@keyframes animate-avatar {
  0% {
    border-color: rgb(0, 174, 255);
    box-shadow: 3px 3px 13px rgb(255, 0, 255);
  }

  33% {
    border-color: rgb(255, 0, 255);
    box-shadow: 3px 3px 13px pink;
  }

  66% {
    border-color: pink;
    box-shadow: 3px 3px 13px rgb(0, 174, 255);
  }

  100% {
    border-color: rgb(0, 174, 255);
    box-shadow: 3px 3px 13px rgb(255, 0, 255);
  }
}

script.js

To handle pressing the button changes color frame was used as follows

function switchToColor(color) {
    try {
        document.querySelectorAll(".page").forEach(function(page) {
            page.style.borderColor = color;
        });
        document.querySelectorAll(".avatar").forEach(function(avatar) {
            avatar.contentDocument.getElementById("circle").setAttribute("fill", color);
        });
    } catch (error) {}
}
document.getElementById("midnightblue").addEventListener("click", switchToColor.bind(this, "midnightblue"));
document.getElementById("red").addEventListener("click", switchToColor.bind(this, "red"));

To handle pressing a button with sound, used

document.getElementById("hourse").addEventListener("click", function() {
    this.childNodes[2].play();
});
document.getElementById("sword").addEventListener("click", function() {
    this.childNodes[2].play();
});