JSFiddle - React, Tailwind, and code Playground

by Saloni Sharma

HTML

<section id="donate">
	<p id="thankyou">Thanks for doing your part to protect the environment!</p>
	<input id="amount" type="text" placeholder="enter an amount">
	<button id="donate-button">Donate</button>
	<div class="donate-box"></div>	
</section>

CSS

.donate-box {
	width: 100%;
	height: 60vh;
	bottom: 0;
	left: 0;
	background-color: black;
	display: none;
}

#amount {
	border: 1px solid black;
	background-color: white;
	width: 500px;
	position: absolute;
	transform: translateY(-150px);
	left: 50%;
	transform: translate(-300px, -150px);
	padding: 10px;
}

#donate-button {
	border: 1px solid black;
	background-color: white;
	width: 100px;
	position: absolute;
	transform: translateY(-250px);
	left: 50%;
	transform: translate(190px, -150px);
	padding: 10px;
}

p#thankyou {
	margin-left: 350px;
	margin-top: 240px;
  line-height: 1.5;
	font-family: 'Montserrat Alternates', sans-serif;
}

JavaScript

$("#donate-button").click(function() {
	console.log("This is working for now");
	$(".donate-box").fadeIn(); 
});

 // When the donation amount is entered --
 // 1. Displays the hidden div ".donate-box" (background 	color: black)
 
// 	2. Displays a message inside ".donate-box" that says:
// 		"Based on your location in <your city name>, 
// 		your donation of $X will go a long way.
// 		This is the equivalent of:
// 		-- x Starbucks coffees
// 		-- x Pairs of Shoes
// 		-- x Bottles of Wine
// 		-- x Movie Tickets
// 		-- x Dinners at your neighborhood cafe
// 		in <your city name>
// 		Thank you for doing your part to protect the environment!"