📗 Table of Contents

📖 About the Project
🚀 Live Demo
💻 Getting Started
- Setup
- Prerequisites
- Install
- Usage
- Run tests
- Deployment
👥 Authors
🔭 Future Features
🤝 Contributing
⭐️ Show your support
🙏 Acknowledgements
📝 License

📖 First Capstone Project

First Capstone Project is the first big project at Microverse. The goal is to emulate a Conference Web Page with our own tematic. In my case, I decided to make a web Page about a Japanese Culture Festival.

🛠 Built With

Tech Stack

HTML
CSS
Javascript
Sass

Key Features

Multiple Platform's Supportive.
Mobile First.
Modern and attractive Interface.

(back to top)

🚀 Live Demo

Live Demo Link

(back to top)

💻 Getting Started

Prerequisites

In order to run this project you need:

Internet connection.
Any device with a width of at least 320px.

Setup

To clone this repository to your desired folder, run the following command:

git clone https://github.com/Luffytaro22/Capstone-Japan.git

Deployment

You can deploy this project with This Link

(back to top)

👥 Authors

👤 Manuel Sánchez

GitHub: @githubhandle
LinkedIn: LinkedIn
Twitter: @twitterhandle

(back to top)

🔭 Future Features

Additional Pages.
More Animations.

(back to top)

🤝 Contributing

Contributions, issues, and feature requests are welcome!

Feel free to check the issues page.

(back to top)

⭐️ Show your support

If you like this project please give it a star ⭐️

(back to top)

🙏 Acknowledgments

I would like to give credits to the following:

Microverse for this readme template.
Cindy Shin in Behance for this web layout.
8photo in Freepik for the gastronomy image.
Freepik for the Outfit image.
Freepik for the Writing image.
tawatchai07 in Freepik for the Architecture image.
xb100 in Freepik for the Tea Ceremony image.
tawatchai07 in Freepik for the Hanami image.
wirestock in Freepik for the Mount Fuji background image.
tawatchai07 in Freepik for the About Page background image.
Freepik for the Torii Arch in the logo.

(back to top)

📝 License

This project is MIT licensed.

(back to top)

Morning session: Peer-to-peer code review

Hello Manuel 😄
Hi @Luffytaro22! :D, you project looks very like the design provided, great job!💪
We want to share wit you some advises to you can improve 💪🏼
@ITurres @Alibaba2023

[optional] you could do the identation in your html a little bit more compact, is better because the navigation for the reviewes it easy if you have a clean identation. 👍🏼
Please be kind and try to use class name more specific, is better if you describe with a one word the intention of the class or the intention 🤙🏼
On the activities.js file on line 96 I thank it would be better to give that child of activities' card a general class and select them in javascript with querySelectorAll and they will store in an array then you can add the display flex with foreach.
line 96 to 99 where you declare many activities based on their class and child. And then from line 103 to 104 where you add/remove the 'flex/none' properties:values.
I think, yet not 100% sure, you might get away by query few elements within 1 'document.querySelectorAll', so there isn't much repetition, what I meant by this...
e.g.

const activitiesToShowHide = document.querySelectorAll(
  '.activities:nth-child(3), .activities:nth-child(4), .activities:nth-child(5), .activities:nth-child(6)'
);

// or like @ali suggested (i think also ali's suggestion is better)
// you can add on the element a e.g. class 'hide-this-element' and just query all of the elements with that class

const activitiesToShowHide = document.querySelectorAll('.hide-this-element');

// and then you can loop through all of them and apply a 'toggle' method to either add or remove the 'flex' property which will make them disappear or show.
// this 'show-activity class will have a property of display and a value of flex'
//e.g.

activitiesToShowHide.forEach((activity) => {
  activity.classList.toggle('show-activity');
});

Again, some test should be run in order to confirm said method.

luffytaro22 / capstone-japan Goto Github PK

capstone-japan's Introduction

📗 Table of Contents

📖 First Capstone Project

🛠 Built With

Tech Stack

Key Features

🚀 Live Demo

💻 Getting Started

Prerequisites

Setup

Deployment

👥 Authors

🔭 Future Features

🤝 Contributing

⭐️ Show your support

🙏 Acknowledgments

📝 License

capstone-japan's People

Contributors

Stargazers

Watchers

capstone-japan's Issues

Recommend Projects

Recommend Topics

Recommend Org