Fortnite Daily Item Shop

fortnite-daily-item-shop.markdown

Fortnite Daily Item Shop

Fortnite Daily Itemshop

A Pen by Osvaldo Guzman Ayala on CodePen.

License.

index.html

<audio autoplay loop>
  <source src="https://s1.vocaroo.com/media/download_temp/Vocaroo_s11xUe4La9RR.mp3" type="audio/mpeg">
Your browser does not support the audio element.
</audio>
<link href="//db.onlinewebfonts.com/c/ce366fe567377fc5597ebfa52b38073f?family=Burbank+Big+Regular" rel="stylesheet" type="text/css"/>

<div class="body-wrap">
  <nav>
    <a>Daily Item Shop</a>
    <a>Upcoming Item Shop</a>
  </nav>
  <div class="content-wrap">
    <div class="itemWrapper">
      <div class="heading-wrapper">
          <h1>Featured Items</h1>
          <div id="featured">
          </div>
      </div>
     <div class="heading-wrapper">
          <h1>Daily Items </h1>
          <div id="daily">
          </div>
      </div>
    </div>
    <div id="DATE"></div>

  </div>
  
</div>
<div class="body-wrap_upcoming" style="display: none;">
  <div class="content-wrap_upcoming">
    <div class="itemWrapper_upcoming">
      <div class="heading-wrapper_upcoming">
          <h1>Featured Items</h1>
          <div id="featured_upcoming">
          </div>
      </div>
     <div class="heading-wrapper_upcoming">
          <h1>Daily Items </h1>
          <div id="daily_upcoming">
          </div>
      </div>
    </div>
    <div id="DATE_upcoming"></div>

  </div>
  
</div>

script.babel

var featured = document.querySelector("#featured");
var daily = document.querySelector("#daily");
var today = new Date().toLocaleString(); // 11/16/2015, 11:18:48 PM
document.querySelector("#DATE").innerHTML = today; 


axios.get('https://fortnite-public-api.theapinetwork.com/prod09/store/get')
  .then(function (response) {
   function create_item() {
      wrapper.classList = "wrapper"; 
      img.src = response.data.items[i].item.images.information;
      wrapper.appendChild(img); 
    }
    // handle success
   $(function() {
     $(".wrapper img").each(function(){
       $(this).click(function(e) {
         console.log("pclick"+ $(e.target));
       })
     })   
   })   
    for(var i = 0; i < response.data.items.length; i++){
      var wrapper = document.createElement("div");
      var img = document.createElement("IMG");
      let item_rarity = response.data.items[i].item.rarity;
      let item_featured = response.data.items[i].featured;
      let item_featured_showcase = response.data.items[i].item.images.featured.transparent;
      let item_type = response.data.items[i].item.type;

      let item_name = response.data.items[i].name
      let next_item_name = response.data.items[i+1].name;
     
      create_item();
      if ( item_rarity == "legendary" ) {
        wrapper.className += " " + "legendary";
        img.src = response.data.items[i].item.images.transparent;

      } else if (item_rarity == "epic"){
        img.src = response.data.items[i].item.images.transparent;
        wrapper.className += " " + "epic";
      } else if (item_rarity == "rare"){
        wrapper.className += " " + "rare";
      } else if (item_rarity == "uncommon"){
        wrapper.className += " " + "uncommon";
      }
      if (item_featured == "1" && item_rarity == "legendary" && item_type != "emote") 
        {
          if (item_type == "pickaxe") 
          {
            img.src = response.data.items[i].item.images.transparent;
            wrapper.className += " " + "featured" + " " + "showcase-legendary"; 
            featured.appendChild(wrapper);
          } else 
          {
            img.src = response.data.items[i].item.images.featured.transparent;
            wrapper.className += " " + "featured" + " " + "showcase-legendary"; 
            featured.appendChild(wrapper);
          }
                  
        }
      else if (item_featured == "1" && item_rarity == "epic" && item_type != "emote") 
        {
          if (item_type == "pickaxe") 
          {
            img.src = response.data.items[i].item.images.transparent;
            wrapper.className += " " + "featured" + " " + "showcase-epic"; 
            featured.appendChild(wrapper);
          } else 
          {
            img.src = response.data.items[i].item.images.featured.transparent;
            wrapper.className += " " + "featured" + " " + "showcase-epic"; 
            featured.appendChild(wrapper);
          }
                
        }  
      else
        {
          wrapper.className += " " + "daily";
          daily.appendChild(wrapper);
        }
      
         
      
    } //end for loop

    // document.querySelector(".wrapper").forEach(function(){
    //   console.log("clicked")
    //   this.addEventListener("click", function(){
    //     console.log("clicked" + i)
    //   })
    // })

}) // end .then
  .catch(function (error) {
    // handle error
    console.log(error);
  })
  .then(function () {
    // always executed
  });


 
 
 
 

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

style.scss

@font-face {font-family: "Burbank Big Regular";
    src: url("//db.onlinewebfonts.com/t/ce366fe567377fc5597ebfa52b38073f.eot");
    src: url("//db.onlinewebfonts.com/t/ce366fe567377fc5597ebfa52b38073f.eot?#iefix") format("embedded-opentype"),
    url("//db.onlinewebfonts.com/t/ce366fe567377fc5597ebfa52b38073f.woff2") format("woff2"),
    url("//db.onlinewebfonts.com/t/ce366fe567377fc5597ebfa52b38073f.woff") format("woff"),
    url("//db.onlinewebfonts.com/t/ce366fe567377fc5597ebfa52b38073f.ttf") format("truetype"),
    url("//db.onlinewebfonts.com/t/ce366fe567377fc5597ebfa52b38073f.svg#Burbank Big Regular") format("svg");
}
* {
  margin: 0;
  pading: 0;
}

nav {
  width: 100%;
  top: 20px; 
  left: 0;
  right: 0;
  position: absolute;
  display: flex; 
  align-items: center;
  justify-content: center; 
  // background: #00072b;
  height: 40px;
 
  
}
nav > a { 
  height: 100%;
  font-family: "Burbank Big Regular";
  color: white;
   background: rgba(223,223,453, .3);
  margin: 5px;
  padding: 10px;
  line-height: 2;
  text-transform: uppercase;
  font-size: 1.5rem;
  
}

.body-wrap {
  background: #000f28;
background-image: url("https://cdnb.artstation.com/p/assets/images/images/013/524/151/large/paul-mader-lobbyseason6.jpg?1539981291");
  font-family: 'Burbank Big Regular' !important; 
  color: white; 
  background-size: cover;
  background-repeat: no-repeat; 
  width: 100vw;
  margin: 0;
  padding: 0;
  min-height: 100vh; 
  display: flex;
  @media screen and (min-width: 1150px) {
      justify-content: center;
      align-items: center;   
  }
  @media screen and (max-width: 1150px) {
          background-color: #00072b;
          background-image: url("https://www.transparenttextures.com/patterns/cartographer.png");
          background-size: 50%;
          background-repeat: repeat; 
          background-attachment: fixed; 

  }

  
}
.content-wrap {
  margin: 0 auto;
}

h1 {
  background: rgba(223,223,453, .3);
  margin: 5px;
  padding: 10px;
  line-height: 1.2;
  text-transform: uppercase;
  font-size: 1.5rem;
}
.logo { 
  max-width: 800px !important;
  filter: invert(100%);
  display: block;
  margin: 60px auto;
  
  
}
.heading-wrapper {
    margin: 0 auto; 
}
#DATE {
  color: white;
  font-size: 2rem; 
  margin: 0 auto; 
  text-align: center; 
  font-weight: bold; 
  margin: 1em; 
}
h2 {
  color: white;
  font-family: 'Burbank Big Regular'; 
  font-size: 2rem; 
  margin: 0 auto; 
  text-align: center; 
}
#featured {
  width: 720px;
  display: flex;
  flex-wrap: nowrap;
  margin: 0 auto;
  @media screen and (max-width: 1150px) {
      width: 100%;
      min-height: auto;
      flex-direction: column;      
    }
}
#daily {
  width: 720px;
  display: flex;
  flex-wrap: wrap;
  margin: 0 auto; 
  @media screen and (max-width: 1150px) {
      width: 100%;
      flex-direction: column;
    height: auto; 
    }
}
div.itemWrapper {
  display: flex; 
  margin: 0 auto;
  justify-content: center;
  align-items: start; 
  @media screen and (max-width: 1150px) {
    flex-direction: column;

  }
}
img {
  max-width: 100%;
  position: relative;
  margin: auto; 
}
.wrapper {
  position: relative;
  margin: 5px; 
  transition: all .3s;
  display: flex;
  justify-content: center;
  align-items: center; 
  box-sizing: border-box;
  transition: all .2s;
  @media screen and (max-width: 1150px) {
    justify-content: space-between;
    align-items: space-between; 
    
  }
  //@media screen and (min-width: 1150px) {
  //  width: 200px; 
    
  //}

  &:hover {
    border: 4px solid yellow;
    transition: all .2s;
  }
}
.showcase-legendary {
  height: 29rem; 
  max-width: 50% !important; 
  box-sizing: border-box;
background: rgb(255,175,45); /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, rgba(255,175,45,1) 0%, rgba(110,61,0,1) 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, rgba(255,175,45,1) 0%,rgba(110,61,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center, rgba(255,175,45,1) 0%,rgba(110,61,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
border: 5px solid orange; 
}
.showcase-legendary > img, .showcase-epic > img {
    align-self: flex-end !important; 

}
.showcase-epic {
  height: 29rem; 
  max-width: 50% !important; 
  box-sizing: border-box; 
  background: rgb(199,45,255); /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, rgba(199,45,255,1) 0%, rgba(73,0,110,1) 100%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, rgba(199,45,255,1) 0%,rgba(73,0,110,1) 100%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center, rgba(199,45,255,1) 0%,rgba(73,0,110,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
border: 5px solid violet;
}
li {
  list-style-type: none; 
  position: absolute;
  background: rgba(0,0,0,0.1); 
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center; 
  color: white;
  font-family: sans-serif;
  font-weight: bold;
  transition: all .3s; 
  border-radius: 10px; 

  
  &:hover { 
    background: rgba(0,0,0,0); 
    transition: all .3s; 
    cursor: pointer; 
  }
}

.legendary {
  order:-1;
}
.epic {
  order:0; 
}
.rare {
  order: 1;
}
.uncommon {
  order: 2;
}
.featured {
  max-width: 225px;
  @media screen and (max-width: 1150px) {
    max-width: 100%;
  }
}
.daily {
  max-width: 225px;
  @media screen and (max-width: 1150px) {
    max-width: 100%;     
  }
}

.featured-unique {
  display: none;
}

styles

<link href="https://db.onlinewebfonts.com/c/ce366fe567377fc5597ebfa52b38073f?family=Burbank+Big+Regular" rel="stylesheet" />