My h1 keeps repositioning while I update it

My h1 keeps repositioning while I update it - javascript

Okay so I'm making this thing where I use the reddit api and i get a post number then spit out all the info from it. Now I am making a custom number input and here is images of me using it.
How it looks when i load it
How it looks when i update the number
Here's my code:
const numberText = document.querySelector("#numberText")
const modalOpenBtn = document.querySelector("#numberBtn")
const modal = document.querySelector("#modal")
const done = document.querySelector("#done")
modalOpenBtn.addEventListener("click", () => {
modal.showModal()
})
done.addEventListener("click", () => {
let number = document.querySelector("#number")
number.textContent = numberText.value;
modal.close()
})
// The code below is in another file
const add = document.querySelector('#add');
const subtract = document.querySelector('#subtract');
let number = document.querySelector('#number');
add.addEventListener('click', () => {
number.innerHTML = `<h1>${parseInt(number.textContent) + 1}</h1>`;
})
subtract.addEventListener('click', () => {
if (parseInt(number.textContent) <= 0) {
alert('Cannot subtract from 0');
} else {
number.innerHTML = `<h1>${parseInt(number.textContent) - 1}</h1>`;
}
})
body, h1 {
background: rgb(34, 116, 165);
color: rgb(250, 250, 255);
font-family: 'Dosis', sans-serif;
}
button {
background: none;
border: none;
cursor: pointer;
resize: none;
}
div, button {
display: flex;
justify-content: center;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance: textfield;
}
<!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>the most stupidest app ive ever made</title>
<script defer src="input.js"></script>
<script defer src="openModal.js"></script>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Dosis:wght#200;800&display=swap" rel="stylesheet">
</head>
<body>
<!-- intro -->
<h1>the most stupidest app ive ever made</h1>
<p>this app is from a reddit post with random knowledge; enter the number of the reddit post and you'll get it's info:</p><br>
<!-- buttons -->
<div>
<button class="add-subtract"><img src="add.svg" width="50" height="50" title="add" id="add"></button>
<button title="number" id="numberBtn"><h1 id="number">0</h1></button>
<button class="add-subtract"><img src="subtract.svg" width="50" height="50" title="subtract" id="subtract"></button>
</div>
<!-- da modal -->
<dialog id="modal">
<input type="number" id="numberText"><br>
<button id="done"><img src="./check.svg"></button>
</dialog>
</body>
</html>
Ask me any question in the comments regarding the code.
Help is appreciated. Thanks!!!

You should have inspected the layout first. You're adding a new h1 to the existing one. Thats what causing the shift. Instead replace the number inside it.
Just replace this line with
number.innerHTML = `<h1>${parseInt(number.textContent) + 1}</h1>`
to
number.innerHTML = `${parseInt(number.textContent) + 1}`
Since according to your comment you couldn't make this simple fix and say that solution isn't working for you, I'm adding the snippet you shared with the change I mentioned
const numberText = document.querySelector("#numberText")
const modalOpenBtn = document.querySelector("#numberBtn")
const modal = document.querySelector("#modal")
const done = document.querySelector("#done")
modalOpenBtn.addEventListener("click", () => {
modal.showModal()
})
done.addEventListener("click", () => {
let number = document.querySelector("#number")
number.textContent = numberText.value;
modal.close()
})
// The code below is in another file
const add = document.querySelector('#add');
const subtract = document.querySelector('#subtract');
let number = document.querySelector('#number');
add.addEventListener('click', () => {
number.innerHTML = `${parseInt(number.textContent) + 1}`;
})
subtract.addEventListener('click', () => {
if (parseInt(number.textContent) <= 0) {
alert('Cannot subtract from 0');
} else {
number.innerHTML = `${parseInt(number.textContent) - 1}`;
}
})
body, h1 {
background: rgb(34, 116, 165);
color: rgb(250, 250, 255);
font-family: 'Dosis', sans-serif;
}
button {
background: none;
border: none;
cursor: pointer;
resize: none;
}
div, button {
display: flex;
justify-content: center;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
-webkit-appearance: none;
margin: 0;
}
input[type=number] {
-moz-appearance: textfield;
}
<!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>the most stupidest app ive ever made</title>
<script defer src="input.js"></script>
<script defer src="openModal.js"></script>
<link rel="stylesheet" href="style.css">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Dosis:wght#200;800&display=swap" rel="stylesheet">
</head>
<body>
<!-- intro -->
<h1>the most stupidest app ive ever made</h1>
<p>this app is from a reddit post with random knowledge; enter the number of the reddit post and you'll get it's info:</p><br>
<!-- buttons -->
<div>
<button class="add-subtract"><img src="add.svg" width="50" height="50" title="add" id="add"></button>
<button title="number" id="numberBtn"><h1 id="number">0</h1></button>
<button class="add-subtract"><img src="subtract.svg" width="50" height="50" title="subtract" id="subtract"></button>
</div>
<!-- da modal -->
<dialog id="modal">
<input type="number" id="numberText"><br>
<button id="done"><img src="./check.svg"></button>
</dialog>
</body>
</html>

You can add position: relative to your navbar.
example for mi code
.navbar.navbar-inverse {
position: relative;
}
<div style="margin-top: 15px;text-align: center;" class="navbar navbar-inverse navbar-fixed-top container">

Related

How to get the color of an element which i have clicked or its background color via javascript?

I tried to use EyeDropper API but I think there are some issues on Linux because it requires me to share my screen and Although I shared, I could not get a result. I'm getting this after clicking the button. image
<!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>COLOR PICKER</title>
<!-- GOOGLE FONTS -->
<link
rel="stylesheet"
href="https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp:opsz,wght,FILL,GRAD#20..48,100..700,0..1,-50..200"
/>
<!-- CSS & SCRIPT -->
<link rel="stylesheet" href="style.css" />
<script defer src="./script.js"></script>
</head>
<body class="grid pi-cent">
<div class="container flex-col">
<header class="flex jc-cnt ai-cnt">
<button class="pick-btn">Pick Color</button>
</header>
<article class="flex jc-sb">
<p>Picked Color<s class="plural">s</s></p>
Clear All
</article>
<ul class="grid">
<li class="flex">
<div
class="color"
style="--bg: #000000; width: 15px; height: 15px"
></div>
<p class="clr-code">#0000</p>
</li>
</ul>
</div>
<script>
const pickBtn = document.querySelector(".pick-btn");
const pickColor = async (e) => {
try {
const eDrop = new window.EyeDropper();
const resp = await eDrop.open();
console.log(resp);
} catch (err) {
console.log(err);
}
};
pickBtn.addEventListener("click", pickColor);
</script>
</body>
</html>

You forgot to add click event to the button.
const button = document.querySelector('button');
button.addEventListener('click', () => {
if (!window.EyeDropper) {
resultElement.textContent = 'Your browser does not support the EyeDropper API';
return;
}
const eyeDropper = new EyeDropper();
eyeDropper.open().then((result) => {
console.log(result.sRGBHex);
}).catch((e) => {
console.log(e)
});
})
.green,
.blue,
.red {
cursor: pointer;
margin-bottom: 1rem;
}
.green {
color: green;
}
.blue {
color: blue;
}
.red {
color: red;
}
<div class="green">Green color</div>
<div class="blue">Blue color</div>
<div class="red">Red color</div>
<button>Pick color</button>
As #ourmaninamsterdam mentioned the EyeDropper is experimental and only supported in chromium browsers like edge, chrome, opera
Browser compatibility

How to make a tooltip with the same look and feel as when we add "title" attribute to an element?

I am trying to replicate the look and feel of the tooltip when we add the "title" attribute to an element.
Tooltip should be hovarable
Tooltip should be dismissable by pressing the Esc key
Currently, my custom tooltip is not hoverable. Also the look and feel is not matched with - https://www.w3schools.com/tags/tryit.asp?filename=tryhtml5_global_title
Any help is really appreciated and thanks in advance
const tooltipTrigger = document.querySelector(".tooltip-trigger");
const tooltipText = document.querySelector(".tooltip-text");
tooltipTrigger.addEventListener("mouseenter", showTooltip);
tooltipTrigger.addEventListener("mouseleave", hideTooltip);
tooltipText.addEventListener("keydown", dismissTooltip);
function showTooltip() {
tooltipText.style.visibility = "visible";
}
function hideTooltip() {
tooltipText.style.visibility = "hidden";
}
function dismissTooltip(event) {
if (event.keyCode === 27) {
tooltipText.style.visibility = "hidden";
}
}
.tooltip-text {
visibility: hidden;
position: absolute;
background-color: #000;
color: #fff;
padding: 4px;
z-index: 1;
}
.tooltip-trigger{
cursor: pointer;
}
.tooltip-trigger:hover .tooltip-text {
visibility: visible;
}
<!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="styles.css" />
<title>Tooltip</title>
</head>
<body>
<span class="tooltip-trigger" aria-describedby="tooltip-text"
>Hover over me</span
>
<div id="tooltip-text" class="tooltip-text" role="tooltip">
This is the tooltip text
</div>
<script src="script.js"></script>
</body>
</html>

const tooltipTrigger = document.querySelector(".tooltip-trigger");
const tooltipText = document.querySelector(".tooltip-text");
let timeout = null;
tooltipTrigger.addEventListener("mouseenter", showTooltip);
tooltipTrigger.addEventListener("mouseleave", hideTooltip);
window.addEventListener("keydown", dismissTooltip);
function showTooltip(event) {
timeout = setTimeout(() => {
tooltipText.style.visibility = "visible";
tooltipText.style.left = `${event.clientX}px`
tooltipText.style.top = `${event.clientY}px`
}, 1000)
}
function hideTooltip() {
clearTimeout(timeout);
timeout = null;
tooltipText.style.visibility = "hidden";
}
function dismissTooltip(event) {
if (event.key === 'Escape') {
tooltipText.style.visibility = "hidden";
}
}
.tooltip-text {
visibility: hidden;
position: absolute;
background-color: #000;
color: #fff;
padding: 4px;
z-index: 1;
}
.tooltip-trigger {
cursor: pointer;
}
<!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="styles.css" />
<title>Tooltip</title>
</head>
<body>
<span class="tooltip-trigger" aria-describedby="tooltip-text">Hover over me</span
>
<div id="tooltip-text" class="tooltip-text" role="tooltip">
This is the tooltip text
</div>
<script src="script.js"></script>
</body>
</html>

The ultimate answer is in fact, you can't.
You can't replicate the exact behavior of a tooltip generated by a title attribute, simply because their appearance and behavior can be dramatically different across browsers, devices and OS.
You can certainly try to approach very close what it looks like on a particular browser/device/OS, but won't probably be able to replicate exactly everything everywhere. Note that doing user agent detection to finetune is most often a bad idea.

Not connect js to html

When hovering over the picture, hide information about the link that will appear at the bottom left. When adding this script, the image became unclickable. I think the main problem is the incorrect connection of the js file or the execution of this script. I have added the code of 3 files below
openUrl(url: string): void {
window.open(url, '_blank');
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Roshan Timing</title>
<script src="eel.js"></script>
<link rel="icon" type="image/ico" href="/Roshan.ico"></link>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body>
<!-- TIMER -->
<p class="timer">Timer</p>
<!-- CHAT(INPUT) -->
<!-- created by dankYbat -->
<div class="about_right">
<div class="text_wrap">
<p class="noselect">created by dankYoff</p>
</div>
<!--Connect js to tage image -->
<div class="image_wrap">
<a><img src="github.svg" (click)="openUrl('https://github.com/dankYoff')" width="50"></a>
</div>
</div>
</body>
</html>

You can not use openUrl(url: string): void in a *.js file, looks like you want to use TypeScript. If you want to create a faster vanilla typescript project you can use vite.
Anyway the a solution can be this:
const imgProfile = document.querySelector('#img-profile');
const openUrl = (url) => {
window.open(url, '_blank');
};
imgProfile.addEventListener('click', () => {
openUrl('https://github.com/dankYoff');
});
.img-profile {
cursor: pointer;
}
.img-profile img {
width: 100px;
height: 100px;
border-radius: 50%;
object-fit: cover;
transition: 0.3s;
}
.img-profile img:hover {
transform: scale(1.1);
}
<a class="img-profile" id="img-profile">
<img src="https://cdn.pixabay.com/photo/2022/09/16/13/07/woman-7458584_960_720.jpg" />
</a>

Access a Variable within a function in Javascript

I want to Check the woodCount Variable if it is equal to or greater than 25 I want to have a new button appear on the page. For now I just had it console.log true or false.
Sorry if this is really easy or makes no sense but I am new to Javascript. Thanks!
JAVASCRIPT FILE
var woodCount = 0;
var gatherWood = document.getElementById("gatherWood");
var wood = document.getElementById("wood");
gatherWood.onclick = function(){
woodCount++;
wood.innerHTML = woodCount;
}
function fire() {
if woodCount >= 25 {
console.log('True');
}else{
console.log('False');
}
}
HTML FILE
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Game</title>
<meta name="description" content="Game">
<meta name="author" content="SitePoint">
<script src="game.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<input class="woodbtn" type="button" value="Gather Wood" id="gatherWood" />
Wood = <span id="wood">0</span>
</div>
</body>
</html>

Add a button to the DOM and keep it hidden. When it exceeds the threshold, toggle the display property from hidden to block.
Make sure we call the function where the toggling of style happens in the onclick event handler where incrementation occurs.
var woodCount = 0;
var gatherWood = document.getElementById("gatherWood");
var wood = document.getElementById("wood");
gatherWood.onclick = function() {
woodCount++;
wood.innerHTML = woodCount;
fire();
};
function fire() {
if (woodCount >= 25) {
document.getElementById("higherThan25")
.style.display = "block";
} else {
//console.log("False");
}
}
.woodbtn {
border-style: solid;
border-color: white;
color: white;
padding: 10px 10px;
text-align: center;
font-size: 13px;
cursor: pointer;
float: right;
background-color: transparent;
}
.woodtxt {
text-color: white;
}
body {
background-color: black;
color: white;
}
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Game</title>
<meta name="description" content="Game">
<meta name="author" content="SitePoint">
<script src="game.js"></script>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div>
<input class="woodbtn" type="button" value="Gather Wood" id="gatherWood" />
<input style="display: none;" class="woodbtn" type="button" value="Higher Than 25" id="higherThan25" />
Wood = <span id="wood">0</span>
</div>
</body>
</html>

OnMouseEvents Issue

I am new to coding and am having trouble with the onmouseover and onmouseout events. I am trying to make it so that when my mouse rolls over an element in my navbar it will turn pink. The issue is that everything that I have found uses Jquery and not Javascript. According to a debugger navBarTextReaction is not defined but then how do I go about defining it?
Do I have to set something equal to the function? I'm so confused. Help Please!
For some reason it is working here and it still isn't working when I load it in the browser.
navBarVar = document.getElementById("navBar").classList;
function navBarTextReaction() {
if(navBarVar.contains("makeWhite")) {
navBarVar.remove("makeWhite");
}
else {
navBarVar.add("makeWhite");
}
if(navBarVar.contains("makePink")){
navBarVar.remove("makePink");
}
else {
navBarVar.add("makePink");
}
}
.background {
background: #4F4F52;
}
.navbar1 {
background: #282727;
shadow: 1em 1em #87B4CB;
font-family: Patrick Hand SC;
text-shadow: .01em .01em #171717;
font-size: 1.5em;
text-align: center;
}
.makeWhite {
color: #FFFFFF;
font-weight: bold;
}
.makePink {
color: #FBEBEB;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Cardo|Great+Vibes|Patrick+Hand+SC|Quattrocento" rel="stylesheet">
<script src="script.js"></script>
</head>
<body>
<div class = "background">
<div class = "container-fluid">
<div class = "row">
<div onmouseover = "navBarTextReaction()" onmouseout = "navBarTextReaction()" id = "navBar" class = "navbar1 col-sm-3 makeWhite"> Home Page </div>
<div id = "navBar" class = "navbar1 col-sm-3 makeWhite"> Chord Leading Chart </div>
<div id = "navBar" class = "navbar1 col-sm-3 makeWhite"> Note Game </div>
<div id = "navBar" class = "navbar1 col-sm-3 makeWhite"> Circle of Fifths </div>
</div>
</div>
</div>
</body>
</html>

Lose all the duplicate id attributes and just use CSS classes and the :hover pseudo-class
.navbar1 {
color: #fff;
font-weight: bold;
}
.navbar1:hover {
color: #FBEBEB;
font-weight: normal;
}
<div class="navbar1 col-sm-3">Home Page</div>
<div class="navbar1 col-sm-3">Chord Leading Chart</div>
<div class="navbar1 col-sm-3">Note Game</div>
<div class="navbar1 col-sm-3">Circle of Fifths</div>

<div onmouseover = "navBarTextReaction()" onmouseout = "navBarTextReaction()" id = "navBar" class = "navbar1 col-sm-3 makeWhite"> Home Page </div>
Add () after function names in your HTML and I also corrected the code to use the correct function name.

navBarVar = document.getElementById("navBar").classList;
function navBarTextReaction() {
if(navBarVar.contains("makeWhite")) {
navBarVar.remove("makeWhite");
}
else {
navBarVar.add("makeWhite");
}
if(navBarVar.contains("makePink")){
navBarVar.remove("makePink");
}
else {
navBarVar.add("makePink");
}
}
.background {
background: #4F4F52;
}
.navbar1 {
background: #282727;
shadow: 1em 1em #87B4CB;
font-family: Patrick Hand SC;
text-shadow: .01em .01em #171717;
font-size: 1.5em;
text-align: center;
}
.makeWhite {
color: #FFFFFF;
font-weight: bold;
}
.makePink {
color: #FBEBEB;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
<link href="https://fonts.googleapis.com/css?family=Cardo|Great+Vibes|Patrick+Hand+SC|Quattrocento" rel="stylesheet">
<script src="script.js"></script>
</head>
<body>
<div class = "background">
<div class = "container-fluid">
<div class = "row">
<div onmouseover = "navBarTextReaction()" onmouseout = "navBarTextReaction()" id = "navBar" class = "navbar1 col-sm-3 makeWhite"> Home Page </div>
<div id = "navBar" class = "navbar1 col-sm-3 makeWhite"> Chord Leading Chart </div>
<div id = "navBar" class = "navbar1 col-sm-3 makeWhite"> Note Game </div>
<div id = "navBar" class = "navbar1 col-sm-3 makeWhite"> Circle of Fifths </div>
</div>
</div>
</div>
</body>
</html>
navBarTextReation =>navBarTextReaction()

Develop Reference

JavaScript is the programming language of the Web.

My h1 keeps repositioning while I update it - javascript

You can add position: relative to your navbar. example for mi code .navbar.navbar-inverse { position: relative; } <div style="margin-top: 15px;text-align: center;" class="navbar navbar-inverse navbar-fixed-top container">

Related

How to get the color of an element which i have clicked or its background color via javascript?

How to make a tooltip with the same look and feel as when we add "title" attribute to an element?

Not connect js to html

Access a Variable within a function in Javascript

OnMouseEvents Issue

Categories

Resources