🌟COMPASS CHALLENGE-01 🌟

This challenge consists of creating a blog with multiple posts, where users will be directed to the post details when they click on them.

🚀 Features

• Pages are rendered through functions in the script.
• All information is stored in data.ts.
• Users can view complete information by clicking on the post.
• Responsive design.

💡Technologies used

• HTML
• CSS
• JavaScript
• TypeScript Tools: Git, Node.js.

📝 Project structure

Post

• index.html: Main page with all the listed posts.
• script.js: Script for the main page, includes a loop rendering function for each post.
• style.css: Styles for the main page.

Post details

• post-details.html: Page displaying details for each post.
• script_details.js: Script responsible for generating an HTML page based on the ID obtained from the URL of the clicked post on the main page.
• style_details.css: Styles for the details page.

Data

• data.ts: Contains all the project's data in TypeScript objects.
• data.js: Compiled file from data.ts, used to import the data into other .js files.

Installation

1. Clone or download the repository.
2. Open the folder in your IDE.
3. Run index.html (preferably with Live Server).

Learnings 🎯

Before this challenge, I already had some experience with HTML/CSS/JavaScript from other projects. However, adding TypeScript and implementing a rendering function made it quite challenging. I had no hesitation in admitting and understanding my difficulties because it only means there is more to learn. Thanks to the courses and the COMPASS TEAM ( instructors and scrum masters ), I was able to learn:

• Working with multiple branches.
• Grid, Z-index, and -webkit functionality.
• Using TypeScript.
• Rendering functions.
• Using Window.location to retrieve information from the URL.
• Building a dynamic page generated based on the registered ID.