Build a Stylized To-Do List - Build a Stylized To-Do list

HTML-CSS
1

Tell us what’s happening:

Hello this is my first time coding, i’m trying to do my best, please be nice.

I can’tunderstand why my “sub-item-link” class doesn’t works. ¨Please Help. Thanks in advance.

// running tests

10. The li inside the ul with the class sub-item should have an anchor element with the class sub-item-link.

// tests completed

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Styled To-Do List</title>
    <!-- Enlazamos el archivo CSS externo -->
    <link rel="stylesheet" href="styles.css">
</head>

<body>

    <!-- Requisito 1: Lista desordenada con la clase todo-list. -->
    <ul class="todo-list">

        <!-- Requisito 2: Cuatro elementos de lista en total. -->
        
        <!-- Elemento 1: Comprar comestibles -->
        <li>
            <!-- Requisitos 3, 5, 8: input[type="checkbox"] con id y label con for correspondiente. -->
            <input type="checkbox" id="task1">
            <!-- Requisitos 4, 6, 7, 8: label con for correspondiente e incluye texto. -->
            <label for="task1">Comprar comestibles 🛒</label>
            
            <!-- Requisito 9: Lista desordenada con la clase sub-item después del label. -->
            <ul class="sub-item">
                <!-- Requisitos 10, 11, 12, 13: li con a.sub-item-link, href válido, texto, y target="_blank". -->
                <li><a class="sub-item-link" href="#ofertas" target="_blank">Ver ofertas de la semana</a></li>
                <li><a class="sub-item-link" href="https://ejemplo.com/cupones" target="_blank">Revisar cupones</a></li>
            </ul>
        </li>

        <!-- Elemento 2: Terminar proyecto final -->
        <li>
            <input type="checkbox" id="task2">
            <label for="task2">Terminar proyecto final 💻</label>
            <ul class="sub-item">
                <li><a class="sub-item-link" href="#borrador" target="_blank">Revisar borrador</a></li>
                <li><a class="sub-item-link" href="https://ejemplo.com/formato" target="_blank">Guía de formato</a></li>
                <li><a class="sub-item-link" href="#entrega" target="_blank">Fecha de entrega</a></li>
            </ul>
        </li>

        <!-- Elemento 3: Reservar viaje -->
        <li>
            <input type="checkbox" id="task3">
            <label for="task3">Reservar viaje ✈️</label>
            <ul class="sub-item">
                <li><a class="sub-item-link" href="https://ejemplo.com/vuelos" target="_blank">Buscar vuelos</a></li>
                <li><a class="sub-item-link" href="/hoteles" target="_blank">Consultar hoteles</a></li>
            </ul>
        </li>

        <!-- Elemento 4: Clase de yoga matutina -->
        <li>
            <input type="checkbox" id="task4">
            <label for="task4">Clase de yoga matutina 🧘</label>
            <ul class="sub-item">
                <li><a class="sub-item-link" href="tel:5551234" target="_blank" >Llamar estudio</a></li>
                <li><a class="sub-item-link" href="#horario" target="_blank">Ver horario</a></li>
            </ul>
        </li>

    </ul>

</body>

</html>

/* file: styles.css */
/* Estilos Generales para mejorar la presentación */
body {
    font-family: 'Inter', sans-serif;
    background-color: #f4f7f6;
    padding: 20px;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    min-height: 100vh;
}

/* Contenedor principal de la lista de tareas (Requisito 1: .todo-list) */
.todo-list {
    list-style: none; /* Elimina viñetas por defecto */
    padding: 0;
    margin: 0;
    width: 100%;
    max-width: 600px;
    background: #ffffff;
    border-radius: 12px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Estilo para cada tarea principal (<li>) */
.todo-list > li {
    padding: 15px 20px;
    border-bottom: 1px solid #eee;
}

.todo-list > li:last-child {
    border-bottom: none;
}

/* Controles de checkbox y label */
input[type="checkbox"] {
    margin-right: 10px;
    transform: scale(1.2);
    cursor: pointer;
}

.todo-list > li label {
    font-size: 1.1em;
    font-weight: 600;
    color: #333;
    cursor: pointer;
    user-select: none;
    display: inline-block;
}

/* Estilo para la sub-lista (Requisito 9: .sub-item) */
.sub-item {
    list-style: disc; /* Vuelve a añadir viñetas (disponibles) para la sub-lista */
    padding-left: 45px;
    margin-top: 10px;
    font-size: 0.9em;
}

.sub-item li {
    margin-bottom: 5px;
}

/* --- Requisitos de Estilo del Enlace (14-18) --- */

/* Requisito 14: Los enlaces de la página no deben tener subrayado por defecto. */
.sub-item-link {
    text-decoration: none;
    color: #4a4a4a; /* Color inicial del enlace */
    transition: color 0.2s ease-in-out;
}

/* Requisito 15: Los enlaces deben cambiar de color al pasar el cursor sobre ellos. */
.sub-item-link:hover {
    color: #007bff; /* Color azul al pasar el cursor */
}

/* Requisito 16: Los enlaces deben cambiar de color cuando se hace clic en ellos. */
.sub-item-link:active {
    color: #28a745; /* Color verde al hacer clic */
}

/* Requisito 17: Los enlaces deben tener un contorno cuando están enfocados. */
.sub-item-link:focus {
    outline: 2px solid #ffc107; /* Contorno amarillo al enfocar */
    outline-offset: 2px;
    border-radius: 4px;
}

/* Requisito 18: Los enlaces deberían cambiar de color una vez visitados. */
.sub-item-link:visited {
    color: #6c757d; /* Color gris suave una vez visitados */
}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/140.0.0.0 Safari/537.36

Challenge Information:

Build a Stylized To-Do List - Build a Stylized To-Do list

2

Welcome to the forum @cibarra.ing

For the failing test, try the .sub-item unorderd list with one list item each.

Happy coding

3

It works! I was stucked a lot. Thank you!

1 Like