I want the text to change whenever I toggle the open contact btn to "close contact" and when I click on it, It reverts back to "open contact" and continues that way.
Should I give it an id and then use the arrow function and add eventListener, Or should I just use plain onclick?
const btn = document.getElementById("click_contact")
const form = document.getElementById("message_form")
btn.addEventListener('click', () => {
form.classList.toggle('open')
})
<div class="cta_btn_contact">
<button id="click_contact" class="btn3 cta-btn3">open contact</button>
</div>
The easiest way to to just add a line that toggle the Text with textContent between 2 defined text as below:
const btn = document.getElementById("click_contact")
const form = document.getElementById("message_form")
btn.addEventListener('click', () => {
let text = btn.textContent;
btn.textContent = text == 'OPEN CONTACT' ? 'CLOSE CONTACT' : 'OPEN CONTACT';
})
* {
margin: 0;
padding: 0;
font-family: "poppins";
box-sizing: border-box;
}
.btn_sub {
margin: 10px 35%;
border-radius: 3px;
}
.btn3 {
position: relative;
background: transparent;
border-top: 1px solid var(--maincolor);
border-bottom: 1px solid var(--maincolor);
border-left: none;
border-right: none;
padding: 6px 12px;
text-transform: uppercase;
font-size: 1rem;
font-weight: 500;
letter-spacing: 1px;
color: black;
overflow: hidden;
transition: 0.5s ease all;
cursor: pointer;
z-index: 12;
}
.btn3:hover {
color: var(--primarycolor);
}
.btn3::before {
content: '';
transform: translate(-50%, -50%);
position: absolute;
left: 50%;
top: 50%;
width: 100%;
cursor: pointer;
height: 100%;
background-color: var(--maincolor);
transition: 0.5s ease all;
}
.cta-btn3 {
color: black;
}
.cta-btn3::before {
transform: translate(-50%, -50%) rotate(45deg);
width: 100%;
height: 0;
z-index: -1;
}
.cta-btn3:hover::before {
height: 500%;
width: 100%;
transition: 0.5s ease all;
}
.cta_btn_contact {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
<div class="cta_btn_contact">
<button id="click_contact" class="btn3 cta-btn3">open contact</button>
</div>
You can use ternary operator to change the textContent of the button based on its present content.
const btn = document.getElementById("click_contact")
//const form = document.getElementById("message_form")
const div = document.getElementById("testDiv")
btn.addEventListener('click', () => {
btn.textContent = btn.textContent === "open contact" ? "close contact" : "open contact";
div.classList.toggle('open')
})
* {
margin: 0;
padding: 0;
font-family: "poppins";
box-sizing: border-box;
}
.btn_sub {
margin: 10px 35%;
border-radius: 3px;
}
.btn3 {
position: relative;
background: transparent;
border-top: 1px solid var(--maincolor);
border-bottom: 1px solid var(--maincolor);
border-left: none;
border-right: none;
padding: 6px 12px;
text-transform: uppercase;
font-size: 1rem;
font-weight: 500;
letter-spacing: 1px;
color: black;
overflow: hidden;
transition: 0.5s ease all;
cursor: pointer;
z-index: 12;
}
.btn3:hover {
color: var(--primarycolor);
}
.btn3::before {
content: '';
transform: translate(-50%, -50%);
position: absolute;
left: 50%;
top: 50%;
width: 100%;
cursor: pointer;
height: 100%;
background-color: var(--maincolor);
transition: 0.5s ease all;
}
.cta-btn3 {
color: black;
}
.cta-btn3::before {
transform: translate(-50%, -50%) rotate(45deg);
width: 100%;
height: 0;
z-index: -1;
}
.cta-btn3:hover::before {
height: 500%;
width: 100%;
transition: 0.5s ease all;
}
.cta_btn_contact {
width: 100%;
display: flex;
justify-content: center;
align-items: center;
}
#testDiv{
width: 50px;
height: 50px;
background: yellow;
}
#testDiv.open {
background: green;
}
<!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>Document</title>
</head>
<body>
<!-- CONTACT -->
<div class="cta_btn_contact">
<button id="click_contact" class="btn3 cta-btn3">open contact</button>
</div>
<div id="testDiv"></div>
</body>
</html>
Related
I have a code for a dynamic range slider which works on other sites but not on Squarespace. I am using the theme, Merida and the page can be found here. The code is meant to show the values in a teardrop shaped bubble which moves with the slider.
the full code is below, just incase i am wrong and it isn't the javascript that is faulty. Any help will be greatly appreciated. Thanks!
#import url('https://fonts.googleapis.com/css?family=Poppins:400,500,600,700&display=swap');
*{
margin: 0;
padding: 0;
box-sizing: border-box;
font-family: 'Poppins', sans-serif;
}
html,body{
display: grid;
height: 100%;
text-align: center;
place-items: center;
background: #664AFF;
}
.range{
height: 80px;
width: 380px;
background: #fff;
border-radius: 10px;
padding: 0 65px 0 45px;
box-shadow: 2px 4px 8px rgba(0,0,0,0.1);
}
.sliderValue{
position: relative;
width: 100%;
}
.sliderValue span{
position: absolute;
height: 45px;
width: 45px;
transform: translateX(-70%) scale(0);
font-weight: 500;
top: -40px;
line-height: 55px;
z-index: 2;
color: #fff;
transform-origin: bottom;
transition: transform 0.3s ease-in-out;
}
.sliderValue span.show{
transform: translateX(-70%) scale(1);
}
.sliderValue span:after{
position: absolute;
content: '';
height: 100%;
width: 100%;
background: #664AFF;
border: 3px solid #fff;
z-index: -1;
left: 50%;
transform: translateX(-50%) rotate(45deg);
border-bottom-left-radius: 50%;
box-shadow: 0px 0px 8px rgba(0,0,0,0.1);
border-top-left-radius: 50%;
border-top-right-radius: 50%;
}
.field{
display: flex;
align-items: center;
justify-content: center;
height: 100%;
position: relative;
}
.field .value{
position: absolute;
font-size: 18px;
color: #664AFF;
font-weight: 600;
}
.field .value.left{
left: -22px;
}
.field .value.right{
right: -43px;
}
.range input{
-webkit-appearance: none;
width: 100%;
height: 3px;
background: #ddd;
border-radius: 5px;
outline: none;
border: none;
z-index: 2222;
}
.range input::-webkit-slider-thumb{
-webkit-appearance: none;
width: 20px;
height: 20px;
background: red;
border-radius: 50%;
background: #664AFF;
border: 1px solid #664AFF;
cursor: pointer;
}
.range input::-moz-range-thumb{
-webkit-appearance: none;
width: 20px;
height: 20px;
background: red;
border-radius: 50%;
background: #664AFF;
border: 1px solid #664AFF;
cursor: pointer;
}
.range input::-moz-range-progress{
background: #664AFF;
}
<!DOCTYPE html>
<!-- Created By CodingNepal -->
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="range">
<div class="sliderValue">
<span>100</span>
</div>
<div class="field">
<div class="value left">
0</div>
<input type="range" min="10" max="200" value="100" steps="1">
<div class="value right">
200</div>
</div>
</div>
<script>
const slideValue = document.querySelector("span");
const inputSlider = document.querySelector("input");
inputSlider.oninput = (()=>{
let value = inputSlider.value;
slideValue.textContent = value;
slideValue.style.left = (value/2) + "%";
slideValue.classList.add("show");
});
inputSlider.onblur = (()=>{
slideValue.classList.remove("show");
});
</script>
</body>
</html>
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 2 years ago.
Improve this question
I am having a little problem with my code.
I want when the user clicks on any button it changes its color to the hover color and text color to white.
And when the user click the next button the previous one will come back to its previous state. Is it possible?
#charset "utf-8";
/* CSS Document */
.button {
display: inline-flex;
height: 40px;
width: 90px;
border: 2px solid #1A6893;
margin-top:20px;
color: #1A6893;
text-transform: uppercase;
text-decoration: none;
font-size: .8em;
letter-spacing: 1.5px;
align-items: center;
justify-content: center;
overflow: hidden;
}
a {
color: #1A6893;
text-decoration: none;
letter-spacing: 1px;
}
#button-3 {
position: relative;
overflow: hidden;
cursor: pointer;
}
#button-3 a {
position: relative;
transition: all .45s ease-Out;
}
#circle {
width: 0%;
height: 0%;
opacity: 0;
line-height: 40px;
border-radius: 50%;
background: #1A6893;
position: absolute;
transition: all .5s ease-Out;
top: 20px;
left: 70px;
color:#FFF;
}
#button-3:hover #circle {
width: 200%;
height: 500%;
opacity: 1;
top: -70px;
left: -70px;
}
#button-3:hover a {
color: #FFF;
}
.abc{
margin-top:20px;
}
.boxes {
margin: auto;
padding: 50px;
background: #484848;
}
/*Checkboxes styles*/
input[type="checkbox"] { display: none; }
input[type="checkbox"] + label {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 20px;
font: 14px/20px 'Open Sans', Arial, sans-serif;
color: #1a6893;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
input[type="checkbox"] + label:last-child { margin-bottom: 0; }
input[type="checkbox"] + label:before {
content: '';
display: block;
width: 20px;
height: 20px;
border: 1px solid #1a6893;
position: absolute;
left: 0;
top: 0;
opacity: .6;
-webkit-transition: all .12s, border-color .08s;
transition: all .12s, border-color .08s;
}
input[type="checkbox"]:checked + label:before {
width: 10px;
top: -5px;
left: 5px;
border-radius: 0;
opacity: 1;
border-top-color: transparent;
border-left-color: transparent;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.button:active{
color:#039;
background-color:#396;
}
<div class="row" style="padding:0px;">
<div class="col-1"><div class="button" id="button-3" onClick="changeColor();"><div id="circle"></div>Day</div></div>
<div class="col-1"><div class="button" id="button-3"><div id="circle"></div>Week</div></div>
<div class="col-1"><div class="button" id="button-3"><div id="circle"></div>Month</div></div>
<div class="col-1"><div class="button" id="button-3"><div id="circle"></div>Day Sheet</div></div>
</div>
Just add some rules for the "active" state.
Also, I changed all your IDs to classes. You should only provided unique identifiers in the ID attribute.
Furthermore, I changed the button-3:hover .circle rule to button-3:not(.active):hover .circle. This hides the animation of the circle when hovering over "active" buttons.
.button.active {
background-color: #396;
}
.button.active a {
color: #FFF;
}
.button-3:not(.active):hover .circle {
width: 200%;
height: 500%;
opacity: 1;
top: -70px;
left: -70px;
}
Then listen for the click, toggle the "active" class from all buttons:
Array.from(document.querySelectorAll('.button')).forEach(button => {
button.classList.toggle('active', button === e.currentTarget);
}
Example
Array.from(document.querySelectorAll('.button')).forEach(button => {
button.addEventListener('click', handleButtonClick);
});
function handleButtonClick(e) {
Array.from(document.querySelectorAll('.button')).forEach(button => {
button.classList.toggle('active', button === e.currentTarget);
});
}
#charset "utf-8";
/* CSS Document */
.button {
display: inline-flex;
height: 40px;
width: 90px;
border: 2px solid #1A6893;
margin-top: 20px;
color: #1A6893;
text-transform: uppercase;
text-decoration: none;
font-size: .8em;
letter-spacing: 1.5px;
align-items: center;
justify-content: center;
overflow: hidden;
}
.button.active {
background-color: #396;
}
.button.active a {
color: #FFF;
}
a {
color: #1A6893;
text-decoration: none;
letter-spacing: 1px;
}
.button-3 {
position: relative;
overflow: hidden;
cursor: pointer;
}
.button-3 a {
position: relative;
transition: all .45s ease-Out;
}
.circle {
width: 0%;
height: 0%;
opacity: 0;
line-height: 40px;
border-radius: 50%;
background: #1A6893;
position: absolute;
transition: all .5s ease-Out;
top: 20px;
left: 70px;
color: #FFF;
}
.button-3:not(.active):hover .circle {
width: 200%;
height: 500%;
opacity: 1;
top: -70px;
left: -70px;
}
.button-3:hover a {
color: #FFF;
}
.abc {
margin-top: 20px;
}
.boxes {
margin: auto;
padding: 50px;
background: #484848;
}
/*Checkboxes styles*/
input[type="checkbox"] {
display: none;
}
input[type="checkbox"]+label {
display: block;
position: relative;
padding-left: 35px;
margin-bottom: 20px;
font: 14px/20px 'Open Sans', Arial, sans-serif;
color: #1a6893;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
}
input[type="checkbox"]+label:last-child {
margin-bottom: 0;
}
input[type="checkbox"]+label:before {
content: '';
display: block;
width: 20px;
height: 20px;
border: 1px solid #1a6893;
position: absolute;
left: 0;
top: 0;
opacity: .6;
-webkit-transition: all .12s, border-color .08s;
transition: all .12s, border-color .08s;
}
input[type="checkbox"]:checked+label:before {
width: 10px;
top: -5px;
left: 5px;
border-radius: 0;
opacity: 1;
border-top-color: transparent;
border-left-color: transparent;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
}
.button:active {
color: #039;
background-color: #396;
}
<div class="row" style="padding:0px;">
<div class="col-1">
<div class="button button-3">
<div class="circle"></div>Day</div>
</div>
<div class="col-1">
<div class="button button-3">
<div class="circle"></div>Week</div>
</div>
<div class="col-1">
<div class="button button-3">
<div class="circle"></div>Month</div>
</div>
<div class="col-1">
<div class="button button-3">
<div class="circle"></div>Day Sheet</div>
</div>
</div>
I am new to CSS and downloaded a pre-made login page online.
I wanted to customize and add some effects when the user clicks the button and after 2 days of research but I got nothing.
It would be great if could get some tips on how do I set up.
this is the animation I am trying to achieve: "https://codemyui.com/submit-button-loading-animation-click/"
here's my HTML.
<!DOCTYPE html>
<html lang="en" >
<head>
<meta charset="UTF-8">
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.7.2/css/all.min.css'>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<div class="container" id="container">
<div class="form-container sign-up-container">
<form id="signup-form">
<h1>Create Account</h1>
<span><br>Use your Email for Registration</span>
<input type="text" placeholder="Name" id="up_name" />
<input type="email" placeholder="Email" id="up_email"/>
<input type="password" placeholder="Password" id="up_password"/>
<button id="signUpBtn">Sign Up</button>
</form>
</div>
<div class="form-container sign-in-container">
<form id="signin-form">
<h1>Sign in</h1>
<span><br>Use your Email Account to Login</span>
<input type="email" placeholder="Email" id="in_email"/>
<input type="password" placeholder="Password" id="in_password"/>
<button id="signInBtn">Sign In</button>
</form>
</div>
<div class="overlay-container">
<div class="overlay">
<div class="overlay-panel overlay-left">
<h1>Welcome Back!</h1>
<p>To keep connected with us please login with your personal info</p>
<button class="ghost" id="gotoSignIn">Sign In</button>
</div>
<div class="overlay-panel overlay-right">
<h1>Hello, Friend!</h1>
<p>Enter your personal details and start journey with us</p>
<button class="ghost" id="gotoSignUp">Sign Up</button>
</div>
</div>
</div>
</div>
<script src="https://www.gstatic.com/firebasejs/7.8.2/firebase-app.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.8.2/firebase-auth.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.8.2/firebase-firestore.js"></script>
<script src="https://www.gstatic.com/firebasejs/7.8.2/firebase-analytics.js"></script>
<script>
var firebaseConfig = {
apiKey: "AIzaSyBCmpcDvnsftFfAIIodb5IgGUdpsiSAjwQ",
authDomain: "feb-ekka.firebaseapp.com",
databaseURL: "https://feb-ekka.firebaseio.com",
projectId: "feb-ekka",
appId: "1:454540852080:web:0285ef92b9a933b28dedb5",
measurementId: "G-Z8MLYNTN54"
};
firebase.initializeApp(firebaseConfig);
firebase.analytics();
const auth = firebase.auth();
const db = firebase.firestore();
</script>
<script src="script.js"></script>
<script src="authen.js"></script>
</body>
</html>
here's my CSS.
#import url('https://fonts.googleapis.com/css?family=Montserrat:400,800');
* {
box-sizing: border-box;
}
body {
background: #f6f5f7;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-family: 'Montserrat', sans-serif;
height: 100vh;
margin: 0px;
}
h1 {
font-weight: bold;
margin: 0;
}
h2 {
text-align: center;
}
p {
font-size: 14px;
font-weight: 100;
line-height: 20px;
letter-spacing: 0.5px;
margin: 20px 0 30px;
}
span {
font-size: 12px;
}
a {
color: #333;
font-size: 14px;
text-decoration: none;
margin: 15px 0;
}
button {
border-radius: 20px;
border: 1px solid #FF4B2B;
background-color: #FF4B2B;
color: #FFFFFF;
font-size: 12px;
font-weight: bold;
padding: 12px 45px;
letter-spacing: 1px;
text-transform: uppercase;
transition: transform 80ms ease-in;
}
button:active {
transform: scale(0.95);
}
button:focus {
outline: none;
}
button.ghost {
background-color: transparent;
border-color: #FFFFFF;
}
form {
background-color: #FFFFFF;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 50px;
height: 100%;
text-align: center;
}
input {
background-color: #eee;
border: none;
padding: 12px 15px;
margin: 8px 0;
width: 100%;
}
.container {
background-color: #fff;
border-radius: 10px;
box-shadow: 0 14px 28px rgba(0,0,0,0.25),
0 10px 10px rgba(0,0,0,0.22);
position: relative;
overflow: hidden;
width: 100%;
max-width: 100%;
min-height: 100%;
}
.form-container {
position: absolute;
top: 0;
height: 100%;
transition: all 0.6s ease-in-out;
}
.sign-in-container {
left: 0;
width: 50%;
z-index: 2;
}
.container.right-panel-active .sign-in-container {
transform: translateX(100%);
}
.sign-up-container {
left: 0;
width: 50%;
opacity: 0;
z-index: 1;
}
.container.right-panel-active .sign-up-container {
transform: translateX(100%);
opacity: 1;
z-index: 5;
animation: show 0.6s;
}
#keyframes show {
0%, 49.99% {
opacity: 0;
z-index: 1;
}
50%, 100% {
opacity: 1;
z-index: 5;
}
}
.overlay-container {
position: absolute;
top: 0;
left: 50%;
width: 50%;
height: 100%;
overflow: hidden;
transition: transform 0.6s ease-in-out;
z-index: 100;
}
.container.right-panel-active .overlay-container{
transform: translateX(-100%);
}
.overlay {
background: #FF416C;
background: -webkit-linear-gradient(to right, #FF4B2B, #FF416C);
background: linear-gradient(to right, #FF4B2B, #FF416C);
background-repeat: no-repeat;
background-size: cover;
background-position: 0 0;
color: #FFFFFF;
position: relative;
left: -100%;
height: 100%;
width: 200%;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}
.container.right-panel-active .overlay {
transform: translateX(50%);
}
.overlay-panel {
position: absolute;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
padding: 0 40px;
text-align: center;
top: 0;
height: 100%;
width: 50%;
transform: translateX(0);
transition: transform 0.6s ease-in-out;
}
.overlay-left {
transform: translateX(-20%);
}
.container.right-panel-active .overlay-left {
transform: translateX(0);
}
.overlay-right {
right: 0;
transform: translateX(0);
}
.container.right-panel-active .overlay-right {
transform: translateX(20%);
}
.social-container {
margin: 20px 0;
}
.social-container a {
border: 1px solid #DDDDDD;
border-radius: 50%;
display: inline-flex;
justify-content: center;
align-items: center;
margin: 0 5px;
height: 40px;
width: 40px;
}
footer {
background-color: #222;
color: #fff;
font-size: 14px;
bottom: 0;
position: fixed;
left: 0;
right: 0;
text-align: center;
z-index: 999;
}
footer p {
margin: 10px 0;
}
footer i {
color: red;
}
footer a {
color: #3c97bf;
text-decoration: none;
}
my Script.js
const gotoSignUpButton = document.getElementById('gotoSignUp');
const gotoSignInButton = document.getElementById('gotoSignIn');
const container = document.getElementById('container');
gotoSignUpButton.addEventListener('click', () => {
container.classList.add("right-panel-active");
});
gotoSignInButton.addEventListener('click', () => {
container.classList.remove("right-panel-active");
});
and my authen.js (which I think isn't needed)
//listen for auth status changes
auth.onAuthStateChanged(user => {
if(user != null){
JavascriptInterface.toast("Login Successful!!");
JavascriptInterface.openMain(user.uid);
}
})
////logout
//const logout = document.querySelector('#lgout');
//logout.addEventListener('click',(e) => {
// e.preventDefault();
// auth.signOut();
//});
//signup
const signupForm = document.querySelector('#signup-form');
const signinForm = document.querySelector('#signin-form');
signupForm.addEventListener('submit',(e) => {
e.preventDefault();
//get user Info
const name = signupForm['up_name'].value;
const email = signupForm['up_email'].value;
const password = signupForm['up_password'].value;
//signup the user
auth.createUserWithEmailAndPassword(email,password).then(cred => {
return db.collection('users').doc(cred.user.uid).set({
name: signupForm['up_name'].value,
email: signupForm['up_email'].value,
password: signupForm['up_password'].value
})
}).then(() => {
signupForm.reset();
container.classList.remove("right-panel-active");
});
});
signinForm.addEventListener('submit',(e) => {
e.preventDefault();
//get user Info
const email = signinForm['in_email'].value;
const password = signinForm['in_password'].value;
//signin the user
auth.signInWithEmailAndPassword(email,password).then(cred => {
signinForm.reset();
});
});
auth.setPersistence(firebase.auth.Auth.Persistence.NONE)
Well Thanks in advance :)
Something like this?
You can just change the styling and make it more appealing.
var button = document.getElementById("button");
button.addEventListener('click', function(){
button.innerHTML = "Wait...";
button.classList.add("loading");
button.classList.remove("submit");
setTimeout(function()
{
if(button.classList.contains("loading"))
{
button.classList.remove("loading");
button.innerHTML = "Success";
button.classList.add("success");
}
}, 3000);
});
#keyframes rotate{
from{
transform: rotateZ(0deg);
}
to{
transform: rotateZ(360deg);
}
}
.container{
width: 180px;
}
div#button{
box-sizing: border-box;
width: 100%;
margin: 0 auto;
}
.loading{
max-width: 50px;
height: 50px;
border-width: 5px;
border-color: transparent #27a80c transparent #27a80c;
border-style: solid;
border-radius: 25px;
background-color: transparent;
font-size: 10px;
text-align: center;
line-height: 40px;
color: #27a80c;
animation: rotate 1s infinite;
}
.submit, .success{
text-align: center;
max-width: 120px;
padding: 15px;
border: thin solid transparent;
background-color: white;
transition: background-color color .25s ease;
border-radius: 5px;
cursor: pointer;
height: 50px;
}
.submit{
border-color: red;
color: red;
}
.success{
border-color: #27a80c;
color: white;
background-color: #27a80c;
}
.submit:hover{
background-color: red;
color: white;
}
<div class="container">
<div class="submit" id="button">
Submit
</div>
</div>
I don't know what i am doing wrong or where the code is breaking,i am trying to append a new div into the locationBox div,but every time i click on the button(green button that says enter) to add the new div,it momentarily adds the div and it disappears,can someone explain what i'm doing wrong and why the code breaks?Thanks
var menuBtn = document.querySelector("#menuBtn button");
var sideMenu = document.querySelector(".sideMenu");
var addCity = document.querySelector("#addCityBtn");
var cityForm = document.querySelector("#cityForm");
var cityContainer = document.querySelector(".cities");
var formClose = document.querySelector("#cityForm p");
var enterBtn = document.querySelector("#enter");
var locationBox = document.querySelector(".locationBox");
var btn = document.querySelector("#btn");
/*=============================================
= FUNCTIONS =
=============================================*/
/*===== OPEN MENU ======*/
menuBtn.addEventListener("click", function() {
menuBtn.style.marginLeft = "0px";
if (sideMenu.style.marginLeft === "0px") {
menuBtn.style.transition = "all .5s linear";
sideMenu.style.marginLeft = "-320px";
sideMenu.style.transition = "all .5s linear";
} else {
menuBtn.style.marginLeft = "320px";
menuBtn.style.transition = "all .5s linear";
sideMenu.style.marginLeft = "0px";
sideMenu.style.transition = "all .5s linear";
}
});
/*===== ADD NEW DIV TO LOCATION BOX ======*/
function newDiv() {
var newDiv = document.createElement("div");
newDiv.setAttribute("class", "city");
locationBox.appendChild(newDiv);
}
/*===== ADD NEW CITY ======*/
function newCity() {
if (cityForm.style.display === "block") {
cityForm.style.transition = "all .7s linear";
cityForm.style.display = "none";
} else {
cityForm.style.transition = "all .7s linear";
cityForm.style.display = "block";
}
}
/*===== FORM CLOSE ======*/
formClose.addEventListener("click", function() {
cityForm.style.display = "none";
});
/*=============================================
= EVENT LISTENERS =
=============================================*/
addCity.addEventListener("click", newCity);
enterBtn.addEventListener("click", newDiv);
body {
padding: 0;
margin: 0;
background-color: blanchedalmond;
}
#menuBtn button {
position: fixed;
padding: 2px 0;
width: 40px;
background-color: black;
z-index: 3;
border-radius: 0px;
margin: 0;
color: #ffffff;
font-size: 20px;
font-weight: bold;
border: none;
cursor: pointer;
}
#menuBtn button:hover {
color: black;
background-color: white;
transition: all .3s linear;
}
.sideMenu {
height: 100vw;
width: 320px;
background-color: steelblue;
position: absolute;
z-index: 2;
margin-left: -320px;
}
.sideMenu li {
margin-left: 10px;
list-style-type: none;
border-bottom: 2px solid #0752a2;
padding: 10px;
}
.sideMenu li:hover {
background: white;
transition: all .3s linear;
}
.sideMenu li:hover a {
color: red;
transition: all .3s linear;
}
.sideMenu li a {
text-decoration: none;
color: black;
font-size: 18px;
}
#topContainer {
padding: 0;
margin: 0;
height: 280px;
width: 100%;
background-image: url("./images/sunnyBg.jpeg");
background-size: cover;
background-position: center;
position: absolute;
}
#topContainer h2 {
position: absolute;
top: 10%;
left: 50%;
transform: translate(-50%, -1%);
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 38px;
text-transform: uppercase;
}
/*=============================================
= LOCATION BOX RULES =
=============================================*/
.locationBox {
position: absolute;
top: 40%;
display: grid;
grid-template-columns: repeat(1, 1fr);
grid-template-rows: .2fr 1fr;
justify-content: center;
align-content: center;
width: 100%;
height: 550px;
}
.locationBox h3 {
color: blue;
text-align: center;
font-size: 28px;
}
.weatherDetails {
color: #fffafa;
text-align: left;
margin: 0 10px;
font-size: 17px;
padding: 0;
text-transform: uppercase;
}
.cities {
display: grid;
grid-template-columns: repeat(4, 1fr);
justify-items: center;
}
.city {
width: 320px;
height: 320px;
background-color: cadetblue;
border-bottom: none;
border-bottom-left-radius: 10px;
border-bottom-right-radius: 10px;
}
.city h3 {
text-align: center;
text-transform: uppercase;
font-size: 20px;
border-bottom: 2px solid black;
color: white;
padding-bottom: 3px;
}
.cities form {
display: none;
height: 230px;
width: 530px;
position: absolute;
top: 20%;
left: 50%;
transform: translate(-50%, -50%);
background-color: #002fa7;
border-radius: 10px;
padding: 5px;
color: white;
font-size: 22px;
letter-spacing: 2px;
text-align: center;
z-index: 4;
transition: .7s all linear;
}
.cities label {
position: absolute;
top: 15%;
left: 50%;
transform: translate(-50%);
}
.cities input {
color: black;
font-style: italic;
font-weight: bolder;
padding: 5px;
display: block;
margin: 90px auto;
font-size: 18px;
width: 100%;
box-sizing: border-box;
text-align: center;
}
.cities form button {
width: 140px;
padding: 5px;
font-size: 16px;
font-weight: bold;
border-radius: 3px;
border: none;
background-color: #ff007f;
color: #ffffff;
position: absolute;
top: 70%;
transform: translate(-50%);
}
.cities form button:hover {
content: " ";
border: none;
background-color: #98ff98;
color: #000000;
transition: background-color .3s linear;
}
#cityForm p {
position: absolute;
top: 0;
left: 90%;
font-size: x-small;
font-weight: bold;
color: #fffafa;
cursor: pointer;
}
#addCityBtn {
width: 120px;
padding: 5px;
background: #23297a;
border: 1.5px solid #000000;
border-radius: 4.5px;
font-size: 17px;
color: #ffffff;
cursor: pointer;
}
#addCityBtn:hover {
color: #23297a;
background-color: #fffafa;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Weather App</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" media="screen" href="main.css" />
<link rel="icon" href="/Weather App/images/cloudy.png">
</head>
<body>
<div id="menuBtn">
<button>X</button>
</div>
<div class="sideMenu">
<li>
Stuff One
</li>
<li>
Stuff One
</li>
<li>
Stuff One
</li>
<li>
Stuff One
</li>
<li>
Stuff One
</li>
<li>
Stuff One
</li>
<li>
Stuff One
</li>
</div>
<div id="topContainer">
<h2>Weather</h2>
</div>
<div class="locationBox">
<div class="location">
<h3>LOCATIONS</h3>
</div>
<div class="cities">
<form id="cityForm">
<p>close</p>
<label for="cityInput">City</label>
<input type="text" id="cityInput" placeholder="Enter city">
<button id="enter">Enter</button>
</form>
<div class="city">
<h3>Copenhagen</h3>
<div class="weatherDetails">
<p>Current Weather:40 degrees</p>
<p>Condition:Cloudy</p>
<p>Wind:10mph</p>
<p>Overcast:None</p>
</div>
</div>
<div id="addCityContainer">
<button id="addCityBtn">Add city</button>
</div>
</div>
</div>
<script src="main.js"></script>
</body>
</html>
The default type of button is submit which causes the submission of the form.
To solve the issue either use Event.preventDefault() or change the type of the button to button like the following:
<button type="button" id="addCityBtn">Add city</button>
Following a basic React tutorial (https://www.fullstackreact.com) but I'm not able to get the given stylesheets to work properly due this error in console.
Here is the complete source of what I have so far -
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Timeline</title>
<link href="https://gist.githubusercontent.com/auser/2bc34b9abf07f34f602dccd6ca855df1/raw/40c5e7c8cad4c6920fed940fc31cbb63abd94c29/timeline.css" rel="stylesheet" type="text/css" />
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<!-- Script tags including React -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js"></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
</head>
<body>
<div class="demo">
<div id="app"></div>
</div>
<script type="text/babel">
class App extends React.Component {
render() {
return (
<div className="notificationsFrame">
<div className="panel">
<Header />
</div>
</div>
)
}
}
class Header extends React.Component {
render() {
return (
<div className="header">
<div className="fa fa-more"></div>
<span className="title">Timeline</span>
<input
type="text"
className="searchInput"
placeholder="Search ..." />
<div className="fa fa-search searchIcon"></div>
</div>
)
}
}
var mount = document.querySelector('#app');
ReactDOM.render(<App />, mount);
</script>
</body>
</html>
I've checked in dev tools and for timeline.css I have "Accept:text/css" in the request headers which I believe is right. I don't know why it is then being transferred with a different type? This question has been asked before but the answers all seem to be saying that something to do with the type of the request is incorrect, but I can't see where.
the webmasters of site block all script and stylesheet.
this is a security feature that avoids MIME type confusion attacks.
for more info go: mozilla developer
Solution:
change your stylesheet timeline.css in other CDN or enter it in your host or in html page
example: your code
or this:
<html>
<head>
<meta charset="utf-8">
<title>Timeline</title>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<!-- Script tags including React -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.3.1/react-dom.min.js"></script>
<script src="https://unpkg.com/babel-standalone#6/babel.min.js"></script>
</head>
<style>
.demo {
position: relative;
}
.demo .notificationsFrame {
z-index: 2;
width: 100%;
top: 20px;
background: #fff;
border-radius: 3px;
overflow: hidden;
font-family: 'Open Sans', Helvetica, sans-serif;
margin-bottom: 40px;
}
.demo .notificationsFrame.show-menu {
transform: translate3d(150px, 0, 0);
}
.demo .notificationsFrame .searchInput {
border: 10px solid red;
box-sizing: border-box;
position: absolute;
top: 13px;
right: 55px;
width: 200px;
height: 34px;
border-radius: 17px;
border: none;
background: #fff;
padding: 0 17px;
font-size: 13px;
color: #666;
transition: all 0.3s ease-in-out;
transform: translateX(15px);
opacity: 0;
pointer-events: none;
}
.demo .notificationsFrame .searchInput:focus {
outline: none;
}
.demo .notificationsFrame .searchInput.active {
-webkit-transform: translateX(0);
transform: translateX(0);
opacity: 1;
pointer-events: all;
}
.demo .notificationsFrame .header {
position: relative;
height: 60px;
background: #5f98cd;
padding-top: 0;
}
.demo .notificationsFrame .header .menuIcon {
position: absolute;
width: 29px;
height: 15px;
top: 23px;
left: 20px;
cursor: pointer;
}
.demo .notificationsFrame .header .menuIcon:hover .dashTop, .demo .notificationsFrame .header .menuIcon:hover .dashBottom, .demo .notificationsFrame .header .menuIcon:hover .circle {
background: #fff;
}
.demo .notificationsFrame .header .menuIcon .dashTop {
position: absolute;
width: 20px;
height: 3px;
top: 0;
left: 0;
background: #b2daff;
border-radius: 3px;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.demo .notificationsFrame .header .menuIcon .dashBottom {
position: absolute;
width: 20px;
height: 3px;
top: 0;
left: 0;
background: #b2daff;
border-radius: 3px;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
width: 29px;
top: auto;
bottom: 0;
}
.demo .notificationsFrame .header .menuIcon .circle {
position: absolute;
height: 7px;
width: 7px;
border-radius: 4px;
top: -2px;
right: 0;
background: #b2daff;
-webkit-transition: all 0.2s ease-in-out;
transition: all 0.2s ease-in-out;
}
.demo .notificationsFrame .header .title {
display: block;
text-align: center;
color: #fff;
font-weight: 600;
font-size: 15px;
}
.demo .notificationsFrame .header .searchIcon {
position: absolute;
z-index: 3;
font-size: 21px;
color: #fff;
top: 18px;
right: 20px;
-webkit-transition: all 0.3s ease;
transition: all 0.3s ease;
cursor: pointer;
}
.demo .notificationsFrame .header .searchIcon:hover {
color: #fff;
}
.demo .notificationsFrame .content {
position: relative;
height: 100%;
overflow: hidden;
}
.demo .notificationsFrame .content .line {
position: absolute;
top: 0;
left: 40px;
bottom: 0;
width: 3px;
background: #ebebeb;
}
.demo .notificationsFrame .content .item {
position: relative;
z-index: 2;
margin: 20px 30px 30px 70px;
display: block;
/*border-radius: 50%;
border: 5px solid #ecf0f1;
box-sizing: border-box;
position: absolute;
height: 20px;
width: 20px;
background: #fff;
border: 2px solid #5F98CD;
box-shadow: 0 0 0 3px #fff;*/
}
.demo .notificationsFrame .content .item:hover {
color: #5f98cd;
cursor: pointer;
}
.demo .notificationsFrame .content .item .circle {
box-sizing: border-box;
position: absolute;
height: 11px;
width: 11px;
background: #fff;
border: 2px solid #5f98cd;
box-shadow: 0 0 0 3px #fff;
border-radius: 6px;
top: 0;
left: -20px;
}
.demo .notificationsFrame .content .item .avatar {
position: absolute;
height: 40px;
width: 40px;
display: inline-block;
vertical-align: top;
overflow: hidden;
left: -49px;
}
.demo .notificationsFrame .content .item .avatar img {
width: 100%;
-webkit-border-radius: 50%;
-moz-border-radius: 50%;
-ms-border-radius: 50%;
-o-border-radius: 50%;
border-radius: 50%;
position: absolute;
left: 0;
top: 0;
}
.demo .notificationsFrame .content .item .time {
display: block;
font-size: 11px;
line-height: 11px;
margin-bottom: 2px;
}
.demo .notificationsFrame .content .item p {
font-size: 15px;
line-height: 20px;
margin: 0px 40px 0px 0px;
font-family: 'Open Sans', Lora, Times, no-serif;
}
.demo .notificationsFrame .content .item p b {
font-weight: 600;
}
.demo .notificationsFrame .content .item .right {
position: absolute;
right: 5px;
font-size: 11px;
top: 11px;
}
.demo .notificationsFrame .content .item .commentCount {
position: absolute;
right: 15px;
font-size: 12px;
top: 11px;
}
.demo .notificationsFrame .content .item .commentCount:after {
content: "\f075";
font-family: FontAwesome;
position: absolute;
font-size: 20px;
color: #ebebeb;
top: -50%;
left: 100%;
margin-left: 10px;
z-index: 3;
}
.demo .notificationsFrame .content .item .commentCount:hover:after {
color: lightblue;
}
.demo .notificationsFrame .footer {
position: relative;
background: #fff;
margin: auto;
height: 30px;
border-top: 1px solid #eee;
width: 100%;
border-radius: 10px;
}
.demo .notificationsFrame .footer button {
background: #eee;
position: absolute;
width: 100%;
right: 0px;
left: 0px;
top: 0px;
bottom: 0px;
border: 0;
}
.demo .notificationsFrame .footer button i {
margin: 0 10px;
}
</style>
<body>
<div class="demo">
<div id="app"></div>
</div>
<script type="text/babel">
class App extends React.Component {
render() {
return (
<div className="notificationsFrame">
<div className="panel">
<Header />
</div>
</div>
)
}
}
class Header extends React.Component {
render() {
return (
<div className="header">
<div className="fa fa-more"></div>
<span className="title">Timeline</span>
<input
type="text"
className="searchInput"
placeholder="Search ..." />
<div className="fa fa-search searchIcon"></div>
</div>
)
}
}
var mount = document.querySelector('#app');
ReactDOM.render(<App />, mount);
</script>
</body>
</html>