We Keep Coding

How to encapsulate javascript with repetitive functions into reusable components?

I'm a javascript novice, and I have a problem that bothers me~
I often need to write a function to click a button to pop up a modal. The interaction logic of this function is repeated, but sometimes the UI or copywriting needs to be adjusted~
So I want to know How can such a repetitive function be packaged into a component, and other pages need to use modal-like functions in the future, which can be directly referenced and only need to change the copy without rewriting CSS / HTML / JavaScript?
// 匯出 excel 彈窗 JS
$("*[data-modal]").on("click", Modeal);
function Modeal() {
$(".excel_popup").css("display", "flex");
$("body").css("overflow", "hidden");
// 關閉彈窗
$(document).on("click", function(e) {
if (
e.target.className == "close" ||
e.target.className == "excel_popup" ||
e.target.className == "btn_confirm" ||
e.target.className == "btn_consider"
) {
$("#js-job_excel_popup").css("display", "none");
$("body").css("overflow", "auto");
}
});
}
.excel_popup {
position: fixed;
z-index: 999999999;
width: 100%;
height: 100vh;
top: 0;
left: 0;
right: 0;
bottom: 0;
margin: auto;
background-color: rgba(0, 0, 0, 0.3);
justify-content: center;
align-items: center;
display: none;
}
.excel_popup .excel_close_wrap {
width: 360px;
background-color: #fff;
padding: 16px 24px;
border-radius: 8px;
margin: 0 8px;
}
.excel_popup .excel_close_wrap header {
position: relative;
width: 100%;
display: flex;
justify-content: center;
align-items: center;
border-bottom: 1px solid #222;
padding-bottom: 16px;
}
.excel_popup .excel_close_wrap header h2 {
font-size: 18px;
line-height: 1.5;
font-weight: 500;
text-align: center;
}
.excel_popup .excel_close_wrap header .close {
position: absolute;
right: 0;
display: inline-block;
width: 20px;
height: 20px;
background-repeat: no-repeat;
background-size: contain;
cursor: pointer;
}
.excel_popup .excel_close_wrap .txt {
font-size: 16px;
font-weight: 400;
line-height: 1.5;
text-align: center;
padding: 32px 0px;
color: #222;
}
.excel_popup .excel_close_wrap .btn_group {
display: flex;
justify-content: space-between;
font-size: 14px;
line-height: 1.5;
letter-spacing: 0.15px;
}
.excel_popup .excel_close_wrap .btn_group .btn_consider {
width: 132px;
text-align: center;
padding: 8px;
border-radius: 4px;
border: 1px solid #222;
margin-right: 4px;
cursor: pointer;
}
.excel_popup .excel_close_wrap .btn_group .btn_consider:hover {
border: 1px solid #222;
}
.excel_popup .excel_close_wrap .btn_group .btn_confirm {
width: 132px;
text-align: center;
padding: 8px;
border-radius: 4px;
border: 1px solid #222;
background-color: #222;
margin-left: 4px;
cursor: pointer;
color: #fff;
}
.excel_popup .excel_close_wrap .btn_group .btn_confirm:hover {
background-color: yellow;
border: 1px solid #222;
color: #222;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<a class="excel_export" id="js-excel_export" href="javascript:;" data-modal="js-job_excel_popup">
<figure></figure>
<p>Click the popup</p>
</a>
<div class="excel_popup" id="js-job_excel_popup">
<div class="excel_close_wrap">
<header>
<h2>TITLE</h2>
<div class="close" id="js-close"></div>
</header>
<p class="txt">Hello World!!!</p>
<div class="btn_group">
<a class="btn_consider">Cancel</a>
<a class="btn_confirm">Send</a>
</div>
</div>
</div>

Javascript code popup doesn't stay active after onclick event

JavaScript Noob
On the footer of the site I'm trying to display the contact info with a popup like form
whenever I copied the code to new page or new device the button clicked opens the form
but then the form closes immediately
Is there a way to fix this?
<button class="open-button" onclick="openForm()">
Contact Us</button>
<div class="form-popup">
<form class="form-container" id="myForm">
<h1>info#indiepump.com</h1>
<button type="button" class="btn-cancel" onclick="closeForm()">×</button>
</form>
</div>
<script>
function openForm() {
//openForm().stopPropagation();
document.getElementById("myForm").style.display = "flex";
}
function closeForm() {
document.getElementById("myForm").style.display = "none";
}
</script>
And the CSS part:
.open-button {
background-image: url(/usr/fsociety/indiepump_test/test_4/social_icons/email.png);
background-repeat: no-repeat;
background-color: transparent;
padding: 17px 21px;
border: none;
cursor: pointer;
position: fixed;
justify-content: space-between;
align-items: center;
vertical-align: middle;
text-align: right;
text-decoration: none;
font-size: 0.9rem;
margin-left: 1rem;
height: 27px;
width: 121px;
padding: 3px 3px;
padding-left: 3px;
color: red;
}
.form-popup {
display: none;
position: fixed;
align-items: center;
justify-content: space-between;
vertical-align: middle;
bottom: 2.5rem;
left: 2rem;
border: 1px solid red;
border-radius: 10px;
color: red;
font-size: 0.7rem;
z-index: 10000;
}
.form-container {
display: flex;
max-width: 300px;
width: 300px;
height: 50px;
align-items: center;
justify-content: space-between;
vertical-align: middle;
text-align: center;
padding: 10px;
background-color: #f9e3d5;
z-index: 100000;
}
.btn-cancel {
display: flex;
align-items: center;
margin-bottom: 1rem;
vertical-align: middle;
text-align: center;
width: 25px;
height: 25px;
border: none;
background-color: transparent;
color: red;
font-size: 1.9rem;
cursor: pointer;
}
I've already tried Google search solutions to no avail.
Also different methods from other helpful sites but every time I change something the button doesn't work at all.

After click on button the element with .form-popup class does not show because in your CSS you have set display:none:
.form-popup {
display: none;
....
}
So you need to set display:flex or block for .form-popup too.
Here is working sample:
function openForm() {
document.getElementById("myForm").parentElement.style.display = "flex";
document.getElementById("myForm").style.display = "flex";
}
function closeForm() {
document.getElementById("myForm").style.display = "none";
document.getElementById("myForm").parentElement.style.display = "none";
}
.open-button {
background-image: url(/usr/fsociety/indiepump_test/test_4/social_icons/email.png);
background-repeat: no-repeat;
background-color: transparent;
padding: 17px 21px;
border: none;
cursor: pointer;
position: fixed;
justify-content: space-between;
align-items: center;
vertical-align: middle;
text-align: right;
text-decoration: none;
font-size: 0.9rem;
margin-left: 1rem;
height: 27px;
width: 121px;
padding: 3px 3px;
padding-left: 3px;
color: red;
}
.form-popup {
display: none;
position: fixed;
align-items: center;
justify-content: space-between;
vertical-align: middle;
bottom: 2.5rem;
left: 2rem;
border: 1px solid red;
border-radius: 10px;
color: red;
font-size: 0.7rem;
z-index: 10000;
}
.form-container {
display: flex;
max-width: 300px;
width: 300px;
height: 50px;
align-items: center;
justify-content: space-between;
vertical-align: middle;
text-align: center;
padding: 10px;
background-color: #f9e3d5;
z-index: 100000;
}
.btn-cancel {
display: flex;
align-items: center;
margin-bottom: 1rem;
vertical-align: middle;
text-align: center;
width: 25px;
height: 25px;
border: none;
background-color: transparent;
color: red;
font-size: 1.9rem;
cursor: pointer;
}
<button class="open-button" onclick="openForm()">
Contact Us
</button>
<div class="form-popup">
<form class="form-container" id="myForm">
<h1>info#indiepump.com</h1>
<button type="button" class="btn-cancel" onclick="closeForm()">×</button>
</form>
</div>

#Alireza Ahmadi
Reposting the new code...
function openForm() {
document.getElementById("myForm").parentElement.style.display = "flex";
document.getElementById("myForm").style.display = "flex";
}
function closeForm() {
document.getElementById("myForm").style.display = "none";
document.getElementById("myForm").parentElement.style.display = "none";
}
.open-button {
background-image: url(/usr/fsociety/indiepump_test/test_4/social_icons/email.png);
background-repeat: no-repeat;
background-color: transparent;
padding: 17px 21px;
border: none;
cursor: pointer;
position: fixed;
justify-content: space-between;
align-items: center;
vertical-align: middle;
text-align: right;
text-decoration: none;
font-size: 0.9rem;
margin-left: 1rem;
height: 27px;
width: 121px;
padding: 3px 3px;
padding-left: 3px;
color: red;
}
.form-popup {
display: none;
position: fixed;
align-items: center;
justify-content: space-between;
vertical-align: middle;
bottom: 2.5rem;
left: 2rem;
border: 1px solid red;
border-radius: 10px;
color: red;
font-size: 0.7rem;
z-index: 10000;
}
.div-form {
display: flex;
max-width: 300px;
width: 300px;
height: 50px;
align-items: center;
justify-content: space-between;
vertical-align: middle;
text-align: center;
padding: 10px;
background-color: #f9e3d5;
z-index: 100000;
}
.btn-cancel {
display: flex;
align-items: center;
margin-bottom: 1rem;
vertical-align: middle;
text-align: center;
width: 25px;
height: 25px;
border: none;
background-color: transparent;
color: red;
font-size: 1.9rem;
cursor: pointer;
}
<button class="open-button" onclick="openForm()">
Contact Us</button>
<div class="form-popup">
<div class="div-form" id="myForm">
<form class="form-container">
<h1>info#indiepump.com</h1>
<button type="button" class="btn-cancel" onclick="closeForm()">×</button>
</form>
</div>
</div>
Right now the button doesn't do anything the page only shows that is refreshing

CSS - Vertical Alignment of icon not showing up correctly

I have been trying to have bins that show up on the right side but they don't appear to have been placed very well, I'm new to CSS, I have looked through the internet and no luck (or I didn't make sense of it).
The bin seems to be not in proportion with the background, and so if I want to make it fill the tag it will just overflow off the box.
#container {
box-shadow: 0 0 3px rgba(0, 0, 0, 0.2);
width: 360px;
background-color: #f7f7f7;
margin: 100px auto;
}
.completed {
color: gray;
text-decoration: line-through;
}
body {
font-family: Roboto;
background: #FFAFBD;
background: -webkit-linear-gradient(to right, #ffc3a0, #FFAFBD);
background: linear-gradient(to right, #ffc3a0, #FFAFBD);
}
li {
background-color: white;
height: 40px;
line-height: 40px;
color: #666;
}
input {
font-size: 18px;
background-color: #f7f7f7;
width: 100%;
padding: 13px 13px 13px 20px ;
box-sizing: border-box;
color: #2980b9;
}
input:focus{
background-color: white;
border: 3px solid #2980b9;
outline: none;
}
li:nth-child(2n){
background-color: #f7f7f7;
}
span {
height: 35px;
width: 40px;
display: inline-block;
margin-right: 20px;
margin: 0 auto;
text-align: center;
color: white;
background-color: #e74c3c;
}
h1 {
background-color: #2980b9;
color: white;
margin: 0;
padding: 10px 20px;
text-transform: uppercase;
font-size: 24px;
font-weight: normal;
}
ul {
list-style: none;
margin: 0;
padding: 0;
}
#plus {
width: 20px;
height: 20px;
float: right;
margin-top: 3px;
}
.remove {
height: 20px;
width: 15px;
}
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="assets/CSS/todo.css">
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght#400;500;700&display=swap" rel="stylesheet">
<link rel="stylesheet" href="">
<title>Trello</title>
</head>
<body>
<div id="container">
<h1>To-do List <img id="plus" src="assets/Plus.png" alt=""></h1>
<input type="text" placeholder="Add New Todo...">
<ul>
<li><span><img class="remove" src="assets/Bin.png" alt=""></span> Go to potions class</li>
<li><span><img class="remove" src="assets/Bin.png" alt=""></span> Buy New Robes</li>
<li><span><img class="remove" src="assets/Bin.png" alt=""></span> Visit Hagrid</li>
</ul>
</div>
<script src="assets/JS/lib/Jquery.js"></script>
<script src="assets/JS/Custom/todos.js"></script>
</body>
</html>
Thanks for the help in advance.

Use Flexbox! Give to your <li> and to the <span> a display: flex; This way you can have control of the positioning of its children (in this case your <img>).
li {
display: flex;
}
span {
display: flex;
justify-content: center;
align-items: center;
margin: 0 2px 0 0;
}
Here's a working Codepen.
Here's a nice guide to Flexbox.

How about making you span elements the same height as the li so that the red bg fills up completely?
span {
height: 40px;
}
Just like this?

How can I reverse the order of div elements upside down on 'onclick'?

I have the following code:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>StackOverflow Question</title>
<style>
.container--wrap {
background-color: #000000;
border-radius: 15px;
margin: 5px;
overflow: hidden;
justify-content: stretch;
align-items: flex-end;
}
.scroller2{
height: 250px;
overflow-y: scroll;
}
.circle {
position: relative;
margin-bottom: 40px;
height: 20px;
display: flex;
align-items: center;
}
.circle::before {
content:"";
display: inline-block;
width: 20px;
height: 20px;
border-radius: 50%;
margin-right: 5px;
}
.circle::after {
position: absolute;
content: '';
left: 7.5px;
top: 20px;
width: 5px;
background: #4d4d4d;
height: 40px;
}
.minor::before {
background-color: purple;
}
.major::before {
background-color: red;
}
.gray::before {
background-color: gray;
}
.tlbtn {
background-color: #343434;
border-radius: 10px;
color: white;
padding: 10px 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
cursor: pointer;
font-family: robotobold;
}
#tltitle,.tlbtn{
display: inline-flex;
}
</style>
</head>
<body>
<script>
function btn1Click() {
document.getElementById("btn1").style.backgroundColor="#5c5c5c";
document.getElementById("btn2").style.backgroundColor="#343434";
}
function btn2Click() {
document.getElementById("btn2").style.backgroundColor="#5c5c5c";
document.getElementById("btn1").style.backgroundColor="#343434";
}
</script>
<div class="container--wrap-scroll scroller2" id="timeline">
<p id="tltitle" style="color: #D4E1E4; font-size: 20px; text-align: left; padding-top: 0px; padding-right: 10px;color: black;"><b>Timeline</b></p>
<div id="btn1" class="tlbtn" style="margin-bottom: -10px; background-color: #5c5c5c;" onclick="btn1Click();"><text style="font-size: 15px; font-family: robotobold;text-align: center;">Newest</text></div>
<div id="btn2" class="tlbtn" style="margin-bottom: -10px;" onclick="btn2Click();"><text style="font-size: 15px; font-family: robotobold; text-align: center;">Oldest</text></div>
<div class="circle major "><text style="color:red; font-family:robotolight; font-size: 12px;">Major Event | Yesterday</text></div>
<div class="circle gray"><text style="color:black; font-family:robotolight; font-size: 12px;">Information | 2 days ago</text></div>
<div class="circle gray"><text style="color:black; font-family:robotolight; font-size: 12px;">Information | 1 week ago</text></div>
<div class="circle minor"><text style="color:purple; font-family:robotolight; font-size: 12px;">Minor Event | 1 month ago</b></text></div>
</div>
</body>
</html>
When 'Oldest' is pressed, I would like the order of the div elements to reverse sort - please notice that the last circle has a line which goes below it, and I would like this to stay the same:
e.g. Major Event will be at the bottom when OLDEST is pressed and have a grey line below it as well.
Is there a way I can do this?
Screenshot:

If you want to use only CSS, you could try using Flexbox and switching between flex-direction column and column-reverse:
const timeline = document.getElementById('timeline');
const newestButton = document.getElementById('button--newest-first');
const oldestButton = document.getElementById('button--oldest-first');
newestButton.onclick = () => {
timeline.classList.remove('timeline--oldest-first');
timeline.classList.add('timeline--newest-first');
oldestButton.classList.remove('button--selected');
newestButton.classList.add('button--selected');
};
oldestButton.onclick = () => {
timeline.classList.add('timeline--oldest-first');
timeline.classList.remove('timeline--newest-first');
oldestButton.classList.add('button--selected');
newestButton.classList.remove('button--selected');
};
body {
margin: 0;
padding: 8px;
font-family: monospace;
font-size: 14px;
}
.header {
display: flex;
padding-bottom: 8px;
margin-bottom: 16px;
align-items: center;
border-bottom: 2px solid black;
}
.title {
margin-right: auto;
}
.button {
font-family: monospace;
font-size: 14px;
border-radius: 2px;
padding: 4px 8px;
margin-left: 8px;
cursor: pointer;
border: 0;
outline: none;
border: 2px solid black;
background: transparent;
}
.button--selected {
background: yellow;
}
.timeline {
list-style: none;
margin: 0;
padding: 0;
display: flex;
}
.timeline--newest-first {
flex-direction: column;
}
.timeline--oldest-first {
flex-direction: column-reverse;
}
.circle {
position: relative;
margin-bottom: 16px;
height: 20px;
display: flex;
align-items: center;
}
.timeline--newest-first > .circle:last-child,
.timeline--oldest-first > .circle:first-child {
margin-bottom: 0;
}
.circle::before {
content:"";
display: inline-block;
width: 16px;
height: 16px;
border-radius: 50%;
margin-right: 16px;
border: 2px solid black;
}
.circle::after {
position: absolute;
content: '';
left: 9px;
top: 20px;
width: 2px;
background: #000;
height: 16px;
}
.timeline--newest-first > .circle:last-child::after,
.timeline--oldest-first > .circle:first-child::after {
display: none;
}
.minor::before {
background-color: purple;
}
.major::before {
background-color: red;
}
.gray::before {
background-color: gray;
}
<header class="header">
<strong class="title">TIMELINE</strong>
<button id="button--newest-first" class="button button--selected">
NEWEST
</button>
<button id="button--oldest-first" class="button">
OLDEST
</button>
</header>
<ul class="timeline timeline--newest-first" id="timeline">
<li class="circle major ">
Major Event | Yesterday
</li>
<li class="circle gray">
Information | 2 days ago
</li>
<li class="circle gray">
Information | 1 week ago
</li>
<li class="circle minor">
Minor Event | 1 month ago
</li>
</ul>

Font Awesome icons don't align

Hey I have a problem with aligning my FA icons to buttons. I don't know why this happens I've been roughly following a tutorial and doing some stuff that I'm capable of figuring out on my own but I can't seem to find a solution for my problem.
This is what it does
Here is my HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css" integrity="sha256-h20CPZ0QyXlBuAw7A+KluUYx/3pK+c7lYEpqLTlxjYQ=" crossorigin="anonymous" />
<link href="./style.css" rel="stylesheet"/>
<link href="https://fonts.googleapis.com/css2?family=Bree+Serif&display=swap" rel="stylesheet">
<title>To Do List</title>
</head>
<body>
<head>
<h1>To Do List</h1>
</head>
<form>
<input type="text" class="todo-input">
<button class="todo-button">
<i class="fas fa-plus-square"></i>
</button>
</form>
<div class="todo-container">
<ul class="todo-list"></ul>
</div>
<script src="./app.js"></script>
</body>
</html>
CSS
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
/*background-image: linear-gradient(120deg, #f6d365, #fda08f);*/
background-color: #5cdb95;
color: #0b0c0b;
font-family: "Bree Serif";
min-height: 100vh;
}
h1{
font-size: 2rem;
display: flex;
justify-content: center;
align-content: center;
}
form{
padding-top: 2rem;
display: flex;
justify-content: center;
align-content: center;
}
form input, form button{
padding: 0.5rem;
font-size: 2rem;
border: none;
background: #edf5e1;
}
form button{
color: #5cdb95;
background: #edf5e1;
cursor: pointer;
transition: all 0.3s ease;
}
form button :hover{
color: #46a771;
}
.todo-container {
display: flex;
justify-content: center;
align-items: center;
}
.todo-list {
min-width: 50%;
list-style: none;
}
.todo {
margin: 0.5rem;
background: #379683;
border-radius: 10px;
text-align: left;
padding-left: 10px;
font-size: 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.todo li{
flex: 10%;
}
.trash-btn, .complete-btn {
background: #5cdb95;
color: #edf5e1;
font-size: 1rem;
padding: 20px;
margin: 4px 2px;
height: 8px;
width: 8px;
border-radius: 50%;
border: none;
cursor: pointer;
}
.trash-btn{
color: rgb(233, 47, 78);
font-size: 2rem;
}
.trash-btn i{
vertical-align: middle;
display: inline-block;
margin-right: 15px;
}
.complete-btn{
color: steelblue;
font-size: 2rem;
}
/*
.trash-btn, .complete-btn {
background-color: #4CAF50;
border: none;
color: white;
padding: 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
border-radius: 50%;
}
.trash-btn, .complete-btn :hover{
cursor: pointer;
}
.fas fa-fa-check :hover{
cursor: pointer;
}
*/
And JS
//selectors
const todoInput = document.querySelector(".todo-input");
const todoButton = document.querySelector(".todo-button");
const todoList = document.querySelector(".todo-list");
//event listeners
todoButton.addEventListener('click', addTodo);
//functions
function addTodo(event){
//prevent form from submitting
event.preventDefault();
//todo div
const todoDiv = document.createElement("div");
todoDiv.classList.add("todo");
//create li
const newTodo = document.createElement("li");
newTodo.innerText = "hey";
newTodo.classList.add("todo-item");
todoDiv.appendChild(newTodo);
//completed button
const completedButton = document.createElement("button");
completedButton.innerHTML = '<i class="fa fa-check"></i>';
completedButton.classList.add("complete-btn");
todoDiv.appendChild(completedButton);
//trash button
const trashButton = document.createElement("button");
trashButton.innerHTML = '<i class="fa fa-minus-circle"></i>';
trashButton.classList.add("trash-btn");
todoDiv.appendChild(trashButton);
//append to list
todoList.appendChild(todoDiv);
}
It's not finished but I can't stand the way it displays the buttons.

You can you pattern position relative/absolute by
.fa-check, .fa-minus-circle{
position: absolute;
top: 5px;
left: 5px;
}
.trash-btn, .complete-btn {
background: #5cdb95;
color: #edf5e1;
font-size: 1rem;
padding: 20px;
margin: 4px 2px;
height: 8px;
width: 8px;
border-radius: 50%;
border: none;
cursor: pointer;
position: relative;
}
JSFiddle https://jsfiddle.net/viethien/zp5bv0sn/16/

Try this CSS:
*{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body{
/*background-image: linear-gradient(120deg, #f6d365, #fda08f);*/
background-color: #5cdb95;
color: #0b0c0b;
font-family: "Bree Serif";
min-height: 100vh;
}
.fa {
margin-left: -16px;
margin-top: -16px;
position: absolute;
}
h1{
font-size: 2rem;
display: flex;
justify-content: center;
align-content: center;
}
form{
padding-top: 2rem;
display: flex;
justify-content: center;
align-content: center;
}
form input, form button{
padding: 0.5rem;
font-size: 2rem;
border: none;
background: #edf5e1;
}
form button{
color: #5cdb95;
background: #edf5e1;
cursor: pointer;
transition: all 0.3s ease;
}
form button :hover{
color: #46a771;
}
.todo-container {
display: flex;
justify-content: center;
align-items: center;
}
.todo-list {
min-width: 50%;
list-style: none;
}
.todo {
margin: 0.5rem;
background: #379683;
border-radius: 10px;
text-align: left;
padding-left: 10px;
font-size: 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.todo li{
flex: 10%;
}
.trash-btn, .complete-btn {
background: #5cdb95;
color: #edf5e1;
font-size: 1rem;
padding: 20px;
margin: 4px 2px;
height: 8px;
width: 8px;
border-radius: 50%;
border: none;
cursor: pointer;
}
.trash-btn{
color: rgb(233, 47, 78);
font-size: 2rem;
}
.trash-btn i{
vertical-align: middle;
display: inline-block;
margin-right: 15px;
}
.complete-btn{
color: steelblue;
font-size: 2rem;
}
/*
.trash-btn, .complete-btn {
background-color: #4CAF50;
border: none;
color: white;
padding: 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
border-radius: 50%;
}
.trash-btn, .complete-btn :hover{
cursor: pointer;
}
.fas fa-fa-check :hover{
cursor: pointer;
}
*/

The problem is with your style
.trash-btn i
And the style you added to the buttons. Find the refactored style below
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
/*background-image: linear-gradient(120deg, #f6d365, #fda08f);*/
background-color: #5cdb95;
color: #0b0c0b;
font-family: "Bree Serif";
min-height: 100vh;
}
h1 {
font-size: 2rem;
display: flex;
justify-content: center;
align-content: center;
}
form {
padding-top: 2rem;
display: flex;
justify-content: center;
align-content: center;
}
form input,
form button {
padding: 0.5rem;
font-size: 2rem;
border: none;
background: #edf5e1;
}
form button {
color: #5cdb95;
background: #edf5e1;
cursor: pointer;
transition: all 0.3s ease;
}
form button :hover {
color: #46a771;
}
.todo-container {
display: flex;
justify-content: center;
align-items: center;
}
.todo-list {
min-width: 50%;
list-style: none;
}
.todo {
margin: 0.5rem;
background: #379683;
border-radius: 10px;
text-align: left;
padding-left: 10px;
font-size: 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
}
.todo li {
flex: 10%;
}
.trash-btn,
.complete-btn {
background: #5cdb95;
color: #edf5e1;
font-size: 1rem;
margin: 4px 2px;
height: 40px;
width: 40px;
border-radius: 50%;
border: none;
cursor: pointer;
}
.trash-btn {
color: rgb(233, 47, 78);
font-size: 2rem;
}
.complete-btn {
color: steelblue;
font-size: 2rem;
}
/*
.trash-btn, .complete-btn {
background-color: #4CAF50;
border: none;
color: white;
padding: 20px;
text-align: center;
text-decoration: none;
display: inline-block;
font-size: 16px;
margin: 4px 2px;
border-radius: 50%;
}
.trash-btn, .complete-btn :hover{
cursor: pointer;
}
.fas fa-fa-check :hover{
cursor: pointer;
}
*/