We Keep Coding

How do i make this image appear in front of this other as an object?

i'm trying to convert a normal javascript game code to react but i'm finding a lot of problems that i don't know how to solve (i'm not good with web development so, sorry if i misspell something)
what i want is that an image become 100% adjusted to the viewport and another image, which is a game character, stay in front of it, but the css styles aren't applying to them
this is my javascript code and my css:
import './App.css';
import Spring from './components/Spring'
import Background from './components/Background';
function App() {
return (
<div className="game">
<Background className="fundo"></Background>
<Spring classname='Spring'></Spring>
<div className='message'>Press enter to start</div>
<div class="score">
<span class="score_title"></span>
<span class="score_val"></span>
</div>
</div>
);
}
export default App;
and this is my css for now:
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
.game {
height: 100vh;
width: 100vw;
}
.Spring {
height: 100px;
width: 160px;
position: fixed;
top: 40vh;
left: 30vw;
z-index: 100;
}
.fundo{
height: 100vh;
width: 100vw;
z-index: 99;
}
.pipe_sprite {
position: fixed;
top: 40vh;
left: 100vw;
height: 70vh;
width: 6vw;
background-color: green;
}
.message {
position: fixed;
z-index: 10;
height: 10vh;
font-size: 10vh;
font-weight: 100;
color: black;
top: 12vh;
left: 20vw;
text-align: center;
}
.score {
position: fixed;
z-index: 10;
height: 10vh;
font-size: 10vh;
font-weight: 100;
color: goldenrod;
top: 0;
left: 0;
}
.score_val {
color: gold;
}
if anyone want to see my react components that i'm trying to apply the style, there it is:
import React, { Component } from 'react';
import background from './sprites/red_sun_ultimate.gif'
class Background extends Component {
state = { }
render() {
return <img src={background} alt='Background'></img>;
}
}
export default Background;
import React, { Component } from 'react';
import springSprite from './sprites/Spring_2.0.gif'
class Spring extends Component {
state = { }
render() {
return <img src={springSprite} alt='Spring'></img>;
}
}
export default Spring;
i really don't know what to do by this point, my styles are applying to the score val and etc but i just can't figure out why the styles aren't applying to the other things too
the result i'm getting is:
this is what i'm getting

Why does a bit of my background gradient show at certain screen sizes?

I can't figure out why I'm getting this little bit of green when the window is an odd number of pixels wide. I think it has something to do with sub-pixel rendering, but I'm just not sure where the green is coming from. It's just the 2nd div too which is weird.
I have some script that is animating the BG of this div. I'm sure this is part of the issue, but I can't figure out why it's only happening to my 2nd div.
I tried to manually set the width of this div, but I was hoping it would be responsive and scale with the window size.
let currentStage = 1
function performAction(selectedStage) {
currentStage = selectedStage
let stages = document.body.getElementsByClassName('stage-flow-item')
let stageLines = document.body.getElementsByClassName('stage-flow-line')
console.log("selectedStage: " + selectedStage)
for (let stage of stages) {
if (stage.id > currentStage) {
stage.classList.remove('completed')
stage.classList.add('active')
} else {
stage.classList.remove('active')
stage.classList.add('completed')
}
}
for (let stageLine of stageLines) {
if (stageLine.id > currentStage) {
stageLine.classList.remove('lineCompleted')
stageLine.classList.add('lineActive')
} else {
stageLine.classList.remove('lineActive')
stageLine.classList.add('lineCompleted')
}
}
}
.stage-flow-container {
display: flex;
justify-content: space-between;
align-items: center;
height: 70px;
padding: 0 30px;
}
.stage-flow-item {
width: 70px;
height: 70px;
min-width: 70px;
border-radius: 50%;
background-color: #ddd;
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
color: #fff;
cursor: pointer;
}
.stage-flow-item.active {
background-color: #ddd;
}
.stage-flow-item.completed {
background-color: #6ab04c;
}
.stage-flow-line {
width: calc(100vw);
height: 6px;
background-color: #ddd;
/* default color */
background: linear-gradient(to left, #ddd 50%, #6ab04c 50%) right;
position: relative;
background-size: 200%;
transition: .5s ease-out;
}
.stage-flow-line.lineCompleted {
background-position: left;
background-color: #6ab04c;
}
.stage-flow-line.lineActive {
background-position: right;
background-color: #ddd;
}
<div class="stage-flow-container">
<div id=1 class="stage-flow-item" onclick="performAction(1)">1</div>
<div id=1 class="stage-flow-line"></div>
<div id=2 class="stage-flow-item" onclick="performAction(2)">2</div>
<div id=2 class="stage-flow-line"></div>
<div id=3 class="stage-flow-item" onclick="performAction(3)">3</div>
</div>

I'm not sure if this is on the right track, but I'd eliminate the odd 100vw width on the connectors and instead make them flex. I'd then remove the 200% background size multiplier. By setting the gradient points to 100% the problem is gone. I really don't know if this covers your use case, though.
I converted from background gradient to a pseudo-element solution for the color transition. I think it's simpler. You'd probably have to use CSS animations (as opposed to simple transitions) to make it work otherwise. Of course, you could apply the same principle to the stage items as well, implementing a delay to crate a consistent animation across the item and the line.
Note that duplicated ID values are invalid in HTML. They must be unique. I've refactored to use data attributes instead and an event listener instead of inline JavaScript.
const stageEls = document.querySelectorAll('.stage-flow-item')
const lineEls = document.querySelectorAll('.stage-flow-line')
let currentStage = 1
stageEls.forEach(el => {
el.addEventListener('click', () => {
performAction(el.dataset.stage)
})
})
function performAction(selectedStage) {
currentStage = selectedStage
for (let el of stageEls) {
if (el.dataset.stage > currentStage) {
el.classList.remove('completed')
el.classList.add('active')
} else {
el.classList.remove('active')
el.classList.add('completed')
}
}
for (let el of lineEls) {
if (el.dataset.stage > currentStage) {
el.classList.remove('lineCompleted')
el.classList.add('lineActive')
} else {
el.classList.remove('lineActive')
el.classList.add('lineCompleted')
}
}
}
.stage-flow-container {
display: flex;
align-items: center;
height: 70px;
padding: 0 30px;
}
.stage-flow-item {
width: 70px;
height: 70px;
min-width: 70px;
border-radius: 50%;
background-color: #ddd;
display: flex;
justify-content: center;
align-items: center;
font-size: 18px;
color: #fff;
cursor: pointer;
}
.stage-flow-item.active {
background-color: #ddd;
}
.stage-flow-item.completed {
background-color: #6ab04c;
}
.stage-flow-line {
flex: 1;
height: 6px;
background: #ddd;
position: relative;
}
.stage-flow-line::after {
position: absolute;
content: '';
top: 0;
left: 0;
width: 0;
height: 100%;
background: #6ab04c;
transition: all 0.5s ease-out;
}
.stage-flow-line.lineCompleted::after {
width: 100%;
}
<div class="stage-flow-container">
<div data-stage=1 class="stage-flow-item">1</div>
<div data-stage=1 class="stage-flow-line"></div>
<div data-stage=2 class="stage-flow-item">2</div>
<div data-stage=2 class="stage-flow-line"></div>
<div data-stage=3 class="stage-flow-item">3</div>
</div>

How do I bring the block up to the header by scrolling when the button is clicked?

I'm trying to make it so that when you click on the button with the class .booking__button, the block scrolls up under the header. Position should not change, only scroll. This is done so that the search results of the booking module, which, would be visible to the user. I found the code that does the scrolling, but it works with the exact number, now 100px, but you understand that this distance will be different for everyone, depending on the height of the screen.
document.querySelector('.booking__button').addEventListener('click', () => {
window.scrollTo(0, 100);
});
body {
margin: 0;
}
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 60px;
background: #002164;
}
.hero {
min-height: calc(100vh - 100px);
background: #fff;
}
.booking__module {
display: flex;
justify-content: center;
align-items: center;
background: #BC0B3C;
}
.booking__search {
height: 600px;
background: #ccc;
}
.booking__button {
height: 20px;
margin: 40px;
}
.others {
height: 200vh;
}
<header class="header"></header>
<main class="hero"></main>
<section class="booking">
<div class="booking__module">
<button class="booking__button">booking</button>
</div>
<div class="booking__search"></div>
</section>
<section class="others"></section>

One approach is below, with explanatory comments in the code. Note that while I changed the background-color of the <header> element, that's simply to visualise the functionality and is not at all required:
// we pass a reference to the Event Object ('evt') to the function:
document.querySelector('.booking__button').addEventListener('click', (evt) => {
// we retrieve the closest ancestor <section> element of the element
// to which the event-handler is bound, and retrieve the 'top' property
// of its bounding-client rect:
let {top} = evt.currentTarget.closest('section').getBoundingClientRect();
// we then scroll to that value:
window.scrollTo(0, top);
});
body {
margin: 0;
}
.header {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 60px;
/*background: #002164;*/
background-color: hsl(200deg 70% 70% / 0.4);
}
.hero {
min-height: calc(100vh - 100px);
background: #fff;
}
.booking__module {
display: flex;
justify-content: center;
align-items: center;
background: #BC0B3C;
}
.booking__search {
height: 600px;
background: #ccc;
}
.booking__button {
height: 20px;
margin: 40px;
}
.others {
height: 200vh;
}
<header class="header"></header>
<main class="hero"></main>
<section class="booking">
<div class="booking__module">
<button class="booking__button">booking</button>
</div>
<div class="booking__search"></div>
</section>
<section class="others"></section>
JS Fiddle demo.
References:
Element.closest().
Element.getBoundingClientRect().
Event.
Event.currentTarget.
EventTarget.addEventListener().
Window.scrollTo.

Css animation doesn't move object

I have a problem with a css animation im trying to add to each child inside a nav tag
I'm trying to create a moving stock panel
The weird thing about it is that if I add another css attribute like color it does work
Does anyone knows how to solve this
function DoAnimation(animation, a) {
var parent = a.parentElement
if (animation != null) {
parent.removeChild(a);
parent.appendChild(a);
console.log(1);
a.style.animationName = animation;
a.style.animationDuration = "2s";
}
}
#keyframes MoveStockTORIght {
from {
left: 0;
}
to {
transform: translateX(100px);
}
}
.SiteNav {
overflow: hidden;
text-align: center;
margin: auto;
text-align: center;
}
.SiteNav a {
gap: 10%;
padding: 1%;
}
<nav class="SiteNav" id="siteNavigantion">
MSFT 294.23
CLOV 8.06
LCID 22.87
SAVA 51.08
AAL 20.13
AMZN 3246.3
NFLX 627.04
GOOG 2776.95
AAPL 142.81
NVDA 206.95
</nav>

Why not just use Marquee?
.SiteNav {
overflow: hidden;
text-align: center;
margin: auto;
text-align: center;
}
.SiteNav a {
gap: 10%;
padding: 1%;
}
marquee a { text-decoration: none; color:green; }
<marquee class="SiteNav" id="siteNavigantion">
MSFT 294.23
CLOV 8.06
LCID 22.87
SAVA 51.08
AAL 20.13
AMZN 3246.3
NFLX 627.04
GOOG 2776.95
AAPL 142.81
NVDA 206.95
</marquee>

React flexbox is overflowing screen size

I'm trying to get a div to render until the bottom of the screen/page (and no further than that).
I'm able to do that successfully as long as this div is the only thing in the entire page. However, it's overflowing the page whenever I have anything above it (in this example, the text Some Header).
https://codesandbox.io/s/keen-bird-phx1f?file=/src/App.js
The React code:
import "./styles.css";
import React, { Fragment } from "react";
export default function App(props) {
return (
<Fragment>
<div>Some Header</div>
<div className="test1">
<div className="dashbar">Dash</div>
<div className="other-content">Other</div>
</div>
</Fragment>
);
}
The CSS code:
* {
box-sizing: border-box;
}
body {
margin: 0;
}
.test1 {
display: flex;
height: 100vh;
border: 10px solid green;
}
.dashbar {
flex: 1 0 10%;
background: dodgerblue;
}
.other-content {
flex: 1 0 90%;
background: papayawhip;
}
How can I make it so that this div will stop at the bottom of the page and not overflow like this?
If I remove <div>Some Header</div>, then it behaves as expected:

.test1 has a height of 100vh, meaning you are forcing it to be exactly as tall as the viewport. But it has a header above it! So, the header necessarily pushes it down and it overflows the screen. You need a bit more of Flexbox trickery to get it right, especially flex-grow:1.
* {
box-sizing: border-box;
}
body {
margin: 0;
}
#root {
width: 100vw;
height: 100vh;
display: flex;
flex-direction: column;
}
.test1 {
display: flex;
flex-grow: 1;
border: 10px solid green;
}
.dashbar {
flex: 1 0 10%;
background: dodgerblue;
}
.other-content {
flex: 1 0 90%;
background: papayawhip;
}
<body>
<div id="root">
<div>
Some Header<br>
with a couple<br>
of lines in it
</div>
<div class="test1">
<div class="dashbar">Dash</div>
<div class="other-content">Other</div>
</div>
</div>
</body>

It's because "test1" has height as 100vh and there is a static header text which has some height. Try this to fix:
* {
box-sizing: border-box;
line-height: 15px;
}
.test1 {
display: flex;
height: calc(100vh - 15px);
border: 10px solid green;
}
--- Dynamic solution:
https://codesandbox.io/s/stupefied-agnesi-x496f?file=/src/App.js