Day 11 - Calendar Card

Developer
Arnelle Balane
Size
6,984 Kb
Views
12,144
  1. Day 11 - Calendar Card Previews
  2. Day 11 - Calendar Card HTML Codes
  3. Day 11 - Calendar Card CSS Codes
  4. Day 11 - Calendar Card JS Codes

How do I make an day 11 - calendar card?

Implementation of Day 11 design from @npaulflavius' 100 Days UI Challenge. What is a day 11 - calendar card? How do you make a day 11 - calendar card? This script and codes were developed by Arnelle Balane on 14 October 2022, Friday.

Day 11 - Calendar Card Previews
IQ Test

Day 11 - Calendar Card - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Day 11 - Calendar Card</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.min.css"> <link rel="stylesheet" href="css/style.css">
</head>
<body>
<div class="calendar"> <div class="indicator"></div> <div class="overlay"></div> <ol class="round-list years"></ol> <ol class="round-list months"></ol> <ol class="round-list days"></ol> <div class="details"> <h1>Events</h1> <ul class="events-container"> <li class="event current" data-date="June 2, 2019"> <h2 class="event-title">Rooftop Cinema: Trouble Makers</h2> <p class="event-date">at 9:00 PM</p> </li> <li class="event" data-date="September 21, 2030"> <h2 class="event-title">Rooftop Cinema: Trouble Makers</h2> <p class="event-date">at 9:00 PM</p> </li> <li class="event" data-date="February 28, 2025"> <h2 class="event-title">Rooftop Cinema: Trouble Makers</h2> <p class="event-date">at 9:00 PM</p> </li> </ul><a href="#">Go To Event</a> <ul class="dots"> <li class="current"></li> <li></li> <li></li> </ul> </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>

Day 11 - Calendar Card - 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: "Roboto", sans-serif; font-weight: 100; -webkit-font-smoothing: antialiased; line-height: 1;
}
ol,
ul { list-style: none;
}
/** Base Calendar Styles **/
.calendar { -ms-flex-negative: 0; flex-shrink: 0; width: 71rem; height: 71rem; padding: 3rem; position: relative; border-radius: 50%; background-color: #000; background-clip: content-box; overflow: hidden;
}
.calendar::before { content: ""; position: absolute; top: 3rem; left: 3rem; right: 3rem; bottom: 3rem; border-radius: 50%; background: #000 url("http://i1067.photobucket.com/albums/u422/arnellebalane/background_zpswabqqadm.jpg") center center no-repeat; opacity: 0.05;
}
.calendar * { -ms-flex-negative: 0; flex-shrink: 0;
}
/** Round List Styles **/
.round-list { border-radius: 50%; color: #545247; -webkit-transition: -webkit-transform 500ms ease-out; transition: -webkit-transform 500ms ease-out; transition: transform 500ms ease-out; transition: transform 500ms ease-out, -webkit-transform 500ms ease-out;
}
.round-list.years { position: absolute; top: 1.25rem; left: 1.25rem; right: 1.25rem; bottom: 1.25rem;
}
.round-list.months { position: absolute; top: 7rem; left: 7rem; right: 7rem; bottom: 7rem;
}
.round-list.days { position: absolute; top: 13.5rem; left: 13.5rem; right: 13.5rem; bottom: 13.5rem;
}
.round-list li { position: absolute; text-align: center; -webkit-transition: color 500ms ease-out; transition: color 500ms ease-out;
}
.round-list li.current { color: #000;
}
.round-list.days li { width: 1.8rem; top: calc(50% - 0.8rem); left: calc(50% - 0.9rem); font-size: 1.5rem;
}
.round-list.months li { width: 5rem; top: calc(50% - 0.8rem); left: calc(50% - 2.5rem); font-size: 1.6rem; text-indent: 0.5rem; letter-spacing: 0.5rem; text-transform: uppercase;
}
.round-list.years li { width: 8.6rem; top: calc(50% - 1rem); left: calc(50% - 4.3rem); font-size: 2rem; text-indent: 0.5rem; letter-spacing: 1rem;
}
/** Event Details Styles **/
.details { 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; position: absolute; top: 20.5rem; left: 20.5rem; right: 20.5rem; bottom: 20.5rem; -webkit-box-orient: vertical; -webkit-box-direction: normal; -ms-flex-direction: column; flex-direction: column; border: 2px solid #6e6424; border-radius: 50%; font-size: 1.4rem;
}
.details h1 { margin-bottom: 2.4rem; font-weight: 100; text-transform: uppercase; font-size: 1.4rem; letter-spacing: 0.8rem; color: #fff; opacity: 0.2;
}
.details a { display: inline-block; margin-top: 2rem; color: #dbbf32;
}
.events-container { width: 100%; height: 5rem; position: relative; overflow: hidden;
}
.events-container .event { position: absolute; top: 0; left: 0; right: 0; bottom: 0; text-align: center; visibility: hidden; opacity: 0; -webkit-transform: translateX(100%); transform: translateX(100%); -webkit-transition: visibility 300ms ease-out, opacity 300ms ease-out, -webkit-transform 500ms ease-out; transition: visibility 300ms ease-out, opacity 300ms ease-out, -webkit-transform 500ms ease-out; transition: transform 500ms ease-out, visibility 300ms ease-out, opacity 300ms ease-out; transition: transform 500ms ease-out, visibility 300ms ease-out, opacity 300ms ease-out, -webkit-transform 500ms ease-out;
}
.events-container .event.current { visibility: visible; opacity: 1; -webkit-transform: translateX(0); transform: translateX(0);
}
.events-container .event.move-left { -webkit-transform: translateX(-100%); transform: translateX(-100%);
}
.event .event-title { padding: 0 5rem; margin-bottom: 0.3rem; font-size: 1.5rem; text-transform: uppercase; color: #fff;
}
.event .event-date { color: #fff;
}
.dots { display: -webkit-box; display: -ms-flexbox; display: flex; margin-top: 2rem;
}
.dots li { width: 0.5rem; height: 0.5rem; margin: 0 0.25rem; border-radius: 50%; background-color: #fff; opacity: 0.2; cursor: pointer;
}
.dots li.current { background-color: #e6cf59; opacity: 1;
}
/** Indicator Styles **/
.indicator { position: absolute; top: 2.9rem; left: 2.9rem; right: 2.9rem; bottom: 2.9rem; border-radius: 50%; overflow: hidden; pointer-events: none;
}
.indicator::before,
.indicator::after { content: ""; position: absolute;
}
.indicator::before { border-top: 14.5rem solid #e5e91e; border-left: 6.5rem solid transparent; border-right: 6.5rem solid transparent; top: 0; left: calc(50% - 6.5rem);
}
.indicator::after { height: 3.6rem; border-left: 2px solid #e5e91e; top: 14rem; left: calc(50% - 1px);
}
/** Overlay Styles **/
.overlay { position: absolute; top: 3rem; left: 3rem; right: 3rem; bottom: 3rem; border-radius: 50%;
}
.overlay::before,
.overlay::after { content: ""; position: absolute; top: 0; left: 0; right: 0; bottom: 0; border-radius: 50%;
}
.overlay::before { background-image: -webkit-linear-gradient(top left, #ff671b, transparent 40%, transparent); background-image: linear-gradient(top left, #ff671b, transparent 40%, transparent); opacity: 0.15;
}
.overlay::after { background-image: -webkit-linear-gradient(bottom left, #5eade4, transparent 50%, transparent); background-image: linear-gradient(bottom left, #5eade4, transparent 50%, transparent); opacity: 0.15;
}

Day 11 - Calendar Card - Script Codes JS Codes

'use strict';
var $days = $('.round-list.days');
var $months = $('.round-list.months');
var $years = $('.round-list.years');
var $events = $('.events-container');
var $dots = $('.dots');
populateCalendar();
positionDigits();
showEvent(0);
$dots.on('click', 'li', function () { showEvent($(this).index());
});
function showEvent(index) { var $event = $events.children().eq(index); $events.children().removeClass('current move-left'); $event.addClass('current').prevAll().addClass('move-left'); $dots.children().removeClass('current').eq(index).addClass('current'); var date = new Date($event.data('date')); rotateListToDigit($days, date.getDate()); rotateListToDigit($months, date.getMonth()); rotateListToDigit($years, date.getFullYear());
}
function rotateListToDigit(list, digit) { var current = list.children('[data-value="' + digit + '"]').addClass('current'); var angleDelta = 360 / list.children().length; var rotation = -angleDelta * current.index(); current.siblings().removeClass('current'); list.css('transform', 'rotate(' + rotation + 'deg)');
}
function populateCalendar() { // populate days for (var i = 1; i <= 31; i++) { $days.append('<li data-value="' + i + '">' + i + '</li>'); } // populate months 'Jan Feb Mar Apr May Jun Jul Aug Sep Oct Nov Dec'.split(' ').forEach(function (month, i) { return $months.append('<li data-value="' + i + '">' + month + '</li>'); }); // populate years var year = new Date().getFullYear(); for (var i = 0; i < 18; i++) { $years.append('<li data-value="' + (year + i) + '">' + (year + i) + '</li>'); }
}
function positionDigits() { // position days digits positionDigitsOf($days); positionDigitsOf($months); positionDigitsOf($years);
}
function positionDigitsOf(list) { var angleDelta = 360 / list.children().length; list.children().each(function (i) { var angle = 180 - angleDelta * i; var position = getPointAtAngle(angle, list.width() / 2); positionDigitAt($(this), position, angle); });
}
function positionDigitAt(digit, position, angle) { var transform = ['translate(' + position.x + 'px, ' + position.y + 'px)', 'rotate(' + (180 - angle) + 'deg)']; digit.css('transform', transform.join(' '));
}
function getPointAtAngle(angle, distance) { angle = deg2rad(angle); return { x: Math.sin(angle) * distance, y: Math.cos(angle) * distance };
}
function deg2rad(angle) { return angle * (Math.PI / 180);
}
function rad2deg(angle) { return angle * (180 / Math.PI);
}
Day 11 - Calendar Card - Script Codes
Day 11 - Calendar Card - Script Codes
Home Page Home
Developer Arnelle Balane
Username arnellebalane
Uploaded October 14, 2022
Rating 4.5
Size 6,984 Kb
Views 12,144
Do you need developer help for Day 11 - Calendar Card?

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
Day 85 - Cinema Application
Day 78 - TV UI - Player Card
Pixel mario
Yummy Food App
Day 60 - Knob
Day 48 - Speedometer
Day 41 - File Upload Widget
Day 77 - Choose Category
Virtual Filesystem
Running pixel mario
Create amazing sales emails 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!