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.
Context:
I'm working through the Odin Project and trying to make an etch-a-sketch board.
The project asks for you to make a board that you can draw on when your mouse hovers over, but it has to be made out of a grid of small divs that you add to the DOM from your javascript.
Problem:
When the divs get generated to make the grid, they appear with a width of x (user generated) but a height of 0. So you can't hover over them. I expect to see a large blue square but instead it is blank unless I go out of my way to add in a height value in the css. The divs are created in the for-loop of line 14 of the javascript file here: https://jsfiddle.net/krmanski/ry12xumq/9/
function generateCanvas(gridSize){
//create the gridlines
//divide canvas into A x A where A = the number provided by user
let canvas = document.querySelector(".main-grid-container");
canvas.style.gridTemplateColumns = `repeat(${gridSize}, 1fr)`;
canvas.style.gridTemplateRows = `repeat(${gridSize}, 1fr)`;
alert("canvas should be generated");
let divsTotal = (gridSize * gridSize);
for(let i = 0; i < divsTotal; i++){
let div = document.createElement("div");
div.classList.add("grid-item");
div.style.backgroundColor="blue";
//this will allow our divs to change color when hovered over
div.addEventListener("mouseover", function(){
div.style.backgroundColor="black";
})
canvas.appendChild(div);
}
}
I have looked at other people's solutions on github and youtube and nearly all of them use the exact same code I do in my for-loop, and they apply no CSS at any point to tell their divs to have height. I am thinking of starting from a blank slate because I just can't figure out the problem but at this point I'm just idly curious what is the problem and why my divs are appearing with 0 height.
Setting align-items: center on .main-grid-container is what prevents your divs from being stretched vertically. I recommend simply removing that declaration, the initial value normal will achieve the desired effect.
Is this the sort of effect that you were after? The following uses css variables to determine width/height of the individual grid squares based upon simple arithmetic of the canvas with divided by the number of grid-items. The CSS variables are updated within the generateCanvas function and this can be extended to control the various colours presumably set by the buttons.
let active=true;
//wait until the HTML and CSS are loaded before you run the javascript
document.addEventListener("DOMContentLoaded", function() {
generateCanvas();
document.addEventListener('contextmenu',e=>{
e.preventDefault();
if( e.target.parentNode==document.querySelector(".main-grid-container") ){
active=false;
}
})
document.addEventListener('blur',()=>active=true);
document.addEventListener('click',()=>active=true);
});
function generateCanvas(size=16) {
// Find the doc root to access variables
let root = document.documentElement;
let canvas = document.querySelector(".main-grid-container");
canvas.style.gridTemplateColumns = `repeat(${size}, 1fr)`;
canvas.style.gridTemplateRows = `repeat(${size}, 1fr)`;
// important to clear the grid otherwise it will grow
// on each invocation of this function!
canvas.innerHTML = '';
// calculate the size of the containg canvas
let box = canvas.getBoundingClientRect();
let w = box.width / size;
let h = box.height / size;
// update the variables with new sizes
root.style.setProperty('--w', `${w}px`);
root.style.setProperty('--h', `${h}px`);
for( let i=0; i < Math.pow(size, 2); i++ ) {
let div = document.createElement("div");
div.classList.add("grid-item");
canvas.appendChild(div);
}
// Rather than assign the same event listener to every grid square, use a `delegated`
// event listener bound to the canvas.
canvas.addEventListener('mouseover',e=>{
let cn='grid-paint';
if( active && e.target.classList.contains('grid-item') && !e.target.classList.contains( cn ) )e.target.classList.add( cn )
})
}
function selectSize() {
//has the user type a number and returns that number, but only if it is between 0 and 100
let userInput = prompt("What should be the size of the board?")
let message = document.querySelector("#message")
if (isNaN( userInput ) ) {
message.innerText = "Please provide a number only";
} else if( Number(userInput) < 0 || Number(userInput) > 100) {
message.innerText = "Please only provide a number between 1 and 100"
} else {
message.innerText = `You selected a ${userInput} x ${userInput} sized grid for your canvas`
generateCanvas(userInput);
}
return true;
}
const setcolours=( fgcol='black', bgcol='blue' )=>{
let root = document.documentElement;
root.style.setProperty(`--fgcolour`,fgcol);
root.style.setProperty(`--bgcolour`,bgcol);
return true;
}
const reset=()=>{
generateCanvas();
return setcolours();
}
const buttonPress = e => {
let buttonID = e.target.id;
let alt=e.target.dataset.alt;
switch(buttonID) {
case "modify-grid":return selectSize();
case 'blue':return setcolours(alt,buttonID);
case "black":return setcolours(alt,buttonID);
case "red":return setcolours(alt,buttonID);
case "reset":return reset();
}
}
//get all buttons and make them listen for a click to run a function
let buttons = document.querySelectorAll(".button");
buttons.forEach(button => button.addEventListener("click", buttonPress));
#import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Comforter+Brush&display=swap');
#import url('https://fonts.googleapis.com/css?family=Quicksand&display=swap');
/*
Two variables to dictate width and height of grid elements.
These values are updated by javascript.
*/
:root {
--w:1px;
--h:1px;
--bgcolour:blue;
--fgcolour:black;
}
h3 {
font-family: 'Quicksand', sans-serif;
font-weight: 700;
font-style: normal;
letter-spacing: -.02em;
color: rgb(15, 45, 0);
font-size: 18px;
line-height: 1.15;
}
.header {
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
margin: 20px;
border: solid;
border-color: black;
flex-direction: column;
}
.main-program-space {
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
margin: 20px;
border: solid;
border-color: black;
flex-direction: column;
}
.buttons-flexbox {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
gap: 10px;
padding: 10px;
margin: 20px;
border: solid;
border-color: red;
list-style: none;
}
/* This will make our buttons look cool and change when hovered over */
.button {
align-items: center;
background-image: linear-gradient(144deg, #AF40FF, #5B42F3 50%, #00DDEB);
border: 0;
border-radius: 8px;
box-shadow: rgba(151, 65, 252, 0.2) 0 15px 30px -5px;
box-sizing: border-box;
color: #FFFFFF;
display: flex;
flex:1;
font-family: Phantomsans, sans-serif;
font-size: 1rem;
justify-content: center;
line-height: 1rem;
text-decoration: none;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
white-space: nowrap;
cursor: pointer;
min-width: 130px;
min-height: 50px;
}
.button:active,
.button:hover {
outline: 0;
}
.main-grid-container {
display: grid;
justify-content: center;
align-items: center;
margin: 20px;
border: none;
width: 500px;
height: 500px;
padding:10px;
border:1px solid black;
}
.bottom-text {
display: flexbox;
justify-content: center;
align-items: center;
padding: 10px;
margin: 20px;
border: solid;
border-color: red;
}
.footer-flexbox {
display: flexbox;
justify-content: center;
align-items: center;
padding: 10px;
margin: 20px;
border: solid;
border-color: black;
}
.footer {
display: flexbox;
justify-content: center;
align-items: center;
padding: 10px;
margin: 20px;
border: solid;
border-color: red;
}
.grid-item {
display: flex;
flex: 1;
margin: 0;
background: var(--bgcolour);
width: var(--w);
height: var(--h);
}
.grid-paint{
background:var(--fgcolour);
}
<div class="title header">
<h3>The html is working but what about CSS</h3>
<p id="message">(messages from main.js will print here)</p>
</div>
<div class="main-program-space">
<ul class="buttons-flexbox">
<li><button id="modify-grid" class="button modify-grid">Modify Grid</button></li>
<li><button id="blue" data-alt='black' class="button blue">Blue</button></li>
<li><button id="black" data-alt='blue' class="button black">Black</button></li>
<li><button id="red" data-alt='yellow' class="button red">Red</button></li>
<li><button id="reset" class="button reset">Reset</button></li>
</ul>
<div class="main-grid-container"></div>
<div class="bottom-text">
<h3>XXXXX bottom text XXXXX</h3>
</div>
</div>
<div class="footer-flexbox">
<div class="footer">
<h3>XXXXX footer XXXXX</h3>
</div>
</div>
For some reason, your line ( I tried to figure the reason out, but couldn't )
// style.insertRule(`.grid-item {height: ${gridSize}}`,0);
doesn't select grid-items. but I found that you selected them when you added grid-item class. so just add div.style.height = "100%"; after that.
//wait until the HTML and CSS are loaded before you run the javascript
document.addEventListener("DOMContentLoaded", function(){
generateCanvas(16);
console.log("dom content is loaded");
});
function generateCanvas(gridSize){
//create the gridlines
//divide canvas into A x A where A = the number provided by user
let canvas = document.querySelector(".main-grid-container");
canvas.style.gridTemplateColumns = `repeat(${gridSize}, 1fr)`;
canvas.style.gridTemplateRows = `repeat(${gridSize}, 1fr)`;
// alert("canvas should be generated");
// style.insertRule(`.grid-item {height: ${gridSize}}`,0);
let divsTotal = (gridSize * gridSize);
for(let i = 0; i < divsTotal; i++){
let div = document.createElement("div");
div.classList.add("grid-item");
div.style.backgroundColor="blue";
div.style.height = "100%";
//this will allow our divs to change color when hovered over
div.addEventListener("mouseover", function(){
div.style.backgroundColor="black";
})
canvas.appendChild(div);
}
}
function selectSize(){
//has the user type a number and returns that number, but only if it is between 0 and 100
let userInput = prompt("What should be the size of the board?")
let message = document.querySelector("#message")
if (userInput == ""){
message.innerText = "Please provide a number only";
} else if(userInput < 0 || userInput > 100){
message.innerText ="Please only provide a number between 1 and 100"
} else {
message.innerText =`You selected a ${userInput} x ${userInput} sized grid for your canvas`
generateCanvas(userInput);
}
}
const buttonPress = e =>{
//takes in the id of the button that was pressed.
let buttonID = e.target.id;
console.log(buttonID);
alert(`button ${buttonID} was pressed`);
switch(buttonID){
case "modify-grid":
selectSize();
break;
case "black":
alert('you pressed black');
break;
case "red":
alert('you pressed red');
break;
case "reset":
alert('you pressed reset');
break;
}
}
//get all buttons and make them listen for a click to run a function
let buttons = document.querySelectorAll(".button");
buttons.forEach(button => button.addEventListener("click", buttonPress));
#import url('https://fonts.googleapis.com/css?family=Muli&display=swap');
#import url('https://fonts.googleapis.com/css2?family=Comforter+Brush&display=swap');
#import url('https://fonts.googleapis.com/css?family=Quicksand&display=swap');
h3 {
font-family: 'Quicksand', sans-serif;
font-weight: 700;
font-style: normal;
letter-spacing: -.02em;
color: rgb(15, 45, 0);
font-size: 18px;
line-height: 1.15;
}
.header{
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
margin: 20px;
border: solid;
border-color: black;
flex-direction: column;
}
.main-program-space{
display: flex;
justify-content: center;
align-items: center;
padding: 10px;
margin: 20px;
border: solid;
border-color: black;
flex-direction: column;
}
.buttons-flexbox{
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px;
margin: 20px;
border: solid;
border-color: red;
list-style: none;
flex-direction: row;
gap: 20px;
}
/* This will make our buttons look cool and change when hovered over */
.button {
align-items: center;
background-image: linear-gradient(144deg,#AF40FF, #5B42F3 50%,#00DDEB);
border: 0;
border-radius: 8px;
box-shadow: rgba(151, 65, 252, 0.2) 0 15px 30px -5px;
box-sizing: border-box;
color: #FFFFFF;
display: flex;
font-family: Phantomsans, sans-serif;
font-size: 20px;
justify-content: center;
line-height: 1em;
max-width: 100%;
min-width: 140px;
padding: 3px;
text-decoration: none;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
white-space: nowrap;
cursor: pointer;
min-width: 150px;
min-height: 50px;
}
.button:active,
.button:hover {
outline: 0;
}
.main-grid-container{
display: grid;
justify-content: center;
align-items: center;
padding: 10px;
margin: 20px;
border: solid;
border-color: red;
width: 500px;
height: 500px;
}
/* .grid-item{
height: 12px;
} */
.bottom-text{
display: flexbox;
justify-content: center;
align-items: center;
padding: 10px;
margin: 20px;
border: solid;
border-color: red;
}
.footer-flexbox{
display: flexbox;
justify-content: center;
align-items: center;
padding: 10px;
margin: 20px;
border: solid;
border-color: black;
}
.footer{
display: flexbox;
justify-content: center;
align-items: center;
padding: 10px;
margin: 20px;
border: solid;
border-color: red;
}
<body>
<div class ="title header">
<h3>The html is working but what about CSS</h3>
<p id="message">(messages from main.js will print here)</p>
</div>
<div class="main-program-space">
<ul class="buttons-flexbox">
<li><button id="modify-grid" class="button modify-grid">Modify Grid</span></button></li>
<li><button id="black" class="button black">Black</button></li>
<li><button id="red" class="button red">Red</button></li>
<li><button id="reset" class="button reset">Reset</button></li>
</ul>
<div class="main-grid-container">
</div>
<div class="bottom-text">
<h3>XXXXX bottom text XXXXX</h3>
</div>
</div>
<div class="footer-flexbox">
<div class="footer">
<h3>XXXXX footer XXXXX</h3>
</div>
</div>
</body>
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);
}
I have set up an event Listener and I want it so that when I click, the text in the middle changes from "Bubble" to "Bounce".
whole code:
document.getElementById("text").innerHTML = "Bubble";
document.addEventListener("click", next);
function next() {
document.getElementById("text").innerHTML = "Bounce"
}
section {
width: 100%;
height: 100vh;
overflow: hidden;
background: #1F69FA;
display: flex;
justify-content: center;
align-items: center;
}
section h2 {
font-size: 10em;
color: #333;
margin: 0 auto;
text-align: center;
font-family: consolas;
}
<section>
<h2 id="text"></h2>
</section>
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>