JavaScript - Maths with arrays and more calcs

JavaScript - Maths with arrays and more calcs - javascript

I'm trying to do a project which consists on some buttons and when you click them a value is pushed into an array (custo). I need to add all the values of that array and store them in a variable, which I can't do properly… I tried joining with (" * "). after having that value in a variable I would need to multiply it by the value the user would give on the input……… furthermore, the final result would be displayed when the button Calcular is clicked, and when the reset button is clicked, the div with the result (resultado), would be cleaned and the array reset. Here is the code for what I got:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="inner-cont">
<div id="resultado"></div>
<div class="bloco-estilo" id="penteado">
<p>Penteado</p>
</div>
<div class="bloco-estilo" id="pintar">
<p>Pintar</p>
</div>
<div class="bloco-estilo" id="pintar-opt">
<ul class="cores">
<li id="cor_verm">Vermelho</li>
<li id="cor_loiro">Loiro</li>
<li id="cor_cast" cast>Castanho</li>
</ul>
</div>
<div class="bloco-estilo" id="acabamento">
<p>Acabamento</p>
</div>
<div class="lucro">
<div class="lucro-dir">
<p>Introduza o valor percentual de lucro</p>
<input type="text" maxlength="2">
<p>%</p>
</div>
<div class="lucro-esq">
<button id="reset">Reset</button>
<button id="calc">Calcular</button>
</div>
</div>
</div>
</div>
<script src="jquery-3.1.1.min.js"></script>
<script src="function.js"></script>
</body>
</html>
The CSS:
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
ul {
list-style: none;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
ul li {
display: inline;
padding: 0 40px;
box-sizing: border-box;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
.container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.inner-cont {
width: 50%;
height: 80%;
background-color: #f2ce9e;
position: relative;
}
#resultado {
width: 100%;
height: 100px;
background-color: snow;
box-sizing: border-box;
border: 2px dashed #e39835;
}
.bloco-estilo {
width: 100%;
height: 80px;
background-color: rgba(255, 255, 255, 0.5);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-size: 20pt;
color: navy;
font-family: Arial;
margin-bottom: 10px;
box-sizing: border-box;
cursor: pointer;
transition: all 500ms ease;
}
ul li:hover {
background-color: #8b1555;
color: white;
}
.bloco-estilo:hover {
background-color: deeppink;
color: white;
}
.lucro {
width: 100%;
height: 100px;
font-size: 12pt;
color: navy;
font-family: Arial;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
bottom: 0;
left: 0;
}
.lucro-dir {
width: 50%;
height: 100px;
font-size: 16pt;
color: navy;
font-family: Arial;
display: flex;
justify-content: center;
align-items: center;
padding: 40px;
box-sizing: border-box;
}
.lucro-esq {
width: 50%;
height: 100px;
font-size: 12pt;
color: navy;
font-family: Arial;
display: flex;
justify-content: center;
align-items: flex-end;
flex-direction: column;
}
#reset {
width: 50%;
height: 50%;
background-color: red;
border: none;
color: white;
font-size: 15pt;
float: left;
}
#calc {
width: 50%;
height: 50%;
background-color: green;
border: none;
color: white;
font-size: 15pt;
float: left;
}
input {
width: 40px;
height: 30px;
margin: 0 10px;
font-size: 12pt;
text-align: center;
font-weight: bolder;
}
#pintar-opt {
display: none;
}
The JS (i'm also using jquery):
$('#pintar').click(function () {
$('#pintar-opt').slideToggle(0);
});
var p1, p2, p2_1, p2_2, p2_3, a;
p1 = 10; //penteado
p2 = 0; // pintar
p2_1 = 3; //opt cor 1
p2_2 = 5; //opt cor 2
p2_3 = 7; //opt cor 3
a = 6; //acabamento
var custo = [];
$('#penteado').click(function () {
custo.push(p1);
});
$('#pintar').click(function () {
custo.push(p2);
});
$('#cor_verm').click(function () {
custo.push(p2_1);
});
$('#cor_loiro').click(function () {
custo.push(p2_2);
});
$('#cor_cast').click(function () {
custo.push(p2_3);
});
$('#acabamento').click(function () {
custo.push(p2_3);
});
var preco = custo.join(" * ");
Very much appreciated to anyone who tries to help me! also, it would be awesome if you could see what's wrong with the design, as it is not properly responsive…

This snippet performs the calculations. By cycling through the array elements using $.each and adding each one to a variable num (commented within the script) we can perform the addition. I've commented out the element joining line as I'm not sure why this is necessary.
n.b. The same outcome could be achieved without an array by simply incrementing and then multiplying the num variable, so it is assumed you'll be performing other tasks with the array elsewhere.
$('#pintar').click(function() {
$('#pintar-opt').slideToggle(0);
});
var p1 = 10, //penteado
p2 = 0, // pintar
p2_1 = 3, //opt cor 1
p2_2 = 5, //opt cor 2
p2_3 = 7, //opt cor 3
a = 6; //acabamento
var custo = [];
function totals() {
var num = 0, // define num
percen = parseFloat($('#perc').val()) || 0, // get the input number or enter 0 if no user input
percen = percen * 0.01, //convert the percentage
sum = 0; // the total
$.each(custo, function() { // cycle through custo
num += parseFloat(this); // increase num by element value
});
sum = (num * percen).toFixed(2); // calculate and round to two decimal places
return sum; // return aumrray sum times percentage
}
$('#penteado').click(function() {
custo.push(p1);
});
$('#pintar').click(function() {
custo.push(p2);
});
$('#cor_verm').click(function() {
custo.push(p2_1);
});
$('#cor_loiro').click(function() {
custo.push(p2_2);
});
$('#cor_cast').click(function() {
custo.push(p2_3);
});
$('#acabamento').click(function() {
custo.push(p2_3);
});
$('#calc').click(function() {
$('#resultado').text(totals()); // call on the totals() function
});
$('#reset').click(function() {
custo = []; // reset custo and num
$('#resultado').text(0);
});
// var preco = custo.join(" * "); <- not sure why you're joining them here?
* {
margin: 0;
padding: 0;
}
html,
body {
width: 100%;
height: 100%;
}
ul {
list-style: none;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
ul li {
display: inline;
padding: 0 40px;
box-sizing: border-box;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: row;
}
.container {
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
}
.inner-cont {
width: 50%;
height: 80%;
background-color: #f2ce9e;
position: relative;
}
#resultado {
width: 100%;
height: 100px;
background-color: snow;
box-sizing: border-box;
border: 2px dashed #e39835;
}
.bloco-estilo {
width: 100%;
height: 80px;
background-color: rgba(255, 255, 255, 0.5);
display: flex;
justify-content: center;
align-items: center;
flex-direction: column;
font-size: 20pt;
color: navy;
font-family: Arial;
margin-bottom: 10px;
box-sizing: border-box;
cursor: pointer;
transition: all 500ms ease;
}
ul li:hover {
background-color: #8b1555;
color: white;
}
.bloco-estilo:hover {
background-color: deeppink;
color: white;
}
.lucro {
width: 100%;
height: 100px;
font-size: 12pt;
color: navy;
font-family: Arial;
display: flex;
justify-content: center;
align-items: center;
position: absolute;
bottom: 0;
left: 0;
}
.lucro-dir {
width: 50%;
height: 100px;
font-size: 16pt;
color: navy;
font-family: Arial;
display: flex;
justify-content: center;
align-items: center;
padding: 40px;
box-sizing: border-box;
}
.lucro-esq {
width: 50%;
height: 100px;
font-size: 12pt;
color: navy;
font-family: Arial;
display: flex;
justify-content: center;
align-items: flex-end;
flex-direction: column;
}
#reset {
width: 50%;
height: 50%;
background-color: red;
border: none;
color: white;
font-size: 15pt;
float: left;
}
#calc {
width: 50%;
height: 50%;
background-color: green;
border: none;
color: white;
font-size: 15pt;
float: left;
}
input {
width: 40px;
height: 30px;
margin: 0 10px;
font-size: 12pt;
text-align: center;
font-weight: bolder;
}
#pintar-opt {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<div class="inner-cont">
<div id="resultado"></div>
<div class="bloco-estilo" id="penteado">
<p>Penteado</p>
</div>
<div class="bloco-estilo" id="pintar">
<p>Pintar</p>
</div>
<div class="bloco-estilo" id="pintar-opt">
<ul class="cores">
<li id="cor_verm">Vermelho</li>
<li id="cor_loiro">Loiro</li>
<li id="cor_cast" cast>Castanho</li>
</ul>
</div>
<div class="bloco-estilo" id="acabamento">
<p>Acabamento</p>
</div>
<div class="lucro">
<div class="lucro-dir">
<p>Introduza o valor percentual de lucro</p>
<input id="perc" type="text" maxlength="2">
<p>%</p>
</div>
<div class="lucro-esq">
<button id="reset">Reset</button>
<button id="calc">Calcular</button>
</div>
</div>
</div>
</div>
</body>
</html>

Related

JavaScript: checked "true" won't change display to block, as it is stated to do in the function (closed)

I am having trouble getting this to work.
The idea is that when the #menuBtn is clicked (checkbox is true) it should change the display of the #menuOverlay to block instead of none. I've checked it out while using a visible checkbox, and it works just as it should when clicking the label icons (turning true/false), but it won´t change the display from none to block on true no matter what I do. Is there anyone that have any advice to what I am doing wrong?
Html:
<div class="menu_overlay" id="menuOverlay">
<label for="menuBtn">
<i class="fas fa-times"></i>
</label>
<ul>
<li>Work</li>
<li>Illustrations</li>
<li>About</li>
<li>Contact</li>
</ul>
</div>
<div class="container-outer">
<div class="container">
<div class="brandmark">Logo</div>
<input type="checkbox" name="" id="menuBtn">
<div class="landing_page">
<div class="menu">
<label for="menuBtn">
<i class="fas fa-bars"></i>
</label>
</div>
</div>
</div>
</div>
css (scss):
body {
font-family: 'Poppins', sans-serif;
background: white;
width: 100vw;
}
* {
padding: 0;
margin: 0;
box-sizing: border-box;
}
/* MENU */
.container-outer {
width: 100vw;
height: 100vh;
display: flex;
justify-content: center;
position: fixed;
}
.container {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
width: 90%;
height: 6vh;
position: relative;
}
.menu_overlay {
z-index: 100;
height: 100vh;
width: 100vw;
position: absolute;
background: white;
ul {
list-style: none;
display: flex;
flex-direction: column;
text-align: right;
margin: 75px 0 0 0;
padding: 0 2% 0 0;
}
.fas {
text-align: right;
right: 25px;
top: 25px;
position: absolute;
}
}
.landing-page {
max-height: 100vh;
height: 100%;
width: 100%;
position: relative;
}
.menu-text { // This is for the fonts inside the menu pop up
-webkit-text-stroke: 2px black;
color: white;
font-family: 'Poppins', sans-serif;
font-size: 5em;
font-weight: bold;
text-decoration: none;
}
.menu_overlay a:hover { // This is for the fonts inside the menu to fill black on hover
color: black;
}
.fas { // This is for the hamburger menu icon
font-size: 2rem;
color: black;
cursor: pointer;
}
.fas:hover { // This is for hover effect on the hambuger menu icon
transform: scale(1.1);
}
.active { // Active page filled with black in menu overlay
color: black;
}
#menuBtn {
display: none; //
}
#menuBtn:checked ~ .menu_overlay {
display: block;
}
#menuOverlay {
display: none;
}
.brandmark {
color: black;
font-family: 'Poppins', sans-serif;
font-weight: bold;
font-size: 1em;
text-transform: uppercase;
width: 100%;
display: flex;
align-items: center;
z-index: 101;
}
JS
var x = document.getElementById("menuBtn")
var menu = document.getElementsById("menuOverlay")
if (x = true) {
menu.style.display = "block";
console.log('this is if');
} else {
menu.style.display = "none";
console.log('this is else');
}
}

getElementById no getElementsById
var x = document.getElementById("menuBtn")
var menu = document.getElementById("menuOverlay")

Unexpected freezeing with a Boostrap Modal

I'm developing a simple frontend page written in native HTML, CSS using Boostrap framework.
I'm getting some problem related with opening of a modal, after it is opened I'm no longer able to interact with any element of the page.
Here's the interested piece of code:
<!DOCTYPE html>
<head>
<title>3DFlix - Home</title>
<link href="images/Materiale Sito web/IconaSito.png">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3"
crossorigin="anonymous">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
</head>
<body>
<div class="header">
<div class="header-navbar">
<div class="header-navbar-start">
<div class="header-navbar-logo">
<a href="index.html"><img width="228" height="58" class="logo"
src="images/Materiale Sito web/HEADER_Tavola disegno 1.png"></a>
</div>
</div>
<div class="header-navbar-middle">
<ul class="header-menu">
<li>Maker/Stampanti <! Fare pagina Maker/Stampanti> </li>
<li>Blog <! Fare pagina Blog> </li>
<li>Chi Siamo <! Fare pagina Chi Siamo> </li>
</ul>
</div>
<div class="header-navbar-end">
<div>
<button style="padding-right: 20px; background-color: transparent;
border-color: transparent; color: black; font-size: 20px;"
id="loginButton" class="btn btn-primary dropdown-toggle"
data-bs-toggle="dropdown" aria-expanded="false"> Accedi
</button>
<div class="dropdown-menu">
<input type="text" name="username" placeholder="Username" required><br><br>
<input type="password" name="password" placeholder="Password" required><br><br>
<input type="submit" value="Login">
</div>
<button style="background-color: transparent;
border-color: transparent; color: black; font-size: 20px;"
id="siginButton" class="btn btn-primary"
data-bs-toggle="modal" data-bs-target="#siginModal"
aria-expanded="false"> Registrati
</button>
<!-- Modal -->
<div class="modal fade" id="siginModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Registrati</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<label for="fname">First name:</label>
<input type="text" id="fname" name="fname"><br><br>
<label for="lname">Last name:</label>
<input type="text" id="lname" name="lname"><br><br>
<input type="submit" value="Submit">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Chiudi</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
....
....
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.10.2/dist/umd/popper.min.js"
integrity="sha384-7+zCNj/IqJ95wo16oMtfsKbZ9ccEh31eOz1HGyDuCQ6wgnyJNSYdrPa03rtR1zdB"
crossorigin="anonymous">
</script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.min.js"
integrity="sha384-QJHtvGhmr9XOIpI6YVutG+2QOK9T+ZnN4kzFN1RtK3zEFEIsxhlmWl5/YESvpZ13"
crossorigin="anonymous">
</script>
<script src="script.js"></script>
</body>
</html>
When "Registrati" button is pressed I'm not able to do anything more, such as filling forms, closing modal or clicking on buttons, I can just reload the page.
UPDATE:
This is the style.css file:
body {font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif}
a {text-decoration: none; color: black;}
a:hover {color: black;}
.header {
position: relative;
box-sizing: inherit;
z-index: 10;
padding: 1rem 1rem;
}
.header-navbar {
position: relative;
display: flex;
justify-content: space-between;
}
.header-navbar-start {
padding-right: 1rem;
margin-right: 0;
flex: 1;
position: relative;
z-index: 2;
display: flex;
align-items: center;
}
.header-navbar-logo {
box-sizing: inherit;
display: block;
}
.logo{
display: block;
max-width: 100%;
height: auto;
}
.header-navbar-middle {
position: relative;
z-index: 2;
display: flex;
align-items: center;
}
.header-menu {
justify-content: center;
display: flex;
flex-wrap: wrap;
margin: 0;
padding: 0;
list-style: none;
margin-block-start: 1rem;
margin-block-end: 1rem;
padding-inline-start: 40px;
gap: 70px;
font-size: 20px;
}
.header-navbar-end {
padding-left: 1 rem;
flex: 1;
position: relative;
z-index: 2;
justify-content: flex-end;
display: flex;
align-items: center;
font-size: 20px;
}
.background {
position: absolute;
right: 0; left: 0; top: 0;
overflow: hidden;
width: 100%; height: 800px;
background-size: cover;
background-repeat: no-repeat;
display: flex;
}
.wrapper {
justify-content: flex-start;
box-sizing: border-box;
display: flex;
width: 100%;
max-width: 1200px;
padding-left: 6vw;
padding-right: 6vw;
position: relative;
}
.wrapper-content {padding-top: 400px;}
.title {
font-size: 40px;
font-weight: normal;
pointer-events: none;
}
.subtitle {
font-size: 25px;
font-weight: normal;
pointer-events: none;
padding-bottom: 10px;
}
.wrapper-button {
padding: 10px 15px 10px 15px;
white-space: nowrap;
text-align: center;
display: inline-block;
cursor: pointer;
border: none;
position: relative;
align-items: flex-start;
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
font-size: 18px;
background-color: #eef138b6;
border-radius: 20px;
justify-content: flex-start;
margin-left: 20px;
box-sizing: content-box;
}
.home-page {
background-color: #f4f4f4;
display: block;
margin-top: 9.8rem;
}
.section-one {
background-color: white;
width: 85%; height: 390px;
margin: auto; display: block; position: relative;
align-content: center;
padding: 4rem;
}
.section-columns {
margin-bottom: 2rem;
flex-wrap: nowrap;
display: flex;
box-sizing: border-box;
justify-content: center;
}
.section-one-content {
flex-basis: 0;
flex-grow: 1;
}
.section-two-content {
flex-basis: 0;
flex-grow: 1;
}
.section-three-content {
flex-basis: 0;
flex-grow: 1;
}
.section-one-img {
margin: 0 0 1rem;
margin-bottom: 2rem;
box-sizing: inherit;
display: block;
}
.section-two-img {
margin: 0 0 1rem;
margin-bottom: 2rem;
box-sizing: inherit;
display: block;
}
.section-three-img {
margin: 0 0 1rem;
margin-bottom: 2rem;
box-sizing: inherit;
display: block;
}
.one-img {
margin-left: auto;
margin-right: auto;
display: table;
align-content: center;
}
.two-img {
margin-left: auto;
margin-right: auto;
display: table;
align-content: center;
}
.three-img {
margin-left: auto;
margin-right: auto;
display: table;
align-content: center;
}
.section-h {
margin-bottom: 1rem;
font-weight: 400;
font-style: normal;
text-align: center;
}
.stamp-list {
padding-top: 2rem;
margin: auto;
display: block;
position: relative;
width: 85%;
align-content: center;
box-sizing: border-box;
}
.stamp-list-row {
box-sizing: border-box;
display: flex;
flex: 0 1 auto;
-webkit-box-direction: normal;
flex-direction: row;
flex-wrap: wrap;
-webkit-box-orient: horizontal;
justify-content: space-between;
}
.list-row-element {
margin-bottom: 2rem;
}
.element-block {
border-radius: 5px;
box-shadow: 0 5px 30px rgb(7 6 36 86 / 8%);
background-color: white;
transition: transform 0.25s;
}
.element-header {
margin-bottom: 0;
position: relative;
}
.element-img {
border-top-left-radius: 5px;
border-top-right-radius: 5px;
display: block;
width: 100%;
height: auto;
}
.element-content {
margin-bottom: 0;
padding: 1.5rem;
position: relative;
z-index: 1;
}
.content-topbar {
border-radius: 5px;
box-shadow: 0 5px 30px rgb(7 6 36 86 / 8%);
background-color: white;
position: relative;
display: flex;
align-items: center;
justify-content: space-between;
margin: -3.25rem 0 1.25rem;
padding: 0.625rem 1rem;
}
.vendor-info {
display: flex;
align-items: center;
}
.vendor-info-img {
flex: 0 0 2.1875rem;
margin-right: 0.75rem;
}
.vendor-img {
display: block;
width: 100%;
height: auto;
border-radius: 50%;
}
.vendor-name {
font-size: 0.875rem;
white-space: nowrap;
margin: 0;
word-wrap: break-word;
}
.content-middle {
margin: 0;
word-wrap: break-word;
}
.content-footer {
padding: 1rem 1.5rem;
border-top: 1px solid rgba(7, 36, 86, 0.075rem);
display: flex;
justify-content: space-between;
align-items: center;
}
.footer-attributes-primary {
margin-right: 1rem;
min-width: 0;
display: flex;
align-items: center;
}
.attribute-provincia {
font-size: 1.25rem;
min-width: 0;
word-wrap: break-word;
}
.footer-attributes-secondary {
display: flex;
align-items: center;
}
.attribute-message {
display: none;
width: 380px;
}
.section-newsletter {
background-color: rgb(204, 204, 204);
width: 85%; height: 320px;
display: block;
position: relative;
align-content: center;
margin: auto;
margin-top: 2rem;
}
.newsletter-container {
padding-top: 3rem;
padding-bottom: 3rem;
box-sizing: inherit;
padding-left: 3rem;
padding-right: 3rem;
}
.newsletter-columns {
margin-bottom: 0;
flex-wrap: nowrap;
display: flex;
box-sizing: border-box;
}
.newsletter-column1 {
flex-basis: 0;
flex-grow: 1;
}
.newsletter-column2 {
flex-basis: 0;
flex-grow: 1;
}
.column-h {
margin-bottom: 1rem;
margin-top: 0;
text-align: center;
font-size: 30px;
}
.column-p {
padding-top: 1rem;
text-align: center;
font-weight: 400;
}
.newsletter-form {
padding: 0.3rem 0.5rem;
border-radius: 5px;
border: thin;
}
.checkmark-form {
margin-right: 0.7rem;
width: 15px; height: 15px;
}
.button-form {
background-color: orange;
border-radius: 20px;
padding: 0.3rem 0.5rem;
width: 7rem;
border-style: groove;
}
.footer {
flex-wrap: nowrap;
padding: 1.5rem 0;
box-sizing: inherit;
display: flex;
position: relative;
padding-right: 2rem;
padding-left: 2rem;
width: 100%;
}
.footer-navbar {
display: flex;
justify-content: space-between;
align-items: center;
gap: 70px;
width: 100%;
}
.footer-navbar-logo {
box-sizing: inherit;
display: block;
}
.footer-menu {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 50px;
}
.social-icons {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 30px;
}

Aight now we know that it's a css problem.
First you should try to make your css file clearer... It's not easy to read a 500 lines css file so try to organize it by creating many css files that matches with a html component.
Exemple: a css file named header.css for your header, a css file named modal.css to custumize your modal, a css file named hero.css to custumize your hero section etc.
Second you should try to understand what is bootstrap doing by inspecting elements. You'll see that Bootstrap creates a div element with "modal-backdrop" class to create a "background" to your modal. The problem is you made something that changed the z-index and hide your modal.
So you can try to organize your css code and try to find the specific css line or just add this line to your css that will specify a correct z-index.
.modal-backdrop {
z-index: 1;
}

your code is working well here. I think you should show us these files content: "script.js" and "style.css"

position dynamically created dots from left upper corner to right lower corner

I want to add some red and green dots using javascript functions to the dots container like this:
const dots = document.querySelector('.dots');
function addGreenDot() {
dots.innerHTML += `<span class="greenDot">.</span>`;
}
function addRedDot() {
dots.innerHTML += `<span class="redDot">.</span>`;
}
for(let i = 0; i < 10; i++) {
addGreenDot();
}
for(let i = 0; i < 10; i++) {
addRedDot();
}
html, body {
height: 100%;
}
body {
background: #fafafc;
margin: 0;
}
.flex-container {
height: 100%;
padding: 0;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
}
.dots {
height: 30%;
width: 80%;
font-weight: bold;
display: flex;
position: absolute;
font-size: 100px;
top: 60%;
outline: 0.1vw dashed orange;
text-align: center;
}
.redDot {
color: red;
}
.greenDot {
color: green;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div class="flex-container">
<div class="dots"></div>
</div>
</body>
</html>
I want to position dots from upper left corner of the container to the right and lower corner like this:
But I can't find a solution for this.. please help..

const dots = document.querySelector('.dots');
function addGreenDot() {
dots.innerHTML += `<span class="greenDot"></span>`;
}
function addRedDot() {
dots.innerHTML += `<span class="redDot"></span>`;
}
for(let i = 0; i < 20; i++) {
addGreenDot();
}
for(let i = 0; i < 10; i++) {
addRedDot();
}
* {
box-sizing: border-box;
}
html, body {
height: 100%;
}
body {
background: #fafafc;
margin: 0;
}
.flex-container {
height: 100%;
padding: 0;
margin: 0;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
align-items: center;
justify-content: center;
}
.dots {
width: 80%;
padding: 20px;
margin-right: -10px;
margin-bottom: -10px;
font-weight: bold;
display: flex;
flex-wrap: wrap;
text-align: center;
outline: 0.1vw dashed orange;
}
.redDot {
width: 10px;
height: 10px;
background-color: red;
border-radius: 50%;
margin-right: 10px;
margin-bottom: 10px;
}
.greenDot {
width: 10px;
height: 10px;
background-color: green;
border-radius: 50%;
margin-right: 10px;
margin-bottom: 10px;
}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
</head>
<body>
<div class="flex-container">
<div class="dots"></div>
</div>
</body>
</html>

You could use display:inline-block instead of flex to display the dots next to each other. As soon as a dot doesn't fit, it will jump to the next line. You don't need the outer container either.
HTML
<div class="dots"></div>
CSS
.dots {
display:block;
height: 30%;
width: 50vw;
font-weight: bold;
font-size: 100px;
outline: 0.1vw dashed orange;
text-align: left;
}
.redDot {
color: red;
display: inline-block;
}
.greenDot {
color: green;
display: inline-block;
}

How can I avoid to add same data as an existing in the certain container

I want to add particular course only once in the following container and I tried to use this condition course.value !== added.textContent to avoid duplicates but it does nothing as I still see the duplicated courses.
For example, if you add html and add it again the condition acts like it is not available and I want to solve this.
the following are my code:
course.focus();
add.onclick = () => {
let added = document.createElement('div');
added.className = 'added';
if ((course.value).trim()) {
/*statement to avoid duplicate*/
if (course.value !== added.textContent) {
added.textContent = (course.value).replace(' ', '-');
added.title = course.value + ' course';
paste.appendChild(added);
course.value = '';
}
}
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #ff5;
}
.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
width: 50%;
height: 50%;
}
#paste {
width: 100%;
height: 100%;
border: 1px solid darkred;
display: flex;
flex-flow: row wrap;
flex-basis: 1;
}
#copy {
text-align: center;
}
input {
width: 95%;
font-weight: 900;
height: 30px;
outline: none;
border: none;
background: none;
border-bottom: 2px solid green;
border-radius: 5px;
font-size: 18px;
text-align: center;
}
button {
width: 140px;
height: 25px;
border-radius: 10px;
outline: none;
border: none;
font-size: 16px;
margin-top: 15px;
background: green;
color: #fff;
font-weight: 900;
}
.added {
position: relative;
margin: 3px;
width: auto;
padding: 5px;
background: grey;
border-radius: 5px;
text-align: center;
align-self: baseline;
}
<div class="container">
<div id="copy">
<input type="text" name="course" id="course" placeholder="Enter course">
<button id="add">add</button>
</div>
<div id="paste"></div>
</div>

Store all the added courses in a Set and check if the entered course already exists before appending it to the container.
course.focus();
const courses = new Set;
add.onclick = () => {
let added = document.createElement('div');
added.className = 'added';
const val = course.value.trim();
if (val && !courses.has(val)){
courses.add(val);
added.textContent = (course.value).replace(' ', '-');
added.title = course.value + ' course';
paste.appendChild(added);
course.value = '';
}
}
* {
box-sizing: border-box;
padding: 0;
margin: 0;
}
body {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
background: #ff5;
}
.container {
display: grid;
grid-template-columns: repeat(2, 1fr);
width: 50%;
height: 50%;
}
#paste {
width: 100%;
height: 100%;
border: 1px solid darkred;
display: flex;
flex-flow: row wrap;
flex-basis: 1;
}
#copy {
text-align: center;
}
input {
width: 95%;
font-weight: 900;
height: 30px;
outline: none;
border: none;
background: none;
border-bottom: 2px solid green;
border-radius: 5px;
font-size: 18px;
text-align: center;
}
button {
width: 140px;
height: 25px;
border-radius: 10px;
outline: none;
border: none;
font-size: 16px;
margin-top: 15px;
background: green;
color: #fff;
font-weight: 900;
}
.added {
position: relative;
margin: 3px;
width: auto;
padding: 5px;
background: grey;
border-radius: 5px;
text-align: center;
align-self: baseline;
}
<div class="container">
<div id="copy">
<input type="text" name="course" id="course" placeholder="Enter course">
<button id="add">add</button>
</div>
<div id="paste"></div>
</div>

Why can't I call a class for an onclick event?

So it looks like my javascript onclick events are only functioning with ID's but when i call the class "listButton" only the first list item (All Rewards) closes the dropdown div.
When i click on any other list item (Food Rewards, Beverage Rewards, Holiday Rewards, Classes Rewards, TBA) it does not close my dropdown div.
I'm unsure why this is so. Is there another method to complete this? I must use vanilla JS.
var overlay2 = document.getElementById("overlay2");
var dropdown = document.getElementById("rewardsDropdown");
var listButton = document.querySelectorAll(".listButton");
document.getElementById("dropdownButton").onclick = function() {
dropdown.classList.add("open");
overlay2.classList.add("open");
};
function removeOpenRewards() {
dropdown.classList.remove("open");
overlay2.classList.remove("open");
};
for (i = 0; i < listButton.length; i++) {
listButton[i].addEventListener("click", removeOpenRewards);
}
overlay2.addEventListener("click", removeOpenRewards);
document.getElementById("close").addEventListener("click", removeOpenRewards);
#container #activeRewards #mobileDropdown #overlay2 {
position: fixed;
top: 0;
left: 0;
background-color: rgba(0, 0, 0, 0.6);
width: 100%;
height: 100%;
z-index: 999;
display: none;
}
#container #activeRewards #mobileDropdown #overlay2.open {
display: block;
}
#container #activeRewards #mobileDropdown #dropdownButtonCont {
width: 100%;
height: 59px;
margin: 15px 0 20px 0;
}
#container #activeRewards #mobileDropdown #dropdownButtonCont button {
width: 100%;
height: 100%;
background-color: #FAFAFA;
border: 0;
outline: 0;
border-radius: 10px;
color: #696969;
font-size: 18px;
font-family: 'Lato', sans-serif;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0 20px;
}
#container #activeRewards #mobileDropdown #dropdownButtonCont button:focus {
background-color: #F0F0F0;
}
#container #activeRewards #mobileDropdown #dropdownButtonCont button:after {
border-style: solid;
border-width: 2px 2px 0 0;
content: '';
display: inline-block;
width: 5px;
height: 5px;
-webkit-transform: rotate(45deg);
transform: rotate(45deg);
color: #C7C7C7;
position: absolute;
right: 40px;
}
#container #activeRewards #mobileDropdown #dropdownButtonCont button span {
color: #EDAFBD;
font-size: 12px;
margin-left: 15px;
}
#container #activeRewards #mobileDropdown #rewardsDropdown {
width: 100%;
display: none;
}
#container #activeRewards #mobileDropdown #rewardsDropdown.open {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
position: fixed;
z-index: 1000;
background-color: #FFFFFF;
left: 0;
bottom: 0;
padding-bottom: 30px;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #close {
color: #D63A5E;
background-color: #FFFFFF;
border-radius: 20px;
-webkit-box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.16);
box-shadow: 1px 1px 5px rgba(0, 0, 0, 0.16);
font-size: 20px;
position: absolute;
left: 20px;
top: -45px;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
-webkit-box-pack: center;
-ms-flex-pack: center;
justify-content: center;
height: 15px;
width: 15px;
padding: 5px 5px 7px 6px;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #close:hover {
background-color: #D63A5E;
color: #FFFFFF;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #close:focus {
color: #FFFFFF;
text-decoration: none;
cursor: pointer;
background-color: #AF2B49;
}
#container #activeRewards #mobileDropdown #rewardsDropdown h4 {
color: #505050;
text-align: center;
font-size: 18px;
font-weight: bolder;
margin: 30px 0;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #dropdownList {
height: 360px;
overflow: scroll;
width: 95%;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-pack: end;
-ms-flex-pack: end;
justify-content: flex-end;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #dropdownList::-webkit-scrollbar {
background-color: transparent;
width: 5px;
margin-left: 5px;
padding-left: 5px;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #dropdownList::-webkit-scrollbar-thumb {
background-color: #E0E0E0;
border-radius: 5px;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #dropdownList>div {
width: 95%;
height: 59px;
margin-top: 5px;
padding-right: 5px;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #dropdownList>div button {
width: 100%;
height: 100%;
background-color: #FAFAFA;
border: 0;
outline: 0;
border-radius: 10px;
color: #696969;
font-size: 18px;
font-family: 'Lato', sans-serif;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
align-items: center;
padding: 0 20px;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #dropdownList>div button:focus {
background-color: #D63A5E;
color: #FFFFFF;
}
#container #activeRewards #mobileDropdown #rewardsDropdown #dropdownList>div button span {
color: #EDAFBD;
font-size: 12px;
margin-left: 15px;
}
<div id="container">
<div id="activeRewards">
<div id="mobileDropdown">
<div id="dropdownButtonCont">
<button id="dropdownButton">All Rewards
<span>(5)</span>
</button>
</div>
<div id="overlay2"></div>
<div id="rewardsDropdown">
<span id="close">×</span>
<h4>Reward Categories</h4>
<div id="dropdownList">
<div>
<button class="listButton">All Rewards
<span>(5)</span>
</button>
</div>
<div>
<button class="listButton">Food Rewards
<span>(5)</span>
</button>
</div>
<div>
<button class="listButton">Beverage Rewards
<span>(5)</span>
</button>
</div>
<div>
<button class="listButton">Holiday Rewards
<span>(5)</span>
</button>
</div>
<div>
<button class="listButton">Classes Rewards
<span>(5)</span>
</button>
</div>
<div>
<button class="listButton">TBA
<span>(5)</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>

The Document method querySelector() returns the first Element within
the document that matches the specified selector, or group of
selectors. If no matches are found, null is returned.
So replace:
document.querySelector(".listButton").addEventListener("click", removeOpenRewards);
with:
var listButtons= document.querySelectorAll(".listbutton");
listButtons.forEach(function(listButton) {
listButton.addEventListener("click", removeOpenRewards);
});

Develop Reference

JavaScript is the programming language of the Web.

JavaScript - Maths with arrays and more calcs - javascript

Related

JavaScript: checked "true" won't change display to block, as it is stated to do in the function (closed)

Unexpected freezeing with a Boostrap Modal

position dynamically created dots from left upper corner to right lower corner

How can I avoid to add same data as an existing in the certain container

Why can't I call a class for an onclick event?

Categories

Resources