How to make an accordion with array in Javascript?

How to make an accordion with array in Javascript? - javascript

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>

Related

How to move elements using CSS

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>

How to add icon in the button tag?

I have on button which is used to play a song.
In that button, I use a unicode icon for control playing the audio track and it's working fine but the main issue is it's not displaying as per my required ICON (https://www.w3schools.com/icons/tryit.asp?icon=fas_fa-guitar&unicon=f7a6)
I want to show that icon at the right side top corner of the page without effecting my remaining page mainly cards,This is my output
.
please help me to acheive this thing
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.3.0/font/bootstrap-icons.css">
<title>Special-Wishes </title>
<script>
</script>
</head>
<body>
// thi is the audio code
<audio autoplay id="player">
<source src="https://docs.google.com/uc?export=download&id=11wfYWiukbIZJQnDL385jQs2SGQA5ESbL" type="audio/mpeg">
</audio>
<div>
<button id="music" onclick="document.getElementById('player').play()"></button>
</div>
<!-- <img id="i1" src="https://i.pinimg.com/originals/a1/4d/f2/a14df22726e1964e347dc13b182457e5.gif" alt="alternatetext"> -->
<div class="container">
<div class="card">
<div class="box">
<div class="content">
<h2 id="initial">Me</h2>
<h3>Card One</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni veniam ipsa harum aut dicta! Nesciunt beatae ad sint officia veritatis a incidunt sed sapiente sequi sunt, eos, voluptatem itaque necessitatibus!</p>
Read More
</div>
</div>
</div>
<div class="card">
<div class="box">
<div class="content">
<h2><span class="heart-icon" style='font-size:180px;'>♥</span></h2>
<h3>Card Two</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni veniam ipsa harum aut dicta! Nesciunt beatae ad sint officia veritatis a incidunt sed sapiente sequi sunt, eos, voluptatem itaque necessitatibus!</p>
Read More
</div>
</div>
</div>
<div class="card">
<div class="box">
<div class="content">
<h2>AK</h2>
<h3>Card Three</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni veniam ipsa harum aut dicta! Nesciunt beatae ad sint officia veritatis a incidunt sed sapiente sequi sunt, eos, voluptatem itaque necessitatibus!</p>
Read More
</div>
</div>
</div>
</div>
</body>
<style>
#import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
.heart-icons {
margin-left: -40%;
}
#music {
font-size: 50px;
}
* {
margin: o;
padding: 0;
box-sizing: border-box;
font-family: 'poppins', sans-serif;
/* background:#c7c744; */
}
#my_audio {
margin-top: -40%;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #ebf5fc;
}
.container {
display: flex;
justify-content: center;
align-items: center;
max-width: 1200px;
flex-wrap: wrap;
padding: 40px 0;
}
.container .card {
position: relative;
width: 320px;
height: 440px;
box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.05), inset -5px -5px 5px rgba(255, 255, 255, 0.5), 5px 5px 5px rgba(0, 0, 0, 0.05), -5px -5px 5px rgba(255, 255, 255, 0.5);
border-radius: 15px;
margin: 30px;
}
.container .card .box {
position: absolute;
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
background: #ebf5fc;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
border-radius: 15px;
display: flex;
justify-content: center;
align-items: center;
transition: 0.5s;
}
.container .card:hover .box {
transform: translateY(-50px);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
background: linear-gradient(45deg, #b95ce4, #4f29cd);
}
.container .card .box .content {
padding: 20px;
text-align: center;
}
.container .card .box .content h2 {
position: absolute;
top: -10px;
right: 30px;
font-size: 8em;
color: rgba(0, 0, 0, 0.02);
transition: 0.5s;
pointer-events: none;
}
.container .card:hover .box .content h2 {
color: rgba(0, 0, 0, 0.05);
}
.container .card .box .content h3 {
font-size: 1.8em;
color: #777;
z-index: 1;
transition: 0.5s;
}
.container .card .box .content p {
font-size: 1em;
font-weight: 300;
color: #777;
z-index: 1;
transition: 0.5s;
}
.container .card:hover .box .content h3,
.container .card:hover .box.content p {
color: #fff;
}
.container .card .box .content a {
position: relative;
display: inline-block;
padding: 8px 20px;
background: #03a9f4;
margin-top: 15px;
border-radius: 20px;
color: #fff;
text-decoration: none;
font-weight: 400;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.container .card:hover .box .content a {
background: #ff568f;
}
#i1 {
width: 100%;
height: 50px;
}
h1 {
text-align: center;
font-size: 65px;
font-style: italic;
}
</style>
</html>

Just do what they do on the page you linked to
You do need an element with the FAS classes - you can give the button that class
Note the CSS to place the button
Also your HTML is invalid. You have too many body tags
#music { position: absolute; top: 10px; right:50px}
<link rel="stylesheet" href="https://ka-f.fontawesome.com/releases/v5.15.4/css/free.min.css?" />
<button id="music" onclick="document.getElementById('player').play()" class='fas'></button>

You mentioned w3example using font-awsome icons to display the icons
You given Example: https://www.w3schools.com/icons/tryit.asp?icon=fas_fa-guitar&unicon=f7a6
Related Font Awsome Icon: https://fontawesome.com/v5.15/icons/guitar
So icon is not display into frontend without calling fontawsome library
I made changes
1st Add font awsome library in to head
<link rel="stylesheet" href="https://ka-f.fontawesome.com/releases/v5.15.4/css/free.min.css?" />
2nd Add fas class to button
<button id="music" onclick="document.getElementById('player').play()"></button>
Changed to
<button id="music" onclick="document.getElementById('player').play()" class='fas'></button>
Please check the following Working code sinppet
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.3.0/font/bootstrap-icons.css">
<title>Special-Wishes </title>
<link rel="stylesheet" href="https://ka-f.fontawesome.com/releases/v5.15.4/css/free.min.css?" />
</head>
<body>
// thi is the audio code
<audio autoplay id="player">
<source src="https://docs.google.com/uc?export=download&id=11wfYWiukbIZJQnDL385jQs2SGQA5ESbL" type="audio/mpeg">
</audio>
<div>
<button id="music" onclick="document.getElementById('player').play()" class='fas'>

</button>
</div>
<!-- <img id="i1" src="https://i.pinimg.com/originals/a1/4d/f2/a14df22726e1964e347dc13b182457e5.gif" alt="alternatetext"> -->
<div class="container">
<div class="card">
<div class="box">
<div class="content">
<h2 id="initial">Me</h2>
<h3>Card One</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni veniam ipsa harum aut dicta! Nesciunt beatae ad sint officia veritatis a incidunt sed sapiente sequi sunt, eos, voluptatem itaque necessitatibus!</p>
Read More
</div>
</div>
</div>
<div class="card">
<div class="box">
<div class="content">
<h2><span class="heart-icon" style='font-size:180px;'>♥</span></h2>
<h3>Card Two</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni veniam ipsa harum aut dicta! Nesciunt beatae ad sint officia veritatis a incidunt sed sapiente sequi sunt, eos, voluptatem itaque necessitatibus!</p>
Read More
</div>
</div>
</div>
<div class="card">
<div class="box">
<div class="content">
<h2>AK</h2>
<h3>Card Three</h3>
<p>Lorem ipsum dolor sit, amet consectetur adipisicing elit. Magni veniam ipsa harum aut dicta! Nesciunt beatae ad sint officia veritatis a incidunt sed sapiente sequi sunt, eos, voluptatem itaque necessitatibus!</p>
Read More
</div>
</div>
</div>
</div>
</body>
<style>
#import url('https://fonts.googleapis.com/css?family=Poppins:200,300,400,500,600,700,800,900&display=swap');
.heart-icons {
margin-left: -40%;
}
#music {
font-size: 50px;
}
* {
margin: o;
padding: 0;
box-sizing: border-box;
font-family: 'poppins', sans-serif;
/* background:#c7c744; */
}
#my_audio {
margin-top: -40%;
}
body {
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #ebf5fc;
}
.container {
display: flex;
justify-content: center;
align-items: center;
max-width: 1200px;
flex-wrap: wrap;
padding: 40px 0;
}
.container .card {
position: relative;
width: 320px;
height: 440px;
box-shadow: inset 5px 5px 5px rgba(0, 0, 0, 0.05), inset -5px -5px 5px rgba(255, 255, 255, 0.5), 5px 5px 5px rgba(0, 0, 0, 0.05), -5px -5px 5px rgba(255, 255, 255, 0.5);
border-radius: 15px;
margin: 30px;
}
.container .card .box {
position: absolute;
top: 20px;
left: 20px;
right: 20px;
bottom: 20px;
background: #ebf5fc;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
border-radius: 15px;
display: flex;
justify-content: center;
align-items: center;
transition: 0.5s;
}
.container .card:hover .box {
transform: translateY(-50px);
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
background: linear-gradient(45deg, #b95ce4, #4f29cd);
}
.container .card .box .content {
padding: 20px;
text-align: center;
}
.container .card .box .content h2 {
position: absolute;
top: -10px;
right: 30px;
font-size: 8em;
color: rgba(0, 0, 0, 0.02);
transition: 0.5s;
pointer-events: none;
}
.container .card:hover .box .content h2 {
color: rgba(0, 0, 0, 0.05);
}
.container .card .box .content h3 {
font-size: 1.8em;
color: #777;
z-index: 1;
transition: 0.5s;
}
.container .card .box .content p {
font-size: 1em;
font-weight: 300;
color: #777;
z-index: 1;
transition: 0.5s;
}
.container .card:hover .box .content h3,
.container .card:hover .box.content p {
color: #fff;
}
.container .card .box .content a {
position: relative;
display: inline-block;
padding: 8px 20px;
background: #03a9f4;
margin-top: 15px;
border-radius: 20px;
color: #fff;
text-decoration: none;
font-weight: 400;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
}
.container .card:hover .box .content a {
background: #ff568f;
}
#i1 {
width: 100%;
height: 50px;
}
h1 {
text-align: center;
font-size: 65px;
font-style: italic;
}
</style>
</html>

Write several times a precise html code in javascript

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>

Adaptive menu isn`t hidden when its necessary

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";
}
};
});

Why Can't I use array.indexOf(this.innerHTML)?

So I have a list of links in the footer and I want to be able to click on a link and have it swapped out with the link on the top of the list, if it isn't there already. I'm so far able to move the link that is clicked on to the top, but I can't figure out how to move the top link to the position of the one that was clicked? I've tried using indexOf(this.innerHTML) but its saying its not a function.
EDIT: I've also tried nodeList.item() which also didn't work:(
const navLinks = document.querySelectorAll('.nav-links .link');
const footerLinks = document.querySelectorAll('.links a');
const header = document.querySelector('header');
for (var i = 0; i < navLinks.length; i++) {
navLinks[i].addEventListener('click', changeColor);
}
for (var i = 0; i < footerLinks.length; i++) {
footerLinks[i].addEventListener('click', changePosition);
}
function changeColor() {
header.style.background = 'red';
setTimeout(function() {
header.style.backgroundImage = 'url(img/canada.jpeg)';
}, 2000);
}
function changePosition() {
if(footerLinks[0] !== this) {
footerLinks[0].innerHTML = this.innerHTML;
// this.innerHTML = footerLinks[0].innerHTML;
}
console.log(footerLinks.indexOf(this.innerHTML));
}
html, body {
margin: 0;
padding: 0;
}
body {
font-family: 'Verdana';
box-sizing: border-box;
color: #63889b;
}
/** {
outline: 1px solid red;
}*/
/*------NAV-----*/
nav {
display: flex;
justify-content: space-between;
font-size: 1.8rem;
padding: 25px 0;
position: fixed;
background-color: #fff;
width: 100%;
top: 0;
left: 0;
right: 0;
z-index: 10;
}
.brand, .nav-links {
display: flex;
align-items: center;
}
.brand {
margin-left: 6%;
}
.logo {
max-width: 70px;
max-height: 45px;
margin-right: 25px;
}
.nav-links {
position: relative;
margin-right: 6%;
}
.nav-links .link {
text-transform: uppercase;
margin-right: 20px;
cursor: pointer;
transition: all .2s ease;
}
.nav-links .link:hover {
color: #014263;
}
/*-----HEADER-----*/
header {
margin-top: 92px;
background-image: url(img/canada.jpeg);
/*background-position: center;
background-size: cover;*/
padding-top: 7%;
padding-bottom: 25%;
transition: all .3s ease;
}
.header-info {
color: #fff;
font-size: 1.5rem;
width: 26%;
margin-left: 10%;
}
header p {
margin: 0;
background-color: rgba(0,0,0,0.6);
padding: 10px 25px;
}
header p:first-child {
padding-top: 25px
}
header p:last-child {
padding-bottom: 25px;
}
/*-----MAIN-----*/
main {
display: flex;
}
.col {
flex-basis: 33.33%;
padding: 50px 0;
}
.col p {
width: 65%;
font-size: 1.25rem;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.col img {
display: block;
margin: 0 auto;
}
.col-3 img {
width: 280px;
height: 155px;
}
.col-3 img, .col-3 h3, .col-3 p {
position: relative;
top: -8px;
}
.col-2 img, .col-2 h3, .col-2 p {
position: relative;
top: 30px;
}
.col-1 {
margin-left: 7%;
}
.col-3 {
margin-right: 7%;
}
h3 {
text-align: center;
}
/*------FOOTER-----*/
footer {
font-family: 'Helvetica';
background-color: #63889b;
display: flex;
justify-content: space-between;
color: #fff;
padding-bottom: 30px;
}
.internal-links {
padding-left: 20%;
font-size: 1.5rem;
}
a {
text-decoration: none;
margin:2px 0;
color: #fff;
cursor: pointer;
}
.internal-links h4 {
text-decoration: underline;
text-align: center;
margin-bottom: 8px;
color: #fff;
}
.links {
font-size: 1.3rem;
display: flex;
flex-direction: column;
}
.form-wrap {
display: flex;
align-items: flex-end;
flex-basis: 50%;
}
form {
margin: 0 auto;
display: flex;
flex-direction: column;
width: 80%;
}
input {
border: none;
outline: none;
font-size: 1.6rem;
}
label {
font-size: 1.3rem;
padding: 3px 0;
}
button {
margin-top: 20px;
border: 1px solid #fff;
width: 50%;
font-size: 1.3rem;
background-color: #1090d1;
align-self: flex-end;
color: #fff;
padding: 4px 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chapman Automotive Skills Assessment</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<div class="brand">
<img src="img/Logo.png" alt="logo" class="logo">
<div class="comp-name">CHAPMAN</div>
</div>
<div class="nav-links">
<div class="link">Home</div>
<div class="link">Sales</div>
<div class="link">Blog</div>
<div class="link">Login</div>
</div>
</nav>
<header>
<div class="header-info">
<p>We are a company that does stuff.</p>
<p>Car and web stuff.</p>
</div>
</header>
<main>
<div class="col col-1">
<img src="img/car1.jpg" alt="car1">
<h3>Some Header</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo tempore quia enim quod, perferendis illum quae id, natus dolores temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, rem. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Necessitatibus tenetur mollitia officiis laudantium dolore ipsa.</p>
</div>
<div class="col col-2">
<img src="img/car2.jpg" alt="car2">
<h3>More Stuff</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo tempore quia enim quod, perferendis illum quae id, natus dolores temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, dolor. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Perspiciatis, neque. Corporis quisquam eligendi libero omnis.</p>
</div>
<div class="col col-3">
<img src="img/car3.jpg" alt="car3">
<h3>Last Column</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo tempore quia enim quod, perferendis illum quae id, natus dolores temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, ipsa. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quod quae, nihil error delectus voluptatum deserunt.</p>
</div>
</main>
<footer id="footer">
<div class="internal-links">
<h4>Internal Links</h4>
<div class="links">
Page One
Another Page
Sales Page
Page Three
Keep Going
Last One
Just Kidding
</div>
</div>
<div class="form-wrap">
<form>
<label for="Name">Name</label>
<input type="text" id="Name">
<label for="Name">Address</label>
<input type="text" id="Address">
<label for="Name">City</label>
<input type="text" id="City">
<button type="submit">Submit Form</button>
</form>
</footer>
<script src="script.js"></script>
</body>
</html>

querySelectorAll returns a static NodeList, which isn't an array. To convert it to an array, use spreading [...] It is a collection of HTML elements, so you need to use indexOf(this), not indexOf(this.innerHTML) (because it's not an array of strings).
const navLinks = document.querySelectorAll('.nav-links .link');
const footerLinks = document.querySelectorAll('.links a');
const header = document.querySelector('header');
for (var i = 0; i < navLinks.length; i++) {
navLinks[i].addEventListener('click', changeColor);
}
for (var i = 0; i < footerLinks.length; i++) {
footerLinks[i].addEventListener('click', changePosition);
}
function changeColor() {
header.style.background = 'red';
setTimeout(function() {
header.style.backgroundImage = 'url(img/canada.jpeg)';
}, 2000);
}
function changePosition() {
if (footerLinks[0] !== this) {
footerLinks[0].innerHTML = this.innerHTML;
// this.innerHTML = footerLinks[0].innerHTML;
}
console.log([...footerLinks].indexOf(this));
}
html,
body {
margin: 0;
padding: 0;
}
body {
font-family: 'Verdana';
box-sizing: border-box;
color: #63889b;
}
/** {
outline: 1px solid red;
}*/
/*------NAV-----*/
nav {
display: flex;
justify-content: space-between;
font-size: 1.8rem;
padding: 25px 0;
position: fixed;
background-color: #fff;
width: 100%;
top: 0;
left: 0;
right: 0;
z-index: 10;
}
.brand,
.nav-links {
display: flex;
align-items: center;
}
.brand {
margin-left: 6%;
}
.logo {
max-width: 70px;
max-height: 45px;
margin-right: 25px;
}
.nav-links {
position: relative;
margin-right: 6%;
}
.nav-links .link {
text-transform: uppercase;
margin-right: 20px;
cursor: pointer;
transition: all .2s ease;
}
.nav-links .link:hover {
color: #014263;
}
/*-----HEADER-----*/
header {
margin-top: 92px;
background-image: url(img/canada.jpeg);
/*background-position: center;
background-size: cover;*/
padding-top: 7%;
padding-bottom: 25%;
transition: all .3s ease;
}
.header-info {
color: #fff;
font-size: 1.5rem;
width: 26%;
margin-left: 10%;
}
header p {
margin: 0;
background-color: rgba(0, 0, 0, 0.6);
padding: 10px 25px;
}
header p:first-child {
padding-top: 25px
}
header p:last-child {
padding-bottom: 25px;
}
/*-----MAIN-----*/
main {
display: flex;
}
.col {
flex-basis: 33.33%;
padding: 50px 0;
}
.col p {
width: 65%;
font-size: 1.25rem;
text-align: center;
margin-left: auto;
margin-right: auto;
}
.col img {
display: block;
margin: 0 auto;
}
.col-3 img {
width: 280px;
height: 155px;
}
.col-3 img,
.col-3 h3,
.col-3 p {
position: relative;
top: -8px;
}
.col-2 img,
.col-2 h3,
.col-2 p {
position: relative;
top: 30px;
}
.col-1 {
margin-left: 7%;
}
.col-3 {
margin-right: 7%;
}
h3 {
text-align: center;
}
/*------FOOTER-----*/
footer {
font-family: 'Helvetica';
background-color: #63889b;
display: flex;
justify-content: space-between;
color: #fff;
padding-bottom: 30px;
}
.internal-links {
padding-left: 20%;
font-size: 1.5rem;
}
a {
text-decoration: none;
margin: 2px 0;
color: #fff;
cursor: pointer;
}
.internal-links h4 {
text-decoration: underline;
text-align: center;
margin-bottom: 8px;
color: #fff;
}
.links {
font-size: 1.3rem;
display: flex;
flex-direction: column;
}
.form-wrap {
display: flex;
align-items: flex-end;
flex-basis: 50%;
}
form {
margin: 0 auto;
display: flex;
flex-direction: column;
width: 80%;
}
input {
border: none;
outline: none;
font-size: 1.6rem;
}
label {
font-size: 1.3rem;
padding: 3px 0;
}
button {
margin-top: 20px;
border: 1px solid #fff;
width: 50%;
font-size: 1.3rem;
background-color: #1090d1;
align-self: flex-end;
color: #fff;
padding: 4px 30px;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Chapman Automotive Skills Assessment</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<nav>
<div class="brand">
<img src="img/Logo.png" alt="logo" class="logo">
<div class="comp-name">CHAPMAN</div>
</div>
<div class="nav-links">
<div class="link">Home</div>
<div class="link">Sales</div>
<div class="link">Blog</div>
<div class="link">Login</div>
</div>
</nav>
<header>
<div class="header-info">
<p>We are a company that does stuff.</p>
<p>Car and web stuff.</p>
</div>
</header>
<main>
<div class="col col-1">
<img src="img/car1.jpg" alt="car1">
<h3>Some Header</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo tempore quia enim quod, perferendis illum quae id, natus dolores temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Obcaecati, rem. Lorem ipsum dolor sit amet,
consectetur adipisicing elit. Necessitatibus tenetur mollitia officiis laudantium dolore ipsa.</p>
</div>
<div class="col col-2">
<img src="img/car2.jpg" alt="car2">
<h3>More Stuff</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo tempore quia enim quod, perferendis illum quae id, natus dolores temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Illo, dolor. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Perspiciatis, neque. Corporis quisquam eligendi libero omnis.</p>
</div>
<div class="col col-3">
<img src="img/car3.jpg" alt="car3">
<h3>Last Column</h3>
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Explicabo tempore quia enim quod, perferendis illum quae id, natus dolores temporibus. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Esse, ipsa. Lorem ipsum dolor sit amet, consectetur
adipisicing elit. Quod quae, nihil error delectus voluptatum deserunt.</p>
</div>
</main>
<footer id="footer">
<div class="internal-links">
<h4>Internal Links</h4>
<div class="links">
Page One
Another Page
Sales Page
Page Three
Keep Going
Last One
Just Kidding
</div>
</div>
<div class="form-wrap">
<form>
<label for="Name">Name</label>
<input type="text" id="Name">
<label for="Name">Address</label>
<input type="text" id="Address">
<label for="Name">City</label>
<input type="text" id="City">
<button type="submit">Submit Form</button>
</form>
</footer>
<script src="script.js"></script>
</body>
</html>

We Keep Coding

JavaScript is the programming language of the Web.

How to make an accordion with array in Javascript? - javascript

Related

How to move elements using CSS

How to add icon in the button tag?

Write several times a precise html code in javascript

Adaptive menu isn`t hidden when its necessary

Why Can't I use array.indexOf(this.innerHTML)?

Categories

Resources