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.
Related
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>
I want to make an weather app and I want to let the user to add in the application some weather cards with the city they are interested with. If they no longer want a specific weather card, they can delete it. For now, you can add some empty cards by using the + button.
Below is what I did and how the app looks like.
In the first phase I want the displayed cards to show the city weather information at the current time and with a hover I want the card to expand and display more information about that city such as a 5 day forecast.
I don't know how to stretch a specific card on hover and I'm asking your help with this problem. Thank you!
const displayContent = document.querySelector('.content');
const widget = document.querySelector('.widget');
const addWidget = document.querySelector(".addButton");
console.log(displayContent)
addWidget.addEventListener('click', newWidget);
var cont=0;
function newWidget(){
cont=cont+1;
let newWidget = document.createElement('div');
newWidget.setAttribute('class', 'widget');
newWidget.setAttribute('id', "widget" + cont);
let closeBtn = document.createElement('span');
closeBtn.setAttribute('class', 'remove');
closeBtn.setAttribute('id', 'remove' +cont);
closeBtn.textContent = '✕';
displayContent.appendChild(newWidget);
newWidget.appendChild(closeBtn);
//remove the cards
var close = document.querySelectorAll("span");
for(let i=0 ; i<close.length; i++){
close[i].addEventListener('click', () =>{
close[i].parentElement.remove();
})
}
}
#import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght#0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&display=swap');
:root {
--fontcolor: #313131;
--bgcolor: #FAFAFA;
}
html {
font-family: "Roboto", sans-serif;
box-sizing: border-box;
margin: 0;
padding: 0;
}
body {
background-color: var(--bgcolor);
margin: 0;
color: var(--fontcolor);
transition: background-color 500ms cubic-bezier(0.075, 0.82, 0.165, 1);
}
.container {
max-width: 85vw;
margin: 0 auto;
}
header {
display: flex;
margin-bottom: 30px;
font-size: 1.5em;
align-items: center;
justify-content: space-between;
}
.search {
width: 100%;
position: relative;
display: flex;
}
.searchTerm {
width: 100%;
border: 3px solid black;
border-right: none;
padding: 5px;
height: 20px;
border-radius: 5px 0 0 5px;
outline: none;
}
.addButton {
width: 40px;
height: 36px;
border: 1px solid black;
background: black;
text-align: center;
color: #fff;
border-radius: 0 6px 5px 0;
cursor: pointer;
font-size: 20px;
}
.content {
margin-bottom: 1em;
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
grid-auto-rows: minmax(250px, 1fr);
grid-gap: 25px;
}
.widget {
color: white;
display: flex;
flex-direction: column;
padding: 25px;
position: relative;
white-space: normal;
word-wrap: break-word;
transition: background-color 50ms;
background: linear-gradient(130deg, rgba(25,118,210,1) 0%, rgba(63,81,181,1) 100%);
box-shadow: 5px 5px 18px -1px rgb(0 0 0 / 34%);
border-radius: 5px;
}
.remove{
position: absolute;
top: 5px;
right: 12px;
font-size: 22px;
opacity: 0.7;
cursor: pointer;
}
#keyframes append-animate {
from {
transform: translateX(-100%);
opacity: 0;
}
to {
transform: translateX(0%);
opacity: 1;
}
}
/* animate new box */
.widget {
animation: append-animate .3s linear;
}
<!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>My Library</title>
<link rel="stylesheet" href="style.css">
<script src="https://kit.fontawesome.com/31c84a9fec.js" crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
<header class="header">
<h1 id='title'>Weather App</h1>
<div class="control">
<div class="wrap">
<div class="search">
<input type="text" class="searchTerm" placeholder="Add a city">
<button type="submit" class="addButton">+</button>
</div>
</div>
</div>
</header>
<div class="content">
<div class="widget" id="widget0">
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Have you tried using CSS transitions?
div {
width: 100px;
height: 100px;
background-color: blue;
margin: 10px;
transition: all 1s;
}
div.h:hover {
width: 150px;
background-color: purple;
}
div.v:hover {
height: 150px;
background-color: purple;
}
<div class="h"></div>
<div class="v"></div>
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
I'm trying to code 2048 using HTML/ CSS/ JS
I got the layout of the grid using this Html:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>2048</title>
</head>
<body>
<div class = "wrapper">
<div class="gridd">
<div><h1></h1></div>
<div><h1></h1></div>
<div><h1></h1></div>
<div><h1></h1></div>
<div><h1></h1></div>
<div><h1></h1></div>
<div><h1></h1></div>
<div><h1></h1></div>
<div><h1></h1></div>
</div>
</div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
And for it I'm using this CSS:
* {
margin: 0;
padding: 0;
}
body {
background-color: #C2C2C2;
}
h1 {
font-family: Asap,sans-serif;
font-size: 24pt;
margin-top:35%;
text-align: center;
color: white;
}
.gridd {
width: 340px;
height: 340px;
background-color: #B4B4B4;
border-radius: 15px;
padding: 15px;
position: absolute;
margin: auto;
}
.gridd > div {
width: 100px;
height: 100px;
background-color:#787878;
border-radius: 15px;
margin:5px;
display: inline-block;
}
.wrapper{
position: absolute;
margin: 80px 0 0 200px;
}
I'm simply using this JS code to generate the initial twos on the grid:
function getRandomInt(max) {
return Math.floor(Math.random() * Math.floor(max));
}
var y = document.getElementsByTagName("H1");
y[getRandomInt(8)].innerHTML = 2;
y[getRandomInt(8)].innerHTML = 2;
Now, on load I'm getting this unpleasant scene:
Can someone help me understand what's going on please?
And how to fix it.
Thanks a lot.
Just add flex rules for selector .gridd:
.gridd{
...
display: flex;
flex-flow: wrap;
}
And replace display: inline-block with flex: auto in the selector .gridd >div:
.gridd >div{
...
flex: auto;
}
function getRandomInt(max) {
return Math.floor(Math.random() * Math.floor(max));
}
var y = document.getElementsByTagName("H1");
y[getRandomInt(8)].innerHTML = 2;
y[getRandomInt(8)].innerHTML = 2;
*{margin: 0;
padding: 0;
}
body{
background-color: #C2C2C2;
}
h1{
font-family: Asap,sans-serif;
font-size: 24pt;
margin-top:35%;
text-align: center;
color: white;
}
.gridd{
width: 340px;
height: 340px;
background-color: #B4B4B4;
border-radius: 15px;
padding: 15px;
position: absolute;
margin: auto;
display: flex;
flex-flow: wrap;
}
.gridd >div{
width: 100px;
height: 100px;
background-color:#787878;
border-radius: 15px;
margin:5px;
flex: auto;
}
.wrapper{
position: absolute;
margin: 80px 0 0 200px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>2048</title>
</head>
<body>
<div class = "wrapper">
<div class = "gridd" >
<div> <H1></H1> </div>
<div> <H1></H1> </div>
<div> <H1></H1> </div>
<div> <H1></H1> </div>
<div> <H1></H1> </div>
<div> <H1></H1> </div>
<div> <H1></H1> </div>
<div> <H1></H1> </div>
<div> <H1></H1> </div>
</div>
</div>
</body>
<!--script type="text/javascript" src="script.js"></script(-->
</html>
This can be simply fixed with changed to css file. use display: grid.
Also, do not use margin-top: 35%;. If you will make h1, or div, smaller or bigger, you will have to change the percentage too. Instead, you can center it via align-items: center.
This is the entire css file to fix the issue:
* {
margin: 0;
padding: 0;
}
body {
background-color: #c2c2c2;
}
h1 {
font-family: Asap, sans-serif;
text-align: center;
color: white;
}
.wrapper {
margin: 80px 0 0 200px;
border-radius: 15px;
background-color: #b4b4b4;
width: fit-content;
padding: 10px;
}
.gridd {
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
gap: 5px;
}
.gridd > div {
background-color: #787878;
border-radius: 15px;
display: grid;
align-items: center;
}
It will center your h1 no matter what text size it is and no matter how big your div container.
EDIT
In fact, this entire thing can be made without a wrapper and extra div
HTML:
<div class="grid">
<h1></h1>
<h1></h1>
<h1></h1>
<h1></h1>
<h1></h1>
<h1></h1>
<h1></h1>
<h1></h1>
<h1></h1>
</div>
CSS:
* {
margin: 0;
padding: 0;
}
body {
background-color: #c2c2c2;
}
.grid {
margin: 80px 0 0 200px;
border-radius: 15px;
background-color: #b4b4b4;
width: fit-content;
padding: 10px;
display: grid;
grid-template-columns: repeat(3, 100px);
grid-template-rows: repeat(3, 100px);
gap: 5px;
}
.grid > h1 {
background-color: #787878;
border-radius: 15px;
display: grid;
align-items: center;
font-family: Asap, sans-serif;
text-align: center;
color: white;
}
If you want to style a grid layout, you should also use a grid. The tool for it is called CSS-Grid. It delcared by using display: grid;. To have th grid 3 column wide, you use grid-template-columns: repeat(3, min-content);. Thatw ay you have 3 columns with the width of the children. To have a gap between the different chidlren cards, you use grid-gap: 15px;
function getRandomInt(max) {
return Math.floor(Math.random() * Math.floor(max));
}
var y = document.getElementsByTagName("H1");
y[getRandomInt(8)].innerHTML = 2;
y[getRandomInt(8)].innerHTML = 2;
* {
margin: 0;
padding: 0;
}
body {
background-color: #C2C2C2;
}
h1 {
font-family: Asap, sans-serif;
font-size: 24pt;
margin-top: 35%;
text-align: center;
color: white;
}
.gridd {
width: min-content;
padding: 15px;
display: grid;
grid-template-columns: repeat(3, min-content);
grid-gap: 15px;
margin: auto;
background-color: #B4B4B4;
border-radius: 15px;
}
.gridd>div {
width: 100px;
height: 100px;
background-color: #787878;
border-radius: 15px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>2048</title>
</head>
<body>
<div class="wrapper">
<div class="gridd">
<div>
<H1></H1>
</div>
<div>
<H1></H1>
</div>
<div>
<H1></H1>
</div>
<div>
<H1></H1>
</div>
<div>
<H1></H1>
</div>
<div>
<H1></H1>
</div>
<div>
<H1></H1>
</div>
<div>
<H1></H1>
</div>
<div>
<H1></H1>
</div>
</div>
</div>
</body>
<!--script type="text/javascript" src="script.js"></script(-->
</html>
I am trying to fit two divs around the header-title, but I can't seem to get it to work. I'm not sure that the calc() works well with the javascript. Here is the code so far:
document.getElementByClass('Header').clientWidth;
:root {
--main-accent-color: #3500D3;
--main-bg-color: #282828;
--secondary-bg-color: #0c0032;
--main-content-bg-color: #190061;
--text-color: #ffffff;
--alt-color: #240090;
}
* {
box-sizing: content-box;
margin: 0;
}
body {
background-color: var(--main-bg-color);
}
h1 {
font-family: robot0, sans-serif;
font-size: 70px;
font-weight: 100;
font-variant: petite-caps;
color: var(--text-color);
}
.header {
background-color: var(--main-bg-color);
width: 100%;
height: 100px;
top: 0;
margin: 0;
position: fixed;
text-align: center;
z-index: 10;
border-bottom: 5px solid var(--main-accent-color);
}
.header-title {
box-sizing: content-box;
background-color: var(--main-bg-color);
height: 85px;
width: 500px;
margin: auto;
vertical-align: middle;
padding-top: 50px;
padding-top: 20px;
border-left: 5px solid var(--main-accent-color);
border-right: 5px solid var(--main-accent-color);
z-index: 11
}
.header-info {
width: calc((clientWidth - 500) / 2);
height: 100px;
display: inline-block;
position: absolute;
margin: 0;
padding: 0;
}
#right-info {
right: calc(((clientWidth - 500) / 2) + 500);
}
#left-info {
right: 0;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" type="text/css" href="style.css">
<title>Webpage</title>
<script>
document.getElementByClass('header').clientWidth;
</script>
</head>
<body>
<!--Header-->
<div class="header">
<div class="header-title">
<h1>Welcome</h1>
</div>
<div class="header-info" id="left-info">
<p>
Hi
</p>
</div>
<div class="header-info" id="right-info">
<p>
Hi
</p>
</div>
</div>
</body>
</html>
If there is another method that I can use, that would be great. Also, I am learning CSS right now, so I am not confident with JavaScript at all, I only used it because that's how other people did it.
I think you are making it too complicated. I removed a lot of code and added flexbox for the header. Both divs at the side are allowed to grow as much as space allows.
:root {
--main-accent-color: #3500D3;
--main-bg-color: #282828;
--secondary-bg-color: #0c0032;
--main-content-bg-color: #190061;
--text-color: #ffffff;
--alt-color: #240090;
}
* {
box-sizing: content-box;
margin: 0;
}
body {
background-color: var(--main-bg-color);
}
h1 {
font-family: robot0, sans-serif;
font-size: 70px;
font-weight: 100;
font-variant: petite-caps;
color: var(--text-color);
}
.header {
width: 100%;
height: 100px;
top: 0;
position: fixed;
border-bottom: 5px solid var(--main-accent-color);
display: flex;
align-items: center; /* Vertical alignment */
}
.header-title {
width: 500px;
border-left: 5px solid var(--main-accent-color);
border-right: 5px solid var(--main-accent-color);
text-align: center;
}
.header-info {
flex-grow: 1;
}
<div class="header">
<div class="header-info">
<p>
Hi
</p>
</div>
<div class="header-title">
<h1>Welcome</h1>
</div>
<div class="header-info">
<p>
Hi
</p>
</div>
</div>