Project Describing
Comments
<!DOCTYPE html>
<!DOCTYPE html>
<html>
<body>
<!--the header section or the top part of every page-->
<section class="header">
<nav>
<!--the logo on the header-->
<a href="/Compsci22/home2.html"><img src ="images/ALAATlogo.png"></a>
<link rel="stylesheet" href="index.css">
<div class="nav-links">
<ul>
<!--the links to the other pages-->
<li><a href="/Compsci22/home2.html">GALLERY</a></li>
<li><a href="/Compsci22/comments.html">SUGGESTIONS</a></li>
<li><a href="/Compsci22">OUR TEAM</a></li>
<li><a href="/Compsci22/signup.html">SIGN-UP</a></li>
</ul>
<!--loading screen-->
<script>
var loader = document.getElementById("loading");
window.addEventListener("load", function(){
loader.style.display = "none";
})
</script>
</div>
</nav>
</section>
</body>
</html>
<html>
<head>
<title>User Comments</title>
<style>
.container {
display: flex;
flex-direction: column;
align-items: center;
margin-top: 50px;
}
.Commentssection {
width: 80%;
text-align: center;
}
#comments {
background-color: lightgray;
padding: 10px;
border-radius: 10px;
margin-bottom: 20px;
}
#delete-all-comments-button {
margin-bottom: 20px;
padding: 10px 20px;
background-color: lightblue;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
#comment-form {
width: 60%;
background-color: lightgray;
padding: 20px;
border-radius: 10px;
}
#comment-form label {
display: block;
margin-bottom: 10px;
}
input[type="text"],
textarea {
width: 100%;
padding: 10px;
border-radius: 5px;
border: 1px solid gray;
}
button[type="submit"] {
padding: 10px 20px;
background-color: lightblue;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
p {
margin: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="Commentssection">
<h1>User Comments</h1>
<div id="comments">
<!-- comments will be displayed here -->
</div>
<button id="delete-all-comments-button">Delete All Comments</button>
</div>
<h2>Add a Comment</h2>
<form id="comment-form">
<label>
Name:
<input type="text" id="username" required>
</label>
<br><br>
<label>
Comment:
<textarea id="comment" required></textarea>
</label>
<br><br>
<button type="submit">Submit</button>
</form>
</div>
<script>
const commentsDiv = document.querySelector('#comments');
const deleteAllCommentsButton = document.querySelector('#delete-all-comments-button');
// Fetch comments and display them
async function fetchAndDisplayComments() {
try {
const response = await fetch('http://127.0.0.1:8086/comments');
const comments = await response.json();
commentsDiv.innerHTML = '';
comments.forEach(comment => {
commentsDiv.innerHTML += `
<p><strong>${comment[1]}</strong> said: ${comment[2]}</p>
`;
});
} catch (error) {
console.error(error);
}
}
// Delete all comments
async function deleteAllComments() {
try {
const response = await fetch('http://127.0.0.1:8086/comments', {
method: 'DELETE',
});
if (response.ok) {
commentsDiv.innerHTML = '';
}
} catch (error) {
console.error(error);
}
}
// Handle button click events
deleteAllCommentsButton.addEventListener('click', async event => {
event.preventDefault();
await deleteAllComments();
});
const form = document.querySelector('form');
// Handle form submissions
form.addEventListener('submit', async event => {
event.preventDefault();
const username = document.querySelector('#username').value;
const comment = document.querySelector('#comment').value;
const response = await fetch('http://127.0.0.1:8086/comments', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
mode: 'cors',
credentials: 'omit',
body: JSON.stringify({ username, comment }),
});
if (response.ok) {
form.reset();
fetchAndDisplayComments();
}
});
fetchAndDisplayComments();
</script>
</body>
</html>
This is an HTML code that represents a web page with a user comment section. It consists of two HTML sections.
The first section is the header, which includes a navigation bar with a logo and links to different pages. It also contains a loading screen script that hides the loader element when the page finishes loading.
The second section is the main content section, which displays user comments. It has a container div and a Commentssection div for styling purposes. Inside the Commentssection div, there is a heading that says “User Comments,” a div with the id “comments” where the comments will be displayed, and a button with the id “delete-all-comments-button” to delete all comments.
Below the Commentssection div, there is a form for users to add new comments. It includes input fields for name and comment, and a submit button.
The script at the end of the code handles the functionality of fetching and displaying comments, deleting comments, and submitting new comments. It uses JavaScript’s fetch API to communicate with a backend server. The fetchAndDisplayComments function fetches the comments from the server and dynamically adds them to the comments div. The deleteAllComments function sends a delete request to the server to delete all comments. The event listeners for the delete button and form submission handle the respective actions by calling the appropriate functions. The code also initializes by calling the fetchAndDisplayComments function to initially load and display existing comments.
Overall, this code creates a web page with a user comment section, allowing users to view, add, and delete comments through interaction with the backend server.
This code represents a photo gallery with a carousel header. It consists of two sections, each containing a set of images with captions. The first section is displayed as a carousel, where the images rotate automatically or can be navigated manually. The second section is a grid of images.
In the HTML markup, there are div containers with the class “carousel-header” and “my-gallery” that enclose the respective sections. The carousel header contains a heading and a paragraph describing the project and its contributors.
The carousel section has a container with the id “carousel” that holds a series of image elements. Each image element has a “src” attribute specifying the path to an image file. These paths may contain variables, such as “/Compsci22”, which could be replaced with an actual URL or path depending on the context.
The grid section also has a container with the class “my-gallery”. Inside this container, there are multiple “figure” elements, each representing an image in the gallery. Each figure has an “a” element wrapping an “img” element. The “a” element’s “href” attribute points to the full-size image, and the “img” element’s “src” attribute points to a thumbnail version of the image. Additionally, there is a “figcaption” element within each figure that provides a caption for the image.
The code also includes some CSS styles for the layout and appearance of the gallery, such as setting background images, defining the size and spacing of images, and adding hover effects.
Furthermore, there is a script section that adds functionality to the gallery. It selects all image elements and creates a container for each image, cloning the image and adding a like button and like count. Event listeners are attached to the like buttons to increment the like count when clicked.
Finally, at the end of the code, there is a section related to the PhotoSwipe library, which is responsible for the lightbox functionality when clicking on images in the gallery. It includes the necessary HTML structure for PhotoSwipe to display images in a modal window.