Countdown Timer Linking Design Parts

Question

I have some HTML and JavaScript, but this error appears:

I'm building a timer. This is my code:

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link href="styles.css" rel="stylesheet">
    <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
    <title>Timer</title>
</head>
<body>
    <div class="timer">
        
    </div>
<script src="appCT.js" type="module"></script>
</body>
</html>

JavaScript File1

export default class Timer {
    constructor(root){
        console.log(root);
        root.innerHTML = Timer.getHTML();

        this.el = {
            minutes: root.querySelector(".timer__part--minutes");
            seconds: root.querySelector(".timer__part--seconds");
            control: root.querySelector(".timer__btn--control");
            reset: root.querySelector(".timer__btn--reset");
        }

        console.log(this.el);
    }

    static getHTML(){
         return `
        <span class="timer__part timer__part--minutes">00</span>
        <span class="timer__part timer__part">:</span>
        <span class="timer__part timer__part--seconds">00</span>
        <button type="button" class="timer__btn timer__btn--control timer__btn--start">
            <span class="material-icons">play_circle_filled</span>
        </button>
        <button type="button" class="timer__btn timer__btn--reset">
            <span class="material-icons">timer</span>
        </button>` 
    }
}

JavaScript File 2

import Timer from "Timer.js";

new Timer{
    document.querySelector(".timer");
}

Css code

body{
    background: #dddd;
    margin: 24px;

}

.timer{
    font-family: sans-serif;
    display: inline-block;
    padding: 24px 32px;
    border-radius: 30px;
    background: white;
}

.timer__part{
    font-size: 40px;
    font-weight: bold;

}

.timer__btn{
    width: 50px;
    height: 50px;
    margin-left: 16px;
    border-radius: 50%;
    border: none;
    background: gray;
}

.timer__btn--control{
    background: steelblue;
}

.timer__btn--reset{
    background: red;
}

The code should be able to display the timer, and each HTML element should be linked with its respective part in the design. I've tried to change the type "attribute" of my script element to text/javascript, but it has not yielded fruits.

Thank you

0x4nt · Answer 1 · 2022-12-02T18:32:30.753

-1

Your browser will not redirect to such an address. 1- I would recommend trying to work with localhost. 2- VSCode Live Server And I found something maybe useful to you.

"Cross origin requests are only supported for HTTP." error when loading a local file

edited Dec 02 '22 at 18:32

answered Dec 02 '22 at 16:58

0x4nt

24
4

Your answer could be improved with additional supporting information. Please [edit] to add further details, such as citations or documentation, so that others can confirm that your answer is correct. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 06 '22 at 03:21

Countdown Timer Linking Design Parts

1 Answers1