Outreachy-Wikimedia-Task-1-JavaScript-Script/index.html at main · Shehrbaano-Ali/Outreachy-Wikimedia-Task-1-JavaScript-Script · 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
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Shehrbano Ali - Task 1 Submission</title>
    <style>
        body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; line-height: 1.6; color: #333; max-width: 800px; margin: 0 auto; padding: 20px; }
        h1 { color: #36c; border-bottom: 2px solid #36c; padding-bottom: 10px; font-size: 2.5em;}
        h2 { color: #444; margin-top: 30px; border-left: 5px solid #36c; padding-left: 15px; }
        .block { background-color: gainsboro; padding: 1.5em; border-radius: 8px; white-space: pre-wrap; font-family: monospace; font-size: 0.9em; overflow-x: auto; margin-bottom: 20px; min-height: 50px; }
        #results { background-color: #f0f0f0; border-left: 5px solid #28a745; font-family: sans-serif; }
        #prototype-section { padding: 25px; background-color: #f8f9fa; border: 2px solid #36c; border-radius: 8px; margin-top: 40px; }
        #addBtn { padding: 10px 20px; background-color: #36c; color: white; border: none; border-radius: 4px; cursor: pointer; font-weight: bold; }
        #userInput { width: 60%; padding: 10px; border: 1px solid #ccc; border-radius: 4px; }
        ul { list-style-type: square; }
        .project-context {
            background-color: #f0f7ff;
            border-left: 5px solid rgb(7, 7, 7);
            padding: 20px;
            margin: 30px 0;
            font-size: 1em;
            line-height: 1.5;
            border-radius: 0 8px 8px 0;
        }
    </style>
</head>
<body>

    <h1>Shehrbano Ali - Task 1 [ Wikimedia 2026 ]</h1>

    <h2>1. INPUT (The JSON Dataset)</h2>
    <p>This is the raw data provided for the task:</p>
    <div id="display-input" class="block"></div>

    <h2>2. MY CODE (JavaScript Logic)</h2>

    <div style="background-color: #eef9ff; border-left: 5px solid #36c; padding: 15px; margin-bottom: 20px; font-size: 0.95em;">
    <strong>The Bug:</strong>
    While testing the <code>new Date(article.creation_date)</code> logic, I identified the timezone glitch by comparing the Input HTML data with the Task Description example. In the provided JSON data, André Baniwa's creation date is September 13, 2021. However, the example output in the task instructions(Step 5B) shows it as September 12, 2021.
    <br><br>
    <strong>The Reason:</strong> This could happen for some users due to JavaScript's default behavior of treating <code>YYYY-MM-DD</code> as UTC.
    <br><br>
    <strong>The Fix:</strong> I fixed this by appending <code>T00:00:00</code> to the date string, ensuring the Date object correctly represents the local calendar day across all timezones.
    </div>

    <p>Below is the logic I wrote to process the data, to handle timezones, and format dates:</p>

    <div id="display-logic" class="block"></div>

    <h2>3. MY RESULTS</h2>
    <p>This is the final human readable output generated by my script:</p>
    <div id="results" class="block"></div>

    <p style="font-size: 0.9em; color: #28a745; font-weight: bold; margin-top: -10px;">
    ✓ Dates are verified for timezone accuracy using local ISO formatting.
    </p>

    <h2>4. HTML STRUCTURE</h2>
    <p>The skeleton of this page used to organize the information:</p>
    <div id="display-html" class="block"></div>

    <h2 style="color: rgb(1, 1, 1); margin-top: 50px;">Beyond the Task: Project Integration Preview</h2>
    <p style="background-color: #f0f7ff; padding: 15px; border-radius: 8px; border-left: 5px solid #36c; font-size: 0.95em;">
    <strong>Ques: Why this prototype is here?</strong> <br>
    <strong>Ans:</strong> While Task 1 focuses on basic data manipulation, the following prototype demonstrates how I apply those same JavaScript principles. Specifically, <strong>String Normalization</strong> and <strong>Data Validation</strong> to solve a real world problem from the main project’s roadmap, i.e: <br>
    <em><a href="https://meta.wikimedia.org/wiki/Lista_de_desejos_tecnol%C3%B3gicos_da_lusofonia/2025/Propostas/Verificar_automaticamente_uma_refer%C3%AAncia_duplicada" target="_blank" style="color: #36c; text-decoration: none; font-weight: bold;">Wishlist Proposal #3 (Duplicate Reference Detection)</a></em>
    </p>


    <div id="prototype-section">
        <h2 style="border: none; padding: 0; margin-top: 0;">5. PROTOTYPE: Wiki Reference Guard (Wish #3)</h2>
        <p><strong>Goal:</strong> Prevent duplicate references in the Visual Editor via normalization.</p>
        <div style="margin-bottom: 15px;">
            <input type="text" id="userInput" placeholder="Paste a URL or ISBN here...">
            <button id="addBtn">Add to Article</button>
        </div>
        <div style="background: white; padding: 15px; border: 1px solid #ddd; border-radius: 4px;">
            <strong>Current Article References:</strong>
            <ul id="activeRefs" style="margin-top: 10px; color: #555;"></ul>
        </div>
    </div>

    <script id="main_script">
        // --- DATASET ---
        const data = [
            {"page_id": 6682420, "creation_date": "2021-09-13", "title": "André Baniwa"},
            {"page_id": 4246775, "creation_date": "2013-12-10", "title": "Benki Piyãko"},
            {"page_id": 5882073, "creation_date": "2018-12-03", "title": "Célia Xakriabá"},
            {"page_id": 6977673, "creation_date": "2022-10-05", "title": "Chirley Pankará"},
            {"page_id": 7069044, "creation_date": "2023-02-16", "title": "Cristine Takuá"},
            {"page_id": 2119511, "creation_date": "2009-01-28", "title": "Eliane Potiguara"},
            {"page_id": 6714407, "creation_date": "2021-10-09", "title": "Jaider Esbell"},
            {"page_id": 6977117, "creation_date": "2022-10-04", "title": "Jerônimo Rodrigues"},
            {"page_id": 6935831, "creation_date": "2022-08-02", "title": "Nanblá Gakran"},
            {"page_id": 4908665, "creation_date": "2015-11-13", "title": "Sônia Guajajara"},
            {"page_id": 5886895, "creation_date": "2018-12-12", "title": "Vãngri Kaingáng"},
            {"page_id": 6549130, "creation_date": "2021-04-10", "title": "Zezico Guajajara"},
        ];

        // --- TASK 1 LOGIC ---
        const resultsBox = document.getElementById('results');
        data.forEach(article => {
            // BUG WAS HERE: Using just creation_date caused a UTC shift.
            // FIX: Appending T00:00:00 ensures the date stays on the correct local day.
            const dateObj = new Date(article.creation_date + "T00:00:00");
            // I am formatting the date to a human friendly Month Day, Year
            const options = { month: 'long', day: 'numeric', year: 'numeric' };
            const formattedDate = dateObj.toLocaleDateString('en-US', options);
            // Now I am assembling the sentence into the required template
            const sentence = `Article "${article.title}" (Page ID ${article.page_id}) was created at ${formattedDate}.`;
            // Then I am pushing the result to the UI
            const p = document.createElement('p');
            p.textContent = sentence;
            resultsBox.appendChild(p);
        });

        // --- PROTOTYPE LOGIC ---
        let referenceArchive = [];
        document.addEventListener('click', function(e) {
            if(e.target && e.target.id == 'addBtn') {
                const input = document.getElementById('userInput');
                const val = input.value.trim();
                if (!val) return;

                // I am applying String Normalization logic to handle duplicate detection
                const normalized = val.toLowerCase().replace('https://', '').replace('http://', '').replace('www.', '').split('/')[0].replace(/-/g, '');

                if (referenceArchive.includes(normalized)) {
                    // The confirm() will create the "OK" and "Cancel" buttons automatically
                    const reuse = confirm(`🚨 DUPLICATE DETECTED!\n\nThe reference "${val}" already exists.\n\nWould you like to REUSE the existing citation?`);

                    // If the user clicks "OK" (True), we add it to the list
                    if (reuse) {
                        const li = document.createElement('li');
                        li.innerHTML = `<em>(Reused)</em> ${val}`;
                        document.getElementById('activeRefs').appendChild(li);
                    }
                } else {
                    // If it's a brand new reference, we just add it normally
                    referenceArchive.push(normalized);
                    const li = document.createElement('li');
                    li.textContent = val;
                    document.getElementById('activeRefs').appendChild(li);
                }
                input.value = '';
            }
        });
    </script>

    <script>
        // I am using window.onload to ensure the page is fully ready before filling the boxes.
        window.onload = function() {
            const scriptContent = document.getElementById("main_script").text;

            // 1. I am filling the INPUT box by searching for the "const data" array.
            const dataStart = scriptContent.indexOf("const data");
            const dataEnd = scriptContent.indexOf("];", dataStart) + 2;
            if (dataStart !== -1) {
                document.getElementById("display-input").innerText = scriptContent.substring(dataStart, dataEnd);
            }

            // 2. I am filling the MY CODE box by searching for my logic steps.
            const logicStart = scriptContent.indexOf("// --- TASK 1 LOGIC ---");
            if (logicStart !== -1) {
                document.getElementById("display-logic").innerText = scriptContent.substring(logicStart);
            }

            // 4. I am filling the HTML STRUCTURE box using a safe string format.
            // Here I am breaking up the tags like "<" + "body" so the browser doesn't get confused.
            const htmlText = "<" + "body>\n" +
"  <h1>Shehrbano Ali - Task 1 [ Wikimedia 2026 ]-</h1>\n" +
"  <div id=\"display-input\"></div>\n" +
"  <div id=\"display-logic\"></div>\n" +
"  <div id=\"results\"></div>\n" +
"  <div id=\"display-html\"></div>\n" +
"  <div id=\"prototype-section\"></div>\n" +
"<" + "/body>";
            document.getElementById("display-html").innerText = htmlText;
        };
    </script>
</body>
</html>