onclick function not working in javascript - javascript

I am working on a project and i added an onlclick function in 3 elements in my code but none of them works because that element is not a button or an anchor tag i guess but i have to do something when that area is clicked here is the image:-
This is the image
I want to either click on the white part of the circle or the the colourfull part of the circle , right now i am trying to click on the colorfull part but i get nothing but when i put an anchor tag in one of the heading and then use onclick on it then it works but in the circle there is no text on which i can add anchor tag i also tried to use change the div to button type of class items and it became clickable but the java script still not works .
Here is the code :-
'HTML'
<!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="main.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=Barlow&family=Barlow+Condensed&family=Barlow+Semi+Condensed&display=swap" rel="stylesheet">
<title>Rock Paper Scisccor</title>
</head>
<body>
<div class="scoreboard">
<div class="name">
<ul>
<li id="rock"><strong> ROCK </strong> </li>
<li id="Paper"><strong> PAPER </strong> </li>
<li id="Scissors"><strong> SCISSORS </strong> </li>
</ul>
</div>
<div class="score">
<div id="score_name"><strong>SCORE</strong></div>
<div id="score_value"><strong>12</strong></div>
</div>
</div>
<div class="main-game">
<div class="inside_main">
<zz class="items" id="rock_1" onclick="rock_2">
<div class="inside_color">
<img src="rock-paper-scissors-master\rock-paper-scissors-master\images\icon-rock.svg" alt="">
</div>
</div>
<div class="items" id="paper_1" onclick="paper_2">
<div class="inside_color">
<img src="rock-paper-scissors-master\rock-paper-scissors-master\images\icon-paper.svg" alt="">
</div>
</div>
<div class="items" id="scissors_1" onclick="scissors_2">
<div class="inside_color">
<img src="rock-paper-scissors-master\rock-paper-scissors-master\images\icon-scissors.svg" alt="">
</div>
</div>
</div>
</div>
<script>
function rock_2(){
console.log('k')
document.getElementById('rock').innerHTML='k'
}
function paper_2(){
console.log('k')
}
function scissors_2(){
console.log('k')
}
</script>
</body>
</html>
CSS
body{
margin: 2px 2px;
/* font-family: 'Barlow', sans-serif; */
/* font-family: 'Barlow Condensed', sans-serif; */
font-family: 'Barlow Semi Condensed', sans-serif;
background-image: radial-gradient( hsl(214, 47%, 23%) , hsl(237, 49%, 15%));
background-repeat: no-repeat;
overflow: hidden;
height: 100vh;
}
.scoreboard{
width: 40%;
height: 10rem;
display: flex;
gap: 30%;
border: 2px solid grey;
margin: auto;
border-radius: 10px;
border-width: 3px;
margin-top: 3%;
}
.name{
color: white;
font-size: 2.7rem;
/* border: 2px solid white; */
margin: 15px;
width: 50%;
line-height: 2.4rem;
align-self: center;
}
.name ul{
list-style-type: none;
padding: 0px 0px;
margin: 0px ;
/* border: 2px solid yellow; */
}
.score{
display: flex;
/* align-self: center; */
flex-direction: column;
border: 2px solid white;
background-color: white;
border-radius: 5px;
/* padding: 7%; */
width: 40%;
/* height: 40vh; */
margin: 3%;
}
#score_name{
display: flex;
align-self: center;
padding: 5px;
color: hsl(229, 64%, 46%);
letter-spacing: .2rem;
}
#score_value{
color: hsl(229, 25%, 31%);
font-size: 4rem;
display: flex;
align-self: center;
}
.main-game{
margin-top: 4%;
}
/* .inside_main ::after{
content: '';
background: url("rock-paper-scissors-master/rock-paper-scissors-master/images/bg-triangle.svg");
background-repeat: no-repeat;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
} */
.inside_main{
display: flex;
/* border: 2px solid whitesmoke; */
width: fit-content;
margin: auto;
height: 60vh;
}
.items{
height: 225px;
width: 225px;
border-radius: 50%;
display: grid;
/* background-color: white; */
}
.items:hover::before{
content: '';
display: flex;
position: absolute;
justify-self: center;
align-self: center;
height: 285px;
width: 285px;
opacity: 10%;
z-index: -1;
background-color: whitesmoke;
border-radius: 50%;
}
.inside_color img{
display: grid;
align-self: center;
justify-self: center;
}
.inside_color{
display: grid;
justify-self: center;
align-self: center;
height: 182px;
width: 182px;
background-color: whitesmoke;
border-radius: 50%;
}
#rock_1{
background: linear-gradient(to bottom, hsl(349, 71%, 52%) , hsl(349, 70%, 56%));
}
#paper_1{
background: linear-gradient(to bottom, hsl(230, 89%, 62%) , hsl(230, 89%, 65%));
position: relative;
top: 50%;
/* left: 25%; */
}
#scissors_1{
background: linear-gradient(to bottom, hsl(39, 89%, 49%) , hsl(40, 84%, 53%));
}

When calling a function in onclick, you must specify that it is a function.
Use () at the end.
Example:
<div class="items" id="paper_1" onclick="paper_2()">

you should add the brackets
<div class="items" id="rock_1" onclick="rock_2()">
<div class="items" id="paper_1" onclick="paper_2()">
<div class="items" id="scissors_1" onclick="scissors_2()">

Where you have inline onclick should be:
onclick="rock_2()"
with ()

add onclick ="rock_2()" instead of "rock_2"

You need to specify that a function is called by appending () at the end.
<div class="items" id="rock_1" onclick="rock_2()">
<div class="items" id="paper_1" onclick="paper_2()">
<div class="items" id="scissors_1" onclick="scissors_2()">
Also I guess you have missed a div in the line
<zz class="items" id="rock_1" onclick="rock_2">
Replace zz with div

Related

JS NavSlide not working properly when I click on it

I have looked at the other questions that have been answered, tried them out myself and I still couldn't click on my burger and have the slide out menu. I was following a tutorial and it was turning out fine until I got to the JavaScript section of it. I'm not really too sure what I am doing wrong here. Looked around in the forum and tried all the solutions I could find for it to still not work.
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.navigation');
burger.addEventListener('click', () => {
nav.classList.toggle('nav-active');
});
}
const app = () => {
navSlide();
}
*{
margin: 0px;
padding: 0px;
box-sizing: border-box;
}
.townlogo{
display: flex;
justify-content: center;
margin-top: 20px;
mix-blend-mode: multiply;
}
nav{
display: flex;
justify-content: space-around;
align-items: center;
min-height: 8vh;
background-color: white;
margin-bottom: 20px;
}
ul.navigation{
display: flex;
justify-content: space-around;
width: 40%;
align-items: center;
margin-top: 20px;
background-color: (white);
font-family: athelas, serif;
font-weight: 400;
font-style: normal;
letter-spacing: 1px;
}
ul.navigation li{
list-style: none;
}
ul.navigation a{
color: black;
text-decoration: none;
}
.burger{
display: none;
cursor: pointer;
}
.burger div{
width: 25px;
height: 3px;
background-color: black;
margin: 5px;
}
li a:hover{
color: rgb(190 30 45);
}
.indexbody{
height: 100%;
margin: 0;
font-size: 17px;
font-family: athelas, serif;
font-weight: 400;
font-style: normal;
line-height: 1.8em;
color: rgb(65 57 61);
}
.img1, .img2{
position: relative;
opacity:0.70;
background-position: center;
background-size:cover;
background-repeat: no-repeat;
background-attachment: fixed; /*Can be adjusted for mobile viewing*/
}
.img1{
background-image: url('../Images/lantern.jpg');
min-height: 600px;
}
.img2{
background-image: url('../Images/cookingcropped.jpg');
min-height: 400px;
}
.section{
text-align: center;
padding:50px 80px;
}
.section-mission{
background-color: rgb(65 57 61);
color:white;
}
.section-vision{
background-color: rgb(65 57 61);
color:white;
}
.menutext{
position: absolute;
font-size: 40px;
top: 50%;
width: 100%;
text-align: center;
color: white;
letter-spacing: 3px;
text-shadow: 3px 3px 3px black ;
}
.menutext .border{
border-style: solid;
border-width: 4px;
padding: 8px;
color: white;
box-shadow: 3px 3px 3px black;
text-decoration: none;
}
a.viewmenu:link{
text-decoration: none;
}
a.viewmenu:visited{
text-decoration: none;
}
a.viewmenu:hover{
background-color: transparent;
}
a.viewmenu:active{
text-decoration: none;
}
/*rectangle div contains copyright footer section*/
.rectangle{
text-align: center;
font-family: athelas, serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
border-left: 520px solid rgb(190 30 45) ;
border-right: 520px solid rgb(190 30 45) ;
margin-top: 20px;
margin-bottom: 20px;
}
#media screen and (max-width: 1024px){
.navigation{
width: 50%;
}
}
#media screen and (max-width: 768px){
body{
overflow-x: hidden;
}
.navigation{
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: (white);
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.navigation li{
opacity: 0;
}
.burger{
display: block;
}
}
.nav-active{
transform: translateX(0%);
}
.rectangle{
text-align: center;
font-family: athelas, serif;
font-weight: 400;
font-style: normal;
font-size: 14px;
border-left: 200px solid rgb(190 30 45) ;
border-right: 200px solid rgb(190 30 45) ;
margin-top: 20px;
margin-bottom: 20px;
}
<!DOCTYPE html>
<html lang="en">
<head> <!--Header containing title,meta,and links-->
<title>ctowncuisine</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="https://use.typekit.net/qsw5hiv.css">
<link rel="stylesheet" href="CSS/style.css"> <!--link reference to CSS stylesheet-->
</head>
<body>
<nav>
<div class="townlogo"> <!--Technically the header of the page, but used in the body for consistency-->
<img src="Images/townlogo.jpg" alt="chinese restaurant logo">
</div>
<ul class="navigation"> <!--section for top navigation bar-->
<li>Home</li>
<li>Menu</li>
<li>Contact</li>
<li><span>Reserve Table</span></li>
</ul>
<div class="burger" id="burger">
<div class="line1"></div>
<div class="line2"></div>
<div class="line3"></div>
<div class="line4"></div>
</div>
</nav>
<div class="indexbody"></div>
<div class="img1"></div> <!--lantern.html image class-->
<a class="viewmenu" href="menu.html"> <!--Linking border text with href-->
<div class="menutext">
<span class="border ">
View Our Menu
</span>
</div>
</a>
<section class="section section-mission">
<h2 class="mission">Our Mission</h2> <!--This is the second heading containing: Our Mission section-->
<p>To bring quality, style and the wish for good fortune to all of our guests. We provide a high-end experience through Chinese cuisine.
</p> <!--Paragraph containing the mission statement of TOWN-->
</section>
<div class="img2"> <!--div classifying second image: cookingcropped.html-->
<span class="border">
</span>
</div>
<section class="section section-vision">
<h2 class="vision">Vision</h2> <!--header 2 containing a class for CSS: Vision-->
<p> <span style="color: rgb( 213 162 141);">TOWN</span> combines a variety of chinese cuisine to excite and delight our customers.
Our vision for the future is to create experiential dining that is more than just a night out.<br> We aim to bring quality and luxury across all aspects of our brand.
The approach of <span style="color: rgb( 213 162 141);">TOWN</span> is to develop our brand with the understanding of both our culture and consumer insights.<br> Within our vision always lives the promise of inspiring creativity, conversation and quality.
Our audience is a high-end clientele who values a dining experience.<br>The age range of our customers are from early 30s-60s. We would like them to come back for both personal dining and events.
</p>
</section>
<footer>
<div class="rectangle"> <!--This section is the footer-->
© 2022 ctowncuisine.com designed by <span>Mariah Mendoza</span>
</div>
</footer>
<script> src="./js/app.js"</script>
</body>
</html>
It‘s hard to help because your code does not work yet. The burger has no size so we cannot click it.
Otherwise, your positioning and transition seems fine. But you’re hiding all menu items with opacity: 0. Since the menu is white, you will not see anything.
The current code has some accessibility issues, meaning it does not work well with assistive technology, which people with disabilities rely on. I improved them and I’ll explain them further down.
const navSlide = () => {
const burger = document.querySelector('.burger');
const nav = document.querySelector('.navigation');
burger.addEventListener('click', () => {
if (nav.classList.toggle('nav-active')) {
// now it’s active
burger.setAttribute('aria-expanded', true);
nav.setAttribute('aria-hidden', false);
} else {
burger.setAttribute('aria-expanded', false);
nav.setAttribute('aria-hidden', true);
}
});
}
const app = () => {
navSlide();
}
.navigation {
list-style-type: none;
}
.navigation a {
display: block;
padding: .5em;
}
#media screen and (max-width: 1024px) {
.navigation {
width: 50%;
}
}
#media screen and (max-width: 768px) {
body {
overflow-x: hidden;
}
.navigation {
position: absolute;
right: 0px;
height: 92vh;
top: 8vh;
background-color: (white);
display: flex;
flex-direction: column;
align-items: center;
width: 50%;
transform: translateX(100%);
transition: transform 0.5s ease-in;
}
.burger {
display: block;
width: 40px;
}
.burger .line {
display: block;
background-color: black;
height: .2em;
margin: .4em 0;
}
.nav-active {
transform: translateX(0%);
}
}
<nav>
<div class="townlogo">
<!--Technically the header of the page, but used in the body for consistency-->
<img src="Images/townlogo.jpg" alt="Town">
</div>
<button class="burger" id="burger" aria-expanded="false" aria-controls="navigation" onclick="navSlide()">
<div class="line"></div>
<div class="line"></div>
<div class="line"></div>
</button>
<ul class="navigation" id="navigation">
<!--section for top navigation bar-->
<li>Home</li>
<li>Menu</li>
<li>Contact</li>
<li>Order Online</li>
</ul>
</nav>

Why does my bottom right image keep getting stretched?

I'm new at coding (especially html/css/js) and for some reason, my bottom right image, keeps getting strected and it's not at the bottom right. The original image's resolution is 2280 x 2280.
This is for school. Is there any way to fix this simply? I'm really not sure where the error is.`
body {
background-image: url("https://lh3.googleusercontent.com/3ZUxEMdTqMRqUSdgVZ2o-g64VwIIpg9vrudRJ_sgHc0sH8kSyw2wniPdctzoJvYkIWxCdMWG7z02RtSndmuDdtuBRbnC-KiCjJIIWitWyTvbOlSIycuZTwTFYhqGr2qj3YF8K84rlA=w2400?source=screenshot.guru");
height: 100%;
background-position: center;
background-repeat: repeat;
background-size: cover;
font-family: 'Carter One', cursive;
color: white;
}
h1 {
color: white;
text-align: center;
}
h2 {
color: white;
text-align: center;
}
img {
border: 5px solid #FFFFFF;
}
body, html {
height: 100%;
margin: 0;
font-family: 'Carter One', cursive;
}
.topnav {
overflow: hidden;
background-color: #333;
}
.topnav a {
float: left;
color: #f2f2f2;
text-align: center;
padding: 14px 16px;
text-decoration: none;
font-size: 17px;
}
.topnav a:hover {
background-color: #ddd;
color: black;
}
.topnav a.active {
background-color: #F3721D;
color: white;
}
.top_left{
float: left;
position: absolute;
left: 16px;
}
.right {
float: right;
position: absolute;
top: 200px;
right: 16px;
}
.bottom_left {
float: left;
bottom: 0px;
left: 16px;
z-index: 10;
padding: 0px;
margin: 500px 500px 100px 16px;
}
.bottomright {
float: right;
bottom: 0px;
right: 16px;
z-index: 10;
padding: 0px;
margin: 500px 16px 100px 500px;
}
<!DOCTYPE html>
<html>
<head>
<title>Charlotte's super cool art gallery</title>
<link rel="stylesheet" href="C:\Users\blazette\Downloads\bs\CSS\mystyle.css">
<link href="https://fonts.googleapis.com/css2?family=Carter+One&display=swap" rel="stylesheet">
</head>
<body>
<div class="topnav">
<a class="active" href="#home">Home</a>
Commissions
About
</div>
<div class="cubed">
<h1>I design stuff.</h1>
</div>
<div class="cubed">
<h2> My works.</h2>
</div>
<div class="top_left">
<img src="https://lh3.googleusercontent.com/nXUNj-kqfceSzKATH6slZLbb10j9p-WUilkT8v5EFBoA8wsfPJHxaBflhe51roafWlM8FV8z8rlOI4ET_O5j0pyHCoMN9W0_y8XGBcwsS7PSmBMtg-_K6x6VpoxQ0zts8C77DtR7nw=w2400?source=screenshot.guru" img width="310" height="372" id="top_left">
<p>
A digital illustration of Sherlock Holmes <br>from the TV series Sherlock.
</p>
</div>
<div class="bottom_left">
<img src="https://lh3.googleusercontent.com/AiNJsDbDBkv0rXUj0wEe-vdggMKBTNFEyfB-Ukw9DrsLAKj7I_-jWjxOPYMG50ItNXolThQesF3LnVyjsuPSRkhln0nmoL1cdEewTr7H03w2JauCUqseab2Wol-9mP8Adv0dT18iiw=w2400?source=screenshot.guru" img width="310" height="372">
<p>
A digital illustration of Clockson. An <br>original character based on antique clocks
</p>
</div>
<div class="right">
<img src="https://lh3.googleusercontent.com/9NRWdbN3EqE5u6Z4cZDZmBVu2Ar3o8lcBR09C8gtTXDmz0rDdZRuaL23UDM7B-bgBVSfg_4w4lvZiV4I6qwDlHoBsYCbgjybw5ZOGPtu_vj-8whkKHtaKN9PwbNEDix-RHD2zMHLrQ=w2400?source=screenshot.guru" img width="310" height="372" id="right">
<p>
Doctor Who fanart of the 13th Doctor.
</p>
</div>
<div class="bottomright">
<img src="https://lh3.googleusercontent.com/BhntO9ci2WyceI-7qWdlNzsUcS0Bo8_29s2HDO09gM2nSV6Syehodp5q14wQ9vgUUpE8KL9elU9z52xLHDYhigypqpAnFO0inqgoW1fOlTRwlCeXwH6uppVSLBjHBKMfXfQ14xlIJw=w600-h315-p-k" width="310" height="310">
</div>
</body>
</html>
`
You're hard coding the image width and height, it may be the case that some of those images aren't actually that dimension. Try and see if changing the width and height fixes it. Change the width and height in the html tag for the

Not getting the shadow on the winner tab

I made a rock paper Scissors game in html css and js and the game is working fine but there is a slight problem i added a feature that whichever side wins either the computer or the user there should be a shadow behind the winner tab and that too is working but the problem is that it is totally random even when i put that in a condition of when to toggle and it gives the shadow to wrong tab and sometimes to both tabs here is the code:
HTML AND JS:-
<!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="main.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=Barlow&family=Barlow+Condensed&family=Barlow+Semi+Condensed&display=swap" rel="stylesheet">
<title>Rock Paper Scisccor</title>
</head>
<body>
<div class="scoreboard">
<div class="name">
<ul>
<li id="rock"><strong> ROCK </strong> </li>
<li id="Paper"><strong> PAPER </strong> </li>
<li id="Scissors"><strong> SCISSORS </strong> </li>
</ul>
</div>
<div class="score">
<div id="score_name"><strong>SCORE</strong></div>
<div id="score_value"><strong>0</strong></div>
</div>
</div>
<div class="main-game">
<div id="inside_main">
<div class="items" id="rock_1" onclick="rock_2()">
<button class="inside_color">
<img src="rock-paper-scissors-master\rock-paper-scissors-master\images\1.svg" alt="">
</button>
</div>
<div class="items" id="paper_1" onclick="paper_2()">
<button class="inside_color">
<img src="rock-paper-scissors-master\rock-paper-scissors-master\images\2.svg" alt="">
</button>
</div>
<div class="items" id="scissors_1" onclick="scissors_2()">
<button class="inside_color">
<img src="rock-paper-scissors-master\rock-paper-scissors-master\images\3.svg" alt="">
</button>
</div>
</div>
</div>
<div id="results">
<div class="content">
<div id="left_side">YOU PICKED</div>
<div id="left_content">
<div class="items_1" id="user" >
<div class="inside_color" >
<img id="user_img" src="rock-paper-scissors-master\rock-paper-scissors-master\images\3.svg" alt="">
</div>
</div>
</div>
</div>
<div class="play-again">
<div class="result" id="result_value"> YOU LOSE</div>
<button type="button" class="button-play" onclick="btn()">PLAY AGAIN</button>
</div>
<div class="content_1">
<div id="right_side">HOUSE PICKED</div>
<div id="right_content">
<div class="items_1" id="computer" >
<div class="inside_color">
<img id="computer_img" src="rock-paper-scissors-master\rock-paper-scissors-master\images\3.svg" alt="">
</div>
</div>
</div>
</div>
<div class="pics">
</div>
</div>
<script>
let score = 0
function condition(user_choice){
document.getElementById('inside_main').style.display='none'
document.getElementById('results').style.display='grid'
let res = 0
let computer_choice = Math.floor(Math.random() * 3) + 1;
if(user_choice==1 && computer_choice==3){
console.log('you win')
score = score+1
res = 1
}
else if(user_choice==2 && computer_choice==1){
console.log('you win')
score = score+1
res = 1
}
else if(user_choice==3 && computer_choice==2){
console.log('you win')
score = score+1
res = 1
}
else if(user_choice==computer_choice){
console.log('draw')
score = score
res = -1
}
else{
console.log('you lose')
score = score-1
res = 0
}
document.getElementById('user_img').src='rock-paper-scissors-master/rock-paper-scissors-master/images/'+user_choice+'.svg'
document.getElementById('computer_img').src='rock-paper-scissors-master/rock-paper-scissors-master/images/'+computer_choice+'.svg'
document.getElementById('score_value').innerHTML=score
if (res==0){
document.getElementById('result_value').innerHTML='YOU LOSE'
document.getElementById('computer').classList.toggle("big_hover")
console.log(res)
}
else if(res == -1){
document.getElementById('result_value').innerHTML='DRAW'
console.log(res)
}
else{
document.getElementById('result_value').innerHTML='YOU WON'
document.getElementById('user').classList.toggle("big_hover")
console.log(res)
}
// let res = 0
}
function rock_2(){
let user_choice = 1
condition(user_choice)
}
function paper_2(){
let user_choice = 2
condition(user_choice)
}
function scissors_2(){
let user_choice = 3
condition(user_choice)
}
function btn(){
document.getElementById('inside_main').style.display='flex'
document.getElementById('results').style.display='none'
// let res = 0
}
</script>
</body>
</html>
CSS:-
body{
margin: 2px 2px;
/* font-family: 'Barlow', sans-serif; */
/* font-family: 'Barlow Condensed', sans-serif; */
font-family: 'Barlow Semi Condensed', sans-serif;
background-image: radial-gradient( hsl(214, 47%, 23%) , hsl(237, 49%, 15%));
background-repeat: no-repeat;
overflow: hidden;
height: 100vh;
}
.scoreboard{
width: 40%;
height: 10rem;
display: flex;
gap: 30%;
border: 2px solid grey;
margin: auto;
border-radius: 10px;
border-width: 3px;
margin-top: 3%;
}
.name{
color: white;
font-size: 2.7rem;
/* border: 2px solid white; */
margin: 15px;
width: 50%;
line-height: 2.4rem;
align-self: center;
}
.name ul{
list-style-type: none;
padding: 0px 0px;
margin: 0px ;
/* border: 2px solid yellow; */
}
.score{
display: flex;
/* align-self: center; */
flex-direction: column;
border: 2px solid white;
background-color: white;
border-radius: 5px;
/* padding: 7%; */
width: 40%;
/* height: 40vh; */
margin: 3%;
}
#score_name{
display: flex;
align-self: center;
padding: 5px;
color: hsl(229, 64%, 46%);
letter-spacing: .2rem;
}
#score_value{
color: hsl(229, 25%, 31%);
font-size: 4rem;
display: flex;
align-self: center;
}
.main-game{
margin-top: 4%;
}
/* .inside_main ::after{
content: '';
background: url("rock-paper-scissors-master/rock-paper-scissors-master/images/bg-triangle.svg");
background-repeat: no-repeat;
height: 100%;
width: 100%;
position: absolute;
top: 0;
left: 0;
} */
#inside_main{
display: flex;
/* border: 2px solid whitesmoke; */
width: fit-content;
margin: auto;
height: 60vh;
}
.items{
height: 225px;
width: 225px;
border-radius: 50%;
display: grid;
/* background-color: white; */
}
.items:hover::before{
content: '';
display: flex;
position: absolute;
justify-self: center;
align-self: center;
height: 285px;
width: 285px;
opacity: 10%;
z-index: -1;
background-color: whitesmoke;
border-radius: 50%;
}
.inside_color img{
display: grid;
align-self: center;
justify-self: center;
}
.inside_color{
display: grid;
justify-self: center;
align-self: center;
height: 182px;
width: 182px;
background-color: whitesmoke;
border-radius: 50%;
}
#rock_1{
background: linear-gradient(to bottom, hsl(349, 71%, 52%) , hsl(349, 70%, 56%));
}
#paper_1{
background: linear-gradient(to bottom, hsl(230, 89%, 62%) , hsl(230, 89%, 65%));
position: relative;
top: 50%;
/* left: 25%; */
}
#scissors_1{
background: linear-gradient(to bottom, hsl(39, 89%, 49%) , hsl(40, 84%, 53%));
}
#results{
display: none;
/* border: 2px solid white; */
width: 50%;
grid-template-columns: 1fr 1fr 1fr;
justify-content: center;
margin: auto;
color: white;
font-size: 2rem;
}
.content{
display: grid;
grid-template-rows: repeat (2,auto );
row-gap: 20%;
justify-content: center;
/* padding: 40px; */
}
.content_1{
display: grid;
grid-template-rows: repeat (2,auto );
row-gap: 20%;
justify-content: center;
/* padding: 40px; */
}
.play-again{
display: grid;
grid-template-rows: 3fr 1fr;
row-gap: 10%;
justify-content: center;
}
#left_side{
display: flex;
justify-content: center;
}
#right_side{
display: flex;
justify-content: center;
}
#scissors_1{
border: 2px solid white;
}
.result{
/* border: 2px solid white; */
display: flex;
align-self: flex-end;
justify-content: center;
}
.button-play{
/* border: 2px solid white; */
border-radius: 6%;
width: 25vh;
height: 80%;
}
#user{
background: linear-gradient(to bottom, hsl(39, 89%, 49%) , hsl(40, 84%, 53%));
}
#computer{
background: linear-gradient(to bottom, hsl(349, 71%, 52%) , hsl(349, 70%, 56%));
}
.items_1{
height: 225px;
width: 225px;
border-radius: 50%;
display: grid;
/* background-color: white; */
}
.big_hover::before{
content: '';
display: flex;
position: absolute;
justify-self: center;
align-self: center;
height: 385px;
width: 385px;
opacity: 10%;
z-index: -1;
background-color: whitesmoke;
border-radius: 50%;
}
I think this is the change you need to have in your if-else structure:
if (res==0){
document.getElementById('result_value').innerHTML='YOU LOSE';
document.getElementById('user').classList.remove("big_hover")
document.getElementById('computer').classList.add("big_hover")
console.log(res)
}
else if(res == -1){
document.getElementById('result_value').innerHTML='DRAW'
document.getElementById('user').classList.remove("big_hover")
document.getElementById('computer').classList.remove("big_hover")
console.log(res)
}
else{
document.getElementById('result_value').innerHTML='YOU WON'
document.getElementById('user').classList.add("big_hover")
document.getElementById('computer').classList.remove("big_hover")
console.log(res)
}
With the above code you can insure that the winner side gets shadow and other side looses shadow and on draw both side loose shadow.
Donot use toggle , instead before result remove all shadow class from all tabs then add shadow class where win tab is.

Why isn't my animated background taking up the whole screen?

I'm trying to put an animated interactive screen in my html website but the animation only takes up a little bit of space to the left of the question container. What's a fix for this?
here's my html index:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<link rel="stylesheet" href="styles.css">
<script defer src="script.js"></script>
<title>Quiz App</title>
</head>
<body>
</div>
<div class="container">
<div id="question-container" class="hide">
<div id="question">Question</div>
<div id="answer-buttons" class="btn-grid">
<button class="btn">Answer 1</button>
<button class="btn">Answer 2</button>
<button class="btn">Answer 3</button>
<button class="btn">Answer 4</button>
</div>
</div>
<div class="container1">
<div id="startmsgcontainer" class="hide"></div>
<div id="startmsg">Adventure Into The Human Immune System</div>
</div>
<div class="controls">
<button id="start-btn" class="start-btn btn">Start!</button>
<button id="next-btn" class="next-btn btn hide">Next</button>
</div>
</div>
<div class="wrapper">
<img src="uni.png" alt="image">
</div>
</div>
<div id="particles-js"></div>
<script src="particles.js"></script>
<script src="app.js"></script>
</body>
</html>
Note: the particle stuff is what I named my animated background since it's a bunch of particles
Here's my css
*, *::before, *::after {
box-sizing: border-box;
font-family: cursive,
'Times New Roman', Times, serif
}
:root {
--hue-neutral: 0;
--hue-wrong: 0;
--hue-correct: 145;
}
body {
--hue: var(--hue-neutral);
padding: 0;
margin: 0;
display: flex;
width: 100vw;
height: 100vh;
justify-content: center;
align-items: center;
background-color: hsl(var(--hue), 100%, 20%);
}
body.correct {
--hue: var(--hue-correct);
}
body.wrong {
--hue: var(--hue-wrong);
}
.container {
width: 800px;
max-width: 80%;
background-color: white;
border-radius: 5px;
padding: 10px;
box-shadow: 0 0 10px 2px;
}
.btn-grid {
display: grid;
grid-template-columns: repeat(2, auto);
gap: 10px;
margin: 20px 0;
}
.btn {
--hue: var(--hue-neutral);
border: 1px solid hsl(var(--hue), 100%, 30%);
background-color: hsl(var(--hue), 100%, 50%);
border-radius: 5px;
padding: 5px 10px;
color: white;
outline: none;
}
.btn:hover {
border-color: black;
}
.btn.correct {
--hue: var(--hue-correct);
color: black;
}
.btn.wrong {
--hue: var(--hue-wrong);
}
.next-btn {
font-size: 1.5rem;
font-weight: bold;
padding: 10px 20px;
align-items: flex-end;
}
.start-btn {
font-size: 1.5rem;
font-weight: bold;
padding: 10px 20px;
--hue: 245;
}
.container1 {
display: flex;
justify-content: center;
align-items: center;
font-family: Arial;
font-size: xx-large;
padding: 40px 40px;
}
.controls {
display: flex;
justify-content: center;
align-items: center;
}
.hide {
display: none;
}
.wrapper {
position: absolute;
top: 0px;
right: 0px;
}
.particles-js {
background-size: 100vh;
background-position: 100vw;
padding: 0;
margin: 0;
height: 100vh;
width: 100vw;
}
I need everything to stay the same and send the particles to the background of the entire html site. I appreciate any help because I am very lost. (the last part is my attempt to send it to the back but it didn't work)
I'm using particles.js with Vue but here's how I change the size:
Change the width and height of the containing div and then refresh. I thought it wasn't working at first as it stretches the particles out but I guess it needs to re-render them.
Also, if you're looking to send them to the back, set position: absolute; z-index: 0. You'll have to set z-index: 1 of whatever's in front of them as well.
Just noticed, you're using a class selector instead of an id selector in your CSS: .particles-js, should be #particles-js.
Can you create a codePen for your code samples? It's easier to see what the issue is from there. Also, add a comment to the div enclosing the animation.

inserting tab box in section tag resulting another tag dis aligned... how to fix?

i'm trying to insert this tab box in my section tag.. from this website http://www.9bitstudios.com/2012/11/create-a-responsive-tab-box-using-jquery-and-css/
source code download link: http://www.9bitstudios.com/demos/blog/tab-box/tab-box.zip
here is my html code
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Librarian's corner</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="css/nav-menu.css">
<link rel="stylesheet" type="text/css" href="css/body.css">
</head>
<body >
<div class="big-wrapper">
<div class="form-nav-menu">
<nav>
<ul>
<li><a id="active" href="adduser.html">ADD USER</a></li>
<li><a class="in-active" href="#">EDIT USER</a></li>
<li><a class="in-active" href="#">DELETE USER</a></li>
<li><a class="in-active" href="#"> VIEW USER</a></li>
</ul>
</nav>
</div>
<header>
<h1>The Librarian's corner</h1>
</header>
<section>
> insert tab box here <
</section>
<footer>
<h1>this is footer</h1>
</footer>
</body>
</html>
and my css code filename: nav-menu.css
* {
margin: 0;
padding: 0;
}
html {
width: 100%;
display: -webkit-box;
-webkit-box-pack: center;
background: orange;
background-attachment: fixed;
background-size: cover;
background-position: center;
}
body {
display: block;
width: 100%;
}
header {
width: 100%;
background: rgba(0, 0, 12, 1); /* Fallback */
background-color: rgba(12, 12, 12, 0.5);
margin: 0;
}
header h1 {
text-align: center;
line-height: 400px;
z-index: 99;
color: #fff;
font-size: 50px;
font-family: Comic Sans, Comic Sans MS, cursive;
text-shadow: rgb(3, 3, 3) 4px 4px 4px;
height: auto;
}
section {
height: auto;
background: white;
width: 100%;
margin-top: 0px;
}
footer {
height: 150px;
background: black;
width: 100%;
margin-top: 0px;
}
.form-nav-menu {
z-index: 99;
position: fixed;
width: 100%;
display: -webkit-box;
-webkit-box-pack: center;
}
.form-nav-menu nav {
width: 100%;
height: 70px;
}
.form-nav-menu nav ul{
width: 100%;
height: 70px;
list-style-type: none;
}
.form-nav-menu nav ul li{
height: 70px;
width: 120px;
display: inline-block;
float: right;
}
the problem is when i trying to insert the css tab box code for the tab box located in section tag, the footer background dis align...
im wondering why, why the footer background dis aligned.. my body background is orange and the footer is black... as we can see, the black color is in the top..
I think you may need to add a min-height to your "section" tag since you've added that container:
section {
height: auto;
**min-height:300px;**
background: white;
width: 100%;
margin-top: 0px;
}

Categories