Edit: This question has a silly mistake which I didn't check before, and now I am not able to delete this question, PLEASE IGNORE.
I've created a simple website following a tutorial, which mainly does two very simple things
1). Changes the image whenever we click on it.
2). Asks every time, the user for their Name.
HTML
<html>
<head>
<meta charset="utf-8">
<title>The Great Himalayas</title>
<link href="styles/style.css" rel="stylesheet">
<link href="https://fonts.googleapis.com/css2?family=Josefin+Slab&display=swap" rel="stylesheet">
</head>
<body>
<h1>Himalayas</h1>
<img src="images/himalayas.jpg" alt="Image showing himalayan mountains">
<p>Image by <a href="https://pixabay.com/users/12019-12019/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=81244">David Mark</a> from <a href="https://pixabay.com/?utm_source=link-attribution&utm_medium=referral&utm_campaign=image&utm_content=81244">Pixabay</a></p>
<p>The majestic Himalayas: An escape to the heaven, the dwelling place of our dreams.
The ice covered rock sphears pointing to the ultimate stage of consciousness,
filled with the experience of millions of years, giving us direction to the expanding universe,
where one seeks truth, because of the maze-valleys leading us to the exceptional realities,
we don't know whether they are gigantic or atomic since everything is insignificant in the great workings of the universe,
All we can do is just breathe....
</p>
<p>What you want:</p>
<ul>
<li>Mindset</li>
<li>Will Power</li>
<li>Courage</li>
<li>Motivation</li>
</ul>
<p>What you will get!</p>
<ol>
<li>Experience</li>
<li>Learnings</li>
<li>Hope</li>
<li>Beauty</li>
</ol>
<a href="https://www.sciencedirect.com/topics/earth-and-planetary-sciences/himalayas">Learn more about the "almighty's home" here</a>
<button>Change User</button>
<script src="scripts/main.js"></script>
</body>
</html>
CSS
html {
font-size: 10px;
font-family: 'Josefin Slab', serif;
background-color: #A8D0FF;
}
img {
width: 100%;
height: auto;
display: block;
margin: 0 auto;
}
h1 {
font-size: 80px;
text-align: center;
margin: 0;
padding: 30px 0;
color: #A8D0FF;
text-shadow: 3px 3px 1px black;
}
p,li,a {
font-size: 16px;
line-height: 1.5;
letter-spacing: 1px;
}
body {
width: 600px;
margin: 0 auto;
background-color: #CBE3FF;
padding: 0 15px 20px 15px;
border: 5px solid #5CB6D5;
}
JavaScript
let himImg = document.querySelector("img") ;
himImg.onclick = function() {
let himSrc = himImg.getAttribute("src");
if (himSrc === "images/himalayas.jpg")
{
himImg.setAttribute("src","images/himalayas-2.jpg");
}
else
{
himImg.setAttribute("src","images/himalayas.jpg");
}
}
let userButton = document.querySelector("button");
let userHeading = document.querySelector("h1");
//--------------------------------------------------------------------------------------
setUserName();
if(!localStorage.getItem("Name")) {
setUserName();
}
else {
let storedName = localStorage.getItem("Name");
userHeading.textContent = "Go to the Himalayas' " + storedName + " :)";
}
//-----------------------------------------------------------------------------------------
function setUserName() {
let myName = prompt("Plese enter your Name :)");
localStorage.setItem("Name",myName);
userHeading.textContent = "Go to the Himalayas' " + myName + " :)";
}
but in the JavaScript code, we simply do not call the setUserName() function, instead, it runs through a conditional statement (if-else) (as followed through the tutorial).
setUserName();
if(!localStorage.getItem("Name")) {
setUserName();
}
else {
let storedName = localStorage.getItem("Name");
userHeading.textContent = "Go to the Himalayas' " + storedName + " :)";
}
- I think the function of the conditional statement is to only run the setUserName() function ( if() ) when the Name data type does not exist and else when it exists (that is, the user set a user name during a previous visit), we retrieve the stored name using getItem() and set the textContent of the heading to a string, plus the user's name * But every time I refresh the page it again displays the prompt, why? (it may should not as I have already done it previously) I'm stuck, please Help!
Aucun commentaire:
Enregistrer un commentaire