Develop Reference

replace a div hidden intially by a click on a link from 3 other 3 linkes(3 other divs)

Hi I want to replace a div that is already displayed with another Hidden div choosed when i click on one of them(3 other divs(hidden) initially). the 4 links related to the 4 divs and in same way i can do that in each link clicked. below is the code:
<script type="text/javascript">
#4 Id of divs
var models = document.getElementById('models')
var geometry = document.getElementById('geometry')
var assembly = document.getElementById('assembly')
var loads = document.getElementById('loads')
#4 ID OF links (related to each div)
var models1 = document.getElementById('models1')
var geometryy = document.getElementById('geometryy')
var assemblyy = document.getElementById('assemblyy')
var loads1 = document.getElementById('loads1')
geometryy.addEventListener("click", function () {
models.style.display = "none"
loads.style.display = "none"
assembly.style.display = "none"
geometry.style.display = "block"
})
assemblyy.addEventListener("click", function () {
geometry.style.display = "none"
models.style.display = "none"
loads.style.display = "none"
assembly.style.display = "block"
})
loads1.addEventListener("click", function () {
geometry.style.display = "none"
models.style.display = "none"
assembly.style.display = "none"
loads.style.display = "block"
})
models1.addEventListener("click", function () {
models.style.display = "block"
geometry.style.display = "none"
assembly.style.display = "none"
loads.style.display = "none"
})
</script>
CSS:
<style>
#loads {
display: none;
}
#geometry {
display: none;
}
#assembly {
display: none;
}
#models {
display: block;
}
</style>
some Html code about the 4 divs:
<form action="{% url 'results' %}" method="post" id="gallery" novalidate onsubmit="return mySubmitFunction(event)">
<div style="padding-top: 10px; margin-left:138px;" class="parallax-window tm-section tm-section-gallery tm-flex background " id="models" >
<div style=" background-color: white; font-size:89%; width: 62rem; height: 32rem; margin-left:2.5rem; ">
<div class="card-warning" style="background-color: #C0C0C0;">
<nav class="navbar">
<a class="floated" style="font-weight: bolder; border-style: solid;" id="models1">Models</a>
Geometry
Assembly
Loads
</nav>
</div>
.......... some fields related to the div id="models"
</div>
</div>
----------------About the second div
<div style="padding-top: 10px;" class="parallax-window tm-section tm-section-gallery tm-flex" id="geometry" >
<div style=" background-color: white; font-size:89%; width: 62rem; height: 32rem; margin-left:2.5rem; ">
<div class="card-warning" style="background-color: #C0C0C0;">
<nav class="navbar">
Models
<a class="floated" style=" font-weight: bolder; border-style: solid;">Geometry</a>
Assembly
Loads
</nav>
</div>
<div style="display: flex;">
<div>
<img style="height: 372px; width:270px; margin-left: 25px;">
</div>
<div style="line-height: 0.001; margin-left: 10px; margin-top: 12px;">
------ some code for some fields
</div>
</div>
...... </div>
---- </div>
----------------About the third div
<div style="padding-top: 10px;" class="parallax-window tm-section tm-section-gallery tm-flex" id="assembly" >
<div style="background-color: white; font-size:89%; width: 62rem; height: 32rem; margin-left:2.5rem; ">
<div class="card-warning" style="background-color: #C0C0C0;">
<nav class="navbar">
Models
Geometry
<a class="floated" style=" font-weight: bolder; border-style: solid;">Assembly</a>
<a href="#loads" class="floated" style=" font-weight: bolder;" id="loads3" >Loads</a>
</nav>
</div>
<div style="display: flex;">
<div>
<img style="height: 372px; width:270px; margin-left: 25px;">
</div>
<div style="line-height: 0.001; margin-left: 10px; margin-top: 12px;">
------ some code for some fields
</div>
</div>
...... </div>
---- </div>
----------------About the fourth div
<div style="padding-top: 10px; " class="parallax-window tm-section tm-section-gallery tm-flex" id="loads" >
<div style="background-color: white; font-size:89%; width: 62rem; height: 32rem; margin-left:2.5rem;">
<div class="card-warning" style="background-color: #C0C0C0;">
<nav class="navbar">
<a href="#models" class="floated" style="font-weight: bolder;" >Models</a>
Geometry
Assembly
<a style=" font-weight: bolder; border-style: solid;">Loads</a>
</nav>
</div>
<div style="display: flex;">
<div>
<img style="height: 372px; width:270px; margin-left: 25px;">
</div>
<div style="line-height: 0.001; margin-left: 10px; margin-top: 12px;">
------ some code for some fields
</div>
</div>
...... </div>
---- </div>
</form>
what i want :at first the "models" div is shown and the other 3 divs("geometry",assembly","loads") are hidden , so i want when i click on "geometry" div , the first div "models" become hidden and the other divs ("assembly" and "loads" still hidden) and so on if click on assembly... i i want to apply that on every div(because evry div has the 4 links)
But it doesn't give me any result!

<html>
<head>
<style>
#div2, #div3, #div4{
display: none;
}
</style>
</head>
<body>
<div style="background-color: #C0C0C0 ;padding-top: 10px;width: 62rem; height: 32rem; ">
<div>
<a href="#models" class="geo wy" style="border-style: solid;" >Models</a>
Geometry
Assembly
Loads
</div>
<div id="div1" class="wy hid">
Models and other stuffs here
</div>
<div id="div2" class="pk hid">
Geometry and other stuffs here
</div>
<div id="div3" class="fk hid">
Assembly and other stuffs here
</div>
<div id="div4" class="gk hid">
Loads and other stuffs here
</div>
</div>
<script>
window.onload = btn() ;
function btn() {
var query = document.querySelectorAll(".geo") ; //No of hrefs
var pts = document.querySelectorAll(".hid"); //No of divs
for(var i=0;i<query.length;i++){
query[i].addEventListener("click", function() { //know which href is being clicked currently
var cla = this.getAttribute('class').split(' ')[1] ; //get second class of current href which would be wy, pk, fk, gk respectively.
var point = document.querySelectorAll("."+cla)[1]; //selecting the div as, [0] would select the href
for(var j=0;j<pts.length;j++){
pts[j].style.display = "none"; //hid all the div
query[j].style.border= "none"; //remove all the href border
}
this.style.border= "solid"; //Add currently clicked href border
point.style.display = "block"; //display currently clicked div
})
}
}
</script>
</body>
</html>
Sorry the id and classes name are given random i am not good at naming. Please don't hesitate to ask if you are confused

Modal Window on card click JS CSS PHP

So I have 6 cards on my html. Each one on click need to pop up a modal window (this modal window is the card with more informations, so each modal window is corresponding to one card).
I dont know how to do that. After a day searching on the web I'm here to ask your help.
I have tried to make the html animal_card, and my modal appart. Then all the content will change with php.
And the Javascript need to change the modal window css property to absolute on click.
Someone know how to do that with Javascript ?
HTML :
<div class="animal_card">
<div class="card_title">
<h3>title</h3>
</div>
<div class="card_image">
<img src="image.img" alt="">
</div>
<div class="card_text">
<div class="card_info">
<div class="card_info_age">
<h4>Age</h4>
<p>14</p>
</div>
<div class="card_info_gender">
<h4>Gender :</h4>
<p>Female</p>
</div>
</div>
<h4>Who am I</h4>
<p>Description Text</p>
</div>
</div>
<div class="bg-modal">
<div class="modal-content">
<div class="modal-animal">
<h1>Animal Name</h1>
<button class="close" onclick="closeModal()">&times</button>
<div><img src="img/greciaprofile.jpg" alt=""></div>
<div class="animal-informations">
<div class="left">
<label for="">Age</label>
<p>14</p>
<label for="">Sexe</label>
<p>Female</p>
</div>
<div class="right">
<label for="">Description</label>
<p>
Text
</p>
</div>
</div>
<div>
<button class="main">Adopt</button>
<button class="secondary">Support</button>
</div>
</div>
</div>
</div>
CSS :
.bg-modal {
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.7);
position: absolute;
top: 0;
left: 0;
display: flex;
justify-content: center;
}
.modal-content {
position: absolute;
margin-top: 5rem;
width: 75vw;
background-color: $white;
border-radius: 15px;
}
Javascript :
const cards = document.querySelectorAll('.animal_card');
const modal = document.getElementsByClassName('bg-modal');
const onCardClick = async (e) => {
const card = e.currentTarget;
modal.style.position = 'absolute';
}
cards.forEach(card => card.addEventListener('click', onCardClick));
function closeModal() {
modal[0].style.position = 'none';
}

const cards = document.querySelectorAll('.animal_card');
const modal = document.getElementsByClassName('bg-modal');
const getKeyMap = (modal) => {
if (modal) {
let i;
let keyMap = {};
for (i = 0; i < modal.length; i++) {
const item = modal[i];
const key = item.getAttribute('key');
keyMap[key] = item;
}
return keyMap;
}
return null;
};
const modalMap = getKeyMap(modal);
const onCardClick = async (e) => {
const card = e.currentTarget && e.currentTarget.getAttribute('key') || null;
const selectedModal = modalMap[card] || null;
if (selectedModal) {
selectedModal.style.position = 'absolute';
}
}
cards.forEach(card => card.addEventListener('click', onCardClick));
.bg-modal {
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0.7);
/* position: absolute; */
top: 0;
left: 0;
display: flex;
justify-content: center;
}
.modal-content {
position: absolute;
margin-top: 5rem;
width: 75vw;
background-color: $white;
border-radius: 15px;
}
<div key="5" class="animal_card">
<div class="card_title">
<h3>title</h3>
</div>
<div class="card_image">
<img src="image.img" alt="">
</div>
<div class="card_text">
<div class="card_info">
<div class="card_info_age">
<h4>Age</h4>
<p>14</p>
</div>
<div class="card_info_gender">
<h4>Gender :</h4>
<p>Female</p>
</div>
</div>
<h4>Who am I</h4>
<p>Description Text</p>
</div>
</div>
<div class="bg-modal" key="5">
<div class="modal-content">
<div class="modal-animal">
<h1>Animal Name</h1>
<button class="close">&times</button>
<div><img src="img/greciaprofile.jpg" alt=""></div>
<div class="animal-informations">
<div class="left">
<label for="">Age</label>
<p>14</p>
<label for="">Sexe</label>
<p>Female</p>
</div>
<div class="right">
<label for="">Description</label>
<p>
Text
</p>
</div>
</div>
<div>
<button class="main">Adopt</button>
<button class="secondary">Support</button>
</div>
</div>
</div>
</div>
So the direct answer using your example is modal on the onCardClick is returning a collection, not a single element. So selecting the first one modal[0] will fix the position update. I attached an example.
If you are going to show different modals based on the card you click on, you generally need to have a method to track them. Really depends on how you want to do that, based on ids, or index position or so on. Anyways, let me know if this helps.

How to save the details of range slider in the local storage?

I am replicating this webpage https://www.modsy.com/project/furniture and I wrote the code On every slide there will be changing of image and phrase like that there are three phrases and images now I want to store the image and phrase in the local storage what the user has finalized
My html code is:
<div class="image mt-3 mb-3" id="sliderImages">
<img src="../static/images/1.jpg" width="400" height="180">
<img src="../static/images/2.jpg" width="400" height="180">
<img src="../static/images/3.jpg" width="400" height="180">
</div><br>
<div class="rangeslider">
<input type="range" min="1" max="3" value="1" class="myslider" id="sliderRange">
<div id="sliderOutput">
<div class="container">
<div class="row mt-4">
<div class="col-4">
<h6 class="display-6">Starting From Scratch</h6>
<p> I'm designing the room </p>
</div>
<div class="col-4">
<h6 class="display-6">Somewhere in Between</h6>
<p>I'm designing around a few pieces I already own</p>
</div>
<div class="col-4">
<h6 class="display-6">Mostly Furnished</h6>
<p>I want to put the finishing touches on my room</p>
</div>
</div>
</div>
<div class="container">
<div class="row mt-4">
<div class="col-4">
<h6 class="display-6">Starting From Scratch</h6>
<p> I'm designing the room </p>
</div>
<div class="col-4">
<h6 class="display-6">Somewhere in Between</h6>
<p>I'm designing around a few pieces I already own</p>
</div>
<div class="col-4">
<h6 class="display-6">Mostly Furnished</h6>
<p>I want to put the finishing touches on my room</p>
</div>
</div>
</div>
<div class="container">
<div class="row mt-4">
<div class="col-4">
<h6 class="display-6">Starting From Scratch</h6>
<p> I'm designing the room </p>
</div>
<div class="col-4">
<h6 class="display-6">Somewhere in Between</h6>
<p>I'm designing around a few pieces I already own</p>
</div>
<div class="col-4">
<h6 class="display-6">Mostly Furnished</h6>
<p>I want to put the finishing touches on my room</p>
</div>
</div>
</div>
</div>
<div class="row mb-3 mt-3">
<div class="col-4 mr-5">
« Home
</div>
<div class="col-4 ml-5">
Next » </div>
</div>
</div>
My CSS code is:
<style>
.rangeslider {
width: 50%;
margin: 0 auto;
position: absolute;
}
.myslider {
-webkit-appearance: none;
background: white;
width: 100%;
height: 20px;
opacity: 0.8;
margin-top: 180px;
}
.myslider::-webkit-slider-thumb {
-webkit-appearance: none;
cursor: pointer;
background: #000080;
width: 33%;
height: 20px;
}
.col-4 {
text-align: center;
}
.myslider:hover {
opacity: 1;
}
.image {
position: relative;
width: 400px;
margin: 0 auto;
}
.image>img {
position: absolute;
display: none;
}
.image>img.visible,
.image>img:first-child {
display: block;
}
#sliderOutput>div {
display: none;
}
#sliderOutput>div.visible,
#sliderOutput>div:first-child {
display: block;
}
#p1{
height: 10px;
}
</style>
My JS code is:
<script>
window.addEventListener('load', function() {
var rangeslider = document.getElementById("sliderRange");
var output = document.getElementById("sliderOutput");
var images = document.getElementById("sliderImages");
rangeslider.addEventListener('input', function() {
for (var i = 0; i < output.children.length; i++) {
output.children[i].style.display = 'none';
images.children[i].style.display = 'none';
}
i = Number(this.value) - 1;
output.children[i].style.display = 'block';
images.children[i].style.display = 'block';
});
});
</script>
My main requirement if the slider is in the first that phrase and image should be stored in local storage like that if it is in second that details should store.

There is no enough details about what json you want to store in the localStorage so that's why i am giving you the basic idea of how you can store a json in localStorage.
Basically you can't store json in localStorage directly but you can store that json in form of a stringand then converting that string(json) into json. Here is the basic example :
// setting json to localStorage
var jsonToBeStoredInLocalStorae = {
sliderImages = [
{path : 'image-path-here'},
{path : 'image-path-here'}
],
phrase : 'your image phrase'
};
localStorage.setItem('slider_json',JSON.stringify(jsonToBeStoredInLocalStorae ));
When you want to get that json from localStorage so you will do like this
//Here you are getting that json in `string` form from `localStorage` and parsing it to `json`
var localStorageJson = JSON.parse(localStorage.getItem('slider_json'));

In localStorage you can only save text strings, so if you want to save it is only one value per record, you insert a name and value to localStorage, but if you want to save an object, you must transform it to a text string with the function JSON.stringify

How to make simple 3 step checkout section like quiz

Hello and have a nice day!
I want to create simple step by step element with back button.
I have a next markup
<div class="checkout">
<div class="checkout-step">
<div class="content">This is step 1</div>
<div class="button-prev-step">Previous step</div>
<div class="button-next-step">Next step</div>
</div>
<div class="checkout-step">
<div class="content">This is step 2</div>
<div class="button-prev-step">Previous step</div>
<div class="button-next-step">Next step</div>
</div>
<div class="checkout-step">
<div class="content">This is step 3</div>
<div class="button-prev-step">Previous step</div>
<div class="button-next-step">Next step</div>
</div>
</div>
JS (It's not fully complete code, just part of existing code, I don't fully understand how I can do it)
var checkoutStepCounter = 0;
var checkoutStepLength = $('.checkout-step').length;
$('.button-next-step').click(function() {
checkoutStepCounter++;
if( checkoutStepLength < checkoutStepCounter ) {
$(this).find('.checkout-step').hide();
$(this).find('.checkout-step').next('.checkout-step').show();
}
});
$('.button-prev-step').click(function() {
checkoutStepCounter--;
if( checkoutStepLength < checkoutStepCounter ) {
$(this).find('.checkout-step').hide();
$(this).find('.checkout-step').prev('.checkout-step').show();
}
});
CSS:
.button-prev-step, .button-next-step { display: block; width: 100px; height: 20px; background: red; cursor: pointer; }
.checkout-step { display: none; }
https://codepen.io/Frunky/pen/yKNMOM
How to make function nextStep and prevStep? in result I want to slide between the sections, and in total - send filled data to backend. Now I need to add an ability to slide between .checkout-step blocks. May be I need to add simple slider? like slick or owl, but I don't know if it's right way or not

Simple code snippet to show you next and previous button working. You can do some more research and add your desired animation (slide, fade etc.) as per your requirements.
var checkoutSteps = 3;
var currentStep = 1;
$('.button-next-step').click(function() {
if(currentStep < checkoutSteps){
$(".checkout-step-"+currentStep+"").hide();
currentStep++;
$(".checkout-step-"+currentStep+"").show();
}
});
$('.button-prev-step').click(function() {
if(currentStep > 1){
$(".checkout-step-"+currentStep+"").hide();
currentStep--;
$(".checkout-step-"+currentStep+"").show();
}
});
.button-prev-step, .button-next-step { display: inline-block; width: 100px; height: 20px; background: red; cursor: pointer; }
.checkout-step {
width: 300px;
height: 300px;
border: 1px solid #000;
display: none;
}
.checkout-step-1{
display: block;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="checkout">
<div class="checkout-step checkout-step-1">
<div class="content">This is step 1</div>
<div class="button-prev-step">Previous step</div>
<div class="button-next-step">Next step</div>
</div>
<div class="checkout-step checkout-step-2">
<div class="content">This is step 2</div>
<div class="button-prev-step">Previous step</div>
<div class="button-next-step">Next step</div>
</div>
<div class="checkout-step checkout-step-3">
<div class="content">This is step 3</div>
<div class="button-prev-step">Previous step</div>
<div class="button-next-step">Next step</div>
</div>
</div>
Hope this helps

Creating a star rating from an image based on a float number?

recently I have wanted to turn a number into a star rating and I stumbled upon this post here: https://stackoverflow.com/a/1987545/1871869 which is exactly what I wanted to do. I have followed this explanation but I can't seem to get it to work on my local environment, and I was wondering if someone could help me out. Here is my attempt:
$.fn.stars = function() {
return $(this).each(function() {
// Get the value
var val = parseFloat($(this).html());
// Make sure that the value is in 0 - 5 range, multiply to get width
var size = Math.max(0, (Math.min(5, val))) * 16;
// Create stars holder
var $span = $('<span />').width(size);
// Replace the numerical value with stars
$(this).html($span);
});
}
$(function() {
console.log("Calling stars()");
$('.results-contents span.stars').stars();
});
.results {
font-size: 0;
padding-bottom: 16px;
}
.results-content {
font-size: 13px;
display: inline-block;
margin-left: 20px;
vertical-align: top;
}
.results .results-content span.stars span.stars span {
background: url('/resources/graphics/stars-icons.png') 0 -36px repeat-x;
width: 175px;
height: 80px;
}
.results .results-content span.stars {
max-width: 80px;
background-position: 0 0;
}
<script type="text/template" id="results-template">
<div class="results">
<div class="results-content">
<span class="stars">4.0</span>
</div>
</div>
</script>
Image of stars:
What I wanted to do was to simply have the empty stars show, and then based on the rating, show the orange stars on top of the empty stars so that I can show full and half star ratings. However, all I get is a number to show up. My console.log above seems to be called but it seems like the actual rendering of the image and calculation of the star rating is not working. Any help would be appreciated. Thanks!

You had multiple issues from CSS styles being wrong to your selector being wrong. Below is not perfect, but it is rendering.
$.fn.stars = function() {
return this.each(function() {
// Get the value
var val = parseFloat($(this).html());
// Make sure that the value is in 0 - 5 range, multiply to get width
var size = Math.max(0, (Math.min(5, val))) * 36.5;
// Create stars holder
var $span = $('<span> </span>').width(size);
// Replace the numerical value with stars
$(this).empty().append($span);
});
}
$(function() {
console.log("Calling stars()");
$('.results-content span.stars').stars();
});
.results {
font-size: 0;
padding-bottom: 16px;
}
.results-content {
font-size: 13px;
display: inline-block;
margin-left: 20px;
vertical-align: top;
background: url('https://i.stack.imgur.com/rwkqF.png') 0 0 repeat-x;
width: 185px;
height: 35px;
}
.results .results-content span.stars span {
background: url('https://i.stack.imgur.com/rwkqF.png') 0 -36px repeat-x;
display: inline-block;
height: 35px;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="results">
<div class="results-content">
<span class="stars">0.0</span>
</div>
</div>
<div class="results">
<div class="results-content">
<span class="stars">0.5</span>
</div>
</div>
<div class="results">
<div class="results-content">
<span class="stars">1.0</span>
</div>
</div>
<div class="results">
<div class="results-content">
<span class="stars">1.5</span>
</div>
</div>
<div class="results">
<div class="results-content">
<span class="stars">2.0</span>
</div>
</div>
<div class="results">
<div class="results-content">
<span class="stars">2.0</span>
</div>
</div>
<div class="results">
<div class="results-content">
<span class="stars">2.5</span>
</div>
</div>
<div class="results">
<div class="results-content">
<span class="stars">3.0</span>
</div>
</div>
<div class="results">
<div class="results-content">
<span class="stars">3.5</span>
</div>
</div>
<div class="results">
<div class="results-content">
<span class="stars">4.0</span>
</div>
</div>
<div class="results">
<div class="results-content">
<span class="stars">4.5</span>
</div>
</div>
<div class="results">
<div class="results-content">
<span class="stars">5.0</span>
</div>
</div>