Skip to content

Commit 75ea79f

Browse files
201flaviosilva201flaviosilva
authored
Merge pull request #3 from Gabriel-Sous-a/main
Gabriel Click Nerd (Super Mario)
2 parents b60937f + 754d9ae commit 75ea79f

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

42 files changed

+671
-14
lines changed

‎README.md

+16-14
Original file line numberDiff line numberDiff line change
@@ -1,19 +1,21 @@
1-
# MS5-Basic-App-Exercises
1+
# Click Nerd (Super Mario Project)
2+
This is a project about Super Mario, featuring a carousel of images of characters from the game, a sidebar menu with language selection between Portuguese, English, and Mandarin, and three tabs with different contents.
23

3-
## Description
4+
## Technologies Used
5+
This project was built using:
46

5-
Create an application that contains many of the classic exercises for FE beginners.
7+
HTML
8+
CSS
9+
JavaScript
610

7-
## MVP
11+
## Getting Started
12+
To use this project, simply open the index.html file in your web browser. The sidebar menu allows you to select the language of your choice, and the three tabs provide different content:
813

9-
Create an app that has:
14+
The first tab features a carousel of images of characters from Super Mario.
15+
The second tab is a closet with a surprise. Click on the door to reveal the surprise!
16+
The third tab is a mystery. Explore the content to discover what it is!
17+
Contributing
18+
If you would like to contribute to this project, please fork the repository and make changes as you see fit. Pull requests are welcome.
1019

11-
- At least one modal;
12-
- Language selection (at least 3 languages);
13-
- A carousel (for example changing images);
14-
- Have tabs system (at least 3 tabs);
15-
- A sidebar menu (Can be used together with the "Hamburger button", for example);
16-
17-
## Example
18-
19-
https://codepen.io/201flaviosilva/full/poZBbwp
20+
## License
21+
This project is licensed under the MIT License. See the LICENSE file for details.

‎font/SuperMario256.ttf

15.9 KB
Binary file not shown.

‎images/MPSS_Luigi.webp

103 KB
Binary file not shown.

‎images/MPSS_Peach.webp

56.4 KB
Binary file not shown.

‎images/MPS_Donkey_Kong_Artwork.webp

161 KB
Binary file not shown.

‎images/MarioNSMBUDeluxe.png

119 KB
Loading

‎images/Mario_Series_Logo.svg.png

164 KB
Loading

‎images/Question_Block_NSMB.webp

47.9 KB
Binary file not shown.

‎images/Sticker_Mushroom_-_Mario_Party_Superstars.webp

13.1 KB
Binary file not shown.

‎images/Wardrobe-PNG-Transparent.png

90.2 KB
Loading

‎images/Yoshi.png

106 KB
Loading

‎images/adds/200 (1).webp

342 KB
Binary file not shown.

‎images/adds/2001.webp

148 KB
Binary file not shown.

‎images/adds/200w.webp

132 KB
Binary file not shown.

‎images/adds/giphy (1).gif

14.4 MB
Loading

‎images/adds/giphy.gif

139 KB
Loading

‎images/adds/giphy.webp

760 KB
Binary file not shown.

‎images/adds/giphy3.webp

198 KB
Binary file not shown.

‎images/background.jpg

138 KB
Loading

‎images/carnivorous-plant (1).png

32.6 KB
Loading

‎images/carnivorous-plant.png

18.1 KB
Loading

‎images/coins.png

16.9 KB
Loading

‎images/flags/icons8-brazil-80.png

1.95 KB
Loading

‎images/flags/icons8-china-80.png

787 Bytes
Loading

‎images/flags/icons8-great-britain-80.png

1.82 KB
Loading

‎images/flags/icons8-japan-80.png

1000 Bytes
Loading

‎images/flags/icons8-portugal-80.png

1.59 KB
Loading

‎images/flags/icons8-usa-80.png

584 Bytes
Loading

‎images/footer.gif

21.8 KB
Loading

‎images/goldenBlock.webp

656 KB
Binary file not shown.

‎images/mario-dance-moves.gif

1.07 MB
Loading

‎images/mario.png

67.6 KB
Loading

‎images/normalBlock.jpeg

8.99 KB
Loading

‎images/pipe.png

1.36 KB
Loading

‎images/super-mario-bros-filme-thumb.webp

17.4 KB
Binary file not shown.

‎images/tumblr_inline_oebuaxMQIM1r0rcm1_540.png

192 KB
Loading

‎index.html

+121
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,121 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Click Nerd</title>
8+
<link rel="stylesheet" href="./src/styles.css" />
9+
</head>
10+
<body>
11+
<aside id="add1">
12+
<img
13+
src="images/adds/200 (1).webp"
14+
alt="ronaldinho add"
15+
class="addImages"
16+
/>
17+
<img src="images/adds/2001.webp" alt="tide add" class="addImages" />
18+
<img src="images/adds/giphy.webp" alt="cacao" class="addImages" />
19+
<img src="images/adds/giphy.gif" alt="mario kart" class="addImages" />
20+
</aside>
21+
<aside id="add2">
22+
<img src="images/adds/giphy (1).gif" alt="clothes" class="addImages" />
23+
<img src="images/adds/200w.webp" alt="milk add" class="addImages" />
24+
25+
<img src="images/adds/giphy3.webp" alt="french" class="addImages" />
26+
</aside>
27+
<div id="secondModal">
28+
<button id="closeModal">
29+
<img
30+
src="images/carnivorous-plant (1).png"
31+
alt=""
32+
class="imageButton"
33+
/>
34+
</button>
35+
<p id="langQuote">Mario? Aquele que te comeu atras do armario</p>
36+
</div>
37+
<div>
38+
<img
39+
src="images/Mario_Series_Logo.svg.png"
40+
alt="logo Super Mario"
41+
id="title"
42+
/>
43+
<button id="seeLateral">
44+
<img
45+
src="images/Question_Block_NSMB.webp"
46+
alt="question block"
47+
id="questionBlock"
48+
/>
49+
</button>
50+
</div>
51+
<div id="blocker"></div>
52+
<div id="lateralDiv">
53+
<button id="close">
54+
<img src="images/coins.png" alt="coins" class="imageButton" />
55+
</button>
56+
<select name="Language" id="language">
57+
<option value="pt">Português</option>
58+
<option value="en">English</option>
59+
<option value="cn">中文</option>
60+
</select>
61+
<img src="images/mario-dance-moves.gif" alt="mario dancing" id="dance" />
62+
</div>
63+
<div id="tabs">
64+
<div>
65+
<button id="firstTab">
66+
<img
67+
src="images/normalBlock.jpeg"
68+
alt="normal block"
69+
class="imageButton"
70+
/>
71+
</button>
72+
<button id="secondTab">
73+
<img
74+
src="images/goldenBlock.webp"
75+
alt="golden block"
76+
class="imageButton"
77+
/>
78+
</button>
79+
<button id="thirdTab">
80+
<img src="images/pipe.png" alt="pipe" class="imageButton" id="pipe" />
81+
</button>
82+
</div>
83+
84+
<div id="firstTabs" class="numTabs">
85+
<button id="before">
86+
<img
87+
src="images/Sticker_Mushroom_-_Mario_Party_Superstars.webp"
88+
alt="mushroom"
89+
id="left"
90+
class="mushroom"
91+
/>
92+
</button>
93+
<img src="images/MarioNSMBUDeluxe.png" alt="Mario" id="changeImage" />
94+
<button id="next">
95+
<img
96+
src="images/Sticker_Mushroom_-_Mario_Party_Superstars.webp"
97+
alt="mushroom"
98+
id="right"
99+
class="mushroom"
100+
/>
101+
</button>
102+
</div>
103+
<div id="secondTabs" class="numTabs">
104+
<img src="images/mario.png" alt="mario" id="closetMario" />
105+
<img
106+
src="images/Wardrobe-PNG-Transparent.png"
107+
alt="wardrobe"
108+
id="closet"
109+
/>
110+
</div>
111+
<div id="thirdTabs" class="numTabs">
112+
<img
113+
src="images/tumblr_inline_oebuaxMQIM1r0rcm1_540.png"
114+
alt="donkey kong"
115+
id="donkeyKong"
116+
/>
117+
</div>
118+
</div>
119+
</body>
120+
<script src="./src/scrypt.js"></script>
121+
</html>

‎music/ytmp3free.cc_super-mario-bros-main-theme-youtubemp3free.org.mp3

2.88 MB
Binary file not shown.

‎src/scrypt.js

+102
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,102 @@
1+
const seeLateral = document.getElementById("seeLateral");
2+
const lateralDiv = document.getElementById("lateralDiv");
3+
const close = document.getElementById("close");
4+
const firstTabs = document.getElementById("firstTabs");
5+
const secondTabs = document.getElementById("secondTabs");
6+
const thirdTabs = document.getElementById("thirdTabs");
7+
const firstTab = document.getElementById("firstTab");
8+
const secondTab = document.getElementById("secondTab");
9+
const thirdTab = document.getElementById("thirdTab");
10+
const blocker = document.getElementById("blocker");
11+
const before = document.getElementById("before");
12+
const changeImage = document.getElementById("changeImage");
13+
const next = document.getElementById("next");
14+
const donkeyKong = document.getElementById("donkeyKong");
15+
const closet = document.getElementById("closet");
16+
const closetMario = document.getElementById("closetMario");
17+
const closeModal = document.getElementById("closeModal");
18+
const modal = document.getElementById("secondModal");
19+
const language = document.getElementById("language");
20+
const localRead = localStorage.getItem("language");
21+
const images = [
22+
"images/Yoshi.png",
23+
"images/MarioNSMBUDeluxe.png",
24+
"images/MPSS_Luigi.webp",
25+
"images/MPS_Donkey_Kong_Artwork.webp",
26+
"images/MPSS_Peach.webp",
27+
];
28+
const tabs = [firstTab, secondTab, thirdTab];
29+
const tabContents = [firstTabs, secondTabs, thirdTabs];
30+
let counter = 0;
31+
32+
if (localRead) {
33+
switchLanguage(localRead);
34+
} else {
35+
localStorage.setItem("language", "pt");
36+
}
37+
38+
seeLateral.addEventListener("click", () => {
39+
lateralDiv.style.display = "block";
40+
blocker.style.display = "block";
41+
42+
close.addEventListener("click", () => {
43+
lateralDiv.style.display = "none";
44+
blocker.style.display = "none";
45+
});
46+
});
47+
48+
tabs.forEach((tab, index) => {
49+
tab.addEventListener("click", () => {
50+
tabContents.forEach((content, i) => {
51+
content.style.display = i === index ? "flex" : "none";
52+
});
53+
});
54+
});
55+
56+
next.addEventListener("click", () => changeImageArray(1));
57+
before.addEventListener("click", () => changeImageArray(-1));
58+
59+
function changeImageArray(delta) {
60+
counter += delta;
61+
if (counter < 0) {
62+
counter = images.length - 1;
63+
} else if (counter >= images.length) {
64+
counter = 0;
65+
}
66+
changeImage.src = images[counter];
67+
}
68+
69+
closet.addEventListener("mouseenter", () => {
70+
closetMario.style.transform = "rotate(60deg) translate(30%)";
71+
closet.addEventListener("mouseleave", () => {
72+
closetMario.style.transform = "rotate(0deg)";
73+
});
74+
});
75+
76+
closet.addEventListener("click", () => {
77+
modal.style.display = "flex";
78+
blocker.style.display = "block";
79+
closeModal.addEventListener("click", () => {
80+
modal.style.display = "none";
81+
blocker.style.display = "none";
82+
});
83+
});
84+
85+
donkeyKong.addEventListener("click", () => {
86+
window.location.href = "https://www.youtube.com/watch?v=dQw4w9WgXcQ";
87+
});
88+
89+
language.addEventListener("change", () => {
90+
switchLanguage(language.value);
91+
localStorage.setItem("language", language.value);
92+
});
93+
94+
function switchLanguage(lang) {
95+
const trans = {
96+
en: "this doesn't really work in english.",
97+
pt: "Mario? Aquele atrás do armario.",
98+
cn: "读白 不要忘记 不要错过 记得去电影院看《速度与激情9 因为非常好电影 动作非常好 差不多一样冰淇淋 再见",
99+
};
100+
const langQuote = document.getElementById("langQuote");
101+
langQuote.innerHTML = trans[lang];
102+
}

0 commit comments

Comments
 (0)