<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<style>
body {
text-align: center;
font-family: sans-serif;
display: flex;
flex-direction: column;
align-items: center;
}
#unsplashImage {
max-height: 500px;
border: 20px solid black;
transform: rotate(3deg);
}
h1 {
font-size: 56px;
}
.imageDetails {
background-color: black;
margin-top: 50px;
padding: 10px;
color: white;
text-decoration: none;
font-weight: bold;
width: fit-content;
}
.imageDetails a {
color: #FFF;
}
</style>
<body>
<div class="imageContainer">
<a id="imageLink" href="#">
<img alt="" id="unsplashImage" />
</a>
</div>
<script>
let clientId = "MITl6hg33kb2Noixd7Zc0c7n8uURvDsfy0tqeMhuKGw"
let endpoint = `https://api.unsplash.com/search/photos?query=cars&client_id=${clientID}` ;
let imageElement = document.querySelector("#unsplashImage");
let imageLink = document.querySelector("#imageLink");
fetch(endpoint)
.then(function (response) {
return response.json();
})
.then(function (jsonData) {
console.log(jsonData);
imageElement.src = jsonData.urls.regular;
imageLink.setAttribute("href", jsonData.links.html);
})
</script>
</body>
</html>[
](https://)
When you bring up your Console, do you see any errors? 
For some background on the Console, in case you need it: Console Logging Basics
ok thank you
What kind of project are you building? Is it a web app? If so, please show me what you see in your browser console
(If you are just building a static web app and not an ASP.net app, you may want to try a different project template in Visual Studio that does minimal build-time processing!)
Can you share your browser’s console output?
ok
I don’t think you have shared your console output yet! That is a screenshot of the page itself. You bring it up through your browser’s built-in developer tools, and this article explains how you can bring it up: Console Logging Basics
That helps! Based on the error message, in your code, you have the clientID variable lowercased as clientId. If you address that, this error will go away.
ok thank you
When you click on the 1.html:66 link in the console, what line is getting highlighted?
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading ‘regular’)
like this i am getting the above error …
imageElement.src = jsonData.urls.regular;------for this line
The reason is that your API call isn’t using the random path, which is what this example is built around. You are querying for “cars”, which returns a JSON object that is quite different and won’t have the urls property on it.
For working with the cars query, here is how your script should be modified:
let clientID = "MITl6hg33kb2Noixd7Zc0c7n8uURvDsfy0tqeMhuKGw"
let endpoint = `https://api.unsplash.com/search/photos?query=cars&client_id=${clientID}`;
let imageElement = document.querySelector("#unsplashImage");
let imageLink = document.querySelector("#imageLink");
fetch(endpoint)
.then(function (response) {
return response.json();
})
.then(function (jsonData) {
console.log(jsonData);
imageElement.src = jsonData.results[0].urls.regular;
imageLink.setAttribute("href", jsonData.results[0].links.html);
});
Below, you can see how I used the console to inspect this and figure out what to display
thank you …but i was not getting achanging image when i refreshed the page i still getting the same image only
