I am new to programming.
My question is the following:
Is there some kind of template for subpages, for example on the homepage of the website.
I would like to create a few sub-pages that have the same structure, but deal with a different topic.
Is there something I can read into or something I can find out about?
PHP is a programming language and it is also a template engine. There are several ways to tackle the problem you have outlined.
Index.php would look like this:
<!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>
</head>
<body>
<h1>Hello</h1>
<div>Lions</div>
<div>Narwhals</div>
<div>Chimps</div>
<div>Hawk</div>
</body>
</html>
topic.php
<?php
class TopicData
{
// Use a static function to get the data for a keyword
public static function text($keyword){
$file = "topics.json";
// If the file doesn't exist, just say there is no data
if ( ! file_exists($file) ) {
return "No information on topic";
}
$topics = json_decode(file_get_contents($file));
$text = $topics->{$keyword} ?? "No information on topic";
return $text;
}
}
$text = TopicData::text($_GET['a']);
?>
<!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>
</head>
<body>
<div style="">
<?= $text ?>
</div>
</body>
</html>
topic.json
I use a json file to store some test data.
{
"lions": "Lions go here",
"narwhals": "Narwhals have tusks",
"chimps": "Chimps can't read",
"hawk": "Hawks fly iini the day time"
}
Related
I tried using Local Storage to store a variable to determine if a button can be used or not. This however is not working at all like I expected. Why is the Item getting shown as "null" and why is the console.log not working?
Index.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">
<title>index.html</title>
<script>
localStorage.setItem('status', 'unused')
console.log(localStorage.getItem('status'))
let usedButton = () => {
localStorage.setItem('status', 'used')
console.log(localStorage.getItem('status'))
window.location.replace('index2.html')
}
</script>
</head>
<body>
<button onclick="usedButton()">Use me</button>
</body>
</html>
index2.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">
<title>index2.html</title>
<script>
console.log(localStorage.getItem('status'))
let isButtonUsed = () => {
if(localStorage.getItem('status') == 'used'){
console.log('I was already used')
}
}
</script>
</head>
<body>
<button onclick="isButtonUsed()">Am I used?</button>
</body>
</html>
I tried making it so that the Button on index.html changes the localStorage variable status from 'unused' to 'used'. But on the 2nd page it is showing up as null and so the function is not working. I don't know how I can get a Button to work on one page and by clicking it disabling other buttons on other pages you redirect to.
Thank you in advance for your help.
I have an assignment where I have to change h1 to whatever is written in the input. I have to do this through making a function with getElementByID.
This is what I have so far
<!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>Change Text</title>
</head>
<body>
<h1 id="Header">Change header</h1>
<p>Use the input to change the header.</p>
<input type="text" oninput="changeh1(this.value)" />
<script>
function changeh1(newtext) {
document.getElementById("Header").textContent=
}
</script>
</body>
</html>
You passed the value (newtext) to your function but never used it:
<!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>Change Text</title>
</head>
<body>
<h1 id="Header">Change header</h1>
<p>Use the input to change the header.</p>
<input type="text" oninput="changeh1(this.value)" />
<script>
function changeh1(newtext) {
document.getElementById("Header").textContent=newtext;
}
</script>
</body>
</html>
Try changing your script to this:
function changeh1(newtext) {
document.getElementById("Header").innerText = newtext;
}
<script>
function changeh1(newtext) {
document.getElementById("Header").textContent = newtext;
}
</script>
The textContent API is useful to get and also set the text content of a node. In your original code, you did not set the content of the Node you were trying to modify (the header, h1). To fix it, just set it to the argument of the callback function you defined. In the DOM, you are passing this.value as the argument for newtext
<!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>Change Text</title>
</head>
<body>
<h1 id="Header">Change header</h1>
<p>Use the input to change the header.</p>
<input type="text" oninput="changeh1(this.value)" />
<script>
function changeh1(newtext) {
document.getElementById("Header").textContent = newtext
}
</script>
</body>
</html>
hi i am trying to convert my html code into an image
this i my python code:
def cnv2image():
options = {
"--enable-local-file-access": None,
"--enable-javascript": None,
"--javascript-delay": 10000,
"--debug-javascript": None
}
imgkit.from_file("tweet_embed.html", "result.pdf", options)
and this is my html code:
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
name="viewport">
<meta content="ie=edge" http-equiv="X-UA-Compatible">
<meta content="text/html; charset=utf-8" http-equiv="Content-type">
<meta content="jpg" name="imgkit-format">
<script async charset="utf-8" src="https://platform.twitter.com/widgets.js"></script>
<title>Document</title>
</head>
<body>
<blockquote class="twitter-tweet" data-theme="dark"><p dir="ltr" lang="en">be honest, do you kiss your dog goodnight?</p>— ᴘᴀᴠʟᴏᴠ ᴛʜᴇ ᴄᴏʀɢɪ 🐶 (#PAVGOD) August 18, 2021</blockquote>
</body>
</html>
the problem is that when i try to convet html to image js wont get load and i get a screenshot only from html
this is the result that i get:
this is what i expect:
I want to make a javascript program to activate something which requires some time to compute a animated screen pop ups while computing/loading. My Problem is I don't know how to achieve this in JS using async code. I have my approaches like this on where I just created a element into the website via javascript animated via CSS and when the computation was finished closed via javascript, but nothing happened. The idea was kind of like this:
document.getElementById("BTN").addEventListener("click",async function(){
document.getElementById("example").style.display = "block";
//Some Computing...
document.getElementById("example").style.display = "none";
});
#example{
display: none;
}
<!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>
<div id = "example">Lädt</div>
<button id = "BTN">Button</button>
</body>
</html>
So what is wrong with this approach?
It's likely that your entire code block is executed in one go, including setting the loading element visible and invisible afterwards, without giving the browser time to actually update the rendered page to show the loading element.
One way to modify your code would be:
document.getElementById("BTN").addEventListener("click",async function(){
document.getElementById("example").style.display = "block";
setTimeout(function() {
//Some Computing...
document.getElementById("example").style.display = "none";
}, 0);
});
This should allow the browser to update the page before going into the computation.
You should access after loading window.
<!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>
<script>
window.onload = function(){
document.getElementById("BTN").addEventListener("click",async function(){
document.getElementById("example").style.display = "block";
//Some Computing...
document.getElementById("example").style.display = "none";
})
};
</script>
</head>
<body>
<div id = "example">Lädt</div>
<button id = "BTN">Button</button>
</body>
</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>
<div id = "example">Lädt</div>
<button id = "BTN">Button</button>
</body>
<script>
document.getElementById("BTN").addEventListener("click",async function(){
document.getElementById("example").style.display = "block";
//Some Computing...
document.getElementById("example").style.display = "none";
})
</script>
</html>
I get the whole HTML code from JSON using Ajax , The fetched string looks like :
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
..
</head>
<body>
<div class="container">
...
</div>
<div id="overlay"></div>
<script></script>
..
</body>
</html>
I want to get the whole code from the div with class container <div class="container"> to this one <div id="overlay"></div>.
How to accomplish that so that I just get the html part I want from the <body> not the whole string?
<script>
(function(window, document){
// `res` is the ajax response string
const res = `<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<div class="container">
stuff from container.
</div>
<div id="overlay"></div>
</body>
</html>`;
const wrapper = document.createElement("div");
wrapper.innerHTML = res;
let str = '';
str+=wrapper.querySelector("div.container").outerHTML;
str+=wrapper.querySelector("div#overlay").outerHTML;
alert(str);
})(window, document);
</script>