Accessibility Concepts

Posted: 2/14/21

Code Resource

      
        
HTML
        <figure class="phone">
        <div class="color-selector">
          <div class="circle-white" onclick="whiteUpdate();"></div>
          <div class="circle-green" onclick="greenUpdate();"></div>
          <div class="circle-beige" onclick="beigeUpdate();"></div>
          <div class="circle-black" onclick="blackUpdate();"></div>
        </div>
        <div class="font-selector" onclick="fontUpdate();">
          <span class="small-A">A</span>/<span class="large-A">A</span>
        </div>
        <div class="phone__card">
          <div class="lorem">
            <p>
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis iure
              fuga minus nulla ipsum. Sit laudantium libero, quaerat, ipsa
              perferendis, ipsum non eos nostrum odit delectus praesentium
              accusamus perspiciatis fuga.
            </p>
            <p>
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis iure
              fuga minus nulla ipsum. Sit laudantium libero, quaerat, ipsa
              perferendis, ipsum non eos nostrum odit delectus praesentium
              accusamus perspiciatis fuga.
            </p>
            <p>
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Quis iure
              fuga minus nulla ipsum. Sit laudantium libero, quaerat, ipsa
              perferendis, ipsum non eos nostrum odit delectus praesentium
              accusamus perspiciatis fuga.
            </p>
          </div>
        </div>
      </figure>

     
CSS
     :root {
      font-family: arial;
    }
    .phone {
      width: 264px;
      height: 533px;
      padding: 8px;
      border-radius: 36px;
      box-shadow: 0 50px 100px -20px rgb(50 50 93/ 25%),
        0 30px 60px -30px rgb(0 0 0 / 30%), inset 0 -2px 6px 0 rgb(10 37 65 / 30%);
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: relative;
      top: 10%;
      left: 50%;
      transform: translate(-64%, 0%);
    }
    
    .phone__card {
      display: grid;
      gap: 0.6rem;
      padding: 0.8rem;
      border: 0.1rem solid #d9d9df;
      border-radius: 0.4rem;
      margin: 0 0.8rem 0.6rem 0.8rem;
      background: rgb(247, 247, 247);
    }
    
    .phone__card__green {
      background: #a5cdad;
    }
    .phone__card__white {
      background: rgb(247, 247, 247);
    }
    
    .phone__card__beige {
      background: #fcf6d3;
    }
    
    .font-selector {
      position: absolute;
      top: 4%;
      right: 9%;
      background-color: black;
      color: white;
      border-radius: 3px;
      padding: 3px;
      opacity: 0.8;
    }
    .font-selector:hover {
      cursor: pointer;
      opacity: 1;
      transition: 0.4s;
    }
    .small-A {
      font-size: 12px;
    }
    .large-A {
      font-size: 17px;
    }
    .lorem {
      font-size: 14px;
      transition: 0.2s;
      font-family: "Times New Roman", Times, serif;
      color: black;
      max-height: 380px;
      overflow-y: scroll;
      line-height: 20px;
    }
    .lorem__update {
      font-size: 17px;
      line-height: 30px;
    }
    .color-selector {
      position: absolute;
      top: 4%;
      left: 7%;
      border-radius: 4px;
      box-shadow: 1px 1px 4px #ccc;
      width: 100px;
      height: 20px;
      padding: 5px;
    }
    
    .circle-white {
      width: 20px;
      position: absolute;
      top: 5px;
      left: 5px;
      height: 20px;
      border-radius: 100%;
      background: rgb(247, 247, 247);
    }
    
    .circle-green {
      width: 20px;
      height: 20px;
      position: absolute;
      top: 5px;
      left: 30px;
      border-radius: 100%;
      background: #a5cdad;
    }
    
    .circle-beige {
      width: 20px;
      height: 20px;
      position: absolute;
      top: 5px;
      left: 55px;
      border-radius: 100%;
      background: #f9f5db;
    }
    
    .circle-black {
      width: 20px;
      height: 20px;
      position: absolute;
      top: 5px;
      left: 80px;
      border-radius: 100%;
      background: #141723;
    }
    .circle-white:hover,
    .circle-beige:hover,
    .circle-green:hover,
    .circle-black:hover {
      cursor: pointer;
      transform: scale(1.2);
      transition: 0.3s;
    }
    
    
JavaScript
    function fontUpdate() {
      var element = document.querySelector(".lorem");
      element.classList.toggle("lorem__update");
    }
    
    function whiteUpdate() {
      document.querySelector(".phone__card")
.style.backgroundColor =
        "rgb(247, 247, 247)";
      document.querySelector(".phone__card")
.style.transition = ".3s";
      document.querySelector(".lorem")
.style.color = "black";
    }
    
    function greenUpdate() {
      document.querySelector(".phone__card")
.style.backgroundColor = "#a5cdad";
      document.querySelector(".phone__card")
.style.transition = ".3s";
      document.querySelector(".lorem")
.style.color = "black";
    }
    
    function beigeUpdate() {
      document.querySelector(".phone__card")
.style.backgroundColor = "#f9f5db";
      document.querySelector(".phone__card")
.style.transition = ".3s";
      document.querySelector(".lorem")
.style.color = "black";
    }
    
    function blackUpdate() {
      document.querySelector(".phone__card")
.style.backgroundColor = "#141723";
      document.querySelector(".phone__card")
.style.transition = ".3s";
      document.querySelector(".lorem")
.style.color = "#ccc";
      document.querySelector(".lorem")
.style.transition = ".3s";
    }