<link rel="preconnect" href="https://fonts.gstatic.com">
<link href="https://fonts.googleapis.com/css2?family=Poppins&display=swap" rel="stylesheet">
<div class="webR">
	<div class="webRegistration">
		<div class="webClose"><label class="switch">
				<input type="checkbox" checked>
				<span class="slider round"></span>
			</label></div>
		<div class="webDetails">
			<span class="wrOne"> <span class="upRightSVG"><img src="https://cdn-images-1.medium.com/max/1200/1*d7fYAnWUS9rDntWGdABxPw.png" alt="" class="rbh-img"></span>Robinhood</span>
			<span class="wrTwo">Your transfers as of: <spam class="tDates">03/17/2021</spam></span>
		</div>
		<div class="webButton">
			<button class="webLink webLinkOne linkOneW"> <span class="btnActive btnLink">View Transfers</span><span class="btnNotActive btnLink2">Close</span></button>
		</div>
		<div class="webTransfers">
			<div class="transferList" id='transactions'>
			</div>
		</div>
	</div>
:root {
	--bbc: #000;
	--btnbc: #000;
	--webR: #1c1d1f;
	--text: #fff;
	--webT: #111;
	--tItem: #282828;
	--dDate: #b3b3b3;
	--deposit: #00ff00;
	--withdrawal: #ff2d67;
	--mode: #fff;
	--toggle: #000;
	--sliderB: #fff;
	--rbh: #00ff53;
	--rbhImg: brightness();
	--poppins: "Poppins", sans-serif;
	--toggleBi: url(https://cdn.dribbble.com/users/68398/screenshots/15111989/media/00012054bda1ca6e7d9f5ae77bf26d17.png?compress=1&resize=800x600);
}
.lightMode {
	--deposit: #00ff00;
	--bbc: #fff;
	--btnbc: lime;
	--text: #000;
	--webR: #fff;
	--webT: #f5f5f5;
	--tItem: #e9e9e9;
	--dDate: #6d6d6d;
	--deposit: #00bb00;
	--withdrawal: #d8003c;
	--mode: #000;
	--stoggle: #fff;
	--rbh: #111;
	--rbhImg: brightness(0);
	--toggleBi: url(https://cdn.dribbble.com/users/68398/screenshots/15112009/media/530cb72d2a4782b7c62612546217e118.png?compress=1&resize=800x600);
}

body {
	font-family: var(--poppins);
	transition: 0.5s background ease;
	background-color: var(--bbc);
	display: flex;
	align-items: center;
	justify-content: center;
	height: 100vh;
}
.webR {
	margin: 2rem 0;
}

.webRegistration {
	transition: all 0.8s ease;
	padding: 10px;
	font-family: var(--poppins);
	max-width: 325px;
	width: 95%;
	margin: 0 auto;
	opacity: 1;
	position: relative;
	display: flex;
	background-color: var(--webR);
	box-shadow: 0px 8px 20px 17px rgb(0 0 0 / 9%);
	flex-wrap: wrap;
	border-radius: 10px;
	align-items: center;
	justify-content: space-between;
}
.webDetails {
	color: var(--text);
	max-width: 350px;
	display: flex;
	flex-direction: column;
}
.wrOne {
	display: flex;
	align-items: center;
	margin-bottom: 20px;
	font-size: 0.8rem;
	font-weight: 600;
	color: var(--rbh);
	transition: all 0.9s ease;
}
.wrTwo {
	font-size: 0.8rem;
	line-height: 1.3;
	margin-bottom: 10px;
}
.webButton {
	width: 100%;
	display: flex;
	margin: 10px 0;
	justify-content: space-between;
}
.upRightSVG {
	margin-right: 3px;
	height: 26px;
}
.rbh-img {
	width: 26px;
	transition: all 0.9s ease;
	height: 26px;
	filter: var(--rbhImg);
}
.webLink {
	font-family: var(--poppins);
	height: 2.5rem;
	color: var(--text);
	background-color: var(--btnbc);
	border-radius: 3px;
	outline: none;
	transition: all 0.7s ease;
	cursor: pointer;
	border: none;
	font-weight: 600;
	padding: 0 1.3rem;
	width: 100%;
}
.webLink:hover {
	/*   transform: scale(1.1);
  transition: transform 0.5s ease; */
}

.webH {
	opacity: 0;
	transition: all 0.5s ease;
}
.webRd {
	display: none;
}
.webClose {
	position: absolute;
	top: 10px;
	right: 6px;
	border-radius: 100px;
	align-items: center;
	color: var(--text);
	display: flex;
	font-size: 0.7rem;
	background-color: var(--mode);
	justify-content: center;
	transition: all 0.5s ease-in-out;
	box-shadow: 0px 0px 20px 19px #0000000f;
	cursor: pointer;
}
.webClose:hover {
	background-color: #222;
	border-color: #343434;
	color: #070707;
	transition: all 0.5s ease-in-out;
}
.webCloseImg {
	height: 24px;
	width: 24px;
}

.webCloseImg img {
	height: 24px;
	width: 24px;
}
.btnNotActive {
	display: none;
}
/* Transfer List*/
.webTransfers {
	width: 100%;
	opacity: 0;
	height: 0px;
	display: flex;
	justify-content: center;
	background-color: var(--webT);
	border-radius: 6px;
	transition: all 0.8s ease;
	flex-direction: column;
}
.webTransfers--active {
	transition: all 0.8s ease;
	margin: 10px 0;
	padding: 10px;
	opacity: 1;
	height: 300px;
}
.transferList::-webkit-scrollbar {
	display: none;
}
.transferList {
	height: 300px;
	justify-content: center;
	overflow: scroll;
}
.transferItem {
	display: flex;
	align-items: center;
	width: 100%;
	flex-direction: row;
	padding: 20px 0px;
	transition: all 0.8s ease;
	border-bottom: 1px solid var(--tItem);
	justify-content: space-between;
}
.transferDesc {
}
.descName {
	font-size: 0.65rem;
	color: var(--text);
	transition: all 0.8s ease;
}
.descDate {
	font-size: 0.6rem;
	transition: all 0.8s ease;
	margin-top: 3px;
	color: var(--dDate);
}
.transferAmount {
	color: var(--text);
	transition: all 0.8s ease;
	font-size: 0.8rem;
}
.tValue--Deposit {
	color: var(--deposit);
	font-weight: 600;
	transition: all 0.8s ease;
}
.tValue--Withdrawal {
	color: var(--withdrawal);
	font-weight: 600;
	transition: all 0.8s ease;
}
.switch {
	position: relative;
	display: inline-block;
	width: 42.5px;
	height: 23px;
}

.switch input {
	opacity: 0;
	width: 0;
	height: 0;
}

.slider {
	position: absolute;
	cursor: pointer;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	background-color: var(--stoggle);
	background-size: cover;
	background-image: var(--toggleBi);
	-webkit-transition: 0.4s;
	transition: 0.4s;
}

.slider:before {
	position: absolute;
	content: "";
	height: 19px;
	width: 19px;
	left: 2px;
	bottom: 2px;
	background-color: var(--sliderB);
	-webkit-transition: 0.4s;
	transition: 0.4s;
}

input:checked + .slider {
	background-color: var(--toggle);
	background-image: var(--toggleBi);
}

input:focus + .slider {
	box-shadow: 0 0 1px #2196f3;
}

input:checked + .slider:before {
	-webkit-transform: translateX(19px);
	-ms-transform: translateX(19px);
	transform: translateX(19px);
}

/* Rounded sliders */
.slider.round {
	border-radius: 34px;
}

.slider.round:before {
	border-radius: 50%;
}
View Compiled
// THIS PEN IS YET TO BE COMPLETED

/////////////////////////////////////////////////
// Data

// Data used to create Transaactions

const rht = {
	banks: [
		"Bank of America",
		"Chase",
		"Wells Fargo",
		"Capital One",
		"American Express",
		"Citi"
	],
	transfers: [
		200,
		455.23,
		-306.5,
		25000,
		-642.21,
		-133.9,
		79.97,
		1300,
		544,
		1200,
		-800,
		-145
	],

	transferDates: [
		"2019-11-18T21:31:17.178Z",
		"2019-12-23T07:42:02.383Z",
		"2020-01-28T09:15:04.904Z",
		"2020-04-01T10:17:24.185Z",
		"2020-05-08T14:11:59.604Z",
		"2020-07-26T17:01:17.194Z",
		"2020-07-28T23:36:17.929Z",
		"2020-08-01T10:51:36.790Z"
	]
};

const body = document.querySelector("body");
const webReg = document.querySelector(".webRegistration");
const toggleMode = document.querySelector(".slider");
const transfersList = document.querySelector(".transferList");
const transfersBox = document.querySelector(".webTransfers");
const transferItem = document.querySelector(".transferItem");
const openBtn = document.querySelector(".webLinkOne");
const transactionsBtn = document.querySelector(".linkOneW");
const tvd = document.querySelector(".tDates");
const btnLink = document.querySelector(".btnLink");
const btnLink2 = document.querySelector(".btnLink2");
toggleMode.addEventListener("click", () => {
	body.classList.toggle("lightMode");
});

const tsd = setInterval(() => {
	const td = new Date();
	const tLocale = navigator.language;
	const tO = {
		month: "long",
		day: "numeric",
		weekday: "long",
		hour: "numeric",
		minute: "numeric",
		second: "numeric"
	};
	const tsdIntl = new Intl.DateTimeFormat(tLocale, tO).format(td);
	console.log(tsdIntl);
	tvd.textContent = tsdIntl;
}, 1000);

const transfers = rht.transfers.slice();
transfers.map((transfer) => {
	const tValue = transfer >= 0 ? "Deposit" : "Withdrawal";
	// const transferValue = `${tValue}${transfer}`;
	console.log("transferValue");
	// document.getElementById("transactions").innerHTML = "";
	const tvOptions = {
		style: "currency",
		currency: "USD"
	};
	const tv = new Intl.NumberFormat(navigator.language, tvOptions).format(
		Math.abs(transfer)
	);
	console.log(tv);
	const random = Math.trunc(Math.random() * rht.banks.length);
	const date = Math.trunc(Math.random() * rht.transfers.length + 1);
	const bank = rht.banks[random];

	const transfersItems = `<div class="transferItem">
        <div class="transferDesc">
          <div class="descName"><span class="tValue--${tValue}">${tValue}</span> ${
		tValue === "Deposit" ? "from" : "to"
	} ${bank} Bank</div>
          <div class="descDate">${date} ${date === 1 ? "day" : "days"} ago</div>
        </div>
        <div class="transferAmount"><span>${tv}</span></div>
      </div>`;
	transfersList.insertAdjacentHTML("beforeend", transfersItems);
	transfersBox.classList.toggle("webTransfers--active");
});

// openBtn.addEventListener("click", viewTransactions);

transactionsBtn.addEventListener("click", () => {
	btnLink.classList.toggle("btnNotActive");
	btnLink2.classList.toggle("btnNotActive");
	transfersBox.classList.toggle("webTransfers--active");
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.