Панель с гифками - пример html js css

• HTML код


• CSS код
• JS код
• Результат кода

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css" integrity="sha512-iBBXm8fW90+nuLcSKlbmrPcLa0OT92xO1BIsZ+ywDWZCvqsWgccV3gFoRBv0z+8dLJgyAHIhR35VZc2oM/gI1w==" crossorigin="anonymous" referrerpolicy="no-referrer" />

<div class="ig"><a href="https://www.instagram.com/tellesiivan/" target="_blank"><i class="fab fa-instagram"></i></a></div>

<div id="dash">

	<div id="left" class="layout leftIsHidden">

		<div class="layout-results">

			<div class="results">

			</div>

			<div class="share">

				<a href="#" target="_blank" class="share-item share-twitter"><i class="fab fa-twitter"></i></a>

				<a href="#" target="_blank" class="share-item share-facebook"><i class="fab fa-facebook-f"></i></a>

				<a href="#" target="_blank" class="share-item share-email"><i class="far fa-envelope"></i></a>

				<a href="#" target="_blank" class="share-item share-web"><i class="fas fa-link"></i></a>

			</div>

		</div>

		<div class="layout-history">

			<div class="history-header"><span>Searched History</span><span class="history-clear">Clear</span></div>

			<div class="history-flex">

				<!-- 				<div class="history-flex-item"><span class="history-item-query">lakers</span><span class="history-item-time">8/30/2021, 10:22 AM</span></div> -->

			</div>

		</div>

	</div>

	<div id="right" class="layout">

		<div class="layout-right">

			<div class="search">

				<form class="search-form">

					<span class="search-type"></span>

					<i class="fas fa-search search-icon"></i>

					<input type="text" class="search-input" placeholder="Search Gifs...">

				</form>

			</div>

			<div class="fetched">

				<ul class="fetched-list">

					<li class="fetched-list-item"></li>

					<li class="fetched-list-item"></li>

					<li class="fetched-list-item"></li>

				</ul>

			</div>

		</div>

	</div>

</div>

@import url("https://fonts.googleapis.com/css2?family=Roboto+Mono:wght@200;400;500&display=swap");

:root {

  --Roboto: "Roboto Mono", monospace;

}



body {

  margin: 0;

  position: relative;

  display: flex;

  align-items: center;

  justify-content: center;

  height: 100vh;

  background-color: #182930;

  font-family: var(--Roboto);

}



.ig {

  position: absolute;

  right: 10px;

  bottom: 10px;

}

.ig a {

  color: #fff;

  font-size: 2em;

  text-decoration: none;

}



#dash {

  height: 470px;

  width: 770px;

  background-color: #0f1c20;

  border-radius: 12px;

  display: flex;

}



.layout {

  margin: 10px;

  width: calc(100% - 20px);

  height: calc(100% - 20px);

}

.layout-right {

  background-color: #0a161b;

  border-radius: 8px;

  padding: 10px;

  width: calc(100% - 20px);

  height: auto;

}

.layout-results {

  padding: 10px;

  width: calc(100% - 20px);

  height: calc(70% - 20px);

  background-color: #15272e;

  border-radius: 8px;

  display: flex;

  flex-direction: row;

}

.layout-history {

  padding: 10px;

  border-radius: 8px;

  margin-top: 10px;

  width: calc(100% - 20px);

  height: calc(30% - 20px);

  background-color: #0a161b;

  overflow-y: scroll;

}

.layout-history::-webkit-scrollbar {

  display: none;

  width: 4px;

}



#left {

  display: flex;

  flex-direction: column;

  margin-right: -0.5px;

  transition: all 0.33s ease;

}



.leftIsHidden {

  width: 0px;

  margin-right: -0.5px;

  opacity: 0;

  margin: 0;

}



#right {

  overflow-y: scroll;

  border-radius: 8px;

  /* Handle */

}

#right::-webkit-scrollbar {

  display: none;

  width: 4px;

}

#right::-webkit-scrollbar-thumb {

  background: #1a2b32;

  border-radius: 100px;

}



.SearchShadow {

  box-shadow: 0px 20px 9px 6px rgba(0, 0, 0, 0.4);

  background-color: #133031 !important;

}



.search {

  z-index: 33;

  height: 45px;

  width: 95%;

  margin: 0 auto;

}

.search-type {

  position: absolute;

  right: 5px;

  font-size: 0.74em;

  padding: 3px 9px;

  font-family: inherit;

  background-color: #061512;

  color: aquamarine;

  border-radius: 100px;

  white-space: nowrap;

}

.search-isSticky {

  position: sticky;

  top: 13px;

}

.search-form {

  height: 100%;

  width: 100%;

  display: flex;

  align-items: center;

  background: #13232a;

  border-radius: 8px;

  transition: all 0.34s ease;

  position: relative;

}

.search-icon {

  width: calc(10% - 20px);

  padding: 0 10px;

  color: #fff;

}

.search-input {

  font-family: inherit;

  border: none;

  outline: none;

  height: 100%;

  padding: 0 8px;

  width: calc(90% - 16px);

  background-color: transparent;

  color: #fff;

}



.fetched {

  margin-top: 20px;

  border-radius: 8px;

}

.fetched-list {

  display: flex;

  flex-wrap: wrap;

  margin: 0;

  height: 100%;

  padding: 0;

}

.fetched-list-item {

  flex: 1 1 7em;

  margin: 3px;

  max-width: 169px;

  display: inline-flex;

  height: auto;

  transition: all 0.34s ease;

  cursor: pointer;

  list-style: none;

  border-radius: 4px;

  border-bottom: 3px solid transparent;

}

.fetched-list-item:hover {

  border-bottom: 3px solid aquamarine;

  box-shadow: 0px 20px 9px 6px rgba(0, 0, 0, 0.4);

}

.fetched-list-item img {

  width: 100%;

  height: auto;

  border-radius: 4px;

}



.results {

  height: 100%;

  width: calc(84% - 8px);

  margin-right: 8px;

}

.results-img {

  height: 100%;

  width: 100%;

}

.results-img img {

  height: 100%;

  width: 100%;

  border-radius: 8px;

}



.share {

  height: 100%;

  width: 16%;

  border: 1px solid #0a161b;

  border-radius: 8px;

  display: inline-flex;

  flex-direction: column;

  overflow: hidden;

  justify-content: space-around;

  align-items: center;

}

.share-item {

  flex: 1;

  display: flex;

  align-items: center;

  justify-content: center;

  width: 100%;

  border-bottom: 1px solid #0a161b;

  transition: all 0.2s ease;

  text-decoration: none;

}

.share-item:hover {

  cursor: pointer;

  background-color: #0a161b;

}

.share-item:hover i {

  color: aquamarine;

}

.share-item:last-child {

  border-bottom: none;

}

.share-item i {

  color: #b9b8b8;

}



.history-header {

  font-size: 0.8em;

  color: #b3b3b3;

  margin: 5px 0 14px 4px;

  display: flex;

  flex-direction: row;

  justify-content: space-between;

  align-items: center;

}

.history-clear {

  padding: 1px 8px;

  font-size: 0.9em;

  display: none;

}

.history-clear:hover {

  cursor: pointer;

  color: aquamarine;

  background-color: #ffffff1a;

  border-radius: 100px;

}

.history-flex {

  display: flex;

  flex-direction: column;

}

.history-flex-item {

  display: flex;

  flex-direction: row;

  justify-content: space-between;

  align-items: center;

  font-size: 0.75em;

  padding: 12px 4px;

  color: #b9b8b8;

  transition: all 0.3s ease;

}

.history-flex-item:last-child {

  border-bottom: none;

}

.history-flex-item:hover {

  cursor: pointer;

  color: aquamarine;

  background-color: #ffffff1a;

  border-radius: 3px;

}



/*PLACEHOLDER FOR SKELETON LOAD*/

.placeholder-item {

  display: flex;

  flex-wrap: wrap;

  position: relative;

  width: 100%;

  height: auto;

  min-height: 1rem;

  margin-bottom: 1rem;

  overflow: hidden;

  padding: 0.5rem;

}



.placeholder-item span {

  position: relative;

  overflow: hidden;

  display: flex;

  flex-wrap: wrap;

  width: calc(50% - 0.4rem);

  margin: 0.2rem;

  background: rgba(19, 46, 46, 0.77);

  border-radius: 8px;

}



.span-header {

  height: 10rem;

}

.span-text-item {

  height: 1em;

  margin: 6px 0;

  border-radius: 100px !important;

}

.span-btn {

  height: 4em;

}



.placeholder-item span::after {

  display: block;

  content: "";

  position: absolute;

  width: 100%;

  height: 100%;

  transform: translateX(-100%);

  background: -webkit-gradient(linear, left top, right top, from(transparent), color-stop(rgba(0, 0, 0, 0.2)), to(transparent));

  background: linear-gradient(90deg, transparent, rgba(0, 0, 0, 0.2), transparent);

  /* Adding animation */

  animation: loading 1.2s infinite;

}



/* Loading Animation */

@keyframes loading {

  100% {

    transform: translateX(100%);

  }

}

const list = document.querySelector(".fetched-list");

const right = document.getElementById("right");

const left = document.getElementById("left");

const resultCon = document.querySelector(".results");

const search = document.querySelector(".search");

const searchForm = document.querySelector(".search-form");

const searchInput = document.querySelector(".search-input");

const searchType = document.querySelector(".search-type");

const webShare = document.querySelector(".share-web");

const twitterShare = document.querySelector(".share-twitter");

const emailShare = document.querySelector(".share-email");

const historyContainer = document.querySelector(".history-flex");

const clearHistory = document.querySelector(".history-clear");

const language = window.navigator.userLanguage || window.navigator.language;

let gifs = [];

let historySearch = [];



const options = {

  year: "numeric",

  month: "numeric",

  day: "numeric",

  hour: "numeric",

  minute: "numeric",

  hour12: true,

  seconds: "numeric" };





let isActive = false;

let API_KEY = `key=CFEP7TBGYY2P`;

let baseURL = `https://g.tenor.com/v1/`;

let trendingURL = `${baseURL}trending?${API_KEY}&locale${language}&limit=35`;

let searchURL = `${baseURL}search?q=`;



async function fetchThis(URL, type) {

  try {

    skeletonLoad();

    const ftch = await fetch(`${URL}`);

    searchType.textContent = `${type}`;

    const res = await ftch.json();

    gifs = res.results;

    list.innerHTML = "";

    gifs.forEach(gif => {

      const gifCon = document.createElement("li");

      gifCon.classList.add("fetched-list-item");

      gifCon.id = gif.id;

      gifCon.innerHTML = ``;

      list.append(gifCon);

      gifCon.addEventListener("click", e => {

        isActive = true;



        if (isActive) {

          left.classList.remove("leftIsHidden");

        }

        const clicked = e.target.closest(".fetched-list-item").id;

        gifs.forEach(g => {

          if (g.id === clicked) {

            renderResult(g);

          }

        });

      });

    });

  } catch (err) {

    console.log(err);

  }

  if (localStorage.getItem("historySearch")) {

    historyContainer.innerHTML = "";

    historySearch = JSON.parse(localStorage.getItem("historySearch"));

    renderQuery();

  }

  showHide();

}



// Selected gif ===> render



async function renderResult(selected) {

  skeletonLoadResult();

  twitterShare.href = `https://twitter.com/intent/tweet?text=${selected.itemurl}`;

  webShare.href = selected.itemurl;

  emailShare.href = `mailto:[email protected]?subject=Check%20this%20out&body=${selected.url}`;

  resultCon.innerHTML = "";

  const gif = selected.media[0].gif.url;

  const html = `	


					

				
`;

  resultCon.innerHTML = html;

}



right.addEventListener("scroll", e => {

  if (e.target.scrollTop >= 60) {

    search.classList.add("search-isSticky");

    searchForm.classList.add("SearchShadow");

  } else {

    searchForm.classList.remove("SearchShadow");

    search.classList.remove("search-isSticky");

  }

});

//  Search

searchForm.addEventListener("submit", e => {

  e.preventDefault();

  if (searchInput.value === "") return;

  searchType.textContent = searchInput.value;

  const date = new Date();

  const searchDate = date.toLocaleDateString(language, options);

  let history = { query: searchInput.value, time: searchDate };

  historySearch.unshift(history);

  historyContainer.innerHTML = "";

  renderQuery();

  localStorage.setItem("historySearch", JSON.stringify(historySearch));

  const updatedSearchURL = `${searchURL}${searchInput.value}&${API_KEY}&limit=40`;

  fetchThis(updatedSearchURL, `${searchInput.value}`);

  searchInput.value = "";

  searchInput.blur();

});



// render Searched History

function renderQuery() {

  historySearch.forEach(i => {

    const item = document.createElement("div");

    item.classList.add("history-flex-item");

    const html = `${i.query}${i.time}`;

    item.innerHTML = html;

    historyContainer.append(item);

  });

}



// Clear history

clearHistory.addEventListener("click", () => {

  historySearch.length = 0;

  historyContainer.innerHTML = "";

  localStorage.setItem("historySearch", JSON.stringify(historySearch));

});

// show/hide clear btn

function showHide() {

  console.log(historySearch.length);

  if (historySearch.length >= 1) {

    console.log("show : clear btn");

    clearHistory.style.display = "block";

  }

}



function skeletonLoad() {

  list.innerHTML = "";



  const skelton = `


       

	    

	     

		  

		   

		    

		      

	    

	     

		  

		   

		    

	    

	     

		  

		   

        

    
`;



  list.insertAdjacentHTML("afterbegin", skelton);

}

function skeletonLoadResult() {

  resultCon.innerHTML = "";

  const skeltonResult = `


        

    
`;

  resultCon.innerHTML = skeltonResult;

}



// on load

fetchThis(trendingURL, "Trending");

//# sourceURL=pen.js