QuoteTab/index.js at main · OpenSourceSimon/QuoteTab · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
(function () {
    let dom = document.getElementById("bgimg");
    dom.style.background = "linear-gradient(220.55deg, #5D85A6 0%, #0E2C5E 100%)";
    dom.style.backgroundRepeat = "no-repeat";
    dom.style.backgroundSize = "cover";
    fetchImage();

    function fetchImage() {
        fetch("https://source.unsplash.com/3840x2160/?nature")
            .then((resp) => {
                return resp.url;
            })
            .then((imagelists) => {
                dom.style.backgroundImage = `url(${imagelists})`;
            })
    }
})();
(function () {
    function checkTime(i) {
        return i < 10 ? "0" + i : i;
    }

    function startTime() {
        const today = new Date(),
            h = checkTime(today.getHours()),
            m = checkTime(today.getMinutes()),
            s = checkTime(today.getSeconds()); // Not used, but can be used to show seconds. TODO : Add seconds to the clock as an setting.
        document.getElementById("time").innerHTML = h + ":" + m;
        setTimeout(function () {
            startTime();
        }, 1000);
    }
    startTime();
})();

class Init {
    constructor() {
        this.dateDetails = null;
    }
}

class TabAction extends Init {
    constructor(props) {
        super(props);
    }

    setDateDetails() {
        this.dateDetails = getdateDetails();
    }
}

let tab = new TabAction();
getQuote();
tab.setDateDetails();
insertDom();

function insertDom() {
    document.getElementById(
        "date"
    ).innerHTML = `${tab.dateDetails.day}, ${tab.dateDetails.month} ${tab.dateDetails.date}`;
}

function getQuote() {
    $.ajax({
        url: "https://api.quotable.io/random",
        dataType: "json",
        timeout: 1000,
        success: function (data) {
            let template =
                '<span style="font-size: 3vh;padding: 8px;;text-shadow: 2px 2px 4px #000000; font-weight: normal"><strong style="font-style: italic;font-size: 3vh; font-weight: normal ;text-shadow: 0 0 2px gray;">"QUOTE"</strong><a target="_blank" rel="noopenner" style="color:white;text-decoration: none;">- AUTHOR</a><span></span></span>';
            const quote = `${data.content}`;
            const author = `${data.author}`;
            template = template.replace("QUOTE", quote);
            template = template.replace("AUTHOR", author);
            $("#quote").html(template);
        },
        error: function (data) {
            let template =
                '<span style="font-size: 2vh;padding: 8px;;text-shadow: 2px 2px 4px #000000;"><strong style="font-style: italic;font-size: 2vh;text-shadow: 0 0 2px gray;">"QUOTE"</strong><a target="_blank" rel="noopenner" style="color:white;text-decoration: none;">- AUTHOR</a><span></span></span>';
            const quote = `Error while fetching quote`;
            const author = `OpenSourceSimon`;
            template = template.replace("QUOTE", quote);
            template = template.replace("AUTHOR", author);
            $("#quote").html(template);
        }
    });
}

function getdateDetails() {
    const today = new Date();
    const day = today.getDay();
    const dd = today.getDate();
    const mm = today.getMonth();
    const yyyy = today.getFullYear();
    const dL = [
        "Sunday",
        "Monday",
        "Tuesday",
        "Wednesday",
        "Thursday",
        "Friday",
        "Saturday",
    ];
    const mL = [
        "January",
        "February",
        "March",
        "April",
        "May",
        "June",
        "July",
        "August",
        "September",
        "October",
        "November",
        "December",
    ];
    return {
        day: dL[day],
        month: mL[mm],
        date: dd,
        year: yyyy,
    };
}

function timeTo12HrFormat(time) {
    let time_part_array = time.split(":");
    let ampm = "AM";
    if (time_part_array[0] >= 12) {
        ampm = "PM";
    }
    if (time_part_array[0] > 12) {
        time_part_array[0] = time_part_array[0] - 12;
    }
    return `${time_part_array[0]}:${time_part_array[1]} <span class="am_pm">${ampm}<span>`;
}