a

wifv · Nov 5, 2023 · e11db97 · e11db97
1 parent 11173fb
commit e11db97
Show file tree

Hide file tree

Showing 6 changed files with 102 additions and 75 deletions.
diff --git a/media.css → css/media.css b/media.css → css/media.css
@@ -1,12 +1,18 @@
 @media (max-width: 1009px) {
  .sidebar {
- display: none;
+ padding-left: 20px;
+ right: 10px;
+ top: 0;
  padding-right: 0;
- left: 100%;
+
+
+ height: auto;
+ position: absolute;
+ display: none;
  }
-  #close-sidebar {
-   display: block;
-  }
+  #close-sidebar {
+   display: block;
+  }
  .main {
  margin: 0;
  bottom: -70px;
@@ -37,4 +43,9 @@
  .block-container {
  grid-template-columns: repeat(auto-fit, minmax(170px, 1fr));
  }
+}
+@media (max-width: 2100px) {
+ .container-2 {
+ margin: 30px 20px 30px 20px;
+ }
 }
diff --git a/style.css → css/style.css b/style.css → css/style.css
@@ -3,8 +3,10 @@
  padding: 0;
  box-sizing: border-box;
  font-family: Arial;
+ transition: all 0.4s, color 0s, background-color 0s;
 }
 
+
 a {
  text-decoration: none;
  color: white;
@@ -33,10 +35,9 @@ body {
  position: sticky;
  top: 0;
  transform: translateX(-6px);
- transition: all 0.67s;
 
  z-index: 3;
- border-bottom-right-radius: 20px;
+ border-radius: 20px;
 }
 
 .sidebar * {
@@ -49,6 +50,10 @@ body {
  gap: 20px;
 }
 
+.sidebar li {
+ cursor: pointer;
+}
+
 .main {
  margin-right: 10px;
  margin-left: 190px;
@@ -85,7 +90,8 @@ body {
 .block {
  background-color: #202020;
  height: auto;
- border-radius: 10px;
+ border-top-right-radius: 10px;
+ border-top-left-radius: 10px;
  color: white;
 }
 
@@ -443,11 +449,20 @@ body {
 
 .active-block {
  background-color: #202020;
- max-width: fit-content;
- border-radius: 10px;
+ /* max-width: fit-content; */
+ width: 100%;
+ border-bottom-right-radius: 10px;
+ border-bottom-left-radius: 10px;
  display: none;
  position: absolute;
+ padding: 10px;
+ display: none;
+ flex-direction: column;
+ gap: 12px;
 
- transform: translateY(10px);
  z-index: 3;
-}
+}
+.active-block h4 {
+ border-bottom: 1px solid gray;
+ padding-bottom: 12px;
+}
diff --git a/index.html b/index.html
@@ -6,13 +6,13 @@
  <link rel="shortcut icon" href="images/shreck.jpg" type="image/x-icon" />
  <title>Tipo RAWG.IO</title>
 
- <link rel="stylesheet" href="./style.css" />
- <link rel="stylesheet" href="./media.css" />
+ <link rel="stylesheet" href="./css/style.css" />
+ <link rel="stylesheet" href="./css/media.css" />
  </head>
  <body>
  <div class="container-2">
  <div class="navbar">
- <div class="logo">RAWG</div>
+ <a href="./index.html" class="logo">RAWG</a>
 
  <div class="input-wrapper">
  <img src="./images/search.svg" alt="search icon" id="search-icon" />
@@ -71,18 +71,18 @@ <h1 id="home" class="non-active active">Home</h1>
  <div class="sidebar-block-wrapper media-class">
  <h1>New Releases</h1>
  <ul class="releases">
- <a href="#" id="last-month" class="non-active">Last 30 days</a>
- <a href="#" id="this-week" class="non-active">This week</a>
- <a href="#" id="next-week" class="non-active">Next week</a>
- <a href="#" id="calendar" class="non-active">Release calendar</a>
+ <li id="last-month" class="non-active">Last 30 days</li>
+ <li id="this-week" class="non-active">This week</li>
+ <li id="next-week" class="non-active">Next week</li>
+ <li id="calendar" class="non-active">Release calendar</li>
  </ul>
  </div>
  <div class="sidebar-block-wrapper media-class">
  <h1>Top</h1>
  <ul class="top">
-  <a href="#" id="best-of-year" class="non-active">Best of the year</a>
-  <a href="#" id="best-of-last-year" class="non-active">Popular in 2023</a>
-  <a href="#" id="top-250" class="non-active">All time top 250</a>
+ <li id="best-of-year" class="non-active">Best of the year</li>
+ <li id="best-of-last-year" class="non-active">Popular in 2023</li>
+ <li id="top-250" class="non-active">All time top 250</li>
  </ul>
  </div>
  </section>
@@ -91,7 +91,7 @@ <h1>Top</h1>
  <span class="loader"></span>
 
  <ul id="months">
- <li class="month non-active" value="00">Jan</li>
+ <li class="month non-active" value="00" id="jan">Jan</li>
  <li class="month non-active" value="01">Feb</li>
  <li class="month non-active" value="02">Mar</li>
  <li class="month non-active" value="03">Apr</li>
@@ -111,8 +111,8 @@ <h1>Top</h1>
  </main>
  </div>
 
- <script src="./script.js"></script>
- <script src="./active.js"></script>
- <script src="./media.js"></script>
+ <script src="./js/script.js"></script>
+ <script src="./js/active.js"></script>
+ <script src="./js/media.js"></script>
  </body>
 </html>
diff --git a/active.js → js/active.js b/active.js → js/active.js
@@ -1,11 +1,16 @@
+let jan = document.getElementById("jan");
 let listItems = document.getElementsByClassName("non-active");
+let transitionItems = document.getElementsByClassName("active-transition");
 
 for (const item of listItems) {
  item.addEventListener('click', () => {
+ jan.classList.add('active');
+ if(jan.classList.contains('active')) {
+ jan.classList.remove('active')
+ }
  for (const item of listItems) {
  item.classList.remove('active');
  }
-
  item.classList.add('active');
  });
-}
+}
diff --git a/media.js → js/media.js b/media.js → js/media.js
diff --git a/script.js → js/script.js b/script.js → js/script.js
@@ -68,7 +68,7 @@ last30.addEventListener("click", () => {
 });
 this7.addEventListener("click", () => {
  clickedCategory = "Last Week";
- lastWeek();
+ thisWeek();
 });
 next7.addEventListener("click", () => {
  clickedCategory = "Next Week";
@@ -239,23 +239,24 @@ async function lastMonth() {
 
  let lastMonth = days(31, "-");
  loader[1].style.display = "block";
-
+ 
  const response = await fetch(
  `${basicUrl}?key=${key}&dates=${lastMonth},${date}&fields=released`
- );
- const data = await response.json();
- if (data) loader[1].style.display = "none";
-
- repeatingLoop(data);
-}
-
-async function lastWeek() {
- monthsElement.style.display = "none";
+ );
+ const data = await response.json();
+ if (data) loader[1].style.display = "none";
+
+ repeatingLoop(data);
+ }
+
+async function thisWeek() {
+ monthsElement.style.display = "none";
+ loader[1].style.display = "block";
 
- let lastWeek = days(7, "-");
+ let thisWeek = days(7, "-");
 
  const response = await fetch(
- `${basicUrl}?key=${key}&dates=${lastWeek},${date}&fields=released`
+ `${basicUrl}?key=${key}&dates=${thisWeek},${date}&fields=released`
  );
  const data = await response.json();
  if (data) loader[1].style.display = "none";
@@ -372,50 +373,45 @@ function repeatingLoop(data) {
  blocks[i].children[1].firstElementChild.innerText = data.results[i].name;
 
  let genres = [];
- if(count < 2) {
- count++
- for(let j = 0; j < data.results[i].genres.length; j++) {
- genres.push(data.results[i].genres[j].name);
- console.log(data.results[i].genres[j].name);
- console.log(j)
- }
+ for(let j = 0; j < data.results[i].genres.length; j++) {
+ genres.push(data.results[i].genres[j].name);
  }
  blocks[i].lastElementChild.firstElementChild.innerText = "Release date: " + data.results[i].released;
  blocks[i].lastElementChild.children[1].innerText = `Genres: ${genres}`;
+ }
+
+ let a = document.getElementsByClassName("block");
+ for (let i = 0; i < a.length; i++) {
+ a[i].addEventListener("mouseenter", () => {
+ a[i].style.zIndex = 4;
+ a[i].lastElementChild.style.zIndex = 4;
+ a[i].lastElementChild.style.display = "flex";
+ a[i].style.scale = 1.03;
+ });
+ a[i].addEventListener("mouseleave", () => {
+ a[i].lastElementChild.style.zIndex = 1;
+ a[i].style.zIndex = 1;
+ a[i].style.scale = 1;
+ a[i].lastElementChild.style.display = "none"
+ });
+ }
 }
 `
 <div class="block game-card">
- <img src="" alt="no image or bad connection">
- <div class="bottom">
- <p></p>
- <div class="plus">
- <h4>+</h4>
- <h4>lol ne mogu</h4>
- </div>
- </div>
- <div class="active-block">
+ <img src="" alt="no image or bad connection">
+ <div class="bottom">
+ <p></p>
+ <div class="plus">
+ <h4>+</h4>
+ <h4>lol ne mogu</h4>
+ </div>
+ </div>
+ <div class="active-block">
  <h4></h4>
  <h4></h4>
- </div>
+ </div>
 </div>`;
 
-let a = document.getElementsByClassName("block");
-for (let i = 0; i < a.length; i++) {
- a[i].addEventListener("mouseenter", () => {
- a[i].lastElementChild.style.display = "block"
- // a[i].style.height = "calc(100% + 100px)";
- // a[i].style.zIndex = 3;
- // a[i].style.scale = 1.05;
- });
- a[i].addEventListener("mouseleave", () => {
- a[i].lastElementChild.style.display = "none"
- // a[i].style.height = "auto";
- // a[i].style.zIndex = 0;
- // a[i].style.scale = 1;
- });
- }
-}
-
 /** takes
  * @param {number} days amount of days
  * @param {string} sign plus or minus