Add blog functionality and edit blog functionality

AbhinavMishra32 · Nov 26, 2023 · 42cfb54 · 42cfb54
1 parent 85c9e53
commit 42cfb54
Show file tree

Hide file tree

Showing 3 changed files with 126 additions and 6 deletions.
diff --git a/abhinavs-blog/blog-functionality.js b/abhinavs-blog/blog-functionality.js
@@ -1,15 +1,18 @@
 //for first time using the database:-
-credentialArray = {
-    "default": "default_pass125"
-};
-localStorage.setItem('credentials', JSON.stringify(credentialArray));
-credentialArray = localStorage.getItem('credentials')
+// credentialArray = {
+//     "default": "default_pass125"
+// };
+// localStorage.setItem('credentials', JSON.stringify(credentialArray));
+// let credentialArray = JSON.parse(localStorage.getItem('credentials'));
+
+let credentialArray = JSON.parse(localStorage.getItem('credentials')) || {};
 
 function createUser(userID, pass){
     if(credentialArray[userID]){
         console.log("User already exists");
     }
     else{
+        //checks the strength of the password
         if(checkStrenth(pass)){
             credentialArray[userID] = pass;
             console.log("User created successfully");
@@ -46,7 +49,7 @@ function checkStrenth(pass){
         }
     }
     if(hasInt && hasSpclChr && !hasPattern){
-        console.log("Has a special character and a number.");
+        // console.log("Has a special character and a number.");
         return true;
     }
     // FOR DEBUG:
@@ -63,3 +66,28 @@ function checkStrenth(pass){
 }
 
 createUser("Abhinav", "my_passAbhinav123");
+createUser("Abhinav", "sdfds@#Ainav123");
+
+
+
+
+//Able to click edit button after entering the correct credentials
+//and after that a div apears showing the input fields to fill out the necesarry
+//parameters of a blog post.
+
+const editButton = document.getElementById('myButton');
+//sign in or edit
+function editValidate(){
+    const username = document.querySelector(".username-field").value;
+    const password = document.querySelector(".password-field").value;
+
+    if(credentialArray[username] == password){
+        alert("logged in"); 
+        window.location = "login-accepted.html";
+    }
+    else{
+        alert("wrong username or password");
+    }
+    document.querySelector(".password-field").value = "";
+}
+button.addEventListener('click', editValidate);
diff --git a/abhinavs-blog/blog.html b/abhinavs-blog/blog.html
@@ -25,5 +25,23 @@
 </head>
 <body>
     <script src = "blog-functionality.js"></script>
+    <!-- 
+        Adding blog functionality:-
+        An "Add" button at the bottom of the page, where after putting the correct
+        login id and password I see a section of the page appear, where I can add new blogs from
+        this can be done with adding an extra div when I enter the correct login id and pass
+        then through that div, with the inputs fields im able to enter the fields/parameters previously thought
+        which has a date, time, headline, about, technology related too, etc. Then through those
+        fields im able to click another button "Save", and it will save the new blog into the database.
+
+        Editing blog functionality:-
+        After clicking the "Edit" button I can then choose the index number or the headline of the blog, we can implement
+        a string search algorithm which finds the headline of the blog from just a simple word we enter in the parameter 
+        of the search bar, after it finds the headline, it shows the contents of the blog in the input fields now and I can edit it,
+        after im done editing I can click "Save".
+     -->
+     <input type="text" placeholder="Enter Username" class = "inputs username-field">
+     <input type="password" class="inputs password-field" placeholder="Enter Password">
+    <button id = "edit-button">Edit Blog</button>
 </body>
 </html>
diff --git a/abhinavs-blog/login-style.css b/abhinavs-blog/login-style.css
@@ -0,0 +1,74 @@
+.login-text{
+    font-family: monospace;
+    font-size: 30px;
+    font-weight: 600;
+    text-align: center;
+    margin-bottom: 50px;
+}
+
+
+.center-container {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+    /* height: 100vh; //Adjust the height as needed */
+}
+
+.inputs {
+padding: 10px;
+width: 200px;
+border-radius: 20px;
+border-width: 2px;
+margin-bottom: 15px;
+font-family: monospace;
+font-size: 15px;
+}
+
+.login-button-css{
+    display: flex;
+    flex-direction: row;
+    justify-content: center;
+    align-items: center;
+}
+.login-button{
+    font-family: monospace;
+    font-size: 14px;
+    border: none;
+    background-color:rgb(243, 243, 243);
+    border-radius: 20px;
+    padding-left: 20px;
+    padding-right: 20px;
+    padding-top:10px;
+    padding-bottom: 10px;
+}
+
+.login-button:hover{
+    background-color: rgb(230, 230, 230);
+    cursor:pointer;
+}
+
+.signup-button{
+    font-family: monospace;
+    font-size: 14px;
+    border: none;
+    background-color:rgb(243, 243, 243);
+    border-radius: 20px;
+    padding-left: 20px;
+    padding-right: 20px;
+    padding-top:10px;
+    padding-bottom: 10px;
+}
+
+.signup-button:hover{
+    background-color: rgb(230, 230, 230);
+    cursor:pointer;
+}
+
+.login-box {
+    background-color: #f9f9f9; /* Change to your desired color */
+    /* border: 1px solid #ccc; Change to your desired border */
+    padding: 20px; /* Adjust as needed */
+    margin: 30px; /* Adjust as needed */
+    border-radius: 50px; /* Optional: to make the corners rounded */
+}