I have created a contact form that will appear when a button is clicked. This works fine. However, when I add js-code to close the contact via a button inside the contact form it won't open at all.
I think it's a problem with the logic, but I can't locate where. Syntax seems fine.
Be aware that the js code which renders everything useless has been commented out. I have added it in the descriptions, so it should hopefully be clear for anyone to make head and tales out of it. Also, you must click on the window to make the contact form appear because the display in css is set to 'none' and changes upon clicking to 'flex'.
//this function will make the contact-form open upon clicking the "get a quote" Button
window.addEventListener('click', function() {
let quoteButton = document.getElementById('quote-button');
let contactWrapper = document.getElementById('contact-wrapper');
if (contactWrapper.style.display == 'none') {
contactWrapper.style.display = 'flex';
} else {
(contactWrapper.style.display = 'none');
}
});
//this function shoud make the contact-form disappear upon clicking the "Back" Button, however above code (to make contact form appear) does not work if bellow code is enabled.
/*
window.addEventListener('click', function() {
let backbutton = document.getElementById('back-button');
let contactWrapper = document.getElementById('contact-wrapper');
if (contactWrapper.style.display == 'flex') {
contactWrapper.style.display = 'none';
}
});
*/
//this function will make the contact-form stick in place when opened
window.addEventListener('scroll', function() {
let contactForm = document.getElementById('contact-wrapper');
let maxTopYPosition = 0;
let maxBottomYPosition = 4000;
if (window.pageYOffset >= maxTopYPosition && window.pageYOffset < maxBottomYPosition) {
contactForm.classList.add('sticky-contact-wrapper');
} else {
contactForm.classList.remove('sticky-contact-wrapper');
}
});
/* Beginning of Contact-Form
The contact form is only visible on click*/
#contact-wrapper {
display: none;
left: 5%;
z-index: 10000;
font-family: Arial, Helvetica, sans-serif;
background-image: linear-gradient(to bottom right, rgba(122, 122, 122, 0.975), rgba(173, 173, 173, 0.975), rgba(235, 235, 235, 0.975), rgba(201, 201, 201, 0.975), rgba(122, 122, 122, 0.975));
width: 90%;
margin: 5vh auto;
padding: 1vh 1vw;
flex-direction: row;
flex-wrap: wrap;
border: 5px solid black;
border-radius: 10px;
box-shadow: 10px 10px rgb(206, 197, 197, 0.5);
}
.sticky-contact-wrapper {
position: absolute;
position: fixed;
top: 10vh;
opacity: 1;
animation-name: fadeInOpacity;
animation-iteration-count: 1;
animation-timing-function: ease-in;
animation-duration: 0.5s;
}
#keyframes fadeInOpacity {
0% {
opacity: 0;
}
100% {
opacity: 1;
}
}
.flex-item {
padding: 2vh 2vw;
}
.flex-item1 {
flex-grow: 7;
}
.flex-item2 {
flex-grow: 3;
display: flex;
}
#contact-form p {
line-height: 0;
margin: 2vh 0 6px 0;
font-size: 16px;
}
#contact-form .input-field {
height: 5vh;
width: 80%;
}
#contact-form .message-field{
height: 12vh;
}
.button-flex-wrapper {
display: flex;
flex-direction: row;
width: 80%;
justify-content: space-between;
}
#contact-form button {
display: block;
height: 5vh;
width: 10vw;
min-width: 75px;
color: white;
background: rgb(173, 66, 66);
border: none;
border-radius: 5px;
text-transform: uppercase;
}
.dropZone {
width: 33vw;
height: 75%;
margin: auto;
border: 2px dashed #ccc;
line-height: -50%;
text-align: center;
display: table;
}
.dropZone h3 {
display: table-cell;
text-align: center;
vertical-align: middle;
background: rgb(235, 231, 231);
height: 200px; width:200px;
color: black;
}
.dropZone.dragover {
border-color: black;
color: #000;
}
/* End of contact form */
<!-- CONTACT-FORM -->
<div id="contact-wrapper">
<div class="flex-item flex-item1">
<form id="contact-form" action="" method="POST"
enctype="multipart/form-data">
<p>Name</p>
<input class="input-field" type="text" placeholder="name">
<p>Last Name</p>
<input class="input-field" type="text" placeholder="name">
<p>work email</p>
<input class="input-field" type="text" placeholder="email">
<p>phone</p>
<input class="input-field" type="text" placeholder="phone">
<p>message</p>
<input class="input-field message-field" type="text">
<br><br>
<p>Submit your request</p>
<br>
<div class="button-flex-wrapper">
<div>
<button id="back-button" type="button">Back</button>
</div>
<div>
<button id="submit-button" type="button">Submit</button>
</div>
</div>
</div>
<div id="uploads" class="flex-item flex-item2">
<div class="dropZone" id="dropZone">
<h3>Drop Files Here</h3>
</div>
</div>
</div>
As pointed out, the problem was that the event handler was listening for any kind of click event in the window object. Instead I refactored the code and put the respective buttons in variables and added the addEventListener.
// contact-form opens upon clicking the "get a quote" Button
let quoteButton = document.getElementById('quote-button');
quoteButton.addEventListener('click', function() {
let contactWrapper = document.getElementById('contact-wrapper');
if (contactWrapper.style.display == 'none') {
contactWrapper.style.display = 'flex';
} else {
(contactWrapper.style.display = 'none');
}
});
//contact-form disapears when clicking "back" Button
let backbutton = document.getElementById('back-button');
backbutton.addEventListener('click', function() {
let contactWrapper = document.getElementById('contact-wrapper');
if (contactWrapper.style.display == 'flex') {
contactWrapper.style.display = 'none';
}
});
Your JS is just listening for any 'click' right now, that seems to be the problem. You should add an onclick handler to your button via your html and have that perform the JS function.
<button onclick="openContactForm()" id="quote-button">Open Contact</button>
I turned your code into a codepen so you and others can check it out and provide some additional input. I also made the changes I spoke about in it for you.
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 days ago.
Improve this question
I am trying to create a carousel with a scrolling arrow that proceeds through the carousel and an arrow that reverses. I also want to add scrollbars that change color depending on whether or not the arrows have been clicked. I.e. this functions like a normal carousel.
I am using Jquery to try and change the color of the scrollbars (essentially reverse the colors of them) once the arrows have been clicked to indicate the carousel has scrolled through one cycle.
code:
var cube = document.getElementById("proceedsecond")
var dottyuno = document.getElementById("dotone")
var dottydos = document.getElementById("dotwo")
cube.addEventListener("click", function() {
dottyuno.style.backgroundColor = "#EDEDEB!important";
})
cube.addEventListener("click", function() {
dottydos.style.backgroundColor = "#3A2B2E!important";
})
var pyramid = document.getElementById('backfirst')
var dottyuno = document.getElementById('dotone')
var dottydos = document.getElementById('dottwo')
pyramid.addEventListener("click", function() {
dottyuno.style.backgroundColor = "#3A2B2E!important";
})
pyramid.addEventListener("click", function() {
dottydos.style.backgroundColor = "#EDEDEB!important";
})
.containery {
padding: 20px;
margin: 10px auto 20px auto;
max-width: 68px;
}
.dot {
background-color: #EDEDEB;
border: 1px solid #EDEDEB;
border-radius: 5px;
display: inline-block;
height: 10px;
width: 10px;
}
.dot.active {
background-color: #3A2B2E;
}
.scroller {
cursor: pointer;
display: flex;
align-items: center;
background-color: #fff;
color: #3B2B2F;
border-radius: 6px;
box-shadow: 1px 2px 4px 0 rgba(89, 89, 89, 0.5);
font-size: 24px;
height: 52px;
justify-content: center;
transition: 0.3s all;
width: 52px;
z-index: 1!important;
}
<label id="proceedsecond" class="scroller--forward">❯ </label>
<label id="backfirst" class="scroller--backward">❮</label>
<div class="containery">
<span id="dotone" class="dot active"></span>
<span id="dottwo" class="dot"></span>
</div>
Try and remove the "!important" modifiers where you setting the backgroundcolor. To see it working Press "Run Code Snippit" (I wrapped your code in html-bed to make it run in snippit tool - you may remove that.)
<html>
<head></head>
<body>
<style>
.containery {
padding: 20px;
margin:10px auto 20px auto;
max-width:68px;
}
.dot {
background-color: #EDEDEB;
border: 1px solid #EDEDEB;
border-radius: 5px;
display: inline-block;
height: 10px;
width: 10px;
}
.dot.active {
background-color: #3A2B2E;
}
.scroller {
cursor: pointer;
display: flex;
align-items: center;
background-color: #fff;
color: #3B2B2F;
border-radius: 6px;
box-shadow: 1px 2px 4px 0 rgba(89, 89, 89, 0.5);
font-size: 24px;
height: 52px;
justify-content: center;
transition: 0.3s all;
width: 52px;
z-index: 1!important;
}
</style>
<label id="proceedsecond" class="scroller--forward" >❯ </label>
<label id="backfirst" class="scroller--backward">❮</label>
<div class="containery">
<span id="dotone" class="dot active"></span>
<span id="dottwo" class="dot"></span>
</div>
<script>
var cube = document.getElementById("proceedsecond")
var dottyuno = document.getElementById("dotone")
var dottydos = document.getElementById("dotwo")
cube.addEventListener("click", function() { dottyuno.style.backgroundColor = "#EDEDEB";})
cube.addEventListener("click", function() { dottydos.style.backgroundColor = "#3A2B2E";})
var pyramid = document.getElementById('backfirst')
var dottyuno = document.getElementById('dotone')
var dottydos = document.getElementById('dottwo')
pyramid.addEventListener("click", function() { dottyuno.style.backgroundColor = "#3A2B2E";})
pyramid.addEventListener("click", function() { dottydos.style.backgroundColor = "#EDEDEB";})
</script>
</body>
</html>
I am currently working on an exercise in HTML/CSS/JS. The premise is a library website. The idea is that I have a collapsable form that when deployed allows the user to enter the title of the book, the author, and page numbers. When submit is clicked it takes the user input and generates a html card on the webpage. This title card will display the user input information along with a slider to denote if it was read or not.
I have a few test cards generated in my code that creates the cards as intended, however when utilizing the html form i can not seem to get additional cards to create. I ran some tests to the console to ensure that the form is in fact capturing the user input and assigning it.
If anyone could point me in the right direction that would be amazing. I have been messing with this issue for almost 2 weeks with no luck. I have a feeling that my "wires" are not connected right in the javascript. Thank you in advance.
Javascript:
// set up library
let myLibrary = [];
//set up object
function Book(title, author, pages) {
this.title = title;
this.author = author;
this.pages = pages;
}
//add object to library
function addBookToLibrary(Book){
myLibrary.push(Book);
}
//test books
const lotr = new Book('The Fellowship of the Ring', 'J.R.R. Tolkein', '423 pages');
const ender = new Book('Enders Game', 'Orson Scott Card', '324 pages');
const martian = new Book('The Martian', 'Anthony Weir', '369 pages');
addBookToLibrary(lotr);
addBookToLibrary(ender);
addBookToLibrary(martian);
//inject html to create cards
let htmlCode = ``;
myLibrary.forEach(function(singleBookObjects){
htmlCode =
htmlCode +
`
<entry>
<div>
<h3>Title: ${singleBookObjects.title}</h3>
<h3>Author: ${singleBookObjects.author}</h3>
<h3>Pages: ${singleBookObjects.pages}</h3>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
</entry>
`;
});
function newBookCard() {
let newdiv = document.createElement('div');
newdiv.className+= 'item';
let newp = document.createElement('p');
newp.innerHTML = "Title";
newdiv.appendChild(newp);
document.getElementById('main').appendChild(newdiv);
}
const addBtn = document.getElementById("submit");
addBtn.onclick = function() {
let a = document.getElementById("bookTitle").value
let b = document.getElementById("bookAuthor").value
let c = document.getElementById("bookPages").value
let newBook = new Book(a, b, c);
addBookToLibrary(newBook);
console.log(myLibrary);
newBookCard();
document.getElementById("bookTitle").value = ""
document.getElementById("bookAuthor").value = ""
document.getElementById("bookPages").value = ""
}
const bookCards = document.querySelector(".all-book-cards");
bookCards.innerHTML = htmlCode;
function openForm() {
document.getElementById("myForm").style.display = "block";
}
function submitForm(){
let a = document.getElementById("bookTitle")
}
function closeForm() {
document.getElementById("myForm").style.display = "none";
}
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Library</title>
<meta charset="UTF-8"/>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div id = "container" img src="images/bookShelf.jpeg">
<div id = "titleCard"> My Library</div>
<div class = "all-book-cards"></div>
<button class="open-button" onclick="openForm()">Add Book</button>
<div class="form-popup" id="myForm">
<form action="index.html" class="form-container">
<h1>Add Book</h1>
<label for="bookTitle"><b>Title:</b></label>
<input id="bookTitle" type="text" placeholder="Enter Title" name="bookTitle" required>
<label for="bookAuthor"><b>Author:</b></label>
<input id="bookAuthor" type="text" placeholder="Enter Author" name="bookAuthor" required>
<label for="bookPages"><b>Pages:</b></label>
<input id="bookPages" type="text" placeholder="Enter Pages" name="bookPages" required>
<button id="submit" type="button" class="btn">Add</button>
<button type="button" class="btn cancel" onclick="closeForm()">Close</button>
</form>
</div>
</div>
<script src ="script.js"></script>
</body>
</html>
CSS
.all-book-cards{
width: 20em;
display: flex;
flex-direction: column;
}
entry {
display: flex;
justify-content: space-between;
flex-wrap: wrap;
border: black;
border-width: 3px;
border-style: groove;
padding-left: 5px;
padding-right: 5px;
margin-bottom: 2px;
}
{box-sizing: border-box;}
.open-button {
background-color: #555;
color: white;
padding:16px 20px;
border: none;
cursor: pointer;
opacity: 0.8;
position: fixed;
bottom: 23px;
right: 28px;
width: 90px;
}
.form-popup {
display: none;
position: fixed;
bottom: 0;
right: 15px;
border: 3px solid #f1f1f1;
z-index: 9;
}
.form-container {
max-width: 300px;
padding: 10px;
background-color: white;
}
.form-container input[type=text] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
border: none;
background: #f1f1f1;
}
.form-container input[type=text]:focus {
background-color: rgb(161, 161, 161);
outline: none;
}
.form-container .btn {
background-color: #04AA6d;
color: white;
padding: 16px 20px;
border: none;
cursor: pointer;
width: 100%;
margin-bottom: 10px;
opacity: 0.8;
}
.form-container .cancel {
background-color: red;
}
.form-container .btn:hover, .open-button:hover {
opacity: 1;
}
/* The switch - the box around the slider */
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
/* Hide default HTML checkbox */
.switch input {
opacity: 0;
width: 0;
height: 0;
}
/* The slider */
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
There is a few issues with your code, but the main reason you don't see any changes in the DOM is that you try to find an element by id "main", but no such element is defined.
So step one is putting an id on the element containing your books:
<div id="main" class="all-book-cards"></div>
Another issue is that you change the DOM in different ways on many places in your javascript code which makes it harder to figure out what's going on. You could change the addBookToLibrary to actually add elements to the DOM aswell. To ensure consistency with the initial books you create in the foor loop, I have changed the addBookToLibrary to handle the entire creation and removed the for loop.
//add object to library
function addBookToLibrary(Book){
myLibrary.push(Book);
let html = `
<entry>
<div>
<h3>Title: ${Book.title}</h3>
<h3>Author: ${Book.author}</h3>
<h3>Pages: ${Book.pages}</h3>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
</entry>
`;
var newEl = document.createElement("template");
newEl.innerHTML = html.trim();
document.getElementById('main').appendChild(newEl.content.firstChild);
}
Below is a CodePen for the full example.
https://codepen.io/rasm586c/pen/PoKdNdd
I'm just starting with Javascript and I made this popup code, and I was wondering if there's another code with the same result or a way of optimizing the Javascript.
The code must make the popup appear when one of the options is clicked and disappear when the click is somewhere else.
Popup code
var activePopup;
document.querySelectorAll('[hasPopup]').forEach((popupParent) => {
popupParent.addEventListener('click', e => {
if (popupParent != activePopup && activePopup != null) {
activePopup.querySelector('[popupContent]').style.display = 'none';
}
window.addEventListener('click', hasClicked => {
let isOnPopup = false;
hasClicked.path.forEach((event) => {
if (event == popupParent) {
isOnPopup = true;
}
})
if (isOnPopup == false){
popupParent.querySelector('[popupContent]').style.display = 'none';
}
})
popupParent.querySelector('[popupContent]').style.display = 'block';
activePopup = popupParent;
})
});
This will do all that you require, but in a much shorter form
puc=document.querySelectorAll("[popupContent]"); // popup divs ...
document.querySelector(".nav-bar__element").onclick=ev=>{
// in case the user clicked on the inner span and not the div:
const pel=[...ev.path].find(e=>e.hasAttribute&&e.hasAttribute("hasPopup"))
if (pel) {
const el=pel.querySelector("[popupContent]");
puc.forEach(d=>d.style.display=d===el?"block":"none")
}
}
body {
margin: 0;
font-family: sans-serif;
height: 100vh;
display: grid;
grid-template-columns: 25fr 75fr;
}
.small-icon {
width: 30px;
height: 30px;
}
[hasPopup] {
position: relative;
display: flex;
align-items: center;
justify-content: center;
margin: 30px;
padding: 20px;
border-radius: 10px;
border: 1px solid hsl(0, 0%, 40%);
}
[hasPopup]:hover {
cursor: pointer;
}
[popupContent] {
position: absolute;
cursor: auto;
padding: 20px;
border-radius: 10px;
border: 1px solid hsl(0, 0%, 40%);
left: 110%;
display: none;
}
<div class='nav-bar__element nav-bar__element--utils'>
<div class='utils__notifications' id='utilsNotifications' hasPopup>
<span>Notifications</span>
<div class="notifications-popup" popupContent>
<div>
notifications
</div>
</div>
</div>
<div class='utils__messages' id='utilsMessages' hasPopup>
<span>Messages</span>
<div class="messages-popup" popupContent>
<div>
messages
</div>
</div>
</div>
<div class='utils__settings' id='utilsMessages' hasPopup>
<span>Settings</span>
<div class="settings-popup" popupContent>
<div>
settings
</div>
</div>
</div>
<script type='text/javascript' src='script.js'></script>
</div>
If you are looking for a JS popup than check this:- https://www.gitto.tech/posts/simple-popup-box-using-html-css-and-javascript/
It worked for me this way:
HTML code
<div class="invalid-chars-alert-close-btn" onclick="document.getElementById('invalidChars-1').classList.toggle('active');">x</div>
JS: code inside if invalid characters written in my form then:
document.getElementById("invalidChars-1").classList.toggle("active");
This is following on from:
JS Form validation Checkbox IF statement not working
I've added another separate form for the business owners.
Currently I have a separate html file for 'business' & 'customer'. I've put the CSS for both forms in one file and also the JS is all in one file.
Problem : I seem to only be able to get one form to work at the moment, although if I take the forms out and separate them into different projects they work fine, independently, on different platforms or workspaces.
What I'm trying to do is get the one JS file to reference both forms & execute commands based on what page the user is on filling out the form (business or customer). The problem is only Customer Form works when the JS is all in one file, the Business Form doesn't work (ie show the red highlighted errors). If I take the Business Form out and put it in another stand alone project (inc the HTML, CSS & JS) it works fine. Seems to be a conflict with the Form reference?
I need 2 forms as I will be expanding on fields etc, but to keep things simple I've thrown up samples of both on here.
Here is the HTML for the 'Business' form, (customer form HTML is in the link -and yes it has been changed to work properly):
<div class="business-contactus-body">
<div class="business_container">
<div class="business_contactus_heading_form">
<h2>Business client Form</h2>
</div>
<form id="business_contactus_form" class="business_contactus_form">
<div class="business-form-control">
<label for="businessName">Name</label>
<input type="text" placeholder="ABC Company" id="businessName" />
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error message</small>
</div>
<div class="business-form-control">
<label for="businessEmail">Email</label>
<input type="text" placeholder="a#abccompany.com" id="businessEmail" />
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error message</small>
</div>
<div class="business-form-control">
<label for="businessMessage">Message</label>
<textarea type="text" placeholder="Please enter a brief message" id="businessMessage" cols="30" rows="10"></textarea>
<i class="fas fa-check-circle"></i>
<i class="fas fa-exclamation-circle"></i>
<small>Error message</small>
</div>
<div class="business-form-control">
<input class="businessDisclaimerBox" type="checkbox" id="businessDisclaimerBox" />
<label for="businessDisclaimerBox" id="disclaimer-label">I agree to the terms and conditions.</label>
<small>Error message</small>
</div>
<button class="contactus_form_button">Submit</button>
</form>
</div>
</div>
CSS - for both forms
/***** CONTACT US PAGE CSS *****/
* {
box-sizing: border-box;
}
.customer-contactus-body, business-contactus-body {
min-height: 1300px;
width: 100%;
background-color: pink;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
margin: 0px;
}
.customerCU-contactus-heading-message, .business-contactus-heading-message {
width: 600px;
font-weight: 200;
margin: -50px 0px 50px 20px;
padding: 0px;
}
.customerCU_container, .business_container {
background-color: grey;
border-radius: 5px;
overflow: hidden;
width: 600px;
max-width: 100%;
}
.customer_contactus_heading_form, .business_contactus_heading_form {
border-bottom: 1px solid #f0f0f0;
background-color: white;
padding: 20px 40px;
}
.customer_contactus_heading_form h2, .business_contactus_heading_form h2 {
margin: 0px;
color: black;
}
.contactus_form, .business_contactus_form {
padding: 30px 40px;
}
.customerCU-form-control, .business-form-control {
margin-bottom: 10px;
padding-bottom: 20px;
position: relative;
}
.customerCU-form-control label, .business-form-control label {
display: inline-block;
margin-bottom: 5px;
font-weight: 530;
font-size: 17px;
}
.customerCU-form-control input, .business-form-control input {
border: 2px solid #f0f0f0;
border-radius: 4px;
display: block;
font-size: 14px;
padding: 10px;
width: 100%;
}
.customerCU-form-control input:focus, .business-form-control input:focus {
outline: 0;
border-color: grey;
}
.customerCU-form-control.success input, .business-form-control.success input {
border-color: green;
}
.customerCU-form-control textarea, .business-form-control textarea {
resize: vertical;
border: 2px solid #f0f0f0;
border-radius: 4px;
display: block;
font-size: 14px;
padding: 10px;
width: 100%;
}
.customerCU-form-control.error input, .business-form-control.error input {
border-color: red;
}
.customerCU-form-control textarea:focus, .business-form-control textarea:focus {
outline: 0;
border-color: grey;
}
.customerCU-form-control.success textarea, .business-form-control.success textarea {
border-color: green;
}
.customerCU-form-control.error textarea, .business-form-control.error textarea {
border-color: red;
}
.customerCU-form-control.error label#disclaimer-label, .business-form-control.error label#disclaimer-label {
color: red;
font-weight: bold;
text-decoration: underline;
}
.customerCU-form-control i, .business-form-control i {
visibility: hidden;
position: absolute;
top: 40px;
right: 10px;
}
.customerCU-form-control.success i.fa-check-circle, .business-form-control.success i.fa-check-circle {
color: green;
visibility: visible;
}
.customerCU-form-control.error i.fa-exclamation-circle, .business-form-control.error i.fa-exclamation-circle {
color: red;
visibility: visible;
}
.customerCU-form-control small, .business-form-control small {
color: red;
position: absolute;
bottom: 0;
left: 0;
visibility: hidden;
}
.customerCU-form-control.error small, .business-form-control.error small {
visibility: visible;
}
label#disclaimer-label {
margin-left: 10px;
font-size: 12px;
width: 612px;
}
.contactus_form_button {
background-color: rgb(31, 136, 229);
border: 2px solid rgb(128, 128, 128, 0.199);
border-radius: 4px;
color: #fff;
display: block;
font-size: 16px;
padding: 10px;
margin-top: 20px;
width: 100%;
cursor: pointer;
transition: 0.3s ease background-color;
}
.contactus_form_button:hover {
cursor: pointer;
box-shadow: 1px 1px 1px rgb(25, 60, 173);
}
#keyframes contactus-form-status {
0% {
opacity: 1;
pointer-events: all;
}
90% {
opacity: 1;
pointer-events: all;
}
100% {
opacity: 0;
pointer-events: none;
}
}
JS
//** CUSTOMER FORM **//
const form = document.getElementById('contactus_form');
const customerName = document.getElementById('customerName');
const customerCUEmail = document.getElementById('customerCUEmail');
const disclaimerBox = document.getElementById('disclaimerBox');
form.addEventListener('submit', e => {
e.preventDefault();
checkInputs();
});
function checkInputs() {
// trim to remove the whitespaces
const customerNameValue = customerName.value.trim();
const customerCUEmailValue = customerCUEmail.value.trim();
if(customerNameValue === '') {
setErrorFor(customerName, 'Please enter your name');
} else {
setSuccessFor(customerName);
}
if(customerCUEmailValue === '') {
setErrorFor(customerCUEmail, 'Email cannot be blank');
} else if (!isEmail(customerCUEmailValue)) {
setErrorFor(customerCUEmail, 'Not a valid email');
} else {
setSuccessFor(customerCUEmail);
}
if(!disclaimerBox.checked == true){
setErrorFor(disclaimerBox, 'Please check box and accept our terms and conditions.');
}else {
setSuccessFor(disclaimerBox);
}
}
function setErrorFor(input, message) {
const formControl = input.parentElement;
const small = formControl.querySelector('small');
formControl.className = 'customerCU-form-control error';
small.innerText = message;
}
function setSuccessFor(input) {
const formControl = input.parentElement;
formControl.className = 'customerCU-form-control success';
}
function isEmail(customerCUEmail) {
return /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(customerCUEmail);
}
// ** BUSINESS CLIENT FORM **
const business_contactus_form = document.getElementById('business_contactus_form');
const businessName = document.getElementById('businessName');
const businessEmail = document.getElementById('businessEmail');
const businessMessage = document.getElementById("businessMessage");
const businessDisclaimerBox = document.getElementById('businessDisclaimerBox');
business_contactus_form.addEventListener('submit', e => {
e.preventDefault();
checkbusiness_Inputs();
});
function checkbusiness_Inputs() {
//trim to remove the whitespaces
const businessNameValue = businessName.value.trim();
const businessEmailValue = businessEmail.value.trim();
const businessMessageValue = businessMessage.value.trim();
if (businessNameValue === '') {
setErrorForB(businessName, 'Please enter your name');
} else {
setSuccessForB(businessName);
}
if (businessEmailValue === '') {
setErrorForB(businessEmail, 'Email cannot be blank');
} else if (!isEmailB(businessEmail)) {
setErrorForB(businessEmail, 'Not a valid email');
} else {
setSuccessForB(businessEmail);
}
if (businessMessageValue === '') {
setErrorForB(businessMessage, 'Please enter a message.');
} else {
setSuccessForB(businessMessage);
}
if (!businessDisclaimerBox.checked) {
setErrorForB(businessDisclaimerBox, 'Please check box and accept terms and conditions.');
} else {
setSuccessForB(businessDisclaimerBox);
}
}
function setErrorForB(input, message) {
const formControlB = input.parentElement;
const small = formControlB.querySelector('small');
formControlB.className = 'business-form-control error';
small.innerText = message;
}
function setSuccessForB(input) {
const formControlB = input.parentElement;
formControlB.className = 'business-form-control success';
}
function isEmailB(businessEmail) {
return /^(([^<>()\[\]\\.,;:\s#"]+(\.[^<>()\[\]\\.,;:\s#"]+)*)|(".+"))#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(businessEmail);
}
I have this Slider example created with pure JS.
The slider is working great. The only thing left to do would be to activate the three dots so when the 1st slide opens, 1st dot activates, showing different color than the other dots, and so on. Also, you should be able to open the correct slide when clicking dots, so 1st dot opens 1st slide, 2nd dot 2nd slide, and so on.
Could you help me to achieve this? You can find the source code below.
const nextBtn = document.querySelector('.nextBtn');
const prevBtn = document.querySelector('.prevBtn');
const container = document.querySelector('.images');
const offers = document.getElementById('offers');
const link = document.getElementById('links');
let colors = ['#7f86ff', '#2932d1', '#00067f'];
let currentSlide = 0;
let texts = ['Change1', 'Change2', 'Change3'];
let currentText = 0;
let links = ['Link1', 'Link2', 'Link3'];
let currentLink = 0;
function updateSlide(direction) {
currentSlide =
(colors.length + currentSlide + direction)
% colors.length;
container.style.backgroundColor = colors[currentSlide];
container.animate([{opacity:'0.1'}, {opacity:'1.0'}],
{duration: 200, fill:'forwards'})
}
function updateText(direction) {
currentText =
(texts.length + currentText + direction)
% texts.length;
offers.innerHTML = texts[currentText];
offers.animate([{transform:'translateY(-50px)', opacity:'0.0'}, {transform:'translateY(0)', opacity:'1.0'}],
{duration: 200, fill:'forwards'})
}
function updateLink(direction) {
currentLink =
(links.length + currentLink + direction)
% links.length;
link.innerHTML = links[currentLink];
link.animate([{transform:'scale(0,0)'}, {transform:'scale(1.1)'}],
{duration: 200, fill:'forwards'})
}
updateSlide(0);
updateText(0);
updateLink(0);
nextBtn.addEventListener('click', nextSlide);
prevBtn.addEventListener('click', prevSlide);
function nextSlide() {
updateSlide(+1);
updateText(+1);
updateLink(+1);
clearInterval(myInterval);
}
function prevSlide() {
updateSlide(-1);
updateText(-1);
updateLink(-1);
clearInterval();
clearInterval(myInterval);
}
var myInterval = window.setInterval(function(){
updateSlide(+1),updateText(+1),updateLink(+1); },
8000);
body {
min-height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: lightblue;
}
.images {
background-color: #4047c9;
flex: 0 0 80%;
min-height: 70vh;
border-radius: 10px;
position: relative;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: center;
color: white;
}
#links {
text-decoration: none;
color: white;
border: solid 2px white;
border-radius: 3px;
padding: 5px 10px;
}
#links:hover {
background-color: #000238;
}
a {
color: white;
text-decoration: none;
}
.dots {
display: flex;
margin-top: 120px;
margin-bottom: 50px;
}
#dot1, #dot2, #dot3 {
width: 20px;
height: 20px;
background-color: rgb(147, 151, 249);
border-radius: 50%;
margin: 0px 5px;
cursor: pointer;
}
#dot1:active, #dot2:active, #dot3:active {
background-color: #fff;
}
.btn {
display: inline-block;
background: white;
color: black;
padding: 10px;
border: none;
cursor: pointer;
}
.prevBtn {
position: absolute;
top: 50%;
left: 0;
transform: translate(-50%, -50%);
}
.nextBtn {
position: absolute;
top: 50%;
right: 0;
transform: translate(50%, -50%);
}
.btn:active {
background-color: grey;
color: white;
}
.btn:hover {
background-color: grey;
color: white;
}
<body>
<div class="images">
<button type="button" class="btn prevBtn">Prev Btn</button>
<button type="button" class="btn nextBtn">Next Btn</button>
<h1 id="offers">Changing text</h1>
Links
<div class="dots">
<span id="dot1"></span>
<span id="dot2"></span>
<span id="dot3"></span>
</div>
</div>
</body>
First off, according to
https://developer.mozilla.org/en-US/docs/Web/CSS/:active
The :active CSS pseudo-class represents an element (such as a button) that is being activated by the user.
So if you want your dots to be active, you’ll have to write a different way of giving them an active state since they are currently <span> tags, I would recommend giving them a class of .active, and adding in Javascript code to add that class on to them, or adding in that style programmatically within the Javascript function.
Based on your other request though, you will most likely also have to make the dots an <a> tag or something along those lines so you can add functionality on to them to let clicking on the dots bring you to any slide. Something probably along the lines of:
function dot1Click() {
updateSlide(1);
updateText(1);
updateLink(1);
dot1.style.backgroundColor = #fff;
}
Then you should have something along the lines of what you want. I'll return to this question when I have more time to iron out a code snippet, but I wanted to give you something to help you get started!