This is a solution to the Rock, Paper, Scissors challenge on Frontend Mentor. Frontend Mentor challenges help you improve your coding skills by building realistic projects.
Users should be able to:
- View the optimal layout for the game depending on their device's screen size
- Play Rock, Paper, Scissors against the computer
- Maintain the state of the score after refreshing the browser
- Semantic HTML5 markup
- CSS custom properties
- Flexbox
- CSS Grid
- Mobile-first workflow
- A11y & aria Standards
- BEM
- Sass
- Gsap
This project was built with the aim of experimenting with using gsap to do all the project animations, And try to program a solid code that is easy to modify and improve in the future in order to facilitate the addition of new features to the game
- BEM naming system
<div class="hero__item--rock linear-gradient hero__item"></div>- linear gradient with a one util class
.linear-gradient {
--deg: 180deg;
--grad2-deg: 100%;
--grad1-deg: 0%;
--grad2-clr: ;
--grad1-clr: ;
background: var(--grad1-clr);
background: linear-gradient(
var(--deg),
var(--grad1-clr) var(--grad1-deg),
var(--grad2-clr) var(--grad2-deg)
);
}
.hero__item--rock.linear-gradient {
--grad2-clr: var(--clr-red-800);
--grad1-clr: var(--clr-red-700);
box-shadow: inset 0px -8px 0 var(--rock-shadow), 0px 0px 20px 10px hsl(0deg
0% 0% / 20%);
}- Easy to modify container with css variables
.Container {
--container-width: 90%;
height: 100%;
width: var(--container-width, 90%);
margin-inline: auto;
}
.main-header {
.Container {
--container-width: 75%;
}
}- a to click button to use with an element that dose not look like a button but act like one
.toClickButton {
user-select: none;
overflow: hidden;
cursor: pointer;
text-decoration: none;
border: none;
border-radius: var(--border-radius);
}- using an object to contain all variables
let header = {
body: document.querySelector(".main-header"),
score: {
button: document.querySelector(".score__button"),
value: document.querySelector("#scoreValue"),
},
};- get a random number between two numbers
function housePicked() {
let rand = Math.floor(Math.random() * Object.keys(game.items).length);
return game.items[rand];
}
let house = housePicked();- a function that select a distinct element from a set of elements, and then apply something different to it than is applied to the rest of the elements
function setSpecialThings(
specialThings,
fatherSons,
specialThingsFunction,
unSpecialThingsFunction
) {
let specialThingsArr = Array.isArray(specialThings)
? specialThings
: [specialThings];
let fatherSonsArr = Array.isArray(fatherSons) ? fatherSons : [fatherSons];
for (let fatherSon = 0; fatherSon < fatherSonsArr.length; fatherSon++) {
if (specialThingsArr.length == 1) {
if (fatherSonsArr[fatherSon] == specialThingsArr[0]) {
specialThingsFunction(fatherSonsArr[fatherSon]);
} else if (fatherSonsArr[fatherSon] != specialThingsArr[0]) {
unSpecialThingsFunction(fatherSonsArr[fatherSon]);
}
} else {
let unSpecialElement = [];
let match = false;
for (let i = 0; i < specialThingsArr.length; i++) {
if (specialThingsArr[i] == fatherSonsArr[fatherSon]) {
match = true;
break;
}
}
if (!match) {
unSpecialElement.push(fatherSonsArr[fatherSon]);
}
specialThingsArr.forEach((specialThing) => {
specialThingsFunction(specialThing);
});
unSpecialElement.forEach((unSpecial) => {
unSpecialThingsFunction(unSpecial);
});
}
}
}- using the Json file more
- using React
- A11y & aria Standards
- Gsap & gsap ScrollTrigger
Check out my latest previous articles:
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent