Develop Reference

How do I bind .animate() on parent tag to its child tag?

so I've been trying to build a reactive website, where I've parent tag <form> which changes its size and opacity when hovered. However, inside that form tag I have <input /> tag which should ideally not interrupt with the animation on form tag while mouse hovers on <input />. But, somehow it breaks my animation and I've been struggling with it for a while.
CSS:
/* Block 1 starts */
#block-1{
background-image: url("/HealthCare/images/block-1.png");
background-size: 100%;
background-repeat: no-repeat;
height: 400px;
width: 400px;
display: flex;
flex-direction: column;
justify-content: center;
font-family: Georgia, 'Times New Roman', Times, serif;
font-size: 10px 10px 10px #000000;
text-shadow: 50px;
color: #FFFFFF;
align-items: center;
border-radius: 5%;
opacity: 0.8;
text-align: center;
}
/* Bform-1 starts */
/* Bform-1 Name ends */
article > section > form{
width: 100%;
height: 100%;
overflow: initial;
}
#bform-input-1{
width: 250px;
height: 25px;
overflow: initial;
}
/* Block 1 ends */
/* Block 2 start */
#block-2{
background-image: url("/HealthCare/images/block-2.png");
background-size: 100%;
background-repeat: no-repeat;
height: 400px;
width: 400px;
display: flex;
font-family: Georgia, 'Times New Roman', Times, serif;
font-style: oblique;
font-size: 10px 10px 10px #000000;
text-shadow: 50px;
color: #FFFFFF;
justify-content: center;
align-items: center;
border-radius: 5%;
opacity: 0.8;
text-align: center;
}
/* Block 2 ends */
/* Block 3 start */
#block-3{
background-image: url("/HealthCare/images/block-3.png");
background-size: 100%;
background-repeat: no-repeat;
height: 400px;
width: 400px;
display: flex;
justify-content: center;
align-items: center;
border-radius: 5%;
opacity: 0.8;
text-align: center;
}
/* Block 2 ends */
JS and JQuery
// Block-1 Animation Code.
$('#block-1').on("mouseover",function(){
$('#block-1').animate({
'height':'450px',
'width':'450px',
opacity:1
},100,'linear');
});
$('#block-1').on("mouseout",function(){
$('#block-1').animate({
'height':'400px',
'width':'400px',
opacity:0.8
},100,'linear');
});
// Block-2 Animation Code.
$('#block-2').on("mouseover",function(){
$('#block-2').animate({
'height':'450px',
'width':'450px',
opacity:1
},100,'linear');
});
$('#block-2').on("mouseout",function(){
$('#block-2').animate({
'height':'400px',
'width':'400px',
opacity:0.8
},100,'linear');
});
// Block-3 Animation Code.
$('#block-3').on("mouseover",function(){
$('#block-3').animate({
'height':'450px',
'width':'450px',
opacity:1
},100,'linear');
});
$('#block-3').on("mouseout",function(){
$('#block-3').animate({
'height':'400px',
'width':'400px',
opacity:0.8
},100,'linear');
});
});
Html
<main>
<article id="important_inf_blocks">
<section id="block-1">
<form>
<input id="bform-input-1" type="text" />
</form>
</section>
<section id="block-2">
block-2
</section>
<section id="block-3">
block-3
</section>
</article>
</main>

How to start my progress bar counting after navigating the container section of my web page

How to start my progressbar counting when i will go to container section of my webpage.I think i have to change my javascript code a bit please help me.
HTML CODE
<div class="container">
<div class="circular-progress">
<span class="progress-value">100%</span>
</div>
<span class="text">HTML & CSS</span>
</div>
<!-- JavaScript -->
<script src="js/script.js"></script>
CSS CODE
/* Google Fonts - Poppins */
#import url('https://fonts.googleapis.com/css2?family=Poppins:wght#300;400;500;600;700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
body{
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background: #7d2ae8;
}
.container{
display: flex;
width: 420px;
padding: 50px 0;
border-radius: 8px;
background: #fff;
row-gap: 30px;
flex-direction: column;
align-items: center;
}
.circular-progress{
position: relative;
height: 250px;
width: 250px;
border-radius: 50%;
background: conic-gradient(#7d2ae8 3.6deg, #ededed 0deg);
display: flex;
align-items: center;
justify-content: center;
}
.circular-progress::before{
content: "";
position: absolute;
height: 210px;
width: 210px;
border-radius: 50%;
background-color: #fff;
}
.progress-value{
position: relative;
font-size: 40px;
font-weight: 600;
color: #7d2ae8;
}
.text{
font-size: 30px;
font-weight: 500;
color: #606060;
}
Javascriptcode
let circularProgress = document.querySelector(".circular-progress"),
progressValue = document.querySelector(".progress-value");
let progressStartValue = 0,
progressEndValue = 90,
speed = 100;
let progress = setInterval(() => {
progressStartValue++;
progressValue.textContent = `${progressStartValue}%`
circularProgress.style.background = `conic-gradient(#7d2ae8 ${progressStartValue * 3.6}deg, #ededed 0deg)`
if(progressStartValue == progressEndValue){
clearInterval(progress);
}
}, speed);
When i load my page at first then progressbar is count value But i want to start the counting after i go to that section of that webpage.

You could use Intersection Observer. You choose an HTML element to observe and once this element is in view, that will trigger the start of the progress bar.

How to stop pages from creating scrollbar

I am having this trouble with my game in where the screen creates a small scroll bar and the page won't fit on one screen. When I try changing the height in my body and html tags it seems like nothing is happening and when I try overflow:hidden it just stops me from getting to my play again button and doesn't actually fit the game onto one single page.
Here is the game link
https://jobaa11.github.io/connect-4-project-1/
This is my CSS for my body and main
body {
margin: 0;
height: 100vh;
display: grid;
justify-content: stretch;
align-items: center;
background-color: var(--blue);
}
main {
display: grid;
justify-content: center;
margin: 0;
}
I've tried several different options, but that scrollbar has been very persistent. Any suggestions?
This is also my footer which holds my play-again button that keeps causing the scroll bar issue I believe.
footer {
display: flex;
justify-content: space-evenly;
font-family: 'Press Start 2P', sans-serif;
color: rgb(75, 57, 57);
}
footer>button {
margin-top: 10px;
outline-style: groove;
background-color: #FEDF49;
border-radius: 5%;
font-family: 'Press Start 2P', sans-serif;
font-size: small;
}
footer>button:hover {
transform: scale(1.1);
opacity: 80;
color: red
}
#replay-again-btn {
cursor: pointer;
}

add to your css :
body {
margin: 0;
height: 100vh;
overflow:hidden;
display: grid;
justify-content: stretch;
align-items: center;
background-color: var(--blue);
}

disable left or right arrow at the last item

Just made a simple div slider with navigation arrows. The div slider works just fine, except, I want some sort of CSS styling to be applied to the arrows.
That is, when a user clicks the left or right arrow, up to the last item, apply CSS styling telling the user they've reached the end of the slider.
let buttonLeft = document.getElementById('slide_left')
let buttonRight = document.getElementById('slide_right')
let container = document.getElementById('slider')
buttonLeft.addEventListener('click', function() {
container.scrollLeft -= 90
})
buttonRight.addEventListener('click', function() {
container.scrollLeft += 90
})
body {
background-color: #555;
height: 100vh;
display: grid;
align-items: center;
justify-items: center;
font-family: 'Helvetica';
}
div#slide_wrapper {
width: 440px;
display: flex;
justify-content: space-between;
height: fit-content;
}
div#slider {
width: 350px;
display: flex;
height: fit-content;
flex-wrap: nowrap;
overflow: hidden;
}
div.thumbnail {
min-width: 80px;
min-height: 80px;
cursor: pointer;
display: grid;
place-items: center;
font-size: 30px;
}
div.thumbnail:not(:last-child) {
margin-right: 10px;
}
div.thumbnail:nth-child(1) {
background-color: darkturquoise;
}
div.thumbnail:nth-child(2) {
background-color: goldenrod;
}
div.thumbnail:nth-child(3) {
background-color: rebeccapurple;
}
div.thumbnail:nth-child(4) {
background-color: powderblue;
}
div.thumbnail:nth-child(5) {
background-color: firebrick;
}
div.thumbnail:nth-child(6) {
background-color: sienna;
}
div.thumbnail:nth-child(7) {
background-color: bisque;
}
div.thumbnail:nth-child(8) {
background-color: navy;
}
div#slide_wrapper>button {
height: fit-content;
align-self: center;
font-size: 24px;
font-weight: 800;
border: none;
outline: none;
}
div#slide_wrapper>button:hover {
cursor: pointer;
}
<div id="slide_wrapper">
<button id="slide_left" class="slide_arrow">❮</button>
<div id="slider">
<div class="thumbnail active">1</div>
<div class="thumbnail">2</div>
<div class="thumbnail">3</div>
<div class="thumbnail">4</div>
<div class="thumbnail">5</div>
<div class="thumbnail">6</div>
<div class="thumbnail">7</div>
<div class="thumbnail">8</div>
</div>
<button id="slide_right" class="slide_arrow">❯</button>
</div>

Simply check to see if you need to disable each button based on the position of the scroll. Then if there is a need to disable a button, add the disabled class to the button, otherwise remove it.
Future enhancements.
Remove the hardcoded 360 value for the scroll end. This should be calculated from the size of the carousel items and the width of the viewport.
Allow more than one carousel to work with the same code. This could be achieved by using a javascript class that would hold the elements inside an object, separate from other carousels.
See the demo:
let buttonLeft = document.getElementById('slide_left')
let buttonRight = document.getElementById('slide_right')
let container = document.getElementById('slider')
let checkScroll = function() {
if (container.scrollLeft <= 0)
buttonLeft.classList.add("disabled");
else
buttonLeft.classList.remove("disabled");
if (container.scrollLeft >= 360)
buttonRight.classList.add("disabled");
else
buttonRight.classList.remove("disabled");
}
checkScroll();
buttonLeft.addEventListener('click', function() {
container.scrollLeft -= 90;
checkScroll();
})
buttonRight.addEventListener('click', function() {
container.scrollLeft += 90;
checkScroll();
})
body {
background-color: #555;
height: 100vh;
display: grid;
align-items: center;
justify-items: center;
font-family: 'Helvetica';
}
div#slide_wrapper {
width: 440px;
display: flex;
justify-content: space-between;
height: fit-content;
}
div#slider {
width: 350px;
display: flex;
height: fit-content;
flex-wrap: nowrap;
overflow: hidden;
}
div.thumbnail {
min-width: 80px;
min-height: 80px;
cursor: pointer;
display: grid;
place-items: center;
font-size: 30px;
}
div.thumbnail:not(:last-child) {
margin-right: 10px;
}
div.thumbnail:nth-child(1) {
background-color: darkturquoise;
}
div.thumbnail:nth-child(2) {
background-color: goldenrod;
}
div.thumbnail:nth-child(3) {
background-color: rebeccapurple;
}
div.thumbnail:nth-child(4) {
background-color: powderblue;
}
div.thumbnail:nth-child(5) {
background-color: firebrick;
}
div.thumbnail:nth-child(6) {
background-color: sienna;
}
div.thumbnail:nth-child(7) {
background-color: bisque;
}
div.thumbnail:nth-child(8) {
background-color: navy;
}
div#slide_wrapper>button {
height: fit-content;
align-self: center;
font-size: 24px;
font-weight: 800;
border: none;
outline: none;
}
div#slide_wrapper>button:hover {
cursor: pointer;
}
.slide_arrow.disabled {
opacity: 0.2;
cursor: auto !important;
}
<div id="slide_wrapper">
<button id="slide_left" class="slide_arrow">❮</button>
<div id="slider">
<div class="thumbnail active">1</div>
<div class="thumbnail">2</div>
<div class="thumbnail">3</div>
<div class="thumbnail">4</div>
<div class="thumbnail">5</div>
<div class="thumbnail">6</div>
<div class="thumbnail">7</div>
<div class="thumbnail">8</div>
</div>
<button id="slide_right" class="slide_arrow">❯</button>
</div>

a simple solution to this is to actually create a css class that defines the style of arrows when there are no more items and then just add/remove class based on current index of items

How to add a class to a div, regardless of whether the outer divs or the inner divs are clicked?

So I am trying to make a calculator button, which shows a shadow whenever it is clicked, and the shadow disappears when the mouse button is let go off.
The problem now is that I can achieve the intended effect, except that when the inner divs are clicked, the same effect doesn't occur. But if I do not disable the propagation of the inner divs, the shadow does not appear as intended. How do I fix this?
html
<div class="calcButton">
<div class="calcButt">
<div class="calcButtonVal">0</div>
</div>
</div>
css
.calcButton {
background-color: black;
width: 90px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
color: white;
font: 24px Arial, sans-serif;
}
.calcButt {
border-radius: 50%;
width: 50%;
height: 70%;
display: flex;
justify-content: center;
align-items: center;
transition: background-color 0.3s ease;
}
.clickedShadow {
background-color: #9999999a;
}
js
const calcButton = document.querySelector(".calcButton");
function addShadow(e) {
console.log("hello");
e.target.firstElementChild.classList.add("clickedShadow");
}
function removeShadow(e) {
e.target.firstElementChild.classList.remove("clickedShadow");
}
calcButton.addEventListener("mousedown", addShadow);
calcButton.addEventListener("mouseup", removeShadow);
function stopProp(e) {
e.stopPropagation();
}
const calcButt = document.querySelector(".calcButt");
const calcButtonVal = document.querySelector(".calcButtonVal");
calcButt.addEventListener("mousedown", stopProp);
calcButt.addEventListener("mouseup", stopProp);
calcButt.addEventListener("click", stopProp);
calcButtonVal.addEventListener("mousedown", stopProp);
calcButtonVal.addEventListener("mouseup", stopProp);
calcButtonVal.addEventListener("click", stopProp);

I'd simply use the :active pseudo selector for a pure CSS solution to this:
.calcButton:active .calcButt {
background-color: #9999999a;
}
Here's an example snippet, run it and see if it's what you're looking for.
.calcButton {
background-color: black;
width: 90px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
color: white;
font: 24px Arial, sans-serif;
}
.calcButt {
border-radius: 50%;
width: 50%;
height: 70%;
display: flex;
justify-content: center;
align-items: center;
transition: background-color 0.3s ease;
}
.calcButton:active .calcButt {
background-color: #9999999a;
}
<div class="calcButton">
<div class="calcButt">
<div class="calcButtonVal">0</div>
</div>
</div>

If you will be more specific about the element you want to add the class to, you can reduce a lot of the code and achieve what you wanted without preventing the propagation:
(Notice that only the JS file is different from your code)
const calcButton = document.querySelector(".calcButton");
function addShadow(e) {
console.log("hello");
calcButt.classList.add("clickedShadow");
}
function removeShadow(e) {
calcButt.classList.remove("clickedShadow");
}
calcButton.addEventListener("mousedown", addShadow);
calcButton.addEventListener("mouseup", removeShadow);
// function stopProp(e) {
// e.stopPropagation();
// }
const calcButt = document.querySelector(".calcButt");
// const calcButtonVal = document.querySelector(".calcButtonVal");
// calcButt.addEventListener("mousedown", stopProp);
// calcButt.addEventListener("mouseup", stopProp);
// calcButt.addEventListener("click", stopProp);
// calcButtonVal.addEventListener("mousedown", stopProp);
// calcButtonVal.addEventListener("mouseup", stopProp);
// calcButtonVal.addEventListener("click", stopProp);
.calcButton {
background-color: black;
width: 90px;
height: 60px;
display: flex;
justify-content: center;
align-items: center;
color: white;
font: 24px Arial, sans-serif;
}
.calcButt {
border-radius: 50%;
width: 50%;
height: 70%;
display: flex;
justify-content: center;
align-items: center;
transition: background-color 0.3s ease;
}
.clickedShadow {
background-color: #9999999a;
}
<body>
<div class="calcButton">
<div class="calcButt">
<div class="calcButtonVal">0</div>
</div>
</div>
</body>