צור דף אינטרנט מבוסס html css וjs שפונה ללינק הזה https://www.kore.co.il/redAlert.json כל 2 שניות, במידה והתוכן שמופיע בקובץ json הוא "null" תופיעה ההודעה "אין התרעות" במידה ומופיע תוכן בפורמט הזה (דוגמא בלבד): " { "id": "133282921220000000", "cat": "1", "title": "ירי רקטות וטילים", "data": [ "נתיב העשרה" ], "desc": "היכנסו למרחב המוגן ושהו בו 10 דקות" } תציג את התוכן בצורה מעוצבת ויפה בדף האינטרנט למשך דקה "
cssCopy code h1 {
text-align: center;
}
.alert {
border: 1px solid #ccc;
border-radius: 5px;
box-shadow: 0 0 5px #ccc;
margin: 20px auto;
max-width: 600px;
padding: 20px;
}
.alert h2 {
margin: 0;
font-size: 24px;
font-weight: bold;
}
.alert p {
margin: 10px 0;
font-size: 18px;
line-height: 1.5;
}
</style>
</head>
<body>
<h1>התרעות אזעקה</h1>
<div id="alert-container"></div>phpCopy code<script>
function getAlerts() {
fetch('https://www.kore.co.il/redAlert.json')
.then(response => response.json())
.then(data => {
if (data === null) {
document.getElementById('alert-container').innerHTML = '<p>אין התרעות</p>';
} else {
const alertContainer = document.getElementById('alert-container');
const alert = document.createElement('div');
alert.classList.add('alert');
const title = document.createElement('h2');
title.innerText = data.title;
alert.appendChild(title);
const dataLine = document.createElement('p');
dataLine.innerText = data.data.join(', ');
alert.appendChild(dataLine);
const desc = document.createElement('p');
desc.innerText = data.desc;
alert.appendChild(desc);
alertContainer.appendChild(alert);
setTimeout(() => {
alertContainer.removeChild(alert);
}, 60000);
}
})
.catch(error => console.error(error));
}
getAlerts();
setInterval(getAlerts, 2000);
</script>
</body>
</html>מעולה, יש לי מספר תיקונים ושינויים בקוד: 1. אני רוצה שתציין ליד המלבן שבו מופיעה ההתרעה את התאריך והשעה המדויקים. 2. אני רוצה שהמלבן והטקסט של ההתרעה יהיו בצבע אדום 3. במידה והתוכן של הJSON לא השתנה לתוכן התרעה חדשה, אל תוסיף מלבן נוסף עם אותו תוכן. 4. לאחר שעברה דקה מהרגע שההתרעה נוספה לדף, שנה את הצבע של המלבן לבהיר וחיוור יותר בכדי שיהיה סימן היכר שההתרעה לא עדכנית. תקן את הקוד שכתבת לעיל עם השיפורים והתיקונים כפי שאני רוצה, וכתוב את הקוד כולו כמקשה אחת שאפשר להכניס לקובץ בסיומת html
בכיף, הנה הקוד עם השיפורים והתיקונים המבוקשים:
htmlCopy code<!DOCTYPE html>
<html>
<head>
<title>התרעות אזעקה</title>
<meta charset="UTF-8">
<style>
#alert-box {
background-color: #FF6666;
color: white;
padding: 10px;
margin-bottom: 10px;
border-radius: 5px;
}
#alert-time {
font-size: 14px;
font-weight: bold;
margin-bottom: 5px;
}
#alert-title {
font-size: 18px;
font-weight: bold;
margin-bottom: 5px;
}
#alert-locations {
font-size: 16px;
margin-bottom: 10px;
}
#no-alert {
font-size: 18px;
font-weight: bold;
color: red;
}
.old-alert {
background-color: #FFE6E6;
color: #FF6666;
}
</style>
</head>
<body>
<div id="alert-container"></div>
<script>
function fetchAlert() {
fetch('https://www.kore.co.il/redAlert.json')
.then(function(response) {
return response.json();
})
.then(function(data) {
if (data === null) {
// If there's no new alert, show message and return
document.getElementById('alert-container').innerHTML = '<div id="no-alert">אין התרעות</div>';
return;
}
var alertTime = new Date(parseInt(data.id.substring(0, 12), 10));
var now = new Date();
var minutesAgo = Math.floor((now - alertTime) / 1000 / 60);
if (minutesAgo > 1) {
// If the alert is more than a minute old, mark it as old and return
document.getElementById('alert-box').className = 'old-alert';
return;
}
var alertBox = '<div id="alert-box">';
alertBox += '<div id="alert-time">' + alertTime.toLocaleString('he-IL', {dateStyle: 'short', timeStyle: 'short'}) + '</div>';
alertBox += '<div id="alert-title">' + data.title + '</div>';
alertBox += '<div id="alert-locations">' + data.data.join(', ') + '</div>';
alertBox += '</div>';
document.getElementById('alert-container').innerHTML = alertBox;
});
}
setInterval(fetchAlert, 2000);
</script>
</body>
</html>
אפשר להעתיק את הקוד לקובץ חדש ולשמור אותו כ alert.html. כדי להציג את הדף בדפדפן, פשוט פתח את קובץ alert.html בדפדפן.
משהו בקוד לא תקין, משום מה לא מופיעות התרעות כשהJSON מציג תוכן
נראה שיש בעיה בקוד ה-JavaScript שלך. נסה לבדוק אם הפונקציה שלך מקבלת את התוכן המתאים מה-URL, וכן תקבל הודעת שגיאה במידה ולא ניתן לקבל את התוכן. נסה גם לבדוק אם המשתנה שלך שומר את התוכן המתאים, ואם כן, האם הוא מתאים למבנה של ה-JSON שמצפים לקבל.
כדי לעזור לך לזהות את הבעיה בקוד, אני ממליץ להפעיל כלי פיתוח בדפדפן ולהסתכל על דף האינטרנט שלך בזמן הרצת הקוד. בכך תוכל לזהות את השגיאות של הקוד ולבצע את התיקונים הנדרשים.
בקונסול מופיעה השגיאה הבאה html.html:60 Uncaught (in promise) TypeError: Cannot set properties of null (setting 'className') at html.html:60:62 אשמח שתעזור לי לתקן את הקוד
השגיאה הזו מתרחשת כאשר הקוד מנסה לקבוע את ה-className של אלמנט אשר לא נמצא ב- DOM. זה יכול לקרות במקרה שלא מצאנו את האלמנט שמצטט את ההתרעה ב-DOM. יש לוודא שהאלמנט קיים ב-DOM ורק אז לקבוע את ה-className שלו. בנוסף, חשוב לוודא שקיים גם אלמנט לתצוגת הזמן של ההתרעה.
נסה את הקוד הבא שמצרף את השינויים שביקשת ומטפל בכל הבעיות הנ״ל:
htmlCopy code<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>התרעות חירום</title>
<style>
.alert {
background-color: red;
color: white;
padding: 10px;
border-radius: 5px;
margin-bottom: 10px;
}
.alert-time {
font-size: 12px;
margin-top: 5px;
}
.alert.stale {
background-color: lightgrey;
color: darkgrey;
}
</style>
</head>
<body>
<h1>התרעות חירום</h1>
<div id="alerts-container"></div>
<script>
const alertsContainer = document.getElementById("alerts-container");
let lastAlert = null;
let staleTimeoutId = null;
function getAlerts() {
fetch("https://www.kore.co.il/redAlert.json")
.then(response => response.json())
.then(data => {
if (data === null) {
console.log("No alerts");
return;
}
console.log(data);
const alertId = data.id;
// Don't add the same alert again
if (lastAlert && lastAlert.id === alertId) {
console.log("Same alert as before");
return;
}
// Clear stale timeout if it exists
if (staleTimeoutId) {
clearTimeout(staleTimeoutId);
}
// Display the alert
const alertDiv = document.createElement("div");
alertDiv.className = "alert";
alertDiv.innerText = data.title;
const alertTime = document.createElement("div");
alertTime.className = "alert-time";
alertTime.innerText = new Date(data.date).toLocaleString("he-IL");
alertDiv.appendChild(alertTime);
alertsContainer.prepend(alertDiv);
// Save the new alert and set stale timeout
lastAlert = data;
staleTimeoutId = setTimeout(() => {
alertDiv.className = "alert stale";
}, 60000);
})
.
הפסקת באמצע, תכתוב מחדש את קטע הקוד, בלי שום הסברים, רק קטע קוד מתוקן ותקין