I went on W3 school website where they say that in order to center an element horizontally I must set the margin to 0 and set the width to any value but 100%. Which I did. I mean I set the width to 50%. Yet my button isn't centered. Help please. Also if you know how to center an element vertically too, please drop me a line.
const image = document.getElementById("image");
const btn = document.getElementById("btn");
const people = ["pierre", "paul", "jacques", "henry" ];
const date = new Date().getDay();
const daysOfWeek = Array.from({length: 7}, (item, i) => {
return new Date(0,0,i).toLocaleDateString("en-US", {weekday: "long"})
})
var today = daysOfWeek[date];
const names = {
"Monday": "emilie",
"Tuesday": "emilie",
"Wednesday": "jessica",
"Thursday": "jessica",
"Friday": "paul",
"Saturday": "paul",
"Sunday": "pierre",
}
btn.addEventListener("click", function() {
date >= 0 && date < 2 ? personPaying = `today is ${today} so ${names[today]} is footing the bill`
: date >= 2 && date < 4 ? personPaying = `today is ${today} ${names[today]} is paying`
: date >= 4 && date < 6 ? personPaying = `Hi ${names[today]}, today is ${today} so although we are in Amsterdam we're not going ducth`
: personPaying = `Hi ${names[today]}, today is ${today}, your turn to pay today`
btn.style.display = "none";
<!-- message to the person paying -->
let message = document.getElementsByClassName("message")[0];
message.style.display = "block";
message.textContent = personPaying;
<!--avatar of person paying -->
image.src = `picture/${names[today]}.png`;
image.alt = "picture of an avatar";
<!--displaying <i/> tags -->
var unseenArray = [...document.getElementsByClassName("unseen")]
unseenArray.map(x => x.style.display = "inline");
<!--displaying containers and setting height -->
let containers = document.getElementsByClassName("containers");
for (var i = 0; i < containers.length; i++) {
containers[i].style.display = "block";
}
for (var i = 0; i < containers.length; i++) {
containers[i].style.height = "920px";
}
<!-- floating divs with class container to left -->
for(var i = 0; i < containers.length; i++) {
containers[i].style.cssFloat = "left"
}
document.getElementsByTagName("h1")[0].textContent = `Hi ${names[today]} select you mehtod of payment`
}, false);button {
box-shadow: 5px 10px;
font-family: 'Krona One', "sans-serif";
font-size: 30px;
font-weight: light;
padding: 10px;
transition: 0.5s;
width: 50%;
margin: auto;
}
button:hover {
box-shadow: 5px 10px;
}
body {
background-color: rgb(180, 180, 180);
background-repeat: no-repeat;
background-position: right top;
background-attachment: fixed;
background-size: auto;
}
.message {
border-style: inset;
border-width: medium;
border-radius: 15px;
box-shadow: 5px 10px;
display: none;
padding: 20px;
text-align: center;
background-color: rgb(250, 250, 250);
font-family: "Copperplate", "Papyrus", "fantasy";
font-size: 50px;
font-variant: "small-caps";
margin: 100px 50px 75px 100px;
}
div.containers {
width: 400px;
height: 400px;
margin: 50px;
display: none;
}
i.unseen {
display: none;
max-width: 100px;
margin-top: 15px;
}
img {
box-shadow: 5px 10px;
width: 30%;
float: right;
top: 0px;
}
h1 {
font-family: "Copperplate", "Papyrus", "fantasy";
}<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Who's buying today</title>
<link rel="stylesheet" href="index.css">
<link rel="preconnect" href="https://fonts.gstatic.com"><link href="https://fonts.googleapis.com/css2?family=Krona+One&display=swap" rel="stylesheet">
<script src="https://kit.fontawesome.com/2da085e01f.js" crossorigin="anonymous"></script>
</head>
<body>
<button id="btn" type="submit">who's paying</button>
<div class="containers">
<div class="message"></div>
<img id="image" src="">
</div>
<div class="containers">
<h1></h1>
<a href="form.html"><i class="fab fa-cc-visa unseen"></i></a>
<i class="far fa-money-bill-alt unseen"></i>
</div>
<script src="index.js" type="text/javascript"></script>
</body>
</html>
