Myra Posts - Answer Overflow

Myra

•Created by Myra on 4/6/2025 in #help

Api not fetching data

Hello! I have learnt the concepts of async await and fetch() method in js and I'm trying to practice it through random quote generator but I'm facing some issues Issue: The api is not fetching the data. I have checked the console tab the event listener is working but it gives me errors on fetching the data I have gotten the api url from a github repo provided in the yt description of a video

const quote = document.querySelector(".quote");
const quoteBtn = document.querySelector(".get-quoteBtn");

async function getQuote() {
    console.log("get new quote")
    let response = await fetch("https://api.quotable.io/random");
    let data = await response.json();
    console.log(data);
}

quoteBtn.addEventListener("click",getQuote);

const quote = document.querySelector(".quote");
const quoteBtn = document.querySelector(".get-quoteBtn");

async function getQuote() {
    console.log("get new quote")
    let response = await fetch("https://api.quotable.io/random");
    let data = await response.json();
    console.log(data);
}

quoteBtn.addEventListener("click",getQuote);

10 replies

KPCKevin Powell - Community

•Created by Myra on 4/1/2025 in #front-end

Notes App

Hi there! I'm trying to create a notes app using html, css and JavaScript. For now i have worked with html and css but here are a couple of issues • the tooltip for the plus icon of new notebooks button is not converting into lower case • also i have added the dark theme using the toggle button. For the light theme all the properties are working but when i toggle to dark theme. I have tried to change the colors of some properties but they are not changing. Some colors are changed like for the body bg,aside bg,new note btns bg colors are changed but when i try to change the search container and search field bg color they are not changing. Also when i hover over the new note btn, the moon icon and the plus icon of new notebooks btn their color are not changing I have applied all the colors properties in my code pen their some are working and some are not Here is the link to code pen. https://codepen.io/Myra-Gull/pen/XJWyLXa

18 replies

KPCKevin Powell - Community

•Created by Myra on 3/27/2025 in #front-end

Toggle switch not working

Hello, I'm trying to create a clock with light and dark mode but there is an issue in it light mode is working correctly but when toggle to dark mode the theme is not changing correctly. The body bg color is not changing fully and the clock container also not changing according to theme Here is the code link https://github.com/Myragull/Digital-Clock And preview https://myragull.github.io/Digital-Clock/

49 replies

KPCKevin Powell - Community

•Created by Myra on 3/26/2025 in #front-end

Digital clock

Hello! I'm trying to create a digital clock but there are a few issues in it • the first one is that the seconds kept going from 1 to infinity to stop that i have put a condition to stop the seconds at 60 but after 60 they aren't starting from 1 when the page refreshes than it happens • also the minutes are not updating when 60sec are completing e.g: at 10:28:60 the minutes should be updated to 29 and seconds should start from 1 all this happens when page refreshes

let intervalId = setInterval(() => {
         // console.log(seconds++);
         timePara.innerHTML= `${hours}   :   ${minutes}   :     ${seconds++}   `;
         if (seconds === 61){
                     clearInterval(intervalId);
                 }
     }, 1000);
 }

let intervalId = setInterval(() => {
         // console.log(seconds++);
         timePara.innerHTML= `${hours}   :   ${minutes}   :     ${seconds++}   `;
         if (seconds === 61){
                     clearInterval(intervalId);
                 }
     }, 1000);
 }

here is the link to code https://github.com/Myragull/Digital-Clock and live at https://myragull.github.io/Digital-Clock/

15 replies

KPCKevin Powell - Community

•Created by Myra on 3/24/2025 in #front-end

To-do list

Hi there! I'm trying to create a todolist using js. • I have added the data to local storage • Get the data from local storage and show it on the ui • Now in trying to create a function to delete the data from the ui and from the local storage but it deletes the whole data from local storage

function deleteItem(para,deletebtn){
    para.remove();
    deletebtn.remove();
    localStorage.removeItem("userData");
  }

function deleteItem(para,deletebtn){
    para.remove();
    deletebtn.remove();
    localStorage.removeItem("userData");
  }

• I'd appreciate if you help me to resolve this issue and other tips Github repo: https://github.com/Myragull/Todolist Live at: https://myragull.github.io/Todolist/

19 replies

KPCKevin Powell - Community

•Created by Myra on 1/2/2025 in #front-end

CSS Flexbox: Items Not Taking Full Width After 730px Media Query

Hi! I have an issue with the code that after 730px i want the middle content box to have a max width of 725px and width 100% and i have set the flex items to columns and set their width to 100% so they take the full width so that the pages becomes responsive but they are not taking the full width of their parent so will you people please help me in solving the issue here is the link to the code https://codepen.io/Myra-Gull/pen/JoPrgXB

3 replies

Gaming

Programming