I'm trying to make a connection with the API "https://brasilapi.com.br/api/ibge/uf/v1", but I'm getting the following error:
Refused to load the script
'https://apis.google.com/js/api.js?onload=__iframefcb559688' because
it violates the following Content Security Policy directive:
"script-src 'self' 'wasm-unsafe-eval' 'inline-speculation-rules'".
Note that 'script-src-elem' was not explicitly set, so 'script-src' is
used as a fallback.
This is my HTML 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">
<link rel="stylesheet" href="assets/css/style.css">
<meta http-equiv="Content-Security-Policy" content="upgrade-insecure-requests" />
<script src="https://kit.fontawesome.com/d4c0dbaccd.js" crossorigin="anonymous"></script> ```
This is my js code:
``` async function carregarEstados(){
const APIResponse = await fetch(`https://brasilapi.com.br/api/ibge/uf/v1
`)
if(APIResponse.status === 200){
const data = await APIResponse.json()
console.log(data[1]['sigla'])
for (let index = 1; index <= data.length; index++) {
const doc = `
<option value=${data[index]['sigla']}>${data[index]['sigla']}</option>
`
document.querySelector('#estado').append(doc)
}
}else{
console.log("Algo deu errado")
}
}
Related
So far I've tried using the let method make the GIF a constant and attempting to switch display type is js style function. Can someone guide me into displaying GIF image before API response and hiding it when fetch() is processed.
Html
<!DOCTYPE html>
<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">
<link rel="stylesheet" href="./doggos.css">
<title>Dogs</title>
</head>
<body>
<h1>Doggos</h1>
<button class="add-doggo">Add Doggo</button>
<div class="doggos">
<div class="loader"><img src="./giphy (1).gif"></img></div>
</div>
<script src="./doggos.js"></script>
</body>
</html>
Javascript
const DOG_URL = "https://dog.ceo/api/breeds/image/random";
const doggos = document.querySelector(".doggos");
function addNewDoggo() {
const promise = fetch(DOG_URL);
promise
.then(function(response) {
const processingPromise = response.json(); //This line of code parses the API response into a usuable js object
return processingPromise; //this code returns a new promise and this process is called | PROCESS-CHAINING
})
.then(function(processedResponse) {
const img = document.createElement("img");
img.src = processedResponse.message;
img.alt = "Cute doggo";
doggos.appendChild(img);
});
}
document.querySelector(".add-doggo") .addEventListener("click", addNewDoggo)
I would like to traverse through the elements starting from Log in button up parent from parent up till I find an element with id, or I arrive to the top of the DOM.
https://profile.w3schools.com/signup?redirect_url=https://billing.w3schools.com/courses/html-video-course
I use the following code to create a CSS selector:
function getCssSelector(element) {
if (!(element instanceof Element)) {
console.log("Element is not an Element: " + element)
return;
}
var path = [];
while (element.nodeType === Node.ELEMENT_NODE) {
var selector = element.nodeName.toLowerCase();
if (element.id) {
selector += '#' + element.id;
path.unshift(selector);
break;
} else {
var previousSibling = element,
nth = 1;
while (previousSibling = previousSibling.previousElementSibling) {
if (previousSibling.nodeName.toLowerCase() == selector)
nth++;
}
if (nth != 1)
selector += ":nth-of-type(" + nth + ")";
}
path.unshift(selector);
element = element.parentNode;
}
return path.join(" > ");
}
Whenever I arrive to the form element, the element.parentNode returns null. At his point the path is the following: ["form", "div", "div", "span", "span"]
Looking at the DOM the element has a parent:
But in case I check the source code from the Chrome, I get the following:
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Security-Policy" content="default-src 'none'; connect-src 'self' https://ekr.zdassets.com https://w3schools.zendesk.com https://*.w3schools.com https://*.google-analytics.com https://cognito-idp.us-east-1.amazonaws.com https://*.g.doubleclick.net https://*.google.com https://authapi.w3sdevelop.com https://authapi.w3stages.com https://authapi.w3spaces.com https://2k205wtqq3.execute-api.us-east-1.amazonaws.com https://aydmoags80.execute-api.us-east-1.amazonaws.com https://tryit-api.w3schools.com; script-src 'self' 'unsafe-inline' https://static.zdassets.com/ https://www.googletagmanager.com/ https://www.google-analytics.com/ https://www.google.com/recaptcha/ https://www.gstatic.com/; img-src 'self' https:; style-src 'self' 'unsafe-inline' https://fonts.googleapis.com; font-src https://fonts.gstatic.com; base-uri 'self'; frame-src https://www.google.com/; ">
<meta charset="utf-8">
<link rel="icon" href="favicon.ico">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="theme-color" content="#000000">
<meta name="description" content="Profile pages">
<link rel="apple-touch-icon" href="logo192.png">
<title>W3Schools</title>
<script async="" nonce="f79c2bd4-92db-47cb-a921-fb3dd82e0188" src="https://www.googletagmanager.com/gtag/js?id=UA-3855518-1"/>
<script id="ze-snippet" src="https://static.zdassets.com/ekr/snippet.js?key=41c2038e-584a-4eb0-b6fe-696d291af18b"/>
<script src="datalayer.js"/>
<link href="static/css/2.af63c107.chunk.css" rel="stylesheet">
<link href="static/css/main.b5d8544f.chunk.css" rel="stylesheet"/>
<body>
<noscript>W3Schools Online Web Tutorials</noscript>
<div id="root"/>
<script type="text/javascript">window.zESettings={webWidget:{contactForm:{attachments:!0},color:{launcherText:"#FFFFFF"}}},zE("webWidget","setLocale","en")</script>
<script src="static/js/runtime-main.f3c6b2f6.js"/>
<script src="static/js/2.32a96327.chunk.js"/>
<script src="static/js/main.b4c4cd86.chunk.js"/>
</body>
</html>
It looks like there is some problem with the HTML tags, but the page renders correctly and in dev tools under the elements tab I can see everything correctly.
I tried to look for the answer here on Stackowerflow, but I have not found anything. What can be the problem?
Hi I am in the process of fetching data down from the pokeapi, I can loop them out in the console, but when I send them to the div ID__Pokemon only the last index comes out, what is the best way to loop the pokemon names out in ID__Pokemon ?
let myApp = document.querySelector('#App');
const divPokemon = document.getElementById('ID__Pokemon');
const api_url = 'https://pokeapi.co/api/v2/pokemon/';
const pokemonData = async () => {
const response = await fetch(api_url);
const data = await response.json();
for (const item in data.results) {
let pokemon = data.results[item];+
console.log(pokemon.name);
divPokemon.innerHTML = `Pokemon: ${pokemon.name}`;
}
};
pokemonData();
<!DOCTYPE html>
<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" />
<title>Document</title>
<script src="function.js" defer></script>
</head>
<body>
<div id="App">
<div id="ID__Pokemon"></div>
</div>
</body>
</html>
doing divPokemon.innerHTML = `Pokemon: ${pokemon.name}`; replaces the content with each iteration
Here is an edit of your code which adds a new "li" element to your list, filled with the proper text content
let myApp = document.querySelector('#App');
const divPokemon = document.getElementById('ID__Pokemon');
const api_url = 'https://pokeapi.co/api/v2/pokemon/';
const pokemonData = async () => {
const response = await fetch(api_url);
const data = await response.json();
for (const item in data.results) {
let pokemon = data.results[item];
console.log(pokemon.name);
let newPokemon = document.createElement("li");
newPokemon.innerText = `Pokemon: ${pokemon.name}`;
divPokemon.appendChild(newPokemon);
}
};
pokemonData();
<!DOCTYPE html>
<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" />
<title>Document</title>
<script src="function.js" defer></script>
</head>
<body>
<div id="App">
<div id="ID__Pokemon"></div>
</div>
</body>
</html>
Hi I am trying to create a news app using the newsapi. I have managed to display the headings from the api but cant seem to manage to loop over all the images and be displayed to the screen. If you could show me how this could be done I would very much appreciate this. my code is:
HTML
<!DOCTYPE html>
<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">
<link rel="stylesheet" href="css/main.css">
<title>News App</title>
</head>
<body>
<h2>BBC News</h2>
<span class="newsImage"></span>
<li class = newsList></li>
<script src="js/main.js"></script>
</body>
</html>
JavaScript
const newsList = document.querySelector(".newsList")
const newsImage = document.querySelector(".newsList")
newsImage.innerHTML =''
newsList.innerHTML= ''
var url = 'https://newsapi.org/v2/top-headlines?' +
'sources=bbc-news&' +
'apiKey=**********************';
var req = new Request(url);
fetch(req)
.then(function(response) {
return response.json()
}).then((data)=>{
console.log(data)
data.articles.map(article => {
let li = document.createElement('li')
let a = document.createElement('a')
let image = document.createElement('span')
image.innerHTML = `<img src=${data.articles.urlToImage}>`
a.setAttribute('href', article.url)
a.setAttribute('target','_blank' )
a.textContent = `${article.title}`
li.appendChild(a)
newsList.appendChild(li)
newsImage.appendChild(image)
});
})
I have this javascript code that shows the current status of notification permission:
main.js
var $status = document.getElementById('status');
if ('Notification' in window) {
$status.innerText = Notification.permission;
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<p>Current permission status is
<b id="status">unavailable</b>
</p>
<script src="/scripts/main.js"></script>
</body>
</html>
If I write the same code in a typescript file I am getting this error:
main.ts
var $status = document.getElementById('status');
if ('Notification' in window) {
$status.innerText = Notification.permission;
}
ERROR - Notification.permission
MESSAGE - Property 'permission' not exists on type
'new(title: string, options?: NotificationOptions): Notification;
prototype: Notification;
requestPermission(callback?: NotificationPermissionCallback):
Promise<string>;'
How to ignore this error?
Try casting Notification to the any type to avoid transpiler errors.
if ('Notification' in window) {
$status.innerText = (Notification as any).permission;
}
The other option is to include the Notification type's definition.