Tend/er

index.html

<div id="totendto" onmouseover=explainToTendTo() onmouseout=clearDefinition()>
  <p>to tend to</p>
</div>
<div id="tendto" onmouseover=explainTendTo() onmouseout=clearDefinition()>
  <p>tend to</p>
</div>
<div id="tend" onmouseover=explainTend() onmouseout=clearDefinition()>
  <p>tend</p>
</div>
<div id="er" onmouseover=explainEr() onmouseout=clearDefinition()>
  <p>er</p>
</div>
<div id="tender" onmouseenter=explainTender() onmouseout=clearDefinition()>
  <p>tender</p>
</div>
<div id="tener" onmouseover=explainTener() onmouseout=clearDefinition()>
  <p>tener</p>
</div>
<div id="tendre" onmouseover=explainTendre() onmouseout=clearDefinition()>
  <p>tendre</p>
</div>
<div id="definition"></div>

script.js

const tender = document.getElementById("tender");

//tender.addEventListener = ('mouseover', explainTender)
//tender.addEventListener = ('mouseout', clearDefinition)

function clearDefinition() {
  var isExplained = document.contains(document.getElementById("explained"));

  if (isExplained) {
    document.getElementById("explained").remove();
  }
}

function explainToTendTo() {
  var isEmpty = document.getElementById("definition").innerHTML === "";

  if (isEmpty) {
    // create new p element
    const newText = document.createElement("p");
    // add text to new p element
    newText.innerText = `"give attention to, care for."`;
    // add id to new p element
    newText.id = "explained";
    // add new p element to 'definition' div element
    const definition = document.getElementById("definition");
    definition.appendChild(newText);
  }
}

function explainTendTo() {
  var isEmpty = document.getElementById("definition").innerHTML === "";

  if (isEmpty) {
    // create new p element
    const newText = document.createElement("p");
    // add text to new p element
    newText.innerText = `"to be inclined."`;
    // add id to new p element
    newText.id = "explained";
    // add new p element to 'definition' div element
    const definition = document.getElementById("definition");
    definition.appendChild(newText);
  }
}

function explainTend() {
  var isEmpty = document.getElementById("definition").innerHTML === "";

  if (isEmpty) {
    // create new p element
    const newText = document.createElement("p");
    // add text to new p element
    newText.innerText = `"move in a particular direction."`;
    // add id to new p element
    newText.id = "explained";
    // add new p element to 'definition' div element
    const definition = document.getElementById("definition");
    definition.appendChild(newText);
  }
}

function explainEr() {
  var isEmpty = document.getElementById("definition").innerHTML === "";

  if (isEmpty) {
    // create new p element
    const newText = document.createElement("p");
    // add text to new p element
    newText.innerText = `"to hesitate - the action of pausing."
(What lies within that space?)`;
    // add id to new p element
    newText.id = "explained";
    // add new p element to 'definition' div element
    const definition = document.getElementById("definition");
    definition.appendChild(newText);
  }
}

function explainTender() {
  var isEmpty = document.getElementById("definition").innerHTML === "";

  if (isEmpty) {
    // create new p element
    const newText = document.createElement("p");
    // add text to new p element
    newText.innerText = `"caring, loving / in pain, soft / sore, to give or offer something, to be gentle, kindness, succulent, sensitivity, needing protection &
attention"`;
    // add id to new p element
    newText.id = "explained";
    // add new p element to 'definition' div element
    const definition = document.getElementById("definition");
    definition.appendChild(newText);
  }
}

function explainTener() {
  var isEmpty = document.getElementById("definition").innerHTML === "";

  if (isEmpty) {
    // create new p element
    const newText = document.createElement("p");
    // add text to new p element
    newText.innerText = `"from the Latin- tener - to have a soft yielding texture"`;
    // add id to new p element
    newText.id = "explained";
    // add new p element to 'definition' div element
    const definition = document.getElementById("definition");
    definition.appendChild(newText);
  }
}

function explainTendre() {
  var isEmpty = document.getElementById("definition").innerHTML === "";

  if (isEmpty) {
    // create new p element
    const newText = document.createElement("p");
    // add text to new p element
    newText.innerText = `"from the French - tendre - to offer, to stretch out, denoting softness, delicacy or love."`;
    // add id to new p element
    newText.id = "explained";
    // add new p element to 'definition' div element
    const definition = document.getElementById("definition");
    definition.appendChild(newText);
  }
}

style.css

* {
  font-size: 20px;
  font-family: "Zodiak", serif;
}

.container {
  margin: 20px;
  border: 1px black solid;
}

#word {
  font-family: "Zodiak", serif;
}

#totendto {
  position: absolute;
  top: 5vh;
  left: 5vw;
  width: max-content;
}

#tendto {
  position: absolute;
  top: 70vh;
  left: 90vw;
  width: max-content;
}

#tend {
  position: absolute;
  top: 20vh;
  left: 80vw;
  width: max-content;
}

#er {
  position: absolute;
  top: 73vh;
  left: 34vw;
  width: max-content;
}

#tender {
  position: absolute;
  top: 60vh;
  left: 10vw;
  width: max-content;
}
#tener {
  position: absolute;
  top: 80vh;
  left: 66vw;
  width: max-content;
}

#tendre {
  position: absolute;
  top: 30vh;
  left: 23vw;
  width: max-content;
}

#definition {
  position: fixed;
  top: 50%;
  left: 50%;
  -webkit-transform: translate(-50%, -50%);
  transform: translate(-50%, -50%);
}

#explained {
  text-align: center;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 400px;
  width: 400px;
  background: radial-gradient(
    circle,
    rgba(255, 110, 110, 1) 0%,
    rgba(255, 192, 192, 1) 36%,
    rgba(255, 255, 255, 1) 71%
  );
}

tend-er.markdown

Tend/er

A Pen by maz-com on CodePen.

License.