Im trying to scale images from an API in JS but for some reason the images are not appearing in my grid items. Ive tried using "width: 2em" to see if it would do anything, but nothing is happening. The error is in the loadPrices function and its directly coming from the line that starts with output += .Any help would be greatly appreciated!
//For Cryptocurrency Prices (CoinRanking)
const key = 'XXXX';
const url = 'https://api.coinranking.com/v2/coins?' + key;
//For Tech News (NewsData.IO)
const key2 = 'XXXX'
const url2 = 'https://newsdata.io/api/1/news?apikey=' + key2 +'&category=technology,business,science&language=en'
//For Search Page
const politicsData = 'https://newsdata.io/api/1/news?apikey=' + key2 +'&category=politics&language=en'
const headlinesData = 'https://newsdata.io/api/1/news?apikey=' + key2 +'&category=top&language=en'
const cryptoData = 'https://newsdata.io/api/1/crypto?apikey=' + key2 +'&language=en'
const businessData = 'https://newsdata.io/api/1/news?apikey=' + key2 +'&category=business,technology&language=en'
//Loads Crypto Data
async function loadPrices() {
const response = await fetch(url);
const coins = (await response.json()).data.coins;
const helloElm = document.getElementById("hello");
// loop through all coins
let output = '';
for (var coin of coins) {
output += " <center> <div class = grid-container> <div class=grid-item>" + "<svg src= " + coin["iconUrl"] + "width: 2em ></svg>" + "</br>" + coin["name"] + " { " + coin["rank"] + " }" + "<br />" + coin["symbol"] +"<br />" + "Current Price:" + "<b> $" + coin["price"] +"</b>" + "<br />" + "Market Cap:" + "<b> $" + coin["marketCap"] + "</b> <br />" + "24hr Volume: " + "<b> $" + coin["24hVolume"] + "</b>" + "<br />" + "Change: " + "<b>" +coin["change"] + "</b> <br />" + "<a href=" + coin["coinrankingUrl"] + ">Want to learn more?</a> " + "</div> </div> </center>" ;
}
helloElm.innerHTML = output
}
//Loads crypto
async function GetNews() {
const response = await fetch(url2);
const news = (await response.json()).results;
const helloElm = document.getElementById("goodbye");
// loop through all news
let output = '';
for (var newNews of news) {
output += "<center> <div class = grid-container> <div class=grid-item <br />" + "<b> <u>"+ "<img src= " + newNews["image_url"] + "width= 156 height=156>" + "<br />" + newNews["title"] + "</u> </b>" + "<br />" + "<br />" + "Publisher: " + newNews["source_id"] + "<br />" + "<a href=" + newNews["link"] + ">Want to view the article?</a>" + "</div> </div> </center>";
}
helloElm.innerHTML = output
}
async function SearchQuery(){
const response1 = await fetch(politicsData);
const response2 = await fetch(headlinesData);
const response3 = await fetch(cryptoData);
const response4 = await fetch(businessData);
const p = (await response1.json()).results;
const h = (await response2.json()).results;
const c = (await response3.json()).results;
const b = (await response4.json()).results;
} .topnav {
background-color: grey;
overflow: hidden;
height: 60px;
}
.topnav {
overflow: hidden;
background-color: #e9e9e9;
}
/* Style the links inside the navigation bar */
.topnav a {
float: left;
display: block;
color: black;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 25px;
width: 200px;
height: 200px;
}
/* Change the color of links on hover */
.topnav a:hover {
background-color: #ddd;
color: black;
}
/* Style the "active" element to highlight the current page */
.topnav a.active {
background-color: #2196F3;
color: white;
}
.grid-container {
display: grid;
grid-template-columns: auto ;
padding: 5px;
width: 1000px;
}
.grid-item {
width: 50x;
height: 500px;
background-color: lightgrey;
border: 5px solid rgb(5, 8, 5);
border-radius: 20px;
padding: 50px;
margin: 20px;
font-size: 50px;
}
.column {
float: center;
width: 33.3%;
margin-bottom: 16px;
padding: 0 8px;
}
/* Dropdown Button */
.dropbtn {
background-color: #04AA6D;
color: white;
padding: 25px;
font-size: 25px;
border: none;
}
/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
margin-top: 0%;
}
/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: center;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
font-size: 25px;
}
/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd;}
/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {display: block;}
/* Change the background color of the dropdown button when the dropdown content is shown */
.dropdown:hover .dropbtn {background-color: #3e8e41;}
.header{
width: 25%;
font-size: 25px;
padding: 12px 16px;
position: center;
background-color: lightgray;
}
#grid-item1 {
width: 25%;
background-color: lightgrey;
border: 5px solid rgb(5, 8, 5);
border-radius: 20px;
padding: 50px;
margin: 20px;
font-size: 25px;
}<!DOCTYPE html>
<html>
<body>
<script src="Home.js"></script>
<link rel="stylesheet" href="homeStyle.css">
<body style="background-color:rgb(2, 2, 2);" >
<div class="topnav">
<a class="active" href="home.html">Crypto Prices</a>
<a href="news.html">Tech News </a>
<a href="search.html">Search</a>
</div>
<div id = "hello">
<center><button style="cursor: pointer;padding: 2px 4px;border: 5px solid rgb(255, 255, 255); background:#30a343;color:white;font-size : 25px; width: 25%; height: 100px;" onclick="loadPrices()">View Currency Rankings!</button></center>
</div>
</body>
</html>
!
