Guías bluuweb

Appearance

Form Range + JS ​

Vamos a desarrollar una práctica inspirados en: FrontendMentor

⭐ Videos Premium ⭐

Esta sección es parte del curso en Udemy. Si quieres acceder a ella, puedes comprar el curso en Udemy: Bootstrap 5 by bluuweb.

O bien también puedes visualizar los videos siendo miembro en Youtube. Accede a miembros del canal aquí y accede a los videos de esta sección.

custom.scss ​

scss
@import url("https://cdn.jsdelivr.net/npm/bootstrap-icons@1.4.0/font/bootstrap-icons.css");

@import url("https://fonts.googleapis.com/css2?family=Manrope:wght@300;500;700&display=swap");
// font-family: 'Manrope', sans-serif;

$font-family-base: "Manrope", sans-serif;

@import "../node_modules/bootstrap/scss/bootstrap";

HTML ​

html
<!DOCTYPE html>
<html lang="es">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Precios level up</title>
        <link rel="stylesheet" href="css/custom.css" />
    </head>
    <body>
        <div class="container">
            <div class="text-center my-5">
                <h1 class="fw-bold mb-3">Simple, traffic-based pricing</h1>
                <p class="text-muted">
                    Sign-up for our 30-day trial. No credit card required.
                </p>
            </div>
            <div class="row justify-content-center">
                <div class="col-12 col-md-8 col-lg-6">
                    <div class="card border-0 shadow bg-dark text-light">
                        <div class="card-body">
                            <div
                                class="row text-center my-3 align-items-center"
                            >
                                <div class="col-12 col-md-6 order-1 order-md-1">
                                    <p class="h2 fw-bold m-0">
                                        $ <span id="price">16</span>.00
                                        <span class="text-muted h6 align-middle"
                                            >/ month</span
                                        >
                                    </p>
                                </div>
                                <div
                                    class="col-12 col-md-6 order-3 order-md-2 text-uppercase text-muted"
                                >
                                    <p class="m-0">
                                        <span id="views" class="text-primary"
                                            >100K</span
                                        >
                                        pageviews
                                    </p>
                                </div>
                                <div class="col-12 order-2 order-md-3 my-3">
                                    <input
                                        type="range"
                                        class="form-range"
                                        min="8"
                                        max="40"
                                        step="8"
                                        id="customRange3"
                                        value="24"
                                    />
                                </div>
                            </div>
                            <hr />
                            <div class="row">
                                <div class="col-12">
                                    <ul class="list-unstyled text-center">
                                        <li>
                                            <i
                                                class="bi bi-play text-primary"
                                            ></i>
                                            Unlimited websites
                                        </li>
                                        <li>
                                            <i
                                                class="bi bi-play text-primary"
                                            ></i>
                                            100% updates data ownership
                                        </li>
                                        <li>
                                            <i
                                                class="bi bi-play text-primary"
                                            ></i>
                                            Email report
                                        </li>
                                    </ul>
                                </div>
                                <div class="col-12 text-center">
                                    <button class="btn btn-outline-primary">
                                        Acceder
                                    </button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <script src="js/app.js"></script>
    </body>
</html>

JS ​

js
console.log("holis");

const range = document.querySelector("#customRange3");
const views = document.querySelector("#views");
const price = document.querySelector("#price");
const arrayViews = ["10K", "50K", "100K", "500K", "1M"];

range.addEventListener("input", () => {
    console.log("me cambiaste 😱");
    console.log(range.value);
    price.textContent = range.value;
    views.textContent = arrayViews[range.value / 8 - 1];
});