Web developer specializing in React, Vue, and front end development.
To add full-screen iframe with a height of 100% with HTML, we make set the width and height to fill the screen width and height.
For instance, we write
<iframe></iframe>
to add an iframe.
Then we write
body {
margin: 0;
}
iframe {
display: block;
background: #000;
border: none;
height: 100vh;
width: 100vw;
}
to remove the margins from the body element.
Then we set the height and width of the iframe to fill the screen’s height and width respectively.
To prevent form from being submitted with JavaScript, we call preventDefault.
For instance, we add a form with
<form>
<button type="submit">Submit</button>
</form>
Then we write
const element = document.querySelector("form");
element.addEventListener("submit", (event) => {
event.preventDefault();
//...
console.log("Form submission cancelled.");
});
to select the form with querySelector.
And then we listen for the submit event on it with addEventListener.
In the submit handler, we call event.preventDefault to stop the default submit behavior.
To check whether Google Maps is fully loaded with JavaScript, we call addListenerOnce to listen for the first idle event triggered.
For instance, we write
google.maps.event.addListenerOnce(map, "idle", () => {
// ...
});
to call addListenerOnce to listen for the first idle event triggered by calling it with the map, 'idle', and the idle event handler callback.
If the callback is called, that means the Google Map is fully loaded.
To render basic HTML view with JavaScript, we use Express.
For instance, we write
const express = require("express");
const app = express.createServer();
app.set("view options", { layout: false });
app.use(express.static(__dirname + "/public"));
app.get("/", (req, res) => {
res.render("index.html");
});
app.listen(8080, "127.0.0.1");
to call app.get with the URL for the route and the route handler.,
In it, we call res.render to render index.html to the user.
index.html is in the /public folder of the project since we call express.static with __dirname + "/public" to make __dirname + "/public" the static file path.
To escape HTML special chars in JavaScript, we call the replaceAll method.
For instance, we write
const escapeHtml = (unsafe) => {
return unsafe
.replaceAll("&", "&")
.replaceAll("<", "<")
.replaceAll(">", ">")
.replaceAll('"', """)
.replaceAll("'", "'");
};
to define the escapeHtml function.
In it, we call replaceAll to replace all the strings in the first argument with the ones in the 2nd argument.
Therefore, all the HTML characters are replaced with their corresponding HTML entities.
The string with the replacements done is returned.