Blog page UI enhanced

jaysomani · Jan 27, 2024 · d6eb368 · d6eb368
1 parent 40068a6
commit d6eb368
Show file tree

Hide file tree

Showing 3 changed files with 153 additions and 72 deletions.
diff --git a/pages/blogs/blog.css b/pages/blogs/blog.css
@@ -1,30 +1,45 @@
+::-webkit-scrollbar{
+    width: 15px;
+}
+
+::-webkit-scrollbar-track{
+    border-radius: 5px;
+    box-shadow: inset 0 0 10px rgba(0,0,0,0.25);
+}
 
+::-webkit-scrollbar-thumb{
+    border-radius: 5px;
+    background: linear-gradient(to top, #01b3a7 , #162e44);
+}
 body {
     font-family: 'Arial', sans-serif;
     margin: 0;
     padding: 0;
-    background-color: #4158D0;
-background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
-
 }
-
+img:hover{
+    transform: scale(1.1);
+    transition:all ease-in-out 0.75s;
+}
 .head{
-    background-color:#555;
+    background-color:#162e44;
     color: white;
     text-align: center;
     padding: 1em;
+    position: sticky;
+    top: 0;
+    z-index: 1;
 }
 
 #blog-list {
     display: flex;
     flex-wrap: wrap;
-    justify-content: space-around;
     padding: 20px;
+    flex: 5;
 }
 
 .blog-post {
-    width: 300px;
-    margin: 20px;
+    width: 250px;
+    height: fit-content;
     padding: 15px;
     border: 1px solid #ddd;
     border-radius: 8px;
@@ -60,6 +75,10 @@ background-image: linear-gradient(43deg, #4158D0 0%, #C850C0 46%, #FFCC70 100%);
     box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
     padding: 20px;
     margin: 20px;
+    flex: 3;
+    height: fit-content;
+    position: sticky;
+    top: 110px;
 }
 
 #add-blog h2 {
@@ -90,16 +109,24 @@ textarea {
 }
 
 button {
-    background-color: #333;
-    color: white;
     padding: 10px 15px;
-    border: none;
+    border-color: black;
     border-radius: 4px;
     cursor: pointer;
     font-size: 1rem;
     transition: background-color 0.3s;
 }
 
 button:hover {
-    background-color: #555;
+    background-color: #01b3a7;
+    border-color: #01b3a7;
+
+}
+#blog-page{
+    display: flex;
 }
+@media (max-width: 495px) {
+    #add-blog{
+        display: none;
+    }
+}
diff --git a/pages/blogs/blog.html b/pages/blogs/blog.html
@@ -5,36 +5,39 @@
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>Document</title>
     <link rel="stylesheet" href="blog.css">
-</head>
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"/> 
+     </head>
 
 <body>
 
         <header class="head">
             <h1>Travel Blog</h1>
         </header>
-
-        <section id="blog-list">
-
+        <div id="blog-page">
+            <section id="blog-list" data-masonry='{"percentPosition": true}'>
+
+
+            </section>
 
-        </section>
-
-        <section id="add-blog">
-            <h2>Add a Blog</h2>
-            <form id="blog-form">
-                <label for="title">Title:</label>
-                <input type="text" id="title" name="title" required>
-
-                <label for="content">Content:</label>
-                <textarea id="content" name="content" rows="4" required></textarea>
-
-                <label for="image-url">Image URL:</label>
-                <input type="text" id="image-url" name="image-url" required>
-
-                <button type="submit">Submit</button>
-            </form>
-        </section>
-
+            <section id="add-blog">
+                <h2>Add a Blog</h2>
+                <form id="blog-form">
+                    <label for="title">Title:</label>
+                    <input type="text" id="title" name="title" required>
+
+                    <label for="content">Content:</label>
+                    <textarea id="content" name="content" rows="4" required></textarea>
+
+                    <label for="image-url">Image URL:</label>
+                    <input type="text" id="image-url" name="image-url" required>
+
+                    <button type="submit">Submit</button>
+                </form>
+            </section>
+        </div>
         <script src="blog.js"></script>
-
+        <script src= 
+        "https://cdn.jsdelivr.net/npm/[email protected]/dist/masonry.pkgd.min.js" async> 
+            </script>
 </body>
 </html>
diff --git a/pages/blogs/blog.js b/pages/blogs/blog.js
@@ -1,49 +1,100 @@
-document.addEventListener('DOMContentLoaded', function () {
-    const blogList = document.getElementById('blog-list');
-    const blogForm = document.getElementById('blog-form');
-
-    // Simulated data for demonstration purposes
-    let blogData = [
-        { title: 'Exploring Paradise Island', content: 'Paradise Island is known for powder soft beaches and crystal clear, turquoise water, great for diving and snorkeling. Visitors can try their luck at the Atlantis Casino and dine “around the world” at celebrity chef restaurants. Spend the day at Aquaventure Water Park or swim with dolphins at Dolphin Cay.', imageUrl: 'https://media.istockphoto.com/id/690506986/es/foto/fondo-de-playa-para%C3%ADso.webp?b=1&s=170667a&w=0&k=20&c=VdyIjJWA3aZqX7E48hNL6qYndIkGg77fEuv9-Jgdwtg='},
-        { title: 'City Lights: A Night in Metropolis', content: 'Lorem ipsum dolor sit amet...', imageUrl: 'https://img.freepik.com/premium-photo/mesmerizing-cityscape-night-with-countless-lights-illuminating-urban-landscape_523886-2456.jpg?size=338&ext=jpg&ga=GA1.1.44546679.1699488000&semt=ais' },
-        // Add more blog entries as needed
-    ];
-
-    function renderBlogList() {
-        blogList.innerHTML = '';
-        blogData.forEach(blog => {
-            const blogPost = document.createElement('div');
-            blogPost.classList.add('blog-post');
-            blogPost.innerHTML = `
+document.addEventListener("DOMContentLoaded", function () {
+    const blogList = document.getElementById("blog-list");
+    const blogForm = document.getElementById("blog-form");
+
+  function adjustTextareaHeight() {
+    var textarea = document.getElementById("content");
+    textarea.style.height = "auto";
+    textarea.style.height = textarea.scrollHeight + "px";
+  }
+
+  // Adjust textarea height initially and on input change
+  window.addEventListener("load", adjustTextareaHeight);
+  document
+    .getElementById("content")
+    .addEventListener("input", adjustTextareaHeight);
+
+  // Simulated data for demonstration purposes
+  let blogData = [
+    {
+      title: "Exploring Paradise Island",
+      content:
+        "Paradise Island is known for powder soft beaches and crystal clear, turquoise water, great for diving and snorkeling. Visitors can try their luck at the Atlantis Casino and dine “around the world” at celebrity chef restaurants. Spend the day at Aquaventure Water Park or swim with dolphins at Dolphin Cay.",
+      imageUrl:
+        "https://media.istockphoto.com/id/690506986/es/foto/fondo-de-playa-para%C3%ADso.webp?b=1&s=170667a&w=0&k=20&c=VdyIjJWA3aZqX7E48hNL6qYndIkGg77fEuv9-Jgdwtg=",
+    },
+    {
+      title: "City Lights: A Night in Metropolis",
+      content: "Lorem ipsum dolor sit amet...",
+      imageUrl:
+        "https://img.freepik.com/premium-photo/mesmerizing-cityscape-night-with-countless-lights-illuminating-urban-landscape_523886-2456.jpg?size=338&ext=jpg&ga=GA1.1.44546679.1699488000&semt=ais",
+    },
+    {
+      title: "Exploring the Streets of Tokyo",
+      content:
+        "Tokyo, the bustling metropolis where tradition and modernity coexist seamlessly. From the serene shrines of Asakusa to the neon-lit streets of Shibuya, every corner tells a story. Lost in the sensory overload of Tsukiji Fish Market or finding tranquility in Ueno Park, Tokyo offers a kaleidoscope of experiences. As the sun sets, the city's skyline transforms into a canvas of lights, a testament to its vibrant energy. A day in Tokyo is like a journey through time and technology, leaving an indelible mark on the traveler's soul.",
+      imageUrl:
+        "https://wallup.net/wp-content/uploads/2019/10/539715-japan-japon-architecture-bridges-freeway-building-cities-monuments-night-panorama-panoramic-rivers-tower-towers-tokyo-ray-light-streets-2-748x499.jpg",
+    },
+    {
+      title: "Sailing the Greek Islands",
+      content:
+        "Embarking on a sailing adventure through the Greek Islands, each stop is a postcard-perfect moment. Santorini welcomes with its iconic blue-domed churches against the Aegean Sea. Mykonos charms with its vibrant nightlife and whitewashed architecture. Navigating the crystal-clear waters, hidden coves and secluded beaches become your personal havens. The rhythmic lull of the waves under the Mediterranean sun creates an unforgettable symphony, making the Greek Islands a sailor's paradise.",
+      imageUrl:
+        "https://tse4.mm.bing.net/th?id=OIP.BKnuEK1L1OmovpdyoN5jYgHaE3&pid=Api&P=0&h=180",
+    },
+    {
+      title: "A Weekend Retreat in the Swiss Alps",
+      content:
+        "Nestled among the majestic peaks of the Swiss Alps, the village of Zermatt is a haven for nature enthusiasts. Waking up to the breathtaking view of the Matterhorn, the day unfolds with a cable car ascent to Gornergrat. The crisp mountain air and panoramic views of snow-capped peaks are nothing short of magical. In the evening, cozying up in a chalet with fondue and Swiss chocolate becomes an intimate affair. Zermatt, a tranquil escape where time seems to stand still amid nature's grandeur.",
+      imageUrl:
+        "https://tse1.mm.bing.net/th?id=OIP.0ui85_hat4wFgIwU73QnpQHaE8&pid=Api&P=0&h=180",
+    },
+    {
+      title: "Lost in the Colors of Marrakech",
+      content:
+        "Marrakech, a city that dances to its own rhythm, filled with vibrant souks and the intoxicating scent of spices. The Jardin Majorelle, with its cobalt blue accents, is an oasis of serenity amidst the chaos of the medina. Exploring the historic Bahia Palace unveils intricate tilework and lush courtyards. As the sun sets, the Djemaa el Fna square comes alive with storytellers and street performers. Marrakech, a sensory journey where every alley holds a surprise waiting to be discovered.",
+      imageUrl:
+        "https://tse1.mm.bing.net/th?id=OIP.ZQg2GmNiwwNbv1b2iRZ8OAHaE8&pid=Api&rs=1&c=1&qlt=95&w=152&h=101",
+    },
+    // Add more blog entries as needed
+  ];
+
+  function renderBlogList() {
+    blogList.innerHTML = "";
+    blogData.forEach((blog) => {
+      const blogPost = document.createElement("div");
+      blogPost.classList.add("blog-post","m-3");
+      blogPost.innerHTML = `
                 <h2>${blog.title}</h2>
                 <img src="${blog.imageUrl}" alt="${blog.title}">
                 <p>${blog.content}</p>
             `;
-            blogList.appendChild(blogPost);
-        });
-    }
+      blogList.appendChild(blogPost);
+    });
+  }
 
-    function addBlog(event) {
-        event.preventDefault();
-        const title = document.getElementById('title').value;
-        const content = document.getElementById('content').value;
-        const imageUrl = document.getElementById('image-url').value;
+  function addBlog(event) {
+    event.preventDefault();
+    const title = document.getElementById("title").value;
+    const content = document.getElementById("content").value;
+    const imageUrl = document.getElementById("image-url").value;
 
-        // Validate the input (you can add more validation as needed)
+    // Validate the input (you can add more validation as needed)
 
-        // Add the new blog to the data array
-        blogData.push({ title, content, imageUrl });
+    // Add the new blog to the data array
+    blogData.push({ title, content, imageUrl });
 
-        // Clear the form
-        blogForm.reset();
+    // Clear the form
+    blogForm.reset();
 
-        // Update the displayed blog list
-        renderBlogList();
-    }
+    // Update the displayed blog list
+    renderBlogList();
+  }
 
-    // Event listener for form submission
-    blogForm.addEventListener('submit', addBlog);
+  // Event listener for form submission
+  blogForm.addEventListener("submit", addBlog);
 
-    // Initial rendering of blog list
-    renderBlogList();
+  // Initial rendering of blog list
+  renderBlogList();
 });