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>
Related
I'm practising with JavaScript and hiding the image and the button. The footer keeps coming to the top of the page every time I execute the command. How can I correct this? I've tried many different options and I can't seem to get it to work right like position: sticky, bottom:0; for example.
I'm extremely new to this coding thing so I'm pretty sure I have no idea what I'm doing.
jQuery(document).ready(function() {
$(".myButton").click(function(){
$(".poem").show();
$(".resize").show();
$(".main-image").hide();
});
$(".resize").click(function(){
$(".poem").hide();
$(".resize").hide();
})
})
#charset "utf-8";
/* CSS Document */
.main-image {
display: block;
width: 25%;
margin-bottom: 30px;
}
.container {
position: relative;
display: flex;
justify-content: space-around;
align-items: center;
width: 100%;
height: 100%;
}
.overlay-content {
position: absolute;
bottom: 15%;
text-align: center;
width: 25%;
}
.resize {
position: absolute;
z-index: 1;
top: 0;
right: 0;
}
footer {
background-color: brown;
border: solid;
position: sticky;
bottom: 0;
}
.myButton {
margin-left: 50%;
}
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>practice_overlay</title>
<link href="Overlay.css" rel="stylesheet" type="text/css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="script_storage.js"></script>
</head>
<body>
<div class="container">
<p class="introduction">Lorem Ispum</p>
<img class="main-image" src="Devry Web Design Intro Course/Pictures/crystal-tear-3.jpg">
<div class="overlay-content">
<button class="resize">X</button>
<h1>Hello World</h1>
</div>
<p class="poem">Lorem Ispum</p>
</div>
<button class="myButton">X</button>
<footer>Lorem Ispum</footer>
</body>
</html>
You could use CSS grid - with the setup in the snippet below, you can "safely" work inside the div.outer part of the layout, without making the other parts of your page "jumping around" :)
jQuery(document).ready(function() {
$(".myButton").click(function() {
$(".poem").show();
$(".resize").show();
$(".main-image").hide();
});
$(".resize").click(function() {
$(".poem").hide();
$(".resize").hide();
})
})
html,
body {
width: 100%;
height: 100%;
margin: 0;
padding: 0;
}
#wrapper {
min-height: 100%;
display: grid;
grid-template-rows: calc(100vh - 30px) 30px;
grid-template-columns: 100%;
}
.outer {
background: gray;
padding: 8px 16px;
overflow-y: scroll;
display: flex;
flex-direction: column;
}
.container {}
#image {
height: 30px;
width: 30px;
}
.myButton {
margin: 0 auto;
}
footer {
background-color: brown;
padding: 8px 16px;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="wrapper">
<div class="outer">
<div class="container">
<p class="introduction">Introduction</p>
<img id="image" src="https://picsum.photos/30" alt="small image" />
<div class="overlay-content">
<button class="resize">X</button>
<h1>Hello World</h1>
</div>
<p class="poem">Lorem Ispum</p>
</div>
<button class="myButton">X</button>
</div>
<footer>
footer
</footer>
</div>
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.
The aim is to create a hamburgermenu that when "clicked" folds out adding a class of .open, while pushing the existing div down below, so that it would still be possible to see the content of this div even when the menu is open.
I have trouble getting jquery to work at all and am not sure where I have made a mistake.
If you do, please enlighten me, it would be a great help! I have tried several times with different tutorials.
$(document).ready(function(){
$(".menuicon").on("click", function(){
$(".menuoverview").toggleClass (".open");
});
});
body {
margin: 0;
padding: 0;
}
.header {
width: 100%;
height: auto;
border: 1px solid black;
display: flex;
flex-direction: row;
}
.header .menuicon {
display: flex;
height: 40px;
width: 40px;
margin-bottom: 0;
padding-bottom: 0;
cursor: pointer;
}
.header .menuicon img {
padding: 2%;
}
.header .logo {
display: flex;
margin-left: 30%;
}
.header .logo img {
width: 130px;
height:auto;
padding: 1%;
margin-left: %;
}
/* This is the default class when the menu icon is not yet clicked. The // should of course be removed */
.menuoverview {
//height: 0;
overflow: hidden;
}
/*This is the class that should be applied when clicking on the menu icon */
.menuoverview .open {
height: auto;
overflow: visible;
}
.menuoverview {
border-left: 1px solid black;
border-right: 1px solid black;
display: flex;
}
.menuoverview .menuitem{
display: flex;
flex-direction: column;
padding: 5%;
}
.videobox {
height: 300px;
border: 1px solid black;
}
#media only screen and (max-width: 600px) {
.menuoverview {
flex-direction: column;
}
.menuoverview .menuitem {
align-self: center;
padding: 1%;
}
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href=“resources/css/lasttry.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="resources/js/lasttry.js"></script>
</head>
</head>
<body>
<div class="header">
<div id="icon" class="headericon">
</div>
<div id="logo" class="headericon">
<img src="resources/logo_3dinspo.png" alt="">
</div>
</div>
<div class="menuoverview">
<div class="menuitem">
<h4 class=menuheader>header1</h4>
Link 1
Link 2
Link 3
</div>
<div class="menuitem">
<h4 class=menuheader>header2</h4>
Link 1
Link 2
Link 3
</div>
<div class="menuitem">
<h4 class=menuheader>header3</h4>
Link 1
Link 2
Link 3
</div>
</div>
</body>
</html>
JP
Have you tried removing the dot in the toggleClass?
.toggleClass("open");
I don't think you need to specify that it is a class in this method, since it is already looking for a class name.
Quick codepen example: https://codepen.io/mkempinsky/pen/XxKNoe
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>
I'm making a website, which for testing reasons I have called yeet.io.
I'm currently trying to center an input and h1 inside of a div both vertically and horizontally, but for some reason, the elements always appear offsetted somehow.
Why is this? I want the elements to be centered in the middle like any regular "io game". I have some jQuery that makes the elements fade in, could this be the problem? I am stumped.
$(".yeet").hide();
$(document).ready(function() {
$(".yeet").show(2000);
$(".nickname").show(2000);
});
body {
width: 100%;
height: 100%;
}
.container {
text-align: center;
position: absolute;
height: 100%;
width: 100%;
display: table;
}
.yeet {
font-family: "Schoolbell", cursive;
font-size: 75px;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.nickname {
font-family: "Schoolbell", cursive;
display: block;
margin: 0 auto;
text-align: center;
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Schoolbell" rel="stylesheet">
</head>
<body>
<div class="container">
<h1 class="yeet">yeet.io</h1>
<input class="nickname" placeholder="nickname" , autofocus="autofocus">
</div>
</body>
You're currently making use of a table, by setting display: table on .container, and display: table-cell on .yeet.
This is probably unintentional, and in fact, simply removing these two declarations automatically produces your desired result -- you don't have to change the HTML at all, or create any new CSS rules.
$(".yeet").hide();
$(document).ready(function() {
$(".yeet").show(2000);
$(".nickname").show(2000);
});
body {
width: 100%;
height: 100%;
}
.container {
text-align: center;
position: absolute;
height: 100%;
width: 100%;
}
.yeet {
font-family: "Schoolbell", cursive;
font-size: 75px;
vertical-align: middle;
text-align: center;
}
.nickname {
font-family: "Schoolbell", cursive;
display: block;
margin: 0 auto;
text-align: center;
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Schoolbell" rel="stylesheet">
</head>
<body>
<div class="container">
<h1 class="yeet">yeet.io</h1>
<input class="nickname" placeholder="nickname" , autofocus="autofocus">
</div>
</body>
Hope this helps! :)
You need to wrap each element in their own fake table-row
$(".yeet").hide();
$(document).ready(function() {
$(".yeet").show(2000);
$(".nickname").show(2000);
});
body {
width: 100%;
height: 100%;
}
.container {
text-align: center;
position: absolute;
height: 100%;
width: 100%;
display: table;
}
.yeet {
font-family: "Schoolbell", cursive;
font-size: 75px;
display: table-cell;
vertical-align: middle;
text-align: center;
}
.nickname {
font-family: "Schoolbell", cursive;
display: block;
margin: 0 auto;
text-align: center;
}
.row{
display:table-row;
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Schoolbell" rel="stylesheet">
</head>
<body>
<div class="container">
<div class="row">
<h1 class="yeet">yeet.io</h1>
</div>
<div class="row">
<input class="nickname" placeholder="nickname" , autofocus="autofocus">
</div>
</div>
</body>
$(".yeet").hide();
$(document).ready(function() {
$(".yeet").show(2000);
$(".nickname").show(2000);
});
body {
width: 100%;
height: 100%;
}
.container {
text-align: center;
position: absolute;
height: 100%;
width: 100%;
}
.yeet {
font-family: "Schoolbell", cursive;
font-size: 75px;
text-align: center;
}
.nickname {
font-family: "Schoolbell", cursive;
text-align: center;
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://fonts.googleapis.com/css?family=Schoolbell" rel="stylesheet">
</head>
<body>
<div class="container">
<h1 class="yeet">yeet.io</h1>
<input class="nickname" placeholder="nickname" , autofocus="autofocus">
</div>
</body>