I trying to learn JavaScript I make my Quiz game.
I get problem with modal window,because when I write nickname after this I push Submit I wanna saving nickname in localStorage and close modal window.
Problem is that modal window appear again and i can't passing to main page with Quiz.
Maybe someone can explain me if is possible do it this in different way in JavaScript, at the first I was thinking to make to documents HTML one index.html and nickname.html , but I get also problem because I don't know how to change url(); in JavaScript after Submit.
I appreciate every opinion. Thank You.
const enter = document.getElementById('enter');
const modal = document.getElementById('screen');
enter.addEventListener('click',function(){
let forms = document.forms["form-welcome"]["nickname"].value
if(forms == ""){
alert("Write you nickname.");
return false;
}
else{
modal.style.display = "none";
save();
}
})
function save(){
localStorage.setItem(
document.forms["form-welcome"]["nickname"].value
);
}
*{
margin: 0px;
padding: 0px;
}
body{
background-color: red;
}
/*##### Window Modal #####*/
.wrapper{
font-size: 24px;
font-family:'Bree Serif', serif;
text-align: center;
}
.modal{
display: block;
position: fixed;
z-index: 1;
left: 0;
top:0;
width:100%;
height: 100%;
overflow: auto;
background-color: rgb(0,0,0);
background-color: rgb(0,0,0,0.4);
}
.offModal{
display: none;
}
.animate{
-webkit-animation: animatezoom 0.6s;
animation: animatezoom 0.6s;
}
.model{
display: inline-block;
margin-top: 25px;
width: 30%;
height: auto;
background-color: #4edb0cfb;
position: relative;
border-radius: 25px;
border:1px solid rgba(0, 0, 0, 0.267);
box-shadow: 1.5px 1.5px rgba(0, 0, 0, 0.4);
}
.welcome{
letter-spacing: 1px;
position: relative;
text-align: center;
line-height: 50px;
padding-top: 15px;
margin-top: 15px;
}
.submit{
border-radius: 5px;
font-size: 30px;
margin: 10px;
padding: 10px;
}
.submit:hover{
background-color: rgb(153, 150, 150);
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Final-Quiz</title>
<link rel="stylesheet" href="reset.css">
<link rel="stylesheet" href="style.css">
<link href="https://fonts.googleapis.com/css?family=Bree+Serif&display=swap" rel="stylesheet">
</head>
<body>
<div class="wrapper">
<!--############### FIST SCREEN ################-->
<section>
<div id="screen" class="modal">
<form class="welcome model" name="form-welcome">
<h1>Final-Quiz</h1>
<label for="nickname">Nickname:</label>
<input type="text" name="nickname" required>
<input id="enter" class="submit" type="submit" value="Enter">
<p>Let's check your knowledge about HTML,CSS and JavaScript.</p>
</form>
</div>
</div>
</section>
</div>
<script src="localStorage.js"></script>
</body>
</html>
Thanks for everybody I find solution for my problem.
Inside tag i write action and url(); of second HTML page.
<form action="secondHtml.html">
After submit i go to main page.
Related
how can i correctly implement html and css to wordpress site? inserting into html section caused this:
enter image description here
enter image description here
and i want it to look like this: check pic
enter image description here
i dont want other text to be in box shadow
* {
box-sizing: border-box;
}
div.cenovy_box {
width: 100%;
outline: 1px solid #f2f1f1 !important;
box-shadow: 0px 5px 10px #d3d3d3;
float: left;
}
div.fotkavboxe {
display: flex;
float: left;
width: 30%;
margin-left: 50px;
}
h1.nadpis_p {
border-bottom: 2px solid #20d796;
font-family: "poppins";
text-align: center;
padding-bottom: 10px;
}
div.tlacidlo {
clear: both;
width: 30%;
display: flex;
}
.k_predajcovi {
font-family: "poppins";
background-color: #000000;
color: #ffffff;
font-size: 20px;
cursor: pointer;
padding: 10px 20px;
border: solid #000000 2px;
opacity: 1;
transition: 0.3s;
}
.k_predajcovi:hover {
color: #000000;
background-color: #fff;
opacity: 1;
}
p.cena_v_boxe {
width: 30%;
font-size: 25px;
font-family: "poppins";
float: left;
}
img.fotka {
background-color: #000000;
border: 2px #555;
opacity: 1;
transition: 0.3s;
}
img.fotka:hover {
color: #fff;
opacity: 0.5;
}
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>
</style>
</head>
<body>
<div class="cenovy_box">
<div class="obsah">
<h1 class="nadpis_p">Brutálna vychytávka</h1>
</div>
<div class="fotkavboxe">
<a href="https://www.banggood.com/Xiaomi-Redmi-Note-10-Pro-Global-Version-6GB-128GB-108MP-Quad-Camera-6_67-inch-120Hz-AMOLED-Display-33W-Fast-Charge-Snapdragon-732G-Octa-Core-4G-Smartphone-p-1828679.html?cur_warehouse=HK&ID=62464446304721&rmmds=search"
target="_blank"><img class="fotka" src="https://imgaz.staticbg.com/thumb/large/oaupload/banggood/images/FE/BE/525e460f-581a-46ee-b737-1fe3d9492492.jpg.webp" alt="redmi note 10" style="width: 200px; height:200px;"></a>
</div>
<div class="cena">
<p class="cena_v_boxe">20€</p>
</div>
<div class="tlacidlo">
<button class="k_predajcovi" onclick="window.location.href = 'https://www.google.sk';">
K predajcovi
</button>
</div>
</div>
</body>
</html>
can you please help mw with inserting this code into articles? i want to adding it into articles just html (css will be in custom css settings) i am unable to code my own plugin, so this how i am making this
How to Upload an HTML File to WordPress
1) Navigate to your Admin Dashboard.
2) Click 'Pages' in the left sidebar.
3) Choose an existing page or create a new one.
4) Click 'Add Block.'
5) Add a 'File' block.
6) Choose your HTML file.
This question already has answers here:
How can I horizontally center an element?
(133 answers)
Flexbox: center horizontally and vertically
(14 answers)
Closed 1 year ago.
I am not sure how to centre the password input field, password text and submit button. I've tried text-align centre but I'm new and don't have enough experience to know a different way to do it.
Any help is appreciated!
note: if you refresh the page too often the api gets limited and the GIF disappears, i wouldve just changed it to an image for this question but i thought that might have something to do with it.
<!doctype HTML>
<html>
<head>
<meta name="websiteinnit" content="width=device-width, initial-scale=1">
<link rel=icon href="https://i.imgur.com/zWdbQf2.png">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$(function() {
var xhr = $.get("http://api.giphy.com/v1/gifs/random?api_key=dc6zaTOxFJmzC&tag=no");
xhr.done(function(data) {
$('.gif-bg').css('background-image', 'url(' + data.data.image_url + ')');
});
});
</script>
</head>
<body>
<div class = "usernamecss">
<div class = "passwordcss">
<label class = "password" for = "password">Password:</label><br>
<input class = "passwordinput" type= "Password" id="password" name="password">
</div>
</form>
<div-1>
<input class = "submitbutton" type="submit" value="Submit">
</div-1>
<div class="gif-bg">
</div>
<style>
body {
margin: 100px;
}
.gif-bg {
background:url('') no-repeat center center;
min-height:10%;
min-width:10%;
Padding: 50px;
}
.password {
position:relative;
font-family: monospace;
font-size: 15px;
text-align:center;
outline:10px black;
position:absolute;
}
.passwordinput {
border-style: inset;
border-radius: 4px;
margin:4px;
text-align:center;
}
.submitbutton {
border-style: bold;
border-radius: 4px;
background-color: #BDD9BF;
transition-duration: 0.4s;
margin:4px;
}
.submitbutton:hover {
background-color: grey;
color: grey;
}
</style>
</body>
</html>
You can make use of flexbox's align-items and justify-content properties:
html,
body {
height: 100%;
margin: 0;
}
body {
display: flex;
align-items: center;
justify-content: center;
}
<!doctype HTML>
<html>
<head>
<meta name="websiteinnit" content="width=device-width, initial-scale=1">
<link rel=icon href="https://i.imgur.com/zWdbQf2.png">
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
<script>
$(function() {
var xhr = $.get("http://api.giphy.com/v1/gifs/random?api_key=dc6zaTOxFJmzC&tag=no");
xhr.done(function(data) {
$('.gif-bg').css('background-image', 'url(' + data.data.image_url + ')');
});
});
</script>
</head>
<body>
<div class="usernamecss">
<div class="passwordcss">
<label class="password" for="password">Password:</label><br>
<input class="passwordinput" type="Password" id="password" name="password">
</div>
<div-1>
<input class="submitbutton" type="submit" value="Submit">
</div-1>
<div class="gif-bg">
</div>
</div>
<style>
body {
margin: 100px;
}
.gif-bg {
background: url('') no-repeat center center;
min-height: 10%;
min-width: 10%;
Padding: 50px;
}
.password {
position: relative;
font-family: monospace;
font-size: 15px;
text-align: center;
outline: 10px black;
position: absolute;
}
.passwordinput {
border-style: inset;
border-radius: 4px;
margin: 4px;
text-align: center;
}
.submitbutton {
border-style: bold;
border-radius: 4px;
background-color: #BDD9BF;
transition-duration: 0.4s;
margin: 4px;
}
.submitbutton:hover {
background-color: grey;
color: grey;
}
</style>
</body>
</html>
For the password css class add these values:
.passwordcss {
display: flex;
justify-content: center;
width: 100%;
}
Make sure that the parent element is taking 100% of the windoe
Another approach would be to create display flex in .passwordcss
and add
.passwordcss > * {
margin: 0 auto;
}
Margin auto will align everything to the center, given parent is 100% width and display is flex
I`m trying to add an scroll event listener in JavaScript based on this: https://github.com/Godsont/Animated-Sticky-Header.
But for some reason it isn´t working, when I scroll nothing happens. Can anyone help me pls? I´m new to JavaScript so I want to keep things as simple as possible.
I´m using Google Chrome btw.
I want to add an event on the id = "mainHeader" from Header. When the user scrolls down I want the background to change color, the logo img and the itens from the ul to get a little bit smaller. I also want the height from the header to get a little smaller. (the changes that I want are in the css and have ".is-crolling").
Thanks!
window.addEventListener("scroll", scrollHeader() );
function scrollHeader() {
var mainHeader = document.getElementByID("mainHeader");
if (window.pageYOffset > 0) {
mainHeader.classList.add("is-scrolling");
} else {
mainHeader.classList.remove("is-scrolling");
}
};
#mainHeader {
background-color: white;
position: fixed;
width: 100%;
height: 80px;
z-index: 3;
transition: background 0.4s;
}
#mainHeader.is-scrolling {
background: #333;
}
#mainHeader.is-scrolling a {
color: #eee;
font-size: 13px;
}
#mainHeader.is-scrolling .header-logo img {
width: 60px;
height: 40px;
border-radius: 5px;
}
.page-logo-nav {
margin: 15px 115px 15px 115px;
}
.header-logo img {
float: left;
width: 70px;
height: 50px;
transition: height 0.4s;
}
.header-nav {
float: right;
height: 50px;
display: flex;
align-items: center;
}
.header-nav li {
display: inline;
}
.header-nav .list-1:after {
content: "★";
}
.header-nav a {
color: black;
padding: 20px;
text-decoration: none;
font-weight: 900;
font-size: 15px;
transition: font-size 0.4s;
}
.header-nav a:hover {
color: #6ebbd3;
border-top: 1px solid #266a7e;
border-bottom: 1px solid #266a7e;
transition: 0.3s;
}
<!DOCTYPE html>
<html>
<head>
<title>Stuff</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Anton%7CMontserrat%7COpen+Sans%3A300%2C300i%2C400%2C400i%2C600%2C600i%2C700%2C700i%2C800%2C800i%7CPT+Sans%3A400%2C700&ver=4.0.31" type="text/css" media="all">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" type="text/css" href="css/styles.css">
<script src="JS/main.js"></script>
</head>
<body>
<header id="mainHeader">
<div class="page-logo-nav">
<div class="header-logo">
<a href="index.html">
<img src="img/logo.jpg">
</a>
</div>
<div class="header-nav">
<nav>
<ul>
<li class="list-1">SOBRE</li>
<li class="list-2">CONTACTOS</li>
</ul>
</nav>
</div>
</div>
</header>
</body>
</html>
I need some help with my code. I have a smooth transition that changes the colour of a password fields border when it is focussed. However, when I switch to and from a different tab after the colour change, it replays the transition even if the field is still focussed.
What I want is for the transition to play once and stay the different border colour until clicked off. I put some of my code here for easy viewing: https://jsfiddle.net/b38z4ma2/. Here you can replicate my issue.
focus(click) on the input field
see the transition
switch browser tab and back again
the transition will re play. <- I do not want this part!
Also here is the plain code
:root {
--darkdark-gray: #222428;
--dark-gray: #2F3136;
--mid-gray: #36393F;
--light-gray: #888C91;
--blurple: #7289DA;
--blurple-shade: #677BC4;
--whiteish: #DCDDDE;
--white: #FFFFFF;
--shadow: 0px 0px 10px 3px rgba(0, 0, 0, 0.1);
}
body {
background-color: var(--dark-gray);
}
#container {
background-color: var(--mid-gray);
border-radius: 10px;
width: 900px;
height: 500px;
position: absolute;
transform: translate(-50%, -50%);
top: 50%;
left: 50%;
box-shadow: var(--shadow);
}
input {
width: 750px;
height: 50px;
transform: translate(50px, 50px);
background-color: var(--dark-gray);
border: 2px solid var(--darkdark-gray);
border-radius: 6px;
outline: none;
padding: 0 20px;
font-size: 24px;
color: var(--whiteish);
letter-spacing: 5px;
font-family: Whitney, sans-serif;
}
input:focus {
border-color: var(--blurple);
transition: border 2s;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Title</title>
<link rel="stylesheet" href="stylesheet.css">
</head>
<body>
<div id="container">
<div id="password-container">
<label>
<input type="password">
</label>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
Perhaps there is a javascript solution? Please no jQuery! Thanks to anyone that can help, this may seem a small issue but it is really bugging me.
So I'm trying to make a website for a company of mine, and the idea is that my main page is going to have a giant image with a button in the center (horizontally and vertically) that says "More!" but the button will not center nor will the text inside of the button, Below I'll put my HTML code as well as my CSS code too.
Here is my HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Biostone Interactive | Main</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id="header-image">
<div id="header-button">
More!
</div>
</div>
<div id="nav">
</div>
<div id="container">
</div>
</body>
</html>
And here is my CSS:
* {
padding: 0;
margin: 0;
font-family: Lucida Sans Unicode, Tahoma, Arial;
}
#header-image {
width: 100%;
height: 600px;
background-color: black;
}
#header-button {
width: 100px;
height: 50px;
background-color: red;
border-radius: 4px;
margin: 0 auto;
}
#header-button-text {
text-align: right;
text-decoration: none;
color: white;
}
(Note this code isn't complete because I deleted some of it to try and fix it)
Please help me and tell me what I did wrong! Thanks :D
To center text within a container, use text-align:center;
To center a container, use margin-left:auto;margin-right:auto;
#header-button {
width: 100px;
height: 50px;
background-color: red;
border-radius: 4px;
margin: 0 auto;
text-align: center;
margin-left: auto;margin-right:auto;
}
#header-button-text {
text-decoration: none;
color: white;
}
change the header button css to:
#header-button {
position:absolute;
top:50%;
left:50%;
margin-top: -25px;
margin-left: -50px;
width: 100px;
height: 50px;
background-color: red;
border-radius: 4px;
}
The margin values need to be half of the dimension attributes, so if you change width and height you have to update the margins.