Label and input is moving with the wrong div

  Kiến thức lập trình

Each time i adjusted the position of the current-grade-name-input, the entirely of the grade-point-input goes with it for some reason

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="styles.css">
    <title>Calculator</title>
</head>
<body>
    <main>
        <h1>Calculator</h1>
        <div id="question">
            <p>What Type Of Calculator</p>
        </div>
        <div class="options" id="options">
            <button id="gpa-btn">GPA Calculator</button>
            <button id="current-grade-btn">Current Grade Calculator</button>
            <button id="final-grade-btn">Final Grade Calculator</button>
        </div>
        <div class="gpa-calculator hidden">
            <div class="gpa-container hidden">
                <div>
                    <p class="credit-hour-text">Credit Hours:</p>
                    <p id="credit-hour-number">0</p>
                </div>
                <div>
                    <p class="gpa-text">GPA:</p>
                    <p id="gpa-number">0.00</p>
                </div>
                <div>
                    <p class="qp-text">Quantity Points:</p>
                    <p id="qp-number">0</p>
                </div>
            </div>
            <div id="add-class-btn" class="hidden">
                <button id="add-class-gpa" type="button">Add New Class</button>
            </div>
            <form id="gpa-form" class="hidden">
                <div class="gpa-tab">
                    <label for="name-input" class="label-name">Name (Optional)</label>
                    <input type="text" class="name-input" id="name-input" value=""/>
                    <label for="credit-hour-input" class="label-name">Credit Hour</label>
                    <input type="number" class="credit-hour-input" id="credit-hour-input" min="0" required/>
                    <label for="gpa-input" class="label-name">GPA</label>
                    <input type="number" class="gpa-input" id="gpa-input" min="0" required/>
                </div>
                <div class="adding-in-tab">
                    <button id="add-update-btn" type="submit">Add</button>
                </div>
                <div class="close-btn">
                    <button id="cancel-btn" type="button">Cancel</button>
                </div>
            </form>
        </div>
        <div class="current-grade-calculator hidden">
            <form id="current-grade-form">
                <div class="current-grade-tab">
                    <p id="current-grade-text" class="hidden">Which Grading System</p>
                    <div id="add-class-btn" class="hidden">
                        <button id="add-class-current-grade" type="button">Add New Class</button>
                    </div>
                    <div id="choose-grading-system" class="choose-grading-system hidden">
                        <button id="point-system-btn" type="button">Points System</button>
                        <button id="percentage-system-btn" type="button">Percentage System</button>
                    </div>
                    <div id="current-grade-name-input" class="hidden">
                        <label for="current-grade-name" class="label-name">Name (Optional)</label>
                        <input type="text" class="name-input" id="name-input" value=""/>
                    </div>
                    <div id="point-system-input" class="hidden">
                        <div class="grade-point-input hidden">
                            <div class="grade-row">
                                <label for="a-input">A:</label>
                                <input type="number" id="a-min-number" min="0" placeholder="Minimum Points" required/>
                                <input type="number" id="a-max-number" min="1" placeholder="Maximum Points" required>
                            </div>
                            <div class="grade-row">
                                <label for="b-input">B:</label>
                                <input type="number" id="b-min-number" min="0" placeholder="Minimum Points" required/>
                                <input type="number" id="b-max-number" min="1" placeholder="Maximum Points" required>
                            </div>
                            <div class="grade-row">
                                <label for="c-input">C:</label>
                                <input type="number" id="c-min-number" min="0" placeholder="Minimum Points" required/>
                                <input type="number" id="c-max-number" min="1" placeholder="Maximum Points" required>
                            </div>
                            <div class="grade-row">
                                <label for="d-input">D:</label>
                                <input type="number" id="d-min-number" min="0" placeholder="Minimum Points" required/>
                                <input type="number" id="d-max-number" min="1" placeholder="Maximum Points" required>
                            </div>
                            <div class="grade-row">
                                <label for="f-input">F:</label>
                                <input type="number" id="f-min-number" min="0" placeholder="Minimum Points" required/>
                                <input type="number" id="f-max-number" min="1" placeholder="Maximum Points" required>
                            </div>
                        </div>
                    </div>
                </div>
            </form>
        </div>
        <dialog id="closing-tab-confirm">
            <form method="dialog">
                <p class="closing-message">Unsaved Changes</p>
                <p class="closing-message">Delete?</p>
                <div class="yes-or-no-btn">
                    <button id="yes" type="button" class="btn">Yes</button>
                    <button id="no" type="button" class="btn">No</button>
                </div>
            </form>
        </dialog>
    </main>
    <script src="script.js"></script>
</body>
</html>

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

body{
    background-color: beige;
}

main{
    /* this part allows the item to be move according */
    display: flex;
    /* this lets the html know that it will move up and down */
    flex-direction: column;
    /* this next 2 lets the html know that everything will be in the center */
    justify-content: center;
    align-items: center;
}

/* spaces everything out and center them */
.options{

    font-size: 25px;

    /* the space between element and box */
    padding: 5px;

    /* the space between element and outside element */
    margin: 5px;

    /* Set the element's position to relative, allowing it to be positioned relative to its normal position in the document flow */
    position: relative;

    /* Enable the flexbox layout model on the element, treating its direct children as flex items */
    display: flex;

    /* Arrange the flex items vertically from top to bottom */
    flex-direction: column;

    /* Add a 10px gap (space) between each flex item within the flex container */
    gap: 20px;
}

#gpa, #current-grade, #final-grade{
    border-width: 2px;
    padding: 2px;
    border-radius: 10px;
}

/* move everything away from the header text */
h1{
    margin: 20px 0 40px 0;
}

.gpa-calculator{
    background-color: azure;
    /* make the box around the things */
    width: 330px;
    height: 300px;
    border: 5px solid cadetblue;
    border-radius: 8px;


    /* spaces everything out and center them */

    /* move everything away from the box */
    padding: 15px;

    /* Set the element's position to relative, allowing it to be positioned relative to its normal position in the document flow */
    position: relative;

    /* Enable the flexbox layout model on the element, treating its direct children as flex items */
    display: flex;

    /* Arrange the flex items vertically from top to bottom */
    flex-direction: column;

    /* Add a 10px gap (space) between each flex item within the flex container */
    gap: 20px;
}

.current-grade-calculator{
    background-color: azure;
    /* make the box around the things */
    width: 400px;
    height: 300px;
    border: 5px solid cadetblue;
    border-radius: 8px;


    /* spaces everything out and center them */

    /* move everything away from the box */
    padding: 15px;

    /* Set the element's position to relative, allowing it to be positioned relative to its normal position in the document flow */
    position: relative;

    /* Enable the flexbox layout model on the element, treating its direct children as flex items */
    display: flex;

    /* Arrange the flex items vertically from top to bottom */
    flex-direction: column;

    /* Add a 10px gap (space) between each flex item within the flex container */
    gap: 20px;
}

/* fix and center everything correctly */
.gpa-tab{
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    gap: 5px;
    margin-top: -220px;
}


#add-class-btn{
    display: flex;
    justify-content: center;
    margin-top: 200px;
}

/* these two adding in btn and tab are for centering the add button */
.adding-in-tab{
    display: flex;
    justify-content: center;
}

#add-update-btn, #cancel-btn{
    font-size: 15px;
    align-self: center;
    justify-self: center;
    /* move it down a little */
    margin-top: 20px;
}

#add-update-btn{
    width: 35px;
}

#cancel-btn{
    width: 60px;
}

.close-btn{
    display: flex;
    justify-content: center;
}

#closing-tab-confirm {
    padding: 10px;
    margin: 10px auto;
    border-radius: 15px;
    margin-top: 200px;
}

.yes-or-no-btn{
    display: flex;
    justify-content: center;
    margin-top: 10px;
    gap: 10px;
}

.btn{
    width: 50px;
}

.closing-message{
    text-align: center;
}

.hidden{
    display: none;
}

/* put all in the center */
.gpa-container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 13px;
}

/* 
make sure they are in the center and right position 
and the number next to the text
*/
.gpa-container>div {
    display: flex;
    gap: 2px;
}

.grade-point-input {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.grade-row {
    display: flex;
    align-items: center;
    gap: 10px;
}

.grade-row label {
    width: 30px; /* Adjust as needed */
}

.current-grade-tab {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    /* content is centered vertically */
    height: 100%;
}

#choose-grading-system {
    text-align: center;
    margin-top: -130px;
}

#choose-grading-system button {
    /* to display the button as block element */
    display: block;
    /* create space between the two buttons */
    /* top margin: 10px, left and right margin to auto, 20px for bottom */
    margin: 10px auto 30px;
}

#current-grade-name-input{
    margin-top: -100px;
}
/*
final grade calculator:

    (wanted-grade - (current-grade * (1 - final%))) / final%

    Ex: 
        have a 80 and wants 85, final is 20%

        (85 - (80 * (1 - 0.2))) / 0.2 = 105

*/



// intro text and buttons
const questionText = document.getElementById("question");
const options = document.getElementById("options");

// gpa variables
const gpaBtn = document.getElementById("gpa-btn");
const gpaCalculator = document.querySelector(".gpa-calculator");
const gpaContainer = document.querySelector(".gpa-container");
const gpaForm = document.getElementById("gpa-form");
const gpaTab = document.querySelector(".gpa-tab");

// add class button
const addGpaClassBtn = document.getElementById("add-class-gpa");
const addCurrentGradeClassBtn = document.getElementById("add-class-current-grade");

// current grade variables
const currentGradeBtn = document.getElementById("current-grade-btn");
const currentGradeCalculator = document.querySelector(".current-grade-calculator");
const pointSystemBtn = document.getElementById("point-system-btn");
const currentGradeNameInput = document.getElementById("current-grade-name-input");
const chooseGradingSystem = document.getElementById("choose-grading-system");
const currentGradeText = document.getElementById("current-grade-text");
const pointSystemInput = document.getElementById("point-system-input");

// exit button variables
const cancelBtn = document.getElementById("cancel-btn");
const confirmClose = document.getElementById("closing-tab-confirm");
const noBtn = document.getElementById("no");



gpaBtn.addEventListener("click", () => {
    questionText.classList.toggle("hidden");
    options.classList.toggle("hidden");
    gpaCalculator.classList.toggle("hidden");
    gpaContainer.classList.toggle("hidden");
    addGpaClassBtn.addEventListener("click", () => {
        gpaForm.classList.toggle("hidden");
        addGpaClassBtn.classList.toggle("hidden");
    });
});

cancelBtn.addEventListener("click", () => {
    confirmClose.showModal();
});

noBtn.addEventListener("click", () => {
    confirmClose.close();
});

currentGradeBtn.addEventListener("click", () => {
    questionText.classList.toggle("hidden");
    options.classList.toggle("hidden");
    currentGradeCalculator.classList.toggle("hidden");
    addCurrentGradeClassBtn.addEventListener("click", () => {
        chooseGradingSystem.classList.toggle("hidden");
        addCurrentGradeClassBtn.classList.toggle("hidden");
        currentGradeText.classList.toggle("hidden");
    });
});

pointSystemBtn.addEventListener("click", () => {
    pointSystemInput.classList.toggle("hidden");
    chooseGradingSystem.classList.toggle("hidden");
    currentGradeText.classList.toggle("hidden");
    currentGradeNameInput.classList.toggle("hidden");
});


At first it will with the grade-point-input div and when i try to move it by itself, everything move with it so i took it out and made a div with it by itself, and it still does the same thing for some reason. i also try to move them individuely but that didnt work either

New contributor

Raymond Chen is a new contributor to this site. Take care in asking for clarification, commenting, and answering.
Check out our Code of Conduct.

LEAVE A COMMENT