I am trying to make my code repeat several times these html elements on my page but I am stuck, my code works for the moment but I can't add html tags which have the same parents and I don't know why...
What I wanna do is a "vitrine" website for a friend's Etsy shop... I want the page to display all his articles... So I need to create a loop which writes as many html elements as articles...
Do you guys can help me ?
I am new to JavaScript by the way ;)
let productCount = 8;
for (let i = 0; i <= productCount; i++) { // on repète la boucle autant de fois qu'il y a d'articles
const newContainer = document.createElement('article');
let container = document.getElementById("product-list");
newContainer.classList.add("product");
const newContent = document.createElement('div');
let content = document.getElementsByTagName("article");
newContent.classList.add("product-content");
const newProductInfo = document.createElement('div');
let productInfo = document.querySelector("#product-list > article > product-content");
newProductInfo.classList.add("product-info");
const newProductTitleColumn = document.createElement('div');
let productTitleColumn = document.querySelector("#product-list > article > product-content > product-info");
newProductTitleColumn.classList.add("product-title-column");
const newProductRow = document.createElement('div');
let productRow = document.querySelector("#product-list > article > product-content > product-info > product-title-column");
newProductRow.classList.add("product-row");
const newProductTitle = document.createElement('h2');
let productTitle = document.querySelector("#product-list > article > product-content > product-info > product-title-column > product-row");
newProductTitle.classList.add("product-title");
container.appendChild(newContainer).appendChild(newContent).appendChild(newProductInfo).appendChild(newProductTitleColumn).appendChild(newProductRow).appendChild(newProductTitle);
};
* {
padding: 0;
margin: 0;
height: auto;
list-style: none;
font-family: "Lato", sans-serif;
color: #363636;
text-decoration: none;
}
.product-list {
display: flex;
justify-content: center;
}
.product-content {
display: flex;
align-items: center;
padding: 50px;
margin: 50px;
width: fit-content;
border-radius: 25px;
box-shadow: 0px 0px 50px #bdbdbd;
}
.product-img {
width: 350px;
height: 350px;
border-radius: 25px;
}
.product-title-column {
display: flex;
flex-direction: column;
}
.product-info {
height: 350px;
margin-left: 50px;
display: flex;
flex-direction: column;
justify-content: space-between;
width: 350px;
}
.product-row {
display: flex;
justify-content: space-between;
align-items: center;
}
.product-line {
display: flex;
justify-content: center;
width: 350px;
height: 3px;
margin-top: 5px;
background-color: #363636;
}
.product-title {
font-weight: 900;
font-size: 2em;
}
.product-price {
font-weight: 600;
font-size: 2em;
}
.product-description {
font-size: 1.25em;
}
.shipping-info {
display: flex;
justify-content: space-between;
font-weight: 700;
margin: 10px;
}
.product-quantity {
text-align: right;
font-size: 1.25em;
}
.product-link {
display: block;
font-size: 1.5em;
text-align: center;
padding: 25px;
font-weight: 800;
border-radius: 15px;
color: white;
background-color: #eb6d20;
}
<article class="product">
<div class="product-content">
<img src="Images/Products/IMG_4303.JPG" class="product-img">
<div class="product-info">
<div class="product-title-column">
<div class="product-row">
<h2 class="product-title">Bavoir élastique</h2>
<h2 class="product-title">-</h2>
<h2 class="product-price">5€</h2>
</div>
<p class="product-line"></p>
</div>
<div class="product-column">
<p class="product-description">Lorem ipsum dolor sit amet consectetur adipisicing elit.
Recusandae minus tenetur
ea placeat odit et doloremque laudantium incidunt blanditiis minima quaerat adipisci, nesciunt
distinctio
possimus quas odio nostrum rem commodi.</p>
<div class="shipping-info">
<p class="product-quantity">Livraison gratuite</p>
<p class="product-quantity">9 en stock <i class="fas fa-check"></i></p>
</div>
<a class="product-link" href="#">Acheter sur Etsy</a>
</div>
</div>
</div>
</article>
Related
I want to move the blue icon with the question mark to the bottom of the box right above the paragraph while also moving the gray icon to the top right of the paragraph without messing up my text.
I tried making multiple flex containers but nothing seems to be working.
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#400;700&display=swap');
html,
body {
height: 100%;
}
body {
font-family: Roboto, sans-serif;
margin: 0;
background: #aaa;
color: #333;
display: flex;
align-items: center;
justify-content: center;
}
.modal {
background: white;
width: 480px;
border-radius: 10px;
box-shadow: 2px 4px 16px rgba(0, 0, 0, .2);
}
.icon {
color: royalblue;
font-size: 26px;
font-weight: 700;
background: lavender;
width: 42px;
height: 42px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.close-button {
background: #eee;
border-radius: 50%;
color: #888;
font-weight: 400;
font-size: 16px;
height: 24px;
width: 24px;
display: flex;
align-items: center;
justify-content: center;
}
button {
padding: 8px 16px;
border-radius: 8px;
}
button.continue {
background: royalblue;
border: 1px solid royalblue;
color: white;
}
button.cancel {
background: white;
border: 1px solid #ddd;
color: royalblue;
}
/* SOLUTION: */
.modal {
display: flex;
gap: 16px;
padding: 16px;
flex-direction: column;
}
.icon {
/* this keeps the icon from getting smashed by the text */
display: flex;
flex-shrink: 0;
}
.ic {
display: flex;
align-items: flex-sart;
}
.header {
display: flex;
font-size: 18px;
font-weight: 700;
margin-bottom: 8px;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.text {
margin-bottom: 16px;
}
<div class="modal">
<div class="ic">
<div class="icon">!</div>
</div>
<div class="container">
<div class="header">Are you sure you want to do that?</div>
<div class="close-button">✖</div>
</div>
<div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur excepturi id soluta, numquam minima rerum doloremque eveniet aspernatur beatae commodi. Cupiditate recusandae ad repellendus quidem consectetur sequi amet aspernatur cumque!</div>
<div class="button">
<button class="continue">Continue</button>
<button class="cancel">Cancel</button>
</div>
</div>
in css add this :
.close-button {
background: #eee;
border-radius: 50%;
color: #888;
font-weight: 400;
font-size: 16px;
height: 24px;
width: 24px;
display: flex;
align-items: center;
justify-content: center;
margin-top: 7px;
margin-left:5px;
}
.icon {
color: royalblue;
font-size: 26px;
font-weight: 700;
background: lavender;
width: 42px;
height: 42px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
margin-right: 5px;
}
in html
<div class="modal">
<div class="ic">
<div class="icon">!</div>
<div class="header">Are you sure you want to do that?
</div>
<div class="close-button">✖</div>
</div>
<div class="container">
</div>
<div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur excepturi id soluta, numquam minima rerum doloremque eveniet aspernatur beatae commodi. Cupiditate recusandae ad repellendus quidem consectetur sequi amet aspernatur cumque!</div>
<div class="button">
<button class="continue">Continue</button>
<button class="cancel">Cancel</button>
</div>
</div>
<link rel="stylesheet" href="style.css">
put the element in the container that you want it to show up in its corner or edge.
then make the parent container position: relative; and your element position: absolute; then control their position using top, right, left, and bottom. here is the code.
#import url('https://fonts.googleapis.com/css2?family=Roboto:wght#400;700&display=swap');
html,
body {
height: 100%;
}
body {
font-family: Roboto, sans-serif;
margin: 0;
background: #aaa;
color: #333;
display: flex;
align-items: center;
justify-content: center;
}
.modal {
background: white;
width: 480px;
border-radius: 10px;
box-shadow: 2px 4px 16px rgba(0, 0, 0, .2);
position: relative;
}
.icon {
color: royalblue;
font-size: 26px;
font-weight: 700;
background: lavender;
width: 42px;
height: 42px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
}
.close-button {
background: #eee;
border-radius: 50%;
color: #888;
font-weight: 400;
font-size: 16px;
height: 24px;
width: 24px;
display: flex;
align-items: center;
justify-content: center;
position: absolute;
top: 0;
right: 0;
margin: 5px;
cursor: pointer;
}
button {
padding: 8px 16px;
border-radius: 8px;
}
button.continue {
background: royalblue;
border: 1px solid royalblue;
color: white;
}
button.cancel {
background: white;
border: 1px solid #ddd;
color: royalblue;
}
/* SOLUTION: */
.modal {
display: flex;
gap: 16px;
padding: 16px;
flex-direction: column;
}
.icon {
/* this keeps the icon from getting smashed by the text */
display: flex;
flex-shrink: 0;
}
.ic {
display: flex;
align-items: flex-sart;
}
.header {
display: flex;
font-size: 18px;
font-weight: 700;
margin-bottom: 8px;
}
.container {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
}
.text {
margin-bottom: 16px;
}
<div class="modal">
<div class="ic">
</div>
<div class="container">
<div class="header">Are you sure you want to do that?</div>
</div>
<div class="close-button">✖</div>
<div class="text"><div class="icon">!</div>Lorem ipsum dolor sit amet consectetur adipisicing elit. Pariatur excepturi id soluta, numquam minima rerum doloremque eveniet aspernatur beatae commodi. Cupiditate recusandae ad repellendus quidem consectetur sequi amet aspernatur cumque!</div>
<div class="button">
<button class="continue">Continue</button>
<button class="cancel">Cancel</button>
</div>
</div>
The button scrolls past the content I want to be shown.
I want the "About Us" section to be showed to the display of user (100vh), but it just scrolls past that.
Here's the code:
function smoothScroll(target, duration) {
var target = document.querySelector(target);
var targetPosition = target.getBoundingClientRect().top;
var startPosition = window.pageYOffset;
var distance = targetPosition - startPosition;
var startTime = null;
function animation(currentTime) {
if (startTime === null) startTime = currentTime;
var timeElapsed = currentTime - startTime;
var run = ease(timeElapsed, startPosition, distance, duration);
window.scrollTo(0, run);
if (timeElapsed < duration) requestAnimationFrame(animation);
}
function ease(t, b, c, d) {
t /= d / 2;
if (t < 1) return (c / 2) * t * t + b;
t--;
return (-c / 2) * (t * (t - 2) - 1) + b;
}
requestAnimationFrame(animation);
}
var btn = document.querySelector(".btn");
btn.addEventListener("click", function () {
smoothScroll(".text-slider", 600);
});
.hero {
display: flex;
width: 90%;
margin: auto;
height: 100vh;
min-height: 100vh;
align-items: center;
text-align: center;
background-image: url(/img/pexels-tranmautritam-326501.jpg);
background-size: cover;
background-attachment: fixed;
justify-content: center;
}
.introduction {
flex: 1;
height: 30%;
}
.welcometxt h1 {
font-size: 17px;
color: white;
font-weight: 100;
letter-spacing: 12px;
}
.intro-text h1 {
font-size: 44px;
font-weight: 700;
color: white;
/* background: linear-gradient(to left, rgb(184, 184, 184), #ffffff); */
/* -webkit-background-clip: text;
-webkit-text-fill-color: transparent; */
}
.intro-text p {
font-size: 18px;
margin-top: 5px;
color: white;
}
.cta {
padding: 50px 0px 0px 0px;
}
.btn {
background-color: white;
width: 150px;
height: 50px;
cursor: pointer;
font-size: 16px;
font-weight: 400;
letter-spacing: 1px;
color: black;
border: none;
border-radius: 40px;
transition: all 0.6s ease;
box-shadow: 5px 7px 18px rgb(0, 0, 0, 0.4);
}
.btn:hover {
background-color: black;
color: white;
box-shadow: 5px 7px 18px rgb(0, 0, 0, 0.8);
}
.text-slider {
width: 70%;
height: 90vh;
margin: 100px auto;
position: relative;
text-align: center;
align-items: center;
}
.carousel {
height: 70vh;
overflow: hidden;
}
.slider {
height: 100%;
display: flex;
width: 400%;
transition: all 0.3s;
}
.slider p {
width: 70%;
font-size: 17px;
}
.slider section {
flex-basis: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.controls .arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}
.controls .arrow i {
font-size: 60px;
}
.arrow.left {
left: 10px;
}
.arrow.right {
right: 10px;
}
.nextpage-arrow i{
font-size: 60px;
cursor: pointer;
}
<section class="hero">
<div class="introduction">
<div class="welcometxt">
<h1>
WELLCOME
</h1>
</div>
<div class="intro-text">
<h1>Optimal Solution for Your Product</h1>
<p>
Ensuring optimal solution for your
Quality Management.
</p>
</div>
<div class="cta">
<button class="btn">Click for more</button>
</div>
</div>
</section>
<div class="text-slider" id="text-slider">
<h1>About Us</h1>
<div class="carousel">
<div class="slider">
<section>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aliquam, fugiat.</p>
</section>
<section>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellat, commodi?</p>
</section>
<section>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eligendi, velit.</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, aperiam.</p>
</section>
</div>
<div class="controls">
<span class="arrow left">
<i class="material-icons">
keyboard_arrow_left
</i>
</span>
<span class="arrow right">
<i class="material-icons">
keyboard_arrow_right
</i>
</span>
</div>
</div>
<div class="nextpage-arrow">
<span class="text-slider-btn">
<i class="material-icons">
keyboard_arrow_down
</i>
</span>
</div>
</div>
As shown in the picture, it goes past "About Us" h1.
I want the page to stop at "About Us", and not go past it.
If you need more code, or more explanation please comment and I'll try my best!
Thank you in advance.
UPDATE (GIF):
That code that you use for smooth scroll is unnecessary. You should better use Element.scrollIntoView()
Element.scrollIntoView()
The Element interface's scrollIntoView() method scrolls the element's
parent container such that the element on which scrollIntoView() is
called is visible to the user. MDN - Element.scrollIntoView()
Use the following code should you want to scroll to About Us section when you click on Click for more button.
// 'Click for more' button
const button = document.querySelector("#more-info")
button.onclick = () => {
document.querySelector("#text-slider")
.scrollIntoView({block: "start", behavior: "smooth"})
}
const button = document.querySelector("#more-info")
button.onclick = () => {
document.querySelector("#text-slider")
.scrollIntoView({block: "start", behavior: "smooth"})
}
.hero {
display: flex;
width: 90%;
margin: auto;
height: 100vh;
min-height: 100vh;
align-items: center;
text-align: center;
background: #000;
background-image: url(/img/pexels-tranmautritam-326501.jpg);
background-size: cover;
background-attachment: fixed;
justify-content: center;
}
.introduction {
flex: 1;
height: 30%;
}
.welcometxt h1 {
font-size: 17px;
color: white;
font-weight: 100;
letter-spacing: 12px;
}
.intro-text h1 {
font-size: 44px;
font-weight: 700;
color: white;
/* background: linear-gradient(to left, rgb(184, 184, 184), #ffffff); */
/* -webkit-background-clip: text;
-webkit-text-fill-color: transparent; */
}
.intro-text p {
font-size: 18px;
margin-top: 5px;
color: white;
}
.cta {
padding: 50px 0px 0px 0px;
}
.btn {
background-color: white;
width: 150px;
height: 50px;
cursor: pointer;
font-size: 16px;
font-weight: 400;
letter-spacing: 1px;
color: black;
border: none;
border-radius: 40px;
transition: all 0.6s ease;
box-shadow: 5px 7px 18px rgb(0, 0, 0, 0.4);
}
.btn:hover {
background-color: black;
color: white;
box-shadow: 5px 7px 18px rgb(0, 0, 0, 0.8);
}
.text-slider {
width: 70%;
height: 90vh;
margin: 100px auto;
position: relative;
text-align: center;
align-items: center;
}
.carousel {
height: 70vh;
overflow: hidden;
}
.slider {
height: 100%;
display: flex;
width: 400%;
transition: all 0.3s;
}
.slider p {
width: 70%;
font-size: 17px;
}
.slider section {
flex-basis: 100%;
display: flex;
justify-content: center;
align-items: center;
}
.controls .arrow {
position: absolute;
top: 50%;
transform: translateY(-50%);
cursor: pointer;
}
.controls .arrow i {
font-size: 60px;
}
.arrow.left {
left: 10px;
}
.arrow.right {
right: 10px;
}
.nextpage-arrow i {
font-size: 60px;
cursor: pointer;
}
<section class="hero">
<div class="introduction">
<div class="welcometxt">
<h1>
WELLCOME
</h1>
</div>
<div class="intro-text">
<h1>Optimal Solution for Your Product</h1>
<p>
Ensuring optimal solution for your Quality Management.
</p>
</div>
<div class="cta">
<button class="btn" id="more-info">Click for more</button>
</div>
</div>
</section>
<div class="text-slider" id="text-slider">
<h1>About Us</h1>
<div class="carousel">
<div class="slider">
<section>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Aliquam, fugiat.</p>
</section>
<section>
<p>Lorem ipsum, dolor sit amet consectetur adipisicing elit. Repellat, commodi?</p>
</section>
<section>
<p>Lorem ipsum dolor, sit amet consectetur adipisicing elit. Eligendi, velit.</p>
</section>
<section>
<p>Lorem ipsum dolor sit amet consectetur adipisicing elit. Quaerat, aperiam.</p>
</section>
</div>
<div class="controls">
<span class="arrow left">
<i class="material-icons">
keyboard_arrow_left
</i>
</span>
<span class="arrow right">
<i class="material-icons">
keyboard_arrow_right
</i>
</span>
</div>
</div>
<div class="nextpage-arrow">
<span class="text-slider-btn">
<i class="material-icons">
keyboard_arrow_down
</i>
</span>
</div>
</div>
Recommend you to add background: #000; as fallback for background-image since sometimes image might not be loaded.
I'm trying to make an accordion with HTML, CSS, and Javascript.
I made it but it displays text from an array in only one accordion item, and not on the other accordion divs and other buttons, who are not working for each accordion. I want to display object text from each array and to make all buttons work, is this possible?
Thanks anyway.
const datas = [ {
title: "Can you accept all credit cards",
content:"Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis, ipsa? Nam nobis repudiandae ullam,",
},
{
title: "Can you accept all credit cards",
content:"Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis, ipsa? Nam nobis repudiandae ullam,",
},
{
title: "Can you accept all credit cards",
content:"Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis, ipsa? Nam nobis repudiandae ullam,",
}
];
let container = document.querySelector(".container");
let accordion = document.querySelector(".accordion");
let accordion__content = document.querySelector(".accordion__content");
let accordion__show = document.querySelector(".accordion__show");
datas.map((data)=> {
accordion__show.addEventListener("click" , (e)=> {
e.preventDefault();
accordion__content.classList.toggle("show_text");
accordion__content.innerHTML = datas[0].content;
if ( accordion__show.innerHTML === "+") {
accordion__show.innerHTML = "-";
} else {
accordion__show.innerHTML = "+";
}
})
})
#import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');
body {
padding: 0;
margin: 0;
background-color: #F2F7FE;
font-weight: bold;
font-family: 'Quicksand',sans-serif;
}
main {
width: 100%;
min-height: 500px;
display: flex;
align-items: center;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
}
.container {
width: 100%;
min-height: 500px;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
.accordion__content {
display: none;
}
.show_text {
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.accordion {
width:calc(650px - 30px);
background-color: white;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
flex-wrap: wrap;
}
.accordion__header {
width: 100%;
min-height: auto;
display: flex;
text-align: center;
align-items: center;
justify-content: space-around;
flex-direction: row;
}
.accordion button {
border:2px solid gray;
background-color: transparent;
padding: 10px 15px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="main">
<div class="container">
<div class="accordion">
<div class="accordion__header">
<h1>Do you accept all credit cards?</h1>
<button class="accordion__show">+</button>
</div>
<p class="accordion__content"></p>
</div>
<div class="accordion">
<div class="accordion__header">
<h1>Do you accept all credit cards?</h1>
<button class="accordion__show">+</button>
</div>
<p class="accordion__content"></p>
</div>
<div class="accordion">
<div class="accordion__header">
<h1>Do you accept all nonsense cards?</h1>
<button class="accordion__show">+</button>
</div>
<p class="accordion__content"></p>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
I slightly altered your javascript code, replacing the map() with forEach().
Also, referring to accordion__content and accordion__show should be like a collection, using querySelectorAll():
let accordion__content = document.querySelectorAll(".accordion__content");
let accordion__show = document.querySelectorAll(".accordion__show");
const datas = [{
title: "Can you accept all credit cards",
content: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis, ipsa? Nam nobis repudiandae ullam,",
},
{
title: "Can you accept all credit cards",
content: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis, ipsa? Nam nobis repudiandae ullam,",
},
{
title: "Can you accept all credit cards",
content: "Lorem ipsum dolor sit amet consectetur adipisicing elit. Omnis, ipsa? Nam nobis repudiandae ullam,",
}
];
let container = document.querySelector(".container");
let accordion = document.querySelector(".accordion");
let accordion__content = document.querySelectorAll(".accordion__content");
let accordion__show = document.querySelectorAll(".accordion__show");
accordion__show.forEach(function (current, index) {
current.addEventListener("click", (e) => {
e.preventDefault();
accordion__content[index].classList.toggle("show_text");
accordion__content[index].innerHTML = datas[0].content;
if (current.innerHTML === "+") {
current.innerHTML = "-";
} else {
current.innerHTML = "+";
}
})
})
#import url('https://fonts.googleapis.com/css2?family=Quicksand&display=swap');
body {
padding: 0;
margin: 0;
background-color: #F2F7FE;
font-weight: bold;
font-family: 'Quicksand', sans-serif;
}
main {
width: 100%;
min-height: 500px;
display: flex;
align-items: center;
flex-wrap: wrap;
flex-direction: column;
justify-content: center;
}
.container {
width: 100%;
min-height: 500px;
display: flex;
align-items: center;
flex-direction: column;
justify-content: center;
}
.accordion__content {
display: none;
}
.show_text {
display: flex;
align-items: center;
justify-content: center;
padding: 20px;
}
.accordion {
width: calc(650px - 30px);
background-color: white;
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
flex-wrap: wrap;
}
.accordion__header {
width: 100%;
min-height: auto;
display: flex;
text-align: center;
align-items: center;
justify-content: space-around;
flex-direction: row;
}
.accordion button {
border: 2px solid gray;
background-color: transparent;
padding: 10px 15px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>repl.it</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div class="main">
<div class="container">
<div class="accordion">
<div class="accordion__header">
<h1>Do you accept all credit cards?</h1>
<button class="accordion__show">+</button>
</div>
<p class="accordion__content"></p>
</div>
<div class="accordion">
<div class="accordion__header">
<h1>Do you accept all credit cards?</h1>
<button class="accordion__show">+</button>
</div>
<p class="accordion__content"></p>
</div>
<div class="accordion">
<div class="accordion__header">
<h1>Do you accept all nonsense cards?</h1>
<button class="accordion__show">+</button>
</div>
<p class="accordion__content"></p>
</div>
</div>
</div>
<script src="script.js"></script>
</body>
</html>
If the screen or device width is less then 900px I put a button that opens the menu. (exactly js put display:inline; instead of display:none;. So I get a problem when I make a width more 900px (using dev tools google chrome) while the adaptive menu is open - so I have 2 menu bars. Maybe you can offer better ways to create such a menu on small screens.
window.onload = function() {
let headerid = document.getElementById("header-menu");
let menuStyle = getComputedStyle(headerid);
document.getElementById("menu").onclick = function() {
if (menuStyle.display == "none") {
headerid.style.display = "inline";
} else {
headerid.style.display = "none";
}
}
}
/* header style */
.main-container {
display: grid;
grid-template-columns: 1fr;
min-width: 350px;
}
.header-container {
margin: 0 2vw;
display: grid;
grid-template-columns: 1fr 4fr 1fr;
position: relative;
}
.menu-bar {
position: absolute;
top: 20px;
display: none;
}
.header-menu-display {
display: none;
}
.text-menu {
font-size: 25px;
padding-left: 30px;
}
.name {
margin: 20px;
text-align: center;
font-size: 40px;
letter-spacing: 4px;
font-weight: bold;
}
.name:hover {
cursor: default;
}
.underline {
width: 100%;
background-color: black;
height: 2px;
}
.pages {
display: flex;
flex-direction: row;
justify-content: flex-end;
}
.text {
margin-right: 20px;
margin-left: 10px;
font-size: 27px;
letter-spacing: 1px;
}
.text:hover {
color: gray;
cursor: pointer;
}
.header-social-media {
display: flex;
justify-content: center;
align-items: center;
}
.header-social-icon {
width: 30px;
}
.social-media-cont:hover {
color: gray;
}
.header-social-icon:hover {
color: black;
cursor: pointer;
}
.cards-container {
margin: 0 3vw;
height: 100vh;
display: grid;
grid-template-columns: repeat(3, 1fr);
}
.card {
background-color: rgba(223, 223, 223, 0.555);
height: 500px;
margin: 15px;
padding: 0;
border-radius: 10px;
position: relative;
box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .15);
}
.btn {
position: absolute;
bottom: 20px;
left: 20px;
border-radius: 10px;
width: 40%;
height: 7%;
border: 1px solid black;
}
.btn:hover {
background-color: lightgray;
cursor: pointer;
}
.photo {
width: 100%;
height: 60%;
border-radius: 10px 10px 0 0;
}
.country,
.place-name {
padding-left: 5%;
font-size: 20px;
letter-spacing: 2px;
text-transform: uppercase;
}
p.desc {
padding-left: 5%;
height: 76px;
width: 350px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Form style */
.form {
display: none;
margin: 0 5vw;
}
.form-container {
display: flex;
flex-direction: column;
padding-bottom: 20px;
}
.form-input {
width: 70%;
height: 30px;
margin: 5px;
border-radius: 10px;
outline: none;
border: 1px solid black;
padding-left: 10px;
}
.form-part {
letter-spacing: 1px;
font-size: 15px;
text-transform: uppercase;
}
.but {
width: 110px;
height: 50px;
border-radius: 10px;
border: 1px solid black;
cursor: pointer;
}
.but:hover {
background: linear-gradient(to right, rgba(161, 160, 160, 0.788), rgba(231, 230, 230, 0.774))
}
#media screen and (max-device-width: 1300px) {
.text {
margin-right: 10px;
margin-left: 5px;
font-size: 23px;
align-self: center;
}
.card {
width: 300px;
}
p.desc {
width: 250px;
}
.country,
.place-name {
font-size: 15px;
letter-spacing: 1px;
}
.header-menu-display {
display: none;
}
}
#media screen and (max-device-width: 900px) {
.header-container {
grid-template-columns: 1fr 2fr 1fr;
}
.social-media-cont {
margin-left: 30px;
}
.cards-container {
grid-template-columns: repeat(2, 1fr);
}
.card {
width: 90%;
}
.pages,
.header-social-media {
display: none;
}
.menu-bar {
display: block;
grid-column: 3;
align-self: center;
justify-self: center;
}
}
#media screen and (max-device-width: 700px) {
.cards-container {
grid-template-columns: 1fr;
}
.card {
width: 70%;
margin-left: 10%;
}
p.desc {
width: 350px;
}
}
#media screen and (max-device-width: 700px) {
p.desc {
width: 200px;
}
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Travel App</title>
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="css/media.css">
<script src="https://kit.fontawesome.com/3f7264f061.js" crossorigin="anonymous"></script>
<script src="index.js"></script>
</head>
<body>
<div class="main-container">
<hr class="underline">
<header class="header-container">
<div class="header-menu">
<div class="name">Travel </div>
<div class="header-menu-display" id="header-menu">
<p class="text-menu">Travel cards</p>
<p class="text-menu">Add your card</p>
<div class="social-media-cont">
<i class="header-social-icon fab fa-facebook-f"></i>
<i class="header-social-icon fab fa-pinterest"></i>
<i class="header-social-icon fab fa-twitter"></i>
<i class="header-social-icon fab fa-instagram"></i>
</div>
</div>
</div>
<div class="pages">
<p class="text">Travel cards</p>
<p class="text">Add your card</p>
</div>
<div class="header-social-media">
<div class="social-media-cont">
<i class="header-social-icon fab fa-facebook-f"></i>
<i class="header-social-icon fab fa-pinterest"></i>
<i class="header-social-icon fab fa-twitter"></i>
<i class="header-social-icon fab fa-instagram"></i>
</div>
</div>
<div class="menu-bar">
<i class="menu-bar fas fa-bars" id="menu"></i>
</div>
</header>
<hr class="underline">
<section class="cards-container">
<div class="card">
<img src="img/egypt.jpg" alt="" class="photo">
<p class="country">
Country: Egypt
</p>
<p class="place-name">
Name: Piramids
</p>
<p class="desc">
Description: Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim harum sapiente itaque inventore suscipit praesentium est cupiditate non vel pariatur!
</p>
<input class="btn" type="button" value="Show More">
</div>
<div class="card">
<img src="img/miami.jpg" alt="" class="photo">
<p class="country">
Country: USA
</p>
<p class="place-name">
Name: Miami Bitch
</p>
<p class="desc">
Description: Lorem ipsum dolor sit amet, consectetur adipisicing elit. Molestiae quos, eligendi natus voluptate dolorum nam aliquam ad est numquam magni.
</p>
<input class="btn" type="button" value="Show More">
</div>
<div class="card">
<img src="img/tower.jpg" alt="" class="photo">
<p class="country">
Country: France
</p>
<p class="place-name">
Name: Effel Tower
</p>
<p class="desc">
Description: Lorem ipsum dolor sit amet consectetur adipisicing elit. Aliquid eum dolores harum numquam velit sunt tenetur nesciunt, est quia possimus. Quod neque excepturi optio hic explicabo porro exercitationem tempora laudantium similique, magnam
quos suscipit earum eos, nulla nesciunt debitis itaque modi eius libero molestias repudiandae praesentium? Quos eligendi itaque totam.
</p>
<input class="btn" type="button" value="Show More">
</div>
</section>
<form class="form">
<h2>Add your place</h2>
<div class="form-container">
<label for="counrty" class="form-part">Country</label>
<input type="text" class="form-input" name="country" maxlength="100" placeholder="Enter place country">
</div>
<div class="form-container">
<label for="img" class="form-part">Image URL</label>
<input type="text" class="form-input" name="img" maxlength="100" placeholder="Enter image URL">
</div>
<div class="form-container">
<label for="decs" class="form-part">Description</label>
<input type="text" class="form-input" name="desc" maxlength="100" placeholder="Wright your impression">
</div>
<input type="submit" class="but" value="Submit">
</form>
</div>
</body>
</html>
To prevent such a thing instead of using window.onload try to add an event listener for your window resize (so whenever window size get resized it will run your script) just like this:
window.addEventListener('resize', function(event){
let headerid = document.getElementById("header-menu");
let menuStyle = getComputedStyle(headerid);
document.getElementById("menu").onclick = function () {
if (menuStyle.display == "none") {
headerid.style.display = "inline";
} else {
headerid.style.display = "none";
}
};
});
The Code: http://jsfiddle.net/techsin/zLA8j/4/show
For some reason when you click the button and as animation is about to finish a white falsh appears for no reason. I can't debug it. I need help. But sometimes There is no problem.
$('.btn').click(
function(){
var t= $(this);
t.css('transform','scale(.9)');
setTimeout(function(){t.css('transform','');},600);
}
);
html---
<div class="con">
<div class="con2">
<div class="pop">
<header>Would you like to be Awesome?</header>
<div class="txt">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quaerat totam quos quisquam in iure ea provident asperiores nesciunt assumenda autem sequi expedita quae reiciendis labore vitae aspernatur eaque repellat quis.</p>
</div>
</div>
<div class="btns">
css---
html, body {
height: 100%;
overflow: hidden;
}
body {
background-color: rgb(245, 246, 247);
width: 100%;
display: table;
}
.con {
display: table-cell;
vertical-align: middle;
}
.con2 {
display: table;
margin: auto;
}
.pop {
min-width: 300px;
border-radius:3px;
border:1px solid rgb(218, 218, 218);
position: relative;
height: 250px;
background-color: rgb(252, 253, 255);
}
.pop header {
height: 50px; line-height: 50px;
background-color: rgb(248, 248, 248);
position: relative;
padding-left: 15px;
font-family: sans-serif;
font-weight: bold;
color: rgb(123, 123, 134);;
}
.pop header:after {
content:'';
position: absolute;
height: 1px;
background: rgb(207, 207, 207);
left: 0;
width: 100%;
bottom: 0;
}
.btn {
-webkit-transition: all .2s ease-in-out;;
height: 48px;
width: 95px;
background-color: rgb(117, 117, 117);
border-radius:3px;
text-align: center;
line-height: 48px;
font-family: sans-serif;
color:white;
font-size: 15px;
display: inline-block;
margin: 0 5px;
cursor:default;
}
.btns {
width:300px;
text-align: center;
margin: auto;
margin-top: 11px;
}
.btn:hover { -webkit-transform: scale(1.1); }
.dec {background-color: rgb(70, 182, 151); }
.txt {
/* border:1px solid; */
text-align: center;
padding: 15px;
}
.txt p {
text-align: left;
width: 250px;
font-family: sans-serif;
font-size: 14px;
line-height: 22px;
margin: auto;
}