I've been working on this webapp for my wife, it's very simple, basically when she clicks on a button a random "You're awesome" style message will pop up.
My first implementation was a simple button that when pressed, a message and picture would show up, it worked perfectly. (Code below)
document.getElementById("paulaBtn").addEventListener("click", displayMsg);
const unicorn = document.createElement("img");
unicorn.setAttribute("src", "unicorn.jpg");
function displayMsg() {
document.getElementById("displayMsg").innerHTML = "the most beautiful unicorn in the world!",
document.getElementById("displayMsg").appendChild(unicorn);
}
Then I tried to make it more complicated by generating a random number (rdmInt) when she clicks the button, and using an if else loop to check rdmInt against numbers and display a message based on the number.
I am new to JS and I've spent several hours reading and learning but I haven't managed to get it to work, I'm guessing I'm missing something silly.
The random number is correctly generated onclick (I can see it on console.log) so the problem has to do with checking it against the other numbers I guess. Thanks in advance for any help and tips.
JAVASCRIPT
function rndInt() {
let rndInt = Math.floor(Math.random() * 2);
console.log(rndInt)
};
let x = rndInt;
const unicorn = document.createElement("img");
unicorn.setAttribute("src", "unicorn.jpg");
const art = document.createElement("img");
art.setAttribute("src", "artist.gif");
if (x === 0) {
function displayMsg() {
document.getElementById("displayMsg").innerHTML = "the most beautiful unicorn in the world!",
document.getElementById("displayMsg").appendChild(unicorn);
}console.log(rndInt)
} else if (x === 1) {
function displayArt() {
document.getElementById("displayArt").innerHTML = "an awesome artist",
document.getElementById("displayArt").appendChild(art);
}
}CSS
*{
margin: 0px;
padding: 0px;
font-family: sans-serif;
}
body{
display: grid;
grid-template-rows: 14vh 10vh 60vh auto auto;
height: 100vh;
background-image: url('back.jpg');
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
font-family: sans-serif;
}
.back{
background-image: url("back.jpg");
height: max-content;
}
h1 {
display: grid;
text-align: center;
font-size: 7vh;
color: pink;
font-family: sans-serif;
padding: 4vh;
padding-bottom: 0;
}
#reset {
display: grid;
place-items: center;
text-align: center;
position: absolute;
bottom: 2em;
margin: 0;
background-color: pink;
padding: 0.3rem;
border: none;
display: grid;
place-items: center;
}
img{
width: 95%;
height: auto;
margin: 0 auto;
}
#displayMsg{
display: grid;
place-items: center;
text-align: center;
font-size: 20px;
}
#displayArt{
display: grid;
place-items: center;
text-align: center;
font-size: 20px;
}
a,
button {
font-family: sans-serif;
font-size: 20px;
}
.paulaBtn{
display: grid;
place-items: center;
position: relative;
margin: 0;
width: 100vw;
text-align: center;
}
.paulaBtn li:hover {
background-color: rgb(197, 173, 181);
}
.paulaBtn a {
color: black;
text-decoration: none;
}
#paulaBtn{
display: grid;
place-items: center;
background-color: pink;
padding: 0.5rem;
border: none;
}
.button{
display: grid;
width: 100vw;
height: 3rem;
}
.button {
display: grid;
place-items: center;
}<!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="style.css"></link>
<title>Document</title>
</head>
<body>
<h1>Hello Paula</h1>
<div onclick="rndInt()" class="paulaBtn">
<button id="paulaBtn">Paula is</button>
</div>
<p id="displayMsg"></p>
<p id="displayArt"></p>
</body>
<script src="script.js"></script>
</html>
Aucun commentaire:
Enregistrer un commentaire