artus Comments - Answer Overflow

artus

Posts Comments

KPCKevin Powell - Community

•Created by artus on 12/5/2023 in #front-end

Javascript Intervals

i have used clearInterval() but placed it in wrong line tysm ❤️

7 replies

KPCKevin Powell - Community

•Created by artus on 12/5/2023 in #front-end

Javascript Intervals

let selectedMineId;
let remainingTime = 5;
let miningIntervals = {};
let remainingTimes = {};

function getFormattedTime(remainingTime) {
    const minutes = Math.floor(remainingTime / 60);
    const seconds = remainingTime % 60;
    const formattedTime = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
    console.log("Getting Formatted Time Works")
    return formattedTime;
}

function useTool(tool) {
    if (miningIntervals[tool.id] > 0) {
        closeItemsWindow();
    } else if (!miningIntervals[tool.id]) {
        closeItemsWindow();
        let usedToolImg = document.querySelector(`#${tool.id} .tool_container img`)
        usedToolImg.classList.add("hidden_info_img");

        let selectedMine = document.querySelector(`#${selectedMineId}`)
        let mineHiddenInfo = selectedMine.querySelector(".hidden_info");
        let mineClaimButton = selectedMine.querySelector(".hidden_claim_button")

        remainingTimes[tool.id] = remainingTime;

        mineHiddenInfo.innerHTML += `
            ${usedToolImg.outerHTML}
            <p id="${tool.id}_remainingTime">${getFormattedTime(remainingTimes[tool.id])}</p>
        `;

        mineHiddenInfo.style.display = "block";

        miningIntervals[tool.id] = setInterval(() => {
            if (remainingTimes[tool.id] > 0) {
                remainingTimes[tool.id] -= 1;
                let updatedTime = getFormattedTime(remainingTimes[tool.id]);
                document.getElementById(`${tool.id}_remainingTime`).innerText = updatedTime;
            } else {
                mineHiddenInfo.innerHTML = '';
                mineHiddenInfo.style.display = "none";
                mineClaimButton.style.display = "block";

                delete miningIntervals[tool.id];
                delete remainingTimes[tool.id];
            }
        }, 1000);
    }
}

let selectedMineId;
let remainingTime = 5;
let miningIntervals = {};
let remainingTimes = {};

function getFormattedTime(remainingTime) {
    const minutes = Math.floor(remainingTime / 60);
    const seconds = remainingTime % 60;
    const formattedTime = `${minutes}:${seconds < 10 ? '0' : ''}${seconds}`;
    console.log("Getting Formatted Time Works")
    return formattedTime;
}

function useTool(tool) {
    if (miningIntervals[tool.id] > 0) {
        closeItemsWindow();
    } else if (!miningIntervals[tool.id]) {
        closeItemsWindow();
        let usedToolImg = document.querySelector(`#${tool.id} .tool_container img`)
        usedToolImg.classList.add("hidden_info_img");

        let selectedMine = document.querySelector(`#${selectedMineId}`)
        let mineHiddenInfo = selectedMine.querySelector(".hidden_info");
        let mineClaimButton = selectedMine.querySelector(".hidden_claim_button")

        remainingTimes[tool.id] = remainingTime;

        mineHiddenInfo.innerHTML += `
            ${usedToolImg.outerHTML}
            <p id="${tool.id}_remainingTime">${getFormattedTime(remainingTimes[tool.id])}</p>
        `;

        mineHiddenInfo.style.display = "block";

        miningIntervals[tool.id] = setInterval(() => {
            if (remainingTimes[tool.id] > 0) {
                remainingTimes[tool.id] -= 1;
                let updatedTime = getFormattedTime(remainingTimes[tool.id]);
                document.getElementById(`${tool.id}_remainingTime`).innerText = updatedTime;
            } else {
                mineHiddenInfo.innerHTML = '';
                mineHiddenInfo.style.display = "none";
                mineClaimButton.style.display = "block";

                delete miningIntervals[tool.id];
                delete remainingTimes[tool.id];
            }
        }, 1000);
    }
}

7 replies

KPCKevin Powell - Community

•Created by artus on 6/14/2023 in #front-end

Problem at replacing Node elements (input to text)

HTML:

<div class="board" id="board-{{ board.id }}">
  <div class="top">
    <h2 class="board-title">{{ board.title }}</h2>
    <div class="buttons">
      <button class="board-managment-button border-edit size-board margin-r-10", onclick="renameBoard('board-{{ board.id }}')">
        <img class="fill-edit" src="{{ url_for('static', filename='images/edit.svg') }}" alt="Remove Button">
        <span class="tooltip background-edit"> RENAME </span>
      </button>
      <button class="board-managment-button border-delete size-board margin-r-15", onclick="removeBoard('{{ board.title }}')">
        <img src="{{ url_for('static', filename='images/delete.svg') }}" alt="Remove Button">
        <span class="tooltip background-delete"> DELETE </span>
    </button>
  </div>
</div>

<div class="board" id="board-{{ board.id }}">
  <div class="top">
    <h2 class="board-title">{{ board.title }}</h2>
    <div class="buttons">
      <button class="board-managment-button border-edit size-board margin-r-10", onclick="renameBoard('board-{{ board.id }}')">
        <img class="fill-edit" src="{{ url_for('static', filename='images/edit.svg') }}" alt="Remove Button">
        <span class="tooltip background-edit"> RENAME </span>
      </button>
      <button class="board-managment-button border-delete size-board margin-r-15", onclick="removeBoard('{{ board.title }}')">
        <img src="{{ url_for('static', filename='images/delete.svg') }}" alt="Remove Button">
        <span class="tooltip background-delete"> DELETE </span>
    </button>
  </div>
</div>

Javascript:

function renameBoard(boardID) {
  let board = document.getElementById(boardID);
  console.log(board)
  let boardTitle = board.querySelector(".board-title");
  console.log(boardTitle)
  let buttonsSection = board.querySelector(".buttons");
  
  toggleButtons(buttonsSection, false);
  
  let input = document.createElement("input");
  input.classList.add("edit-title-input");
  input.setAttribute("placeholder", "Enter board name...");
  input.type = "text";
  input.value = boardTitle;
  
  let saveChanges = function() {
    if (input.value.trim() !== "") {
      boardTitle.textContent = input.value;
    };
    board.replaceChild(boardTitle.textContent, input);
  
    toggleButtons(buttonsSection, true);
  };
  input.addEventListener("blur", saveChanges);
  input.addEventListener("keydown", function(event) {
    if (event.key == "Enter") {
      saveChanges();
    };
  });
  
  board.replaceChild(input, boardTitle);
  input.focus();
};

function renameBoard(boardID) {
  let board = document.getElementById(boardID);
  console.log(board)
  let boardTitle = board.querySelector(".board-title");
  console.log(boardTitle)
  let buttonsSection = board.querySelector(".buttons");
  
  toggleButtons(buttonsSection, false);
  
  let input = document.createElement("input");
  input.classList.add("edit-title-input");
  input.setAttribute("placeholder", "Enter board name...");
  input.type = "text";
  input.value = boardTitle;
  
  let saveChanges = function() {
    if (input.value.trim() !== "") {
      boardTitle.textContent = input.value;
    };
    board.replaceChild(boardTitle.textContent, input);
  
    toggleButtons(buttonsSection, true);
  };
  input.addEventListener("blur", saveChanges);
  input.addEventListener("keydown", function(event) {
    if (event.key == "Enter") {
      saveChanges();
    };
  });
  
  board.replaceChild(input, boardTitle);
  input.focus();
};

2 replies

KPCKevin Powell - Community

•Created by artus on 6/14/2023 in #front-end

Auto disabled button when added by js

i found the prob, its in my other function to rename task:

        function renameTask(element, cardName) {
            let cardTitle = cardName.parentNode;
            let input = document.createElement('input');
            input.classList.add('edit-title-input');
            input.setAttribute('placeholder', 'Enter task name...');
            input.type = 'text';
            input.value = cardName.textContent;

            var saveChanges = function() {
                if (input.value.trim() !== '') {
                    cardName.textContent = input.value;
                }
                cardTitle.replaceChild(cardName, input);
                element.closest('.item').setAttribute('draggable', 'true');
            };

            input.addEventListener('blur', saveChanges);
            input.addEventListener('keydown', function(event) {
                if (event.key === 'Enter') {
                    saveChanges();
                }
            });

            let buttons = element.querySelectorAll('.buttons button');
            buttons.forEach(function(button) {
                button.setAttribute('disabled', 'true');
            });

            cardTitle.replaceChild(input, cardName);
            input.focus();
            element.closest('.item').setAttribute('draggable', 'false');
        };

        function renameTask(element, cardName) {
            let cardTitle = cardName.parentNode;
            let input = document.createElement('input');
            input.classList.add('edit-title-input');
            input.setAttribute('placeholder', 'Enter task name...');
            input.type = 'text';
            input.value = cardName.textContent;

            var saveChanges = function() {
                if (input.value.trim() !== '') {
                    cardName.textContent = input.value;
                }
                cardTitle.replaceChild(cardName, input);
                element.closest('.item').setAttribute('draggable', 'true');
            };

            input.addEventListener('blur', saveChanges);
            input.addEventListener('keydown', function(event) {
                if (event.key === 'Enter') {
                    saveChanges();
                }
            });

            let buttons = element.querySelectorAll('.buttons button');
            buttons.forEach(function(button) {
                button.setAttribute('disabled', 'true');
            });

            cardTitle.replaceChild(input, cardName);
            input.focus();
            element.closest('.item').setAttribute('draggable', 'false');
        };

3 replies

KPCKevin Powell - Community

•Created by artus on 6/11/2023 in #ui-ux

Make page looks clean and more "intuitive"

10 replies

KPCKevin Powell - Community

•Created by artus on 6/11/2023 in #ui-ux

Make page looks clean and more "intuitive"

done

10 replies

KPCKevin Powell - Community

•Created by artus on 6/11/2023 in #ui-ux

Make page looks clean and more "intuitive"

any suggestions about button coulor?

10 replies

KPCKevin Powell - Community

•Created by artus on 6/11/2023 in #front-end

Edit input field on :focus

I'll start using it someday 😆

74 replies

KPCKevin Powell - Community

•Created by artus on 6/11/2023 in #ui-ux

Make page looks clean and more "intuitive"

10 replies

KPCKevin Powell - Community

•Created by artus on 6/11/2023 in #ui-ux

Make page looks clean and more "intuitive"

its on middle but under "Card2" is another div with disaply: none and it make it looks like its not centered ill add margin-left to cards so they will be equally with title

10 replies

KPCKevin Powell - Community

•Created by artus on 6/11/2023 in #front-end

Edit input field on :focus

ik i have to much divs but everytime im making new project i forgot about that and they just stay forever

74 replies

KPCKevin Powell - Community

•Created by artus on 6/11/2023 in #front-end

Adding items to div with title that user can change anytime by clicking on it

sorry that i didnt post solution before

20 replies

KPCKevin Powell - Community