Day 77 - Choose Category

Developer
Arnelle Balane
Size
7,442 Kb
Views
10,120
  1. Day 77 - Choose Category Previews
  2. Day 77 - Choose Category HTML Codes
  3. Day 77 - Choose Category CSS Codes
  4. Day 77 - Choose Category JS Codes

How do I make an day 77 - choose category?

Implementation of Day 77 design from @npaulflavius' 100 Days UI Challenge. What is a day 77 - choose category? How do you make a day 77 - choose category? This script and codes were developed by Arnelle Balane on 29 September 2022, Thursday.

Day 77 - Choose Category Previews
IQ Test

Day 77 - Choose Category - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Day 77 - Choose Category</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"> <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 class="category__link" href="#"><img class="category__image" src="http://i1067.photobucket.com/albums/u422/arnellebalane/bar.jpg_zpsym7y56m9.png" alt="Bar"/><span class="category__name">Bar</span></a></li> <li class="category"><a class="category__link" href="#"><img class="category__image" src="http://i1067.photobucket.com/albums/u422/arnellebalane/fashion_zpsdgpovs8s.jpg" alt="Fashion"/><span class="category__name">Fashion</span></a></li> <li class="category"><a class="category__link" href="#"><img class="category__image" src="http://i1067.photobucket.com/albums/u422/arnellebalane/cars_zpshcbqeivs.jpg" alt="Cars"/><span class="category__name">Cars</span></a></li> <li class="category"><a class="category__link" href="#"><img class="category__image" src="http://i1067.photobucket.com/albums/u422/arnellebalane/plants-and-nature_zpsjc3glk1s.jpg" alt="Plants &amp; Nature"/><span class="category__name">Plants & Nature</span></a></li> <li class="category"><a class="category__link" href="#"><img class="category__image" src="http://i1067.photobucket.com/albums/u422/arnellebalane/food_zpsrhmzgctz.jpg" alt="Food"/><span class="category__name">Food</span></a></li> <li class="category"><a class="category__link" href="#"><img class="category__image" src="http://i1067.photobucket.com/albums/u422/arnellebalane/traveling.jpg_zpsmlnsf4uv.png" alt="Traveling"/><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> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Day 77 - Choose Category - 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: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-pack: center; -ms-flex-pack: center; justify-content: center; -webkit-box-align: center; -ms-flex-align: 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: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; 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: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; -ms-flex-pack: distribute; justify-content: space-around; -webkit-box-align: center; -ms-flex-align: center; align-items: center; -webkit-box-flex: 1; -ms-flex-positive: 1; 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: -webkit-box; display: -ms-flexbox; display: flex; max-width: 90vw; overflow: hidden;
}
.categories__scroll { -ms-flex-negative: 0; 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; -webkit-transition: background-color 250ms ease; 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 { -webkit-transform: translateX(2px) rotate(-45deg); transform: translateX(2px) rotate(-45deg);
}
.categories__scroll--right { right: -1.5rem;
}
.categories__scroll--right::before { -webkit-transform: translateX(-2px) rotate(135deg); transform: translateX(-2px) rotate(135deg);
}
.category { -ms-flex-negative: 0; 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; -webkit-transition: border-color 150ms ease; 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; -webkit-transform: translateY(-2px) rotate(-45deg) scale(0); transform: translateY(-2px) rotate(-45deg) scale(0); -webkit-transition: -webkit-transform 200ms cubic-bezier(0.25, 0.1, 0.54, 1.75); transition: -webkit-transform 200ms cubic-bezier(0.25, 0.1, 0.54, 1.75); transition: transform 200ms cubic-bezier(0.25, 0.1, 0.54, 1.75); transition: transform 200ms cubic-bezier(0.25, 0.1, 0.54, 1.75), -webkit-transform 200ms cubic-bezier(0.25, 0.1, 0.54, 1.75);
}
.category--selected .category__name { color: #333;
}
.category--selected .category__name::before { -webkit-transform: translateY(-2px) rotate(-45deg) scale(1); 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: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; align-items: center; padding: 0 3rem; height: 10rem; border-radius: 0 0 5px 5px; background-color: #fff;
}
.card__steps { display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-align: center; -ms-flex-align: center; 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; -webkit-transform: scale(0.8); transform: scale(0.8);
}
.card__steps__item:nth-child(3) { left: 2.4rem; opacity: 0.5; -webkit-transform: scale(0.6); transform: scale(0.6);
}
.card__steps__item:nth-child(4) { left: 3.6rem; opacity: 0.2; -webkit-transform: scale(0.4); 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 { -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .card { margin: 2rem; } .card__content { -webkit-box-align: stretch; -ms-flex-align: stretch; align-items: stretch; } .card__title { margin-bottom: 3rem; } .categories { -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; 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; }
}

Day 77 - Choose Category - 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);
}
Day 77 - Choose Category - Script Codes
Day 77 - Choose Category - Script Codes
Home Page Home
Developer Arnelle Balane
Username arnellebalane
Uploaded September 29, 2022
Rating 4.5
Size 7,442 Kb
Views 10,120
Do you need developer help for Day 77 - Choose Category?

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!

Arnelle Balane (arnellebalane) Script Codes
Name
Pixel mario
Day 48 - Speedometer
Day 11 - Calendar Card
Day 78 - TV UI - Player Card
Yummy Food App
Running pixel mario
Virtual Filesystem
Day 85 - Cinema Application
Day 41 - File Upload Widget
Day 60 - Knob
Create amazing art & images 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!