Skip to content

Commit

Permalink
Merge pull request #134 from yashi-15/blog-beautify
Browse files Browse the repository at this point in the history 
Blog page UI enhanced.
  • Loading branch information
@jaysomani
jaysomani committed Feb 11, 2024
2 parents 31f1c14 + d6eb368 commit 53c0339
Show file tree
Hide file tree
Showing 3 changed files with 153 additions and 72 deletions.
51 changes: 39 additions & 12 deletions pages/blogs/blog.css
View file
Original file line number Diff line number Diff line change
@@ -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;
Expand Down Expand Up @@ -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 {
Expand Down Expand Up @@ -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;
}
}
49 changes: 26 additions & 23 deletions pages/blogs/blog.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
125 changes: 88 additions & 37 deletions pages/blogs/blog.js
View file
Original file line number Diff line number Diff line change
@@ -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();
});

0 comments on commit 53c0339

Please sign in to comment.