Skip to content

Commit

Permalink
refactor: convert hover and inline style changes to CSS classes
Browse files Browse the repository at this point in the history 
- Moved hover states and inline style changes to CSS classes in styles.css.
- Updated scripts.js to use CSS classes for handling hover, active, and animation states.
- Improved code maintainability, performance, and consistency by separating concerns between CSS and JavaScript.
  • Loading branch information
@stevensoyuz
stevensoyuz committed Jul 27, 2024
1 parent fa00349 commit ef2594f
Show file tree
Hide file tree
Showing 3 changed files with 75 additions and 48 deletions.
6 changes: 3 additions & 3 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,9 +27,9 @@ <h1>How to Train Your Librarian</h1>
</select>
</div>
<div id="terms-container">
<div class="term term-top">Word</div>
<div class="term term-bot">Word</div>
<div id="is"><p>is <span id="span-before">before</span> or <span id="span-after">after</span> ..</p></div>
<div class="term top">Word</div>
<div class="term bot">Word</div>
<div id="is"><p>is <span id="before">before</span> or <span id="after">after</span> ..</p></div>
</div>
<div id="choices-container">
<p id="result">...</p>
Expand Down
82 changes: 43 additions & 39 deletions scripts.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -35,8 +35,8 @@ document.addEventListener("DOMContentLoaded", () => {
}

function createGame() {
let termElementTop = document.querySelector(".term-top");
let termElementBot = document.querySelector(".term-bot");
let termElementTop = document.querySelector(".term.top");
let termElementBot = document.querySelector(".term.bot");

termElementTop.textContent = termCompare;
termElementBot.textContent = termReference;
Expand All @@ -49,10 +49,8 @@ document.addEventListener("DOMContentLoaded", () => {
: termElementBot.textContent.localeCompare(termElementTop.textContent) >= 0;
if (correct) {
result.textContent = "Correct!";
termElementTop.className = "term term-bot"
termElementBot.className = "term term-top"
// termReference = termCompare;
// termCompare = getRandomAuthor();
termElementTop.className = "term bot"
termElementBot.className = "term top"
refresh();
} else {
result.textContent = "Incorrect.";
Expand All @@ -68,57 +66,63 @@ document.addEventListener("DOMContentLoaded", () => {
function refresh() {
termReference = termCompare;
termCompare = getNewTerm();
termElementTop = document.querySelector(".term-top");
termElementBot = document.querySelector(".term-bot");
termElementTop = document.querySelector(".term.top");
termElementBot = document.querySelector(".term.bot");
termElementTop.textContent = termCompare;
termElementBot.textContent = termReference;

termElementBot.style.transition = "0.5s ease" // DEFAULT
termElementBot.style.transform = "translate(0em) scale(2,2)"
termElementBot.classList.add("animate");

setTimeout(() => {
termElementBot.style.transform = "translate(0em) scale(1,1)"
}, 100);
termElementBot.classList.remove("animate");
}, 50);

// termElementBot.style.transition = "all 0s linear"
// termElementBot.style.opacity = "0.1";
// setTimeout(() => {
// termElementBot.style.transition = "0.5s ease"
// termElementBot.style.opacity = "1";
// }, 100);

termElementTop.style.transition = "all 0s linear"
termElementTop.style.transform = "translateY(-6em)"
termElementTop.style.opacity = "0";
termElementTop.classList.add("animate");
setTimeout(() => {
termElementTop.style.transition = "0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 1s" // DEFAULT
termElementTop.style.transform = "translate(0em)"
termElementTop.style.opacity = "1";
termElementTop.classList.remove("animate");
}, 0);
}

const beforeButton = document.getElementById("before-button")
const afterButton = document.getElementById("after-button")
const beforeButton = document.getElementById("before-button");
const afterButton = document.getElementById("after-button");
const beforeSpan = document.querySelector("#before");
const afterSpan = document.querySelector("#after");

beforeButton.addEventListener("mouseover", () => {
termElementTop.style.transform = "translate(-1em) rotate(-10deg)"
termElementBot.style.transform = "translate(0.5em) rotate(2deg)"
document.getElementById("span-before").style.textDecoration = "underline";
termElementTop.classList.add("selected", "before");
termElementBot.classList.add("selected", "before");
beforeSpan.classList.add("selected");
beforeButton.classList.add("hover");
});
beforeButton.addEventListener("mousedown", () => {
beforeButton.classList.add("active");
});
beforeButton.addEventListener("mouseup", () => {
beforeButton.classList.remove("active");
});
beforeButton.addEventListener("mouseout", () => {
termElementTop.style.transform = "translate(0em)"
termElementBot.style.transform = "translate(0em)"
document.getElementById("span-before").style.textDecoration = "";
termElementTop.classList.remove("selected", "before");
termElementBot.classList.remove("selected", "before");
beforeSpan.classList.remove("selected");
beforeButton.classList.remove("hover");
});
afterButton.addEventListener("mouseover", () => {
termElementTop.style.transform = "translate(1em) rotate(10deg)"
termElementBot.style.transform = "translate(-0.5em) rotate(-2deg)"
document.getElementById("span-after").style.textDecoration = "underline";
termElementTop.classList.add("selected", "after");
termElementBot.classList.add("selected", "after");
afterSpan.classList.add("selected");
afterButton.classList.add("hover");
});
afterButton.addEventListener("mousedown", () => {
afterButton.classList.add("active");
});
afterButton.addEventListener("mouseup", () => {
afterButton.classList.remove("active");
});
afterButton.addEventListener("mouseout", () => {
termElementTop.style.transform = "translate(0em)"
termElementBot.style.transform = "translate(0em)"
document.getElementById("span-after").style.textDecoration = "";
termElementTop.classList.remove("selected", "after");
termElementBot.classList.remove("selected", "after");
afterSpan.classList.remove("selected");
afterButton.classList.remove("hover");
});

beforeButton.addEventListener("click", () => handleChoice(false));
Expand Down
35 changes: 29 additions & 6 deletions styles.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -70,17 +70,37 @@ select {
right: 0;
position: absolute;
}
.term-top {
.term.top {
top: 5em;
left: 0;
right: 0;
transition: 0.5s cubic-bezier(0.16, 1, 0.3, 1), opacity 1s;
transition: 0.8s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s;
}
.term-bot {
.term.top.selected.before {
transform: translate(-1em) rotate(-10deg);
}
.term.top.selected.after {
transform: translate(1em) rotate(10deg);
}
.term.bot {
top: 8em;
left: 0;
right: 0;
transition: 0.5s ease;
transition: 0.8s ease;
}
.term.bot.selected.before {
transform: translate(0.5em) rotate(2deg);
}
.term.bot.selected.after {
transform: translate(-0.5em) rotate(-2deg);
}
.term.top.animate {
transition: 0s;
transform: translateY(-6em);
opacity: 0;
}
.term.bot.animate {
transform: scale(2,2);
}
#choices-container {
left: 0;
Expand Down Expand Up @@ -117,19 +137,22 @@ select {

cursor: pointer;
}
.choice:hover {
.choice.hover {
background-color: white;
color: #00594f;
outline: 1px solid #00594f;
border-bottom: 3px solid #00594f;

transform: translateY(-3px);
}
.choice:active {
.choice.active {
background-color: #F5DFD3;
color: #777777;
outline: 1px solid #777777;
border-bottom: 0px;

transform: translateY(0px);
}
span.selected {
text-decoration: underline;
}

0 comments on commit ef2594f

Please sign in to comment.