Catagory Choosing

Developer
Srijon Sarker
Size
7,281 Kb
Views
6,072
  1. Catagory Choosing Previews
  2. Catagory Choosing HTML Codes
  3. Catagory Choosing CSS Codes
  4. Catagory Choosing JS Codes

How do I make an catagory choosing?

What is a catagory choosing? How do you make a catagory choosing? This script and codes were developed by Srijon Sarker on 29 November 2022, Tuesday.

Catagory Choosing Previews
IQ Test

Catagory Choosing - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Catagory Choosing</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Open+Sans:300'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="card"> <BR><div class="card__content"> <h1 class="card__title">Choose categories</h1> <div class="categories-container"> <button class="categories__scroll categories__scroll--left hidden"></button> <button class="categories__scroll categories__scroll--right hidden"></button> <ul class="categories"> <li class="category"><a href="#" class="category__link"><img src="http://i1067.photobucket.com/albums/u422/arnellebalane/bar.jpg_zpsym7y56m9.png" alt="Bar" class="category__image"/><span class="category__name">Bar</span></a></li> <li class="category"><a href="#" class="category__link"><img src="http://i1067.photobucket.com/albums/u422/arnellebalane/fashion_zpsdgpovs8s.jpg" alt="Fashion" class="category__image"/><span class="category__name">Fashion</span></a></li> <li class="category"><a href="#" class="category__link"><img src="http://i1067.photobucket.com/albums/u422/arnellebalane/cars_zpshcbqeivs.jpg" alt="Cars" class="category__image"/><span class="category__name">Cars</span></a></li> <li class="category"><a href="#" class="category__link"><img src="http://i1067.photobucket.com/albums/u422/arnellebalane/plants-and-nature_zpsjc3glk1s.jpg" alt="Plants &amp; Nature" class="category__image"/><span class="category__name">Plants & Nature</span></a></li> <li class="category"><a href="#" class="category__link"><img src="http://i1067.photobucket.com/albums/u422/arnellebalane/food_zpsrhmzgctz.jpg" alt="Food" class="category__image"/><span class="category__name">Food</span></a></li> <li class="category"><a href="#" class="category__link"><img src="http://i1067.photobucket.com/albums/u422/arnellebalane/traveling.jpg_zpsmlnsf4uv.png" alt="Traveling" class="category__image"/><span class="category__name">Traveling</span></a></li> </ul> </div> <div class="infobox"> <p class="selected-count"></p> <p class="selected-names"></p> </div> </div> <footer class="card__footer"> <ul class="card__steps"> <li class="card__steps__item card__steps__item--current">1</li> <li class="card__steps__item">2</li> <li class="card__steps__item">3</li> <li class="card__steps__item">4</li> </ul> <button class="card__button card__button--disabled">Skip</button> <button class="card__button">Next</button> </footer>
</div></div></div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Catagory Choosing - Script Codes CSS Codes

/** Mixin definitions **/
/** Base styles **/
*,
*::before,
*::after { margin: 0; padding: 0; box-sizing: border-box;
}
html { font-size: 62.5%;
}
body { display: flex; justify-content: center; align-items: center; height: 100vh; font-family: "Open Sans", sans-serif; font-size: 1.4rem; font-weight: 300; line-height: 1; color: #333; background: url("http://i1067.photobucket.com/albums/u422/arnellebalane/background_zpsvypefhvz.jpg") center center no-repeat; background-attachment: fixed; background-size: cover;
}
button { font: inherit; color: inherit; cursor: pointer;
}
ul { list-style: none;
}
.hidden { display: none !important;
}
/** Card styles **/
.card { display: flex; flex-direction: column; width: 63rem; min-height: 54rem; max-width: 90vw; border-radius: 5px; background-color: #1f1e22; box-shadow: 0 2.5rem 15rem rgba(0,0,0,0.7);
}
.card__content { display: flex; flex-direction: column; justify-content: space-around; align-items: center; flex-grow: 1;
}
.card__title { font-size: 3rem; font-weight: normal; text-align: center; color: #fff; margin-top: 4rem; margin-bottom: 1.5rem;
}
.categories-container { position: relative;
}
.categories { display: flex; max-width: 90vw; overflow: hidden;
}
.categories__scroll { flex-shrink: 0; width: 3rem; height: 3rem; border: none; position: absolute; top: calc(50% - 1.5rem); z-index: 2; border-radius: 50%; background-color: #19ba30; outline: none; transition: background-color 250ms ease;
}
.categories__scroll:hover,
.categories__scroll:focus { background-color: #1bcc35;
}
.categories__scroll::before { content: ""; width: 1rem; height: 1rem; position: absolute; top: calc(50% - 0.5rem); left: calc(50% - 0.5rem); border-top: 2px solid #fff; border-left: 2px solid #fff;
}
.categories__scroll--left { left: -1.5rem;
}
.categories__scroll--left::before { transform: translateX(2px) rotate(-45deg);
}
.categories__scroll--right { right: -1.5rem;
}
.categories__scroll--right::before { transform: translateX(-2px) rotate(135deg);
}
.category { flex-shrink: 0; width: 20rem; height: 20rem; margin: 0 0.5rem; position: relative;
}
.category:first-child { margin-left: 0;
}
.category:last-child { margin-right: 0;
}
.category::before { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 1; border: 3px solid transparent; border-radius: 3px; pointer-events: none; transition: border-color 150ms ease;
}
.category--selected::before { border-color: #19ba30;
}
.category__link { display: block; height: 100%; position: relative; border-radius: 3px; overflow: hidden;
}
.category__image { width: 100%;
}
.category__name { position: absolute; top: auto; left: 0; right: 0; bottom: 0; padding: 2rem; color: #707070; background-color: #fff;
}
.category__name::before { content: ""; width: 1.4rem; height: 0.8rem; position: absolute; top: calc(50% - 0.4rem); right: 2rem; border-left: 3px solid #19ba30; border-bottom: 3px solid #19ba30; transform: translateY(-2px) rotate(-45deg) scale(0); transition: transform 200ms cubic-bezier(0.25, 0.1, 0.54, 1.75);
}
.category--selected .category__name { color: #333;
}
.category--selected .category__name::before { transform: translateY(-2px) rotate(-45deg) scale(1);
}
.infobox { text-align: center; margin-bottom: 1rem;
}
.infobox p { line-height: 1.2;
}
.infobox p:first-child { color: #fff; opacity: 0.3;
}
.infobox p:last-child { color: #34c044;
}
.card__footer { display: flex; align-items: center; padding: 0 3rem; height: 10rem; border-radius: 0 0 5px 5px; background-color: #fff;
}
.card__steps { display: flex; align-items: center; margin-right: auto; position: relative;
}
.card__steps__item { width: 4rem; height: 4rem; position: absolute; top: calc(50% - 2rem); left: 0; font-size: 0; text-align: center; line-height: 4rem; color: #fff; border-radius: 50%; background-color: #707070;
}
.card__steps__item:nth-child(2) { left: 1.2rem; opacity: 0.8; transform: scale(0.8);
}
.card__steps__item:nth-child(3) { left: 2.4rem; opacity: 0.5; transform: scale(0.6);
}
.card__steps__item:nth-child(4) { left: 3.6rem; opacity: 0.2; transform: scale(0.4);
}
.card__steps__item--current { z-index: 1; font-size: 1.6rem; background-color: #19ba30; opacity: 1;
}
.card__button { display: block; padding: 1.5rem 2.5rem; border: none; background-color: transparent;
}
.card__button--disabled { color: #999;
}
@media all and (max-width: 600px) { body { align-items: flex-start; } .card { margin: 2rem; } .card__content { align-items: stretch; } .card__title { margin-bottom: 3rem; } .categories { flex-direction: column; padding: 0 1rem; } .categories__scroll { display: none !important; } .category { width: 100%; height: auto; margin: 0.5rem 0; } .infobox { margin-top: 3rem; margin-bottom: 2rem; }
}

Catagory Choosing - Script Codes JS Codes

'use strict';
var $infobox = $('.infobox');
var $infoboxCount = $infobox.find('.selected-count');
var $infoboxNames = $infobox.find('.selected-names');
var $categories = $('.categories');
var $scrollButtons = $('.categories__scroll');
$(document).on('click', '.category__link', function (e) { e.preventDefault(); selectCategory($(this).closest('.category'));
});
$(window).on('resize', adjustCategoriesContainer);
$scrollButtons.on('click', function () { if ($(this).hasClass('categories__scroll--left')) { scrollCategoriesContainer(-1); } else { scrollCategoriesContainer(1); }
});
adjustCategoriesContainer();
updateInfobox();
function selectCategory($category) { $category.toggleClass('category--selected'); updateInfobox();
}
function updateInfobox() { var $selectedCategories = $('.category--selected'); var selectedCount = $selectedCategories.length; var selectedCategories = []; $selectedCategories.each(function () { var name = $(this).find('.category__name').text(); selectedCategories.push(name); }); var totalCategories = $('.category').length; $infoboxCount.text(selectedCount + ' / ' + totalCategories + ' selected'); $infoboxNames.html(selectedCategories.join(' / ') || '&nbsp;');
}
function adjustCategoriesContainer() { var containerWidth = $categories.width(); var contentWidth = $categories[0].scrollWidth; if (containerWidth < contentWidth) { $scrollButtons.removeClass('hidden'); } else { $scrollButtons.addClass('hidden'); }
}
function scrollCategoriesContainer(direction) { var offset = $('.category').first().width() * direction; var scrollLeft = $categories.scrollLeft() + offset; $categories.animate({ scrollLeft: scrollLeft }, 250);
}
Catagory Choosing - Script Codes
Catagory Choosing - Script Codes
Home Page Home
Developer Srijon Sarker
Username Creative_Srijon
Uploaded November 29, 2022
Rating 3
Size 7,281 Kb
Views 6,072
Do you need developer help for Catagory Choosing?

Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!

Srijon Sarker (Creative_Srijon) Script Codes
Name
Image Hover ii
Material Profile UI Hover
Lead Gen Button
3D Buttons iii
Material Design Author Quote
Panels and Bullets
Material Design Square Card Components
Flat Pricing Table
Material Calendar Concept
Facebook like button Emoji Reaction
Create amazing SEO content with AI!

Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!