Aprenda a usar matrices de JavaScript creando una página de producto de iPhone

Cuando escribí esto, no sabía cómo Apple logró esto, pero para demostrar mi conocimiento de las matrices de JavaScript, decidí crear una versión simple de una página de producto de iPhone. Tendría botones que podrían cambiar el color del teléfono al hacer clic.

Después de construir la página (y funcionó), me di cuenta de que, después de todo, esta podría no ser la técnica que usa Apple. (Compartiré por qué lo creo en la parte final de este tutorial). Sin embargo, es un proyecto divertido y una forma de aprender sobre arreglos en JS.

Esto es lo que cubriremos:

• Cómo configurar HTML
• Cómo configurar el CSS
• Cómo configurar JavaScript

Este tutorial asume que tiene algún conocimiento de la manipulación DOM con JavaScript, HTML y CSS. Muchas cosas tendrán más sentido si lo haces.

También haré todo lo posible para explicar cada parte del código con el mayor detalle posible. Dicho esto, vamos.

Cómo configurar HTML

Antes de comenzar, descargue imágenes de 3 o 4 iPhones de diferentes colores de Internet. Puede encontrar dichas imágenes en el sitio web del iPhone o en los sitios de revisión de teléfonos.

Asegúrate de que las imágenes que descargues tengan un fondo transparente, sean del mismo tamaño y tipo (es decir, si una imagen muestra la cámara trasera, todas las imágenes deben ser así, pero de diferentes colores y del mismo tamaño). .

Una vez que tenga sus imágenes, guárdelas en una carpeta y asigne un nombre a la carpeta imágenes A estas alturas, debería haber creado una carpeta raíz para este proyecto. Si no lo has hecho, puedes hacerlo ahora. Nombre la carpeta como desee, pero asegúrese de que la carpeta de imágenes que creó anteriormente esté en la carpeta raíz.

Ahora que sus carpetas están listas, es hora de comenzar a codificar. En su editor de código favorito (el mío es VSCode), vaya a la carpeta raíz que creó anteriormente y cree un nuevo archivo HTML. Llamé a mi phone.html pero puedes nombrar el tuyo como quieras.

Para ahorrar tiempo, utilicé una función emmet para generar una plantilla HTML: simplemente presione un signo de exclamación y presione enter.

En la etiqueta del cuerpo, cree un div principal y asígnele una clase «principal» como esta:

<div class="main">
</div>

Dentro de este div principal, cree otro div y asígnele una ID de «teléfono» así:

<div id="phone">
</div>

Ahora, dentro del div «teléfono», cree una etiqueta h3 e ingrese: «Me encantan los iPhones» o puede reemplazar «Me encanta» con un emoji. En mi caso hice algo como esto:

<h3>I &hearts; iPhones</h3>

Debajo de esta etiqueta h3, cree otro div y asígnele una ID de «phoneshow» así:

<div id="phoneShow"></div>

Deje este div en blanco, pero debajo cree otro div y asígnele una identificación de «botones». Dentro de este div, cree 4 etiquetas de intervalo para representar los 4 botones, es decir, si ha descargado 4 imágenes de iPhone.

Dentro de cada etiqueta de intervalo, cree una etiqueta de botón y asigne a cada botón una identificación diferente que coincida con el color de las imágenes del teléfono. Aquí hay un ejemplo:

<div id="buttons">
<span><button id="black"></button></span>
<span><button id="blue"></button></span>
<span><button id="pink"></button></span>
<span><button id="starlight"></button></span>
</div>

Después de hacer eso, casi ha terminado con la parte HTML de este tutorial. Todo lo que queda es vincular los archivos CSS y JavaScript.

Si aún no ha creado un archivo CSS y JavaScript, ahora sería un buen momento para hacerlo. En mi caso, creé un archivo phone.css y phone.js. Luego, vincule el archivo CSS dentro de la etiqueta principal de la siguiente manera:

<link rel ="stylesheet" href = "https://www.freecodecamp.org/news/learn-javascript-arrays-by-building-product-page/phone.css">

Ahora, vincule su archivo JavaScript debajo de la última etiqueta div de cierre y justo encima de la etiqueta del cuerpo de cierre con este código:

<script src = "https://www.freecodecamp.org/news/learn-javascript-arrays-by-building-product-page/phone.js"></script>

Una vez que haya hecho eso, su código HTML estará completo.

Cómo configurar el CSS

El código CSS para este proyecto es bastante básico. Dibuje el cuerpo, el div «principal», el div «teléfono», el div «phoneshow», el div «botones» y los botones así:

body{
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background-color: rgb(255, 255, 255)
}

.main{
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
background-color: #ffff;
border-radius: 10px;
}

#phone{
display: flex;
flex-direction: column;
margin-bottom: 5px;
flex-wrap: nowrap;
align-items: center;
justify-content: center;
background-color: rgb(255, 255, 255);
border-radius: 10px;
}

#phoneShow{
display: flex;
flex-direction: row;
flex-wrap: wrap;
align-items: center;
justify-content: center;
background-color: #ffff;
border-radius: 10px;
}

#buttons{
display: flex;
flex-direction: row;
}

button{
margin-right: 10px;
border-radius: 50%;
padding: 15px;
border: none;
}

Nota: #buttons es diferente de buttons. Mientras que el primero es un div, el segundo es el elemento del botón, de ahí la falta de un selector delante de él. Radio límite: 50%; hará que los botones sean completamente redondos.

Este código CSS usa Flexbox.

Dale a cada botón un color de fondo diferente diseñando sus diferentes ID según el color de las imágenes del iPhone que descargaste. Aquí hay un ejemplo:

#black{
background-color: black;
}

#blue{
background-color: blue;
}

#pink{
background-color: pink;
}

#starlight{
background-color: silver;
}

Después de hacer esto, puede obtener una vista previa de su progreso en el navegador. Debería ver 4 botones redondos de diferentes colores, centrados en la página.

Cómo configurar JavaScript

Esta es la parte más importante de este tutorial. Hasta ahora ha creado la estructura básica y el estilo de la página. Pero para ver y editar imágenes de teléfonos en la página, la magia ocurre aquí.

Primero, cree una matriz de los directorios de imágenes que descargó al comienzo de este tutorial. ¿Recuerdas la carpeta de imágenes de antes? Lo que debe hacer es almacenar la ruta relativa de cada imagen en la carpeta dentro de una matriz en forma de cadena. Me gusta esto:

const phoneImages = ["images/Black.png", "images/Blue.png", "images/Pink.png", "images/Starlight.png"]

(Suponiendo que sus imágenes se guarden como Black.png, Blue.png, etc.)

Luego, obtenga la identificación del div donde se mostrarán las imágenes del teléfono. Para este tutorial, los teléfonos aparecerán en el div «phoneshow» de arriba. Almacene la ID obtenida en una variable como esta:

let phoneCont = document.getElementById("phoneshow")

Entonces, tome las ID de todos los botones y guárdelas en variables, aquí hay un ejemplo:

let black=document.getElementById("black")

let blue=document.getElementById("blue")

let pink=document.getElementById("pink")

let starlight=document.getElementById("starlight")

Después de hacer eso, es hora de mostrar una imagen de iPhone. Para hacer esto, cree una variable llamada «defaultImgItems» porque para que la página funcione, debe haber una imagen predeterminada en la página desde la que el usuario pueda saltar.

Puedes usar el siguiente código para hacer esto:

let defaultImgItems =`<img src= "https://www.freecodecamp.org/news/learn-javascript-arrays-by-building-product-page/${phoneImages.at(0)}">`

Dejame explicar:

El uso de acentos graves nos permite insertar código HTML en nuestro JavaScript. En este caso, quiero una etiqueta de imagen incrustada en la variable defaultImgItems. La fuente es el primer elemento de la matriz phoneImages. Puedes acceder a él a través de la at() método.

Para ver la imagen en el div seleccionado, simplemente use el siguiente código:

phoneCont.innerHTML = defaultImgItems

phoneCont es la variable donde almacenó el div con la identificación de «phoneshow» anteriormente. Si actualiza la página en su navegador, debería ver la primera imagen del iPhone en el archivo phoneImages matriz mostrada.

Una vez que haya hecho eso, cree variables similares para los otros tres colores así:

let blueImgItems=`<img src= "https://www.freecodecamp.org/news/learn-javascript-arrays-by-building-product-page/${phoneImages.at(1)}">`
let pinkImgItems=`<img src= "${phoneImages.at(2)}">`
let starImgItems=`<img src= "${phoneImages.at(3)}">`

(Estas variables se refieren al segundo, tercer y cuarto elemento del archivo phoneImages Vector.)

Cómo operar los botones

Si lo ha hecho con éxito, el siguiente paso es hacer que los botones funcionen. Los botones deberían poder cambiar el color del iPhone al color correspondiente de los botones, es decir, el botón azul debería mostrar un iPhone azul y así sucesivamente.

Para lograr esto, adjunte detectores de eventos a los botones y haga que cambien el innerHTML propiedad de phoneCont. Me gusta esto:

black.addEventListener("click", function(){
phoneCont.innerHTML=defaultImgItems
})

El código anterior hará que el botón se vuelva negro, cuando se haga clic para ver un iPhone negro. Los fragmentos de código restantes son los siguientes:

blue.addEventListener("click", function(){
phoneCont.innerHTML = blueImgItems
})

pink.addEventListener("click", function(){
phoneCont.innerHTML = pinkImgItems
})

starlight.addEventListener("click", function(){
phoneCont.innerHTML = starImgItems
})

Después de realizar estos pasos, actualice su navegador y haga clic en cada botón por turno. Las imágenes del iPhone deberían cambiar con cada clic.

Conclusión:

En este tutorial, aprendió un uso práctico de matrices en proyectos del mundo real. También aprendió cómo acceder a los elementos de la matriz usando el método .at ().

Al comienzo de este tutorial, mencioné que no creía que Apple usara este método para crear su página de producto de iPhone. Esto se debe a que cuando carga la página creada con este tutorial y hace clic en cada botón, las imágenes del iPhone no cambian de manera uniforme, de hecho, parecen saltar. Solo después de hacer clic en todos los botones, las imágenes cambian suavemente cuando se hace clic en un nuevo botón. Sin embargo, espero que este tutorial te haya sido útil.

Puede conectarse conmigo en Twitter para obtener actualizaciones sobre lo que estoy trabajando o cualquier idea nueva que se le ocurra en https: //www.twitter.com/lordsamdev. También puede dejarme saber lo que piensa del código en este tutorial. Estoy abierto a sus ideas.

¡Gracias por leer!