agamjotsingh18 · NarendraKoya999 · May 31, 2023 · May 31, 2023 · Jun 23, 2023 · Jun 23, 2023
diff --git a/article.html b/article.html
@@ -0,0 +1,28 @@
+<!DOCTYPE html>
+<html>
+<head>
+  <title>Article Page</title>
+<link rel="stylesheet" href="./assets/css/article.css">
+</head>
+<body>
+  <h1>Article Page</h1>
+  <!-- Article Button -->
+  <button id="btn-article"><h1>Create Article</h1></button>
+
+  <!-- Article Writing Section -->
+  <div class="article-writing-section" id="article-writing-section" style="display: none;">
+    <input type="text" placeholder="Title" required><br>
+    <textarea placeholder="Content" required></textarea><br>
+    <!-- <button id="btn-save">Save</button>
+    <button id="btn-cancel">Cancel</button> -->
+  </div>
+
+  <!-- Article Cards Section -->
+  <div class="article-cards-section" id="article-cards-section">
+    <!-- Saved article cards will be dynamically added here -->
+  </div>
+
+
+  <script src="assets/js/article.js"></script>
+</body>
+</html>
diff --git a/assets/css/article.css b/assets/css/article.css
@@ -0,0 +1,97 @@
+
+/* CSS Code for Article Page */
+
+/* General Styles */
+
+body {
+  font-family: Arial, sans-serif;
+  margin: 0;
+  padding: 20px;
+  background: rgb(131,58,180);
+background: linear-gradient(90deg, rgba(131,58,180,1) 0%, rgba(29,169,253,1) 50%, rgba(252,176,69,1) 100%);
+}
+
+h1 {
+  text-align: center;
+}
+
+input[type="text"],
+textarea {
+  width: 100%;
+  padding: 10px;
+  margin-bottom: 10px;
+}
+
+button {
+  padding: 10px 20px;
+  margin-right: 10px;
+  cursor: pointer;
+}
+
+/* Article Writing Section Styles */
+
+.article-writing-section {
+  margin-bottom: 20px;
+}
+
+/* Article Cards Section Styles */
+
+.article-cards-section {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.article-card {
+  width: calc(50% - 20px);
+  padding: 10px;
+  margin: 10px;
+  background-color: #e8f5fe;
+  border-radius: 5px;
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
+  transition: transform 0.3s ease-in-out;
+}
+
+.article-card:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.2);
+}
+
+.article-card h2 {
+  margin-top: 0;
+}
+
+.article-card p {
+  margin-bottom: 10px;
+}
+
+.article-card .options {
+  display: flex;
+  justify-content: space-between;
+}
+
+.article-card button {
+  padding: 5px 10px;
+  background-color: #007bff;
+  border: none;
+  border-radius: 3px;
+  cursor: pointer;
+  transition: background-color 0.3s ease-in-out;
+  color: #ffffff;
+}
+
+.article-card button:hover {
+  background-color: #0056b3;
+}
+
+.btn-like {
+  padding: 5px 10px;
+  background-color: #007bff;
+  color: #ffffff;
+}
+
+.btn-edit,
+.btn-delete {
+  padding: 5px 10px;
+  background-color: #ff0000;
+  color: #ffffff;
+}
diff --git a/assets/css/style.css b/assets/css/style.css
@@ -180,7 +180,7 @@ h6 {
   display: flex;
   align-items: center;
   justify-content: space-between;
-  padding: 10px 20px 10px 20px;
+  padding: 10px 0 10px 30px;
   font-family: "Poppins", sans-serif;
   font-size: 15px;
 

diff --git a/assets/js/article.js b/assets/js/article.js
@@ -0,0 +1,218 @@
+// JavaScript Code for Article Page
+
+// Function to handle like button click
+function handleLikeButtonClick(likeButton) {
+  likeButton.addEventListener('click', () => {
+    // Handle like button click event here
+    // For example, update the like count
+    const likeCount = likeButton.dataset.likes;
+    const updatedLikeCount = parseInt(likeCount) + 1;
+    likeButton.innerText = `Like (${updatedLikeCount})`;
+    likeButton.dataset.likes = updatedLikeCount;
+  });
+}
+
+// Function to handle edit button click
+function handleEditButtonClick(editButton) {
+  editButton.addEventListener('click', () => {
+    // Handle edit button click event here
+    // For example, allow users to edit the article title and content
+    const articleCard = editButton.closest('.article-card');
+    const titleElement = articleCard.querySelector('h2');
+    const contentElement = articleCard.querySelector('p');
+
+    const newTitle = prompt('Enter new title:', titleElement.innerText);
+    const newContent = prompt('Enter new content:', contentElement.innerText);
+
+    if (newTitle && newContent) {
+      titleElement.innerText = newTitle;
+      contentElement.innerText = newContent;
+    }
+  });
+}
+
+// Function to handle delete button click
+function handleDeleteButtonClick(deleteButton) {
+  deleteButton.addEventListener('click', () => {
+    // Handle delete button click event here
+    // For example, remove the article card from the DOM
+    const articleCard = deleteButton.closest('.article-card');
+    articleCard.remove();
+  });
+}
+
+// Function to handle create article button click
+function handleCreateArticleButtonClick() {
+  const createArticleButton = document.getElementById('btn-article');
+  const articleWritingSection = document.getElementById('article-writing-section');
+  const saveButton = document.createElement('button');
+  const cancelButton = document.createElement('button');
+
+  createArticleButton.addEventListener('click', () => {
+    articleWritingSection.style.display = 'block';
+    createArticleButton.disabled = true;
+
+    // Add save and cancel buttons dynamically
+    saveButton.innerText = 'Save';
+    saveButton.classList.add('btn-save');
+    articleWritingSection.appendChild(saveButton);
+
+    cancelButton.innerText = 'Cancel';
+    cancelButton.classList.add('btn-cancel');
+    articleWritingSection.appendChild(cancelButton);
+  });
+
+  // Save button event listener
+  saveButton.addEventListener('click', () => {
+    const titleInput = document.querySelector('#article-writing-section input[type="text"]');
+    const contentInput = document.querySelector('#article-writing-section textarea');
+
+    // Create a new article card
+    const articleCard = document.createElement('div');
+    articleCard.classList.add('article-card');
+
+    const titleElement = document.createElement('h2');
+    titleElement.innerText = titleInput.value;
+    articleCard.appendChild(titleElement);
+
+    const contentElement = document.createElement('p');
+    contentElement.innerText = contentInput.value;
+    articleCard.appendChild(contentElement);
+
+    const options = document.createElement('div');
+    options.classList.add('options');
+    articleCard.appendChild(options);
+
+    const likeButton = document.createElement('button');
+    likeButton.classList.add('btn-like');
+    likeButton.innerText = 'Like (0)';
+    likeButton.dataset.likes = '0';
+    options.appendChild(likeButton);
+
+    const editButton = document.createElement('button');
+    editButton.classList.add('btn-edit');
+    editButton.innerText = 'Edit';
+    options.appendChild(editButton);
+
+    const cancelButton = document.createElement('button');
+    cancelButton.classList.add('btn-cancel');
+    cancelButton.innerText = 'Cancel';
+    options.appendChild(cancelButton);
+
+    const deleteButton = document.createElement('button');
+    deleteButton.classList.add('btn-delete');
+    deleteButton.innerText = 'Delete';
+    options.appendChild(deleteButton);
+
+    // Append the new article card to the article cards section
+    const articleCardsSection = document.getElementById('article-cards-section');
+    articleCardsSection.appendChild(articleCard);
+
+    // Reset the input fields
+    titleInput.value = '';
+    contentInput.value = '';
+
+    // Hide the article writing section and enable the create article button
+    articleWritingSection.style.display = 'none';
+    createArticleButton.disabled = false;
+
+    // Attach event listeners to the new article card
+    handleLikeButtonClick(likeButton);
+    handleEditButtonClick(editButton);
+    handleDeleteButtonClick(deleteButton);
+
+    // Save the article cards to local storage
+    saveArticleCardsToLocalStorage();
+  });
+
+  // Cancel button event listener
+  cancelButton.addEventListener('click', () => {
+    // Hide the article writing section and enable the create article button
+    articleWritingSection.style.display = 'none';
+    createArticleButton.disabled = false;
+  });
+}
+
+// Function to save the article cards to local storage
+function saveArticleCardsToLocalStorage() {
+  const articleCardsSection = document.getElementById('article-cards-section');
+  const articleCards = articleCardsSection.querySelectorAll('.article-card');
+
+  const articleCardsData = [];
+
+  articleCards.forEach((articleCard) => {
+    const titleElement = articleCard.querySelector('h2');
+    const contentElement = articleCard.querySelector('p');
+    const likes = articleCard.querySelector('.btn-like').dataset.likes;
+
+    const articleData = {
+      title: titleElement.innerText,
+      content: contentElement.innerText,
+      likes: likes,
+    };
+
+    articleCardsData.push(articleData);
+  });
+
+  localStorage.setItem('articleCards', JSON.stringify(articleCardsData));
+}
+
+// Function to load the article cards from local storage
+function loadArticleCardsFromLocalStorage() {
+  const articleCardsSection = document.getElementById('article-cards-section');
+  const savedArticleCards = JSON.parse(localStorage.getItem('articleCards'));
+
+  if (savedArticleCards) {
+    savedArticleCards.forEach((articleData) => {
+      const articleCard = document.createElement('div');
+      articleCard.classList.add('article-card');
+
+      const titleElement = document.createElement('h2');
+      titleElement.innerText = articleData.title;
+      articleCard.appendChild(titleElement);
+
+      const contentElement = document.createElement('p');
+      contentElement.innerText = articleData.content;
+      articleCard.appendChild(contentElement);
+
+      const options = document.createElement('div');
+      options.classList.add('options');
+      articleCard.appendChild(options);
+
+      const likeButton = document.createElement('button');
+      likeButton.classList.add('btn-like');
+      likeButton.innerText = `Like (${articleData.likes})`;
+      likeButton.dataset.likes = articleData.likes;
+      options.appendChild(likeButton);
+
+      const editButton = document.createElement('button');
+      editButton.classList.add('btn-edit');
+      editButton.innerText = 'Edit';
+      options.appendChild(editButton);
+
+      // const cancelButton = document.createElement('button');
+      // cancelButton.classList.add('btn-cancel');
+      // cancelButton.innerText = 'Cancel';
+      // options.appendChild(cancelButton);
+
+      const deleteButton = document.createElement('button');
+      deleteButton.classList.add('btn-delete');
+      deleteButton.innerText = 'Delete';
+      options.appendChild(deleteButton);
+
+      articleCardsSection.appendChild(articleCard);
+
+      handleLikeButtonClick(likeButton);
+      handleEditButtonClick(editButton);
+      handleDeleteButtonClick(deleteButton);
+    });
+  }
+}
+
+// Call the function to handle create article button click
+handleCreateArticleButtonClick();
+
+// Load the article cards from local storage
+loadArticleCardsFromLocalStorage();
+
+
diff --git a/cheatsheets.html b/cheatsheets.html
@@ -143,8 +143,13 @@
     <!-- End Header -->
 
       <!-- Main Section -->
+
+    <main>
+        <h1 class="cheatsheet-heading">CheatSheets</h1>
+
       <div>
         <h1 class="cheatsheet-heading">Code Master's Cheatsheet</h1>
+
         <div class="option-container">
           <div class="option">
             <!-- This content is dynamically added via hacktoberfest.js -->
@@ -156,7 +161,7 @@ <h1 class="cheatsheet-heading">Code Master's Cheatsheet</h1>
         class="back-to-top d-flex align-items-center justify-content-center"
         ><i class="bi bi-arrow-up-short"></i
       ></a>
-
+    </main>
       <!-- JS CDN -->
       <script>
         function showCheatsheet(language) {