We Keep Coding

Manipulate the card class with css and Html

I'm beginner in frontend programming and I have the following code which describes the following picture:
<div class="row">
<div class="col-12">
<h1>Dashboard</h1>
<div class="separator mb-5"></div>
</div>
<div class="col-lg-12 col-xl-6">
<div class="icon-cards-row">
<div class="glide dashboard-numbers">
</div>
</div>
<div class="row">
<div class="col-xl-40 col-lg-40 mb-4">
<div class="card h-200">
<div class="card-body">
<h5 class="card-title">Calendrier</h5>
<div class="calendar"></div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xl-2 col-lg-10 mb-4">
<div class="card">
<div class="position-absolute card-top-buttons">
<button class="btn btn-header-light icon-button">
<i class="simple-icon-refresh"></i>
</button>
</div>
<div class="card-body">
<h5 class="card-title">Contrats à renouveller</h5>
<div class="scroll dashboard-list-with-thumbs">
#foreach($contrats_expires as $contrat_expires)
<div class="d-flex flex-row mb-3">
<a class="d-block position-relative" href="#">
<img src="{{ '/castingimages/' . $contrat_expires->photo. ''}}" alt="Marble Cake"
class="list-thumbnail border-0" />
<span
class="badge badge-pill badge-theme-2 position-absolute badge-top-right">NEW</span>
</a>
<div class="pl-3 pt-2 pr-2 pb-2">
<a href="#">
<p class="list-item-heading">{{$contrat_expires->nom}} {{$contrat_expires->prenom}}</p>
<div class="pr-4 d-none d-sm-block">
<p class="text-muted mb-1 text-small">{{$contrat_expires->numero_projet}} {{$contrat_expires->numero_contrat}} </p>
</div>
<div class="text-primary text-small font-weight-medium d-none d-sm-block">
{{$contrat_expires->date_fin_contrat}}</div>
</a>
</div>
</div>
#endforeach
</div>
</div>
</div>
</div>
</div>
you will find attached a screenshot of my page.
My page
I wanted to enlarge the calendar card and shift the second card to the right.
I'm stuck, please help.

Image selected in html/js

I'm trying to make a rating system, ten images of numbers, (1, 2, 3... and so on), and I'd like to know how could I put to those images a value, (1, 2, 3... respectively), inside of a form, so when user click on submit, I can get in PHP the value from the pic selected.
Basically I don't know how to make it know which image is being selected in.
<div class="col-md-6 col-sm-4 col-md-3 order-md-1 offset-md-3">
<h4 class="mb-3">Rate system</h4>
<form class="needs-validation" method="POST" action="test.php">
<div class="row">
<div class="col-md-12 mb-3">
<label for="firstName">Name</label>
<input type="text" class="form-control" placeholder="Gustavo" name="name" required>
<div class="invalid-feedback">
Is a name is necessary.
</div>
</div>
<div class="col-md-12 mb-3">
<img class="d-block mx-auto mb-1" src="1.png">
<img class="d-block mx-auto mb-1" src="2.png">
<img class="d-block mx-auto mb-1" src="3.png">
<img class="d-block mx-auto mb-1" src="4.png">
<img class="d-block mx-auto mb-1" src="5.png">
</div>
<hr class="mb-4">
<button class="btn btn-primary btn-lg btn-block" type="submit">¡Go!</button>
</form>
</div>
</div>

You need to set value for star after clicking on star symbol & change as well as data-star attribute value for selected stars. After selected stars will highlighted as play with some CSS code with help of :nth-child(number) function.
$(document).on('click', '.list-star li', function(){
$(this).parent().attr('data-star', Number($(this).index())+1);
$('#setRating').val(Number($(this).index())+1);
});
.list-star li{
color: #999;
margin-right: 0px!important;
cursor: pointer;
padding: 0px 3px;
font-size: 20px;
line-height: 1.1;
}
[data-star="1"] li:nth-child(1),
[data-star="2"] li:nth-child(1), [data-star="2"] li:nth-child(2),
[data-star="3"] li:nth-child(1), [data-star="3"] li:nth-child(2), [data-star="3"] li:nth-child(3),
[data-star="4"] li:nth-child(1), [data-star="4"] li:nth-child(2), [data-star="4"] li:nth-child(3), [data-star="4"] li:nth-child(4),
[data-star="5"] li {
color: tomato;
}
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="container py-3">
<div class="row justify-content-center">
<div class="col-md-5 col-sm-10">
<h4 class="mb-3">Rate system</h4>
<form class="needs-validation" method="POST" action="test.php">
<div class="row">
<div class="col-md-12 mb-3">
<label for="firstName">Name</label>
<input type="text" class="form-control" placeholder="Gustavo" name="name" required>
<div class="invalid-feedback">Is a name is necessary.</div>
</div>
<div class="col-md-12 mb-3">
<ul class="list-inline list-star" data-star="0">
<li class="list-inline-item">★</li>
<li class="list-inline-item">★</li>
<li class="list-inline-item">★</li>
<li class="list-inline-item">★</li>
<li class="list-inline-item">★</li>
</ul>
<input type="number" name="rating" placeholder="Rating Value" id="setRating" readonly>
</div>
</div>
<hr class="mb-4">
<button class="btn btn-primary btn-lg btn-block" type="submit">Go!</button>
</form>
</div>
</div>
</div>

Use <input> tag and set its value either by js or php. Give each img an id and add onclick listener that changes the input value, which will collect the form at the end ;)

Incrementing input value - What am I doing wrong here?

I'm attempting to increment the value of the input with the + / - buttons but can't figure out where my issue is that it is currently not doing anything. Any help is appreciated. I know that jquery now offers spinner functionality in their UI file but in this case it's not a possibility and it's out of my hands.
HTML:
<article class="card card-product-list">
<div class="row no-gutters">
<aside class="col-md-2">
<a href="#" class="img-wrap">
<span class="badge badge-danger"> SOMETHING </span>
<img src="https://image.jpg">
</a>
</aside> <!-- col.// -->
<div class="col-md-7">
<div class="info-main">
<div class="row">
<div class="col-sm-12">
TEST
<div class="rating-wrap mb-3">
TEST
</div> <!-- rating-wrap.// -->
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-6">
<ul class="productListItm">
<li>
<strong>AWP:</strong> $84.32
</li>
<li>
<strong>WAC:</strong> $13.04
</li>
<li>
<strong>Manufacturer:</strong> TEST
</li>
<li>
<strong>Brand:</strong> TEST
</li>
</ul>
</div>
<div class="col-sm-12 col-md-6">
<ul class="productListItm">
<li>
<strong>Lot:</strong> 369125
</li>
<li>
<strong>Expires:</strong> 04/30/21
</li>
</ul>
</div>
</div>
</div> <!-- info-main.// -->
</div> <!-- col.// -->
<aside class="col-sm-3">
<div class="info-aside">
<i class="far fa-heart"></i>
<div class="price-wrap">
<span class="price h5"> $4.50 EA/1 </span>
<p>In Stock</p>
</div> <!-- info-price-detail // -->
<br>
<div class="form-group col-md flex-grow-0">
<div class="input-group mb-3 input-spinner">
<div class="input-group-prepend">
<button class="btn btn-light" type="button" id="button-plus"> + </button>
</div>
<input type="text" class="form-control qty" value="1" id="HotQty[A.PROD.NO]" min="0" max="100" step="1">
<div class="input-group-append">
<button class="btn btn-light" type="button" id="button-minus"> − </button>
</div>
</div>
<span class="text">Add to cart</span> <i class="fas fa-shopping-cart"></i>
</div>
</div> <!-- info-aside.// -->
</aside> <!-- col.// -->
</div> <!-- row.// -->
</article>
JQUERY:
$(document).ready(function() {
var incrementPlus;
var incrementMinus;
var buttonPlus = $("button#button-plus");
var buttonMinus = $("button#button-minus");
var incrementPlus = buttonPlus.click(function() {
var $n = $(this).parent("div.info-aside").find("input.qty");
$n.val(Number( $n.val() ) + 1 );
});
var incrementMinus = buttonMinus.click(function() {
var $n = $(this).parent("div.info-aside").find("input.qty");
var amount = Number($n.val());
if (amount > 0) {
$n.val(amount - 1);
}
});
});

parent() method traverses to the immediate parent of the elements.
Instead of parent() you should use parents() or closest():
$(document).ready(function() {
var incrementPlus;
var incrementMinus;
var buttonPlus = $("button#button-plus");
var buttonMinus = $("button#button-minus");
buttonPlus.click(function() {
var $n = $(this).parents("div.info-aside").find("input.qty");
$n.val(Number( $n.val() ) + 1 );
});
buttonMinus.click(function() {
var $n = $(this).parents("div.info-aside").find("input.qty");
var amount = Number($n.val());
if (amount > 0) {
$n.val(amount - 1);
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<article class="card card-product-list">
<div class="row no-gutters">
<aside class="col-md-2">
<a href="#" class="img-wrap">
<span class="badge badge-danger"> SOMETHING </span>
<img src="https://image.jpg">
</a>
</aside> <!-- col.// -->
<div class="col-md-7">
<div class="info-main">
<div class="row">
<div class="col-sm-12">
TEST
<div class="rating-wrap mb-3">
TEST
</div> <!-- rating-wrap.// -->
</div>
</div>
<div class="row">
<div class="col-sm-12 col-md-6">
<ul class="productListItm">
<li>
<strong>AWP:</strong> $84.32
</li>
<li>
<strong>WAC:</strong> $13.04
</li>
<li>
<strong>Manufacturer:</strong> TEST
</li>
<li>
<strong>Brand:</strong> TEST
</li>
</ul>
</div>
<div class="col-sm-12 col-md-6">
<ul class="productListItm">
<li>
<strong>Lot:</strong> 369125
</li>
<li>
<strong>Expires:</strong> 04/30/21
</li>
</ul>
</div>
</div>
</div> <!-- info-main.// -->
</div> <!-- col.// -->
<aside class="col-sm-3">
<div class="info-aside">
<i class="far fa-heart"></i>
<div class="price-wrap">
<span class="price h5"> $4.50 EA/1 </span>
<p>In Stock</p>
</div> <!-- info-price-detail // -->
<br>
<div class="form-group col-md flex-grow-0">
<div class="input-group mb-3 input-spinner">
<div class="input-group-prepend">
<button class="btn btn-light" type="button" id="button-plus"> + </button>
</div>
<input type="text" class="form-control qty" value="1" id="HotQty[A.PROD.NO]" min="0" max="100" step="1">
<div class="input-group-append">
<button class="btn btn-light" type="button" id="button-minus"> − </button>
</div>
</div>
<span class="text">Add to cart</span> <i class="fas fa-shopping-cart"></i>
</div>
</div> <!-- info-aside.// -->
</aside> <!-- col.// -->
</div> <!-- row.// -->
</article>

How to keep a sticky div below a fixed header

I am using Bootstrap 4 in my project and I seem to be having a problem keeping a div with the class "sticky-top" just under a fixed navbar. I've tried using javascript to replace the css on scroll, but that doesnt seem to work. I know there is a way to set an id to the navbar and tell it not to scroll past that point, but I cant seem to Google well enough to find the solution. Any help is greatly appreciated.
Below is the code I am using.
<header class="header_area">
<nav class="navbar navbar-expand-lg menu_one menu_four">
<div class="container">
<a class="navbar-brand sticky_logo" href="#"><img src="images/upayify-logo-white.png" srcset="images/logo2x-2.png 2x" alt="logo"><img src="images/upayify-logo.png" srcset="images/logo2x.png 2x" alt=""></a>
<button class="navbar-toggler collapsed" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="menu_toggle">
<span class="hamburger">
<span></span>
<span></span>
<span></span>
</span>
<span class="hamburger-cross">
<span></span>
<span></span>
</span>
</span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav menu w_menu ml-auto">
<li class="nav-item active">
<a class="nav-link" href="index.php">
<i class="fa fa-home"></i>
</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#">
How It Works
</a>
</li>
</ul>
</div>
<a class="btn btn-outline-light ml-3 hidden-sm hidden-xs" href="#"><i class="fa fa-lock"></i> Login</a>
<a class="btn btn-outline-light ml-3 hidden-sm hidden-xs" href="#"><i class="fa fa-user-plus"></i> Sign Up</a>
</div>
</nav>
<div class="row row-eq-height featured_item">
<div class="col-md-5 send-card order-md-last">
<div id="get-started" class="card sticky-top">
<div class="card-body">
<form>
<div class="row">
<div class="col-12 form-group">
<label for="exampleInputEmail1">I'm sending money from...</label>
<div class="input-group mb-2">
<div class="input-group-prepend">
<div class="input-group-text"><span class="flag-icon flag-icon-us"></span></div>
</div>
<select class="form-control">
</select>
</div>
</div>
<div class="col-12 form-group mt-2 mb-0">
<label>I'm sending to...</label>
<div class="input-group mb-2">
<div class="input-group-prepend">
<div class="input-group-text"><span class="flag-icon flag-icon-in"></span></div>
</div>
<select class="form-control">
</select>
</div>
</div>
<div class="col-12">
<hr>
</div>
<div class="col-12 mb-3 text-center conversion">
<span class="flag-icon flag-icon-us mr-2"></span>1 <span class="mr-2 ml-2">=</span> <span class="flag-icon flag-icon-in mr-2"></span>69.64
</div>
<div class="col-12 mt-2 index-form-btn">
<i class="fa fa-rocket"></i> Get Started Now!
</div>
<div class="col-12 text-center">
<p class="small">View Terms & Conditions for more details and fees</p>
</div>
</div>
</form>
</div>
</div>
</div>
<div class="col-md-7 d-flex order-md-first">
<div class="row">
</div>
</div>
</div>
.send-card{
top: -225px;
z-index: 4;
margin-bottom: -200px;}

The div you want under the navbar can get styled with top: ##px; (where ## is the pixel height of the navbar you want it to go under). And then also add either position: sticky; or position: fixed; depending whether you want the sticky behavior or the fixed behavior.
Here's a jsfiddle with the described sticky behaviour.

Javascript event listener returns null

I am new with JavaScript and I am trying to build a simple script that will show in console log the number of characters entered to a text area.
Here is my html:
<section class="hero is-info">
<div class="hero-body">
<div class="container">
<div class="card">
<div class="card-content">
<div class="content">
<div class="control has-icons-left has-icons-right">
<input class="input is-large" type="search" placeholder="" /><span class="icon is-medium is-left"><i class="fa fa-search"></i></span><span class="icon is-medium is-right"><i class="fa fa-empire"></i></span>
</div>
</div>
</div>
</div>
</div>
and here is my js:
const testArea = document.querySelector("#card-content");
function openDropDown(){
let textEnteredLength = testArea.value.length;
console.log(textEnteredLength);
}
testArea.addEventListener("keypress", openDropDown, false);
and here is my error:
TypeError: testArea is null[Learn More]
I don't understand why testArea appears to be nulls since I defined it in the first line.

You've to add id card-content to input tag like this -
const testArea = document.querySelector("#card-content");
function openDropDown() {
let textEnteredLength = testArea.value.length;
console.log(textEnteredLength);
}
testArea.addEventListener("keypress", openDropDown, false);
<section class="hero is-info">
<div class="hero-body">
<div class="container">
<div class="card">
<div class="card-content">
<div class="content">
<div class="control has-icons-left has-icons-right">
<input id="card-content" class="input is-large" type="search" placeholder="" /><span class="icon is-medium is-left"><i class="fa fa-search"></i></span><span class="icon is-medium is-right"><i class="fa fa-empire"></i></span>
</div>
</div>
</div>
</div>
</div>
</div>
</section>

You need an id to select the DOM element to add an event listener to.
<section class="hero is-info">
<div class="hero-body">
<div class="container">
<div class="card">
<div class="card-content">
<div class="content">
<div class="control has-icons-left has-icons-right">
<input class="input is-large" id="card-content" type="search" placeholder="" /><span class="icon is-medium is-left"><i class="fa fa-search"></i></span><span class="icon is-medium is-right"><i class="fa fa-empire"></i></span>
</div>
</div>
</div>
</div>
</div>
<script>
const testArea = document.getElementById("card-content");//selects element with id 'card-content'
function openDropDown(){
let textEnteredLength = testArea.value.length;
console.log(textEnteredLength);
}
testArea.addEventListener("keypress", openDropDown, false);
</script>
You can also select the element by its class(es).
<section class="hero is-info">
<div class="hero-body">
<div class="container">
<div class="card">
<div class="card-content">
<div class="content">
<div class="control has-icons-left has-icons-right">
<input class="input is-large" type="search" placeholder="" /><span class="icon is-medium is-left"><i class="fa fa-search"></i></span><span class="icon is-medium is-right"><i class="fa fa-empire"></i></span>
</div>
</div>
</div>
</div>
</div>
<script>
const testArea = document.querySelector("input.input.is-large");
//selects first input element with class of input and is-large
function openDropDown(){
let textEnteredLength = testArea.value.length;
console.log(textEnteredLength);
}
testArea.addEventListener("keypress", openDropDown, false);
</script>

You can also use the attribute onkeyup and invoke the function openDropDown() and pass this as an argument to access the input element to check the number of the characters which entered to the input field.
function openDropDown(input){
console.log(input.value.length)
}
<section class="hero is-info">
<div class="hero-body">
<div class="container">
<div class="card">
<div class="card-content">
<div class="content">
<div class="control has-icons-left has-icons-right">
<input class="input is-large" type="search" placeholder="" onkeyup="openDropDown(this)" /><span class="icon is-medium is-left"><i class="fa fa-search"></i></span><span class="icon is-medium is-right"><i class="fa fa-empire"></i></span>
</div>
</div>
</div>
</div>
</div>