Looking for a way to disable buttons (answers) in a quiz game after an answer is chosen

Solution for Looking for a way to disable buttons (answers) in a quiz game after an answer is chosen
is Given Below:

I am looking for a way to disable buttons (answers) in a quiz game after an answer is chosen.
I am also looking for a way to disable the counter from being incremented after an answer is chosen.
One more problem is I tried linking fontawesome.com and other sites to use a simple icon and I only get empty squares for some reason.

I have no idea why I am unable to use disable property !! HELP U.U

<!DOCTYPE html>
<html lang="en">

    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="style.css">
    <!-- <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous"> -->
    <!-- you can write script tag like this here -->
    <!-- <script defer src="srcript.js></script>"  (DEFER makes it load after the body) -->
    <script src="https://kit.fontawesome.com/1a0903df7b.js" crossorigin="anonymous"></script>

    <!-- container which wraps all content -->
    <div class="container">
        <i class="fas fa-crown"></i>
        <!-- Container to wrap the questions and answers -->
        <!-- class hide to which will be hidden by default-->
        <div id="question-Container" class="hide">
            <!-- div for the Question -->
            <div id="question">Question</div>
            <!-- div block for label and counter p -->
            <div id="block" class="blocks">
                <p id="correctAnswers">Answers: </p> 
                <p id="correctAnswer">0</p>
            <!-- <p id="wrongAnswer">0</p> -->
            <!-- Div for Answers -->
            <div id="answer-buttons" class="btn-Grid">
                <button class="btn">Answer 1</button> <!-- "btn correct" -->
                <button class="btn">Answer 2</button> <!-- "btn wrong"-->
                <button class="btn">Answer 3</button>
                <button class="btn">Answer 4</button>
        <!-- Controls div for start and end -->
        <div class="controls">
            <!-- Shift+Alt+ DownArrow key || Up Arrow key to copy lines of code -->
            <button id="start-btn" class="start-btn btn">Start The Quiz</button>
            <!-- Hide property to keep it hidden -->
            <button id="next-btn" class="next-btn btn hide">Next Question</button>
    <script src="script.js"></script>
    <!--must call this here or with defer up-->
<!-- https://ogkcreative.com/development/8-html-css-tips-for-organizing-code-in-your-web-project/ -->

/* Here I will use border box to create my layout for universal use */
/* learned it from here : https://css-tricks.com/box-sizing/ */
*, *::before, *::after{
    box-sizing: border-box;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 1.5rem;
    --hue-neutral:200;  /*Blue  default*/
    --hue-wrong:0;      /*Red wrong answer*/
    --hue-correct:145;   /*Green correct answer*/

    /* Hue  https://www.w3schools.com/colors/colors_hsl.asp
Hue is a degree on the color wheel from 0 to 360. 0 is red, 120 is green, 240 is blue.
Saturation is a percentage value; 0% means a shade of gray and 100% is the full color.
Lightness is also a percentage; 0% is black, 100% is white.
correct syntax hsl(h, s%, l%)

more on hue usage https://stackoverflow.com/questions/65478345/css-variable-calculation-of-hsl-values
we use hue to have more control over all color attributes separately

 how to declare global CSS variables here: https://developer.mozilla.org/en-US/docs/Web/CSS/:root         helped by Teacher Assistant Tariq
    --hue: var(--hue-neutral);
    /* to move everything to the side */
    padding: 0;
    /* to move everything to the side */
    margin: 0;
    display: flex; /* to make it in center of screen */
    width: 100vw;  /*100vw and 100 vh makes it so you take 100% of the view of the width and height */
    height: 100vh;
    justify-content: center; /* to make it in center of screen */
    align-items: center; /* to make it in center of screen */
    background-color: hsl(var(--hue), 100%, 20%);

    --hue: var(--hue-neutral);
/*no need to add class neutral since its auto blue default*/

    width: 800px;
    max-width: 80%; /* we add this to not allow content to overflow*/
    /* height:800px ; */
    /* max-height: 80%; */
    background-color: white;
    border-radius: 10px;
    padding: 10px;
    box-shadow: 0 0 10px 4px ;  /*x offset, y offset, blur, spread how far out it goes*/
    display: inline-flex;
     /* grid-template-rows: repeat(2, auto) ; */    
    gap: 10px;
    margin: 20px 0; 
.btn-Grid {
    display: grid; /* displays questions undernearth each other in columns*/
    grid-template-columns:repeat(2, auto); /*adds two cloumns for the questions*/
    gap: 10px; /*makes gap between questions*/
    margin: 20px 0; /* we add 20px margin top and bottom 0 left and right*/


.btn { /*generic will be applied to all buttons*/
--hue: var(--hue-neutral); /*assining var hue using it here*/
border: 1px solid hsl(var(--hue), 100%, 50%); /*adding border with solid attribute and color and 1px*/
background-color:hsl(var(--hue),100%,50%); /* changing bg color*/
border-radius: 5px; /*rounder radius*/
padding: 5px 10px; /*padding updown 5px leftright 10px*/
color: white;
outline: none;

    border-color: black; /*just change color of border to blck on mouse hover*/
    transition: 150ms;

.btn.correct {                         /*green bg and black color text*/
.btn.wrong{                            /*red bg*/

.start-btn{                            /*some css for start btn*/
font-size: 1.5rem;
font-weight: bold;
padding: 10px 30px;

.next-btn{                              /*some css for next btn*/
    font-size: 1.5rem;
    font-weight: bold;
    padding: 10px 30px;
.controls {   /* corrects start next buttons to be in center*/
    display: flex;
    justify-content: center;
    align-items: center;


.hide {  /*hide class will hide everything until we show it with js after we click start*/
display: none;
/* Change colors and layout to be nicer!!!!!!!! important*/
/*to do add label css for the score counter*/
/*to do add label css for the timer counter " assuming time left to answer Q is 30 seconds" */
/*to do resize content */
/*add icons*/
/*add sound on correct / on wrong / on finish*/
/*add meaningfull entrypage*/

// I need to make functions for starting game that will display first question and its answers, get next question which displays
// next question and its answers, function for my selected answer
const startButton = document.getElementById("start-btn") //links Variable start button to start-btn button in html
const nextButton = document.getElementById("next-btn") //links Variable start button to start-btn button in html
const questionElementsContainer = document.getElementById("question-Container")  //links this variable to the dev container id which displays question and its answers
const questionElement = document.getElementById("question")
const answerButtonsElement = document.getElementById("answer-buttons")
var cAnswerElement = document.getElementById("correctAnswer")
let wAnswerElement = document.getElementById("worrectAnswer")
let shuffle, currentQuestionsIndex; //undefined 
var cCounter;

startButton.addEventListener("click", startGame)

nextButton.addEventListener("click", () => {
    // cAnswerElement++
    // document.getElementById("btn").disabled = false;

function startGame() {
    cCounter = 0

    startButton.classList.add("hide") // hides the button after clicking it
    shuffle = questions.sort(() => Math.random() - 0.5)
    currentQuestionsIndex = 0;
    questionElementsContainer.classList.remove("hide") //unhides question and answers
    setNextQuestion();  // here it will auto put the first question after it started
} //end of startGame function

function setNextQuestion() {
    // setStatusClass(document.body, neutral)

function showQuestion(question) {

    questionElement.innerText = question.question

    question.answers.forEach(answer => {
        const button = document.createElement("button")
        button.innerText = answer.text

        if (answer.correct) { //you need to enter correct data
        //   if(answer.correct === true){ cCounter++}
            button.dataset.correct = answer.correct
            // cCounter++
        //  cAnswerElement.innerText= cCounter;
        button.addEventListener('click', selectAnswer)



function resetState() {
    // setStatusClass(document.body, neutral)
    while (answerButtonsElement.firstChild) {

function selectAnswer(e) {
    const selectedButton = e.target
    const correct = selectedButton.dataset.correct
    setStatusClass(document.body, correct)

    //stack overflow help :D .... I dont understand it fully
    Array.from(answerButtonsElement.children).forEach(button => {
        setStatusClass(button, button.dataset.correct)
        //add two buttons with the a appended value from the array
    if (shuffle.length > currentQuestionsIndex + 1) {
        // cAnswerElement.innerText=cAnswerElementt;
        // wAnswerElement.innerText=wAnswerElementt;
    } else {
        startButton.innerText = "Restart The Quiz"


function setStatusClass(element, correct) {
    if (correct) {
            cCounter= cCounter+1;
            cAnswerElement.innerText= cCounter;
            //  document.getElementById("btn").disabled = true;          /////////////////////////////////////////////////
        // document.getElementById("btn").disabled = true;
    else {
        cCounter= cCounter-1;
        // document.getElementById("btn").disabled = true;
        // document.getElementById("btn").disabled = true;

function clearStatusClass(element) {

const questions = [

        question: "What is my name?",
        answers: [
            { text: "Banana", notcorrect: false },
            { text: "Adam", correct: true }

        question: "What is 2+2?",
        answers: [
            { text: "5", notcorrect: false },
            { text: "4", correct: true }

        question: "What is the best programming langauge?",
        answers: [
            { text: "JS", notcorrect: false },
            { text: "Java", correct: true }

        question: "How to copy a line of code in JS?",
        answers: [
            { text: "Ctrl+Alt+Delete", notcorrect: false },
            { text: "Alt + Shift + ArrowKeys", correct: true }

        question: "Why is CSS so annoying?",
        answers: [
            { text: "Heek", notcorrect: false },
            { text: "It is not!", correct: true }

        question: "What is my cats name ?",
        answers: [
            { text: "Kitten", notcorrect: false },
            { text: "Jack", correct: true }

// add counter for correct answer
// add counter for wrong answer
// add result
// display above in a nice page where you enter your name
// save in local storage

  1. All the lines that set the disabled property are commented out with “//”.

  2. All the lines that set the disabled property try to load element “btn”, but the ID string needs to match the actual element you want to disable, e.g. “start-btn”.

  3. To change behavior such as disabling a counter, wrap the code that increments the counter in an if (ShouldCount) { [code that increments here] } condition. Have ShouldCount start true and set it to false when something happens that you want to stop the counter, and true when something happens that you want to restart the counter.

  4. I don’t know what you’re trying to do with FontAwesome, but you should ask individual questions, not all your questions in one question.