All Questions

I was re-structuring my web project so that it would be a little cleaner and tidier than before, and a question arose.

When there is a part in which a class is already assigned to several things, but you don't want them all to be the same, would it be necessary to use both a class (the one that defines what it is) and an id to style it?

I give an example:

/* ESTRUCTURA */

.flex-container {
  display: flex;
  align-items: stretch;
  background-color: none;
}

.flex-container > div {
  background-color: none;
  color: black;
  width: 100px;
  margin: 5px;
  text-align: center;
  line-height: 30px;
  font-size: 15px;
}

#contenido {
	background-color: none;
	float: left;
	width: 100%;
	padding: 15px;
	margin-top: 7px;
	text-align: center;
}

#contenido2{
  background-color: FloralWhite;
	float: left;
	width: 100%;
	padding: 15px;
  margin: 5px;
	margin-top: 7px;
	text-align: center;
}

/* ESTRUCTURA IMÁGENES */

*,
*::before,
*::after {
  box-sizing: border-box;
}

.grid {
  display: grid;
  margin: 0 auto;
  grid-template-columns: repeat(var(--columnas), 1fr);
  width: calc(100% - 20px);
  max-width: 1200px;
  gap: 10px;
}

.grid__item {
  padding-top: 85%;
  position: relative;
  border: 1px solid;
}

.grid__img {
  --object-fit: cover;
  --object-position: center center;
  display: block;
  top: 0;
  bottom: 0;
  object-fit: var(--object-fit);
  object-position: var(--object-position);
  height: 100%;
  width: 100%;
  position: absolute;
}

@media screen and (min-width: 600px) {
  .grid {
    --columnas: 3;
  }
}

@media screen and (min-width: 400px) and (max-width:599px) {
  .grid {
    --columnas: 2;
  }
}

@media screen and (max-width: 399px) {
  .grid {
    --columnas: 1;
  }
}

.limpiar {
  clear: both;
}

<div class="flex-container" id="contenido">  <div style="flex-grow: 1">
  <p class="lateral">
    Gatos, gatos, muchos gatos<br>
    ¡Los gatos son adorables!<br>
  </p>
</div>
<div style="flex-grow: 9">
  <div class="grid">
    <div class="grid__item">
      <img    class="grid__img" src="https://ichef.bbci.co.uk/news/410/cpsprodpb/8536/production/_103520143_gettyimages-908714708.jpg">
      <div class="caption">
        Texto a colocar
      </div>
      <div class="limpiar"></div>
    </div>
  </div>
</div>
<div class="flex-container" id="contenido2">
  <div style="flex-grow: 10">
    <p>Hola, Hola, Hola, Hola, Hola, Hola,<br>
      Hola, Hola, Hola, Hola, Hola, Hola, Hola, <br>
    </p>
  </div>
</div>

In this case, it would be with the class flex-containerand the idrespective.

Recently, in a comment they told me that it was not recommended to use classe idin the same object, nor to mix both. Then the doubt arose:

How are you supposed to style two different objects with the same class?

I give the example of flex-containerbeing a class that gives shape, so if it has more elements, it has to have the same class.

Not that I have much of an idea either, but if you want to modify something with the same class already defined but you don't want it to be the same, in my opinion, the use of an id becomes necessary. (To avoid using style="").

If not, why? What would be a good way to style it then?

I need to display an oddinput random number within the range I set. I tried using a for loop with an if , but my program "thunders" .

This is what I have for now:

var min = 200;
var max = 300;
var semrandom;

semrandom = Math.floor(Math.random() * max) + min;
if ((semrandom % 2) == 0) {
  continue; 
}

document.getElementById('semilla').setAttribute("value", `${semrandom}`);

If it generates a random number, but not an odd random number . The question is, how can I get it?

I'm using an a tag but with an onclick and I don't know if I'm doing it right or actually the right way is using an href without me needing it.

The functionality I am looking for is that when uploading an image, the user can resize, zoom and save it with that scale, but I have not found a way to do that.

The way I have it implemented is that the image is displayed once it is loaded, as shown below:

And that when clicking to zoom, the image can be made larger, ending something like this:

This is my code for that part of the page, with its JavaScript part to display the loaded image:

$(document).on('click','.viewDesign',function(){
		if($(this).parent().find('input')[0].files[0]){
	    	$('#designPreview').attr('src', window.URL.createObjectURL($(this).parent().find('input')[0].files[0]));
		}
		else if($(this).data('file')){
	    	$('#designPreview').attr('src', $(this).data('file'));
		}
	});

.container
  img.design#designPreview(src="img/diseno/diseno.png")
  .escala
    p Escala
    .buttons
      i(type='button') -
      i(type='button') +

The idea is that, on a page that contains a form, it redirects from the current page to the parent page when the form is filled. The problem is that it stays on the same page. The javaScript code is as follows:

function crearSesion(){
var user=document.getElementById("usuario").value;
var pass=document.getElementById("clave").value;
  if(user!==""&& pass!==""){
    if(user=='[email protected]' && pass=='javascript'){
       sessionStorage.setItem("user2",pass);
       alert("ingresado correctamente");
       document.location.href="index.html";
    }else{
        alert("no estas registrado");

    }
   }
}

The function call from HTML5 code is as follows:

     <input onclick="crearSesion();"type="submit" value="iniciar sesion" id="enviar">

Very grateful in advance.