18 |
19 |
20 |
--------------------------------------------------------------------------------
/script.js:
--------------------------------------------------------------------------------
1 | // Fun Facts Array
2 | const facts = [
3 | "I love to drink chai/tea!",
4 | "I love learning new programming languages!",
5 | "I'm a foodie who enjoys trying different cuisines.",
6 | "I once participated in a hackathon and won!",
7 | "I'm a huge fan of sci-fi movies.",
8 | "I have a knack for solving puzzles and riddles.",
9 | "I enjoy volunteering and giving back to the community.",
10 | "I’m passionate about AI and Machine Learning.",
11 | "I like to explore AI and tech.",
12 | "I have a sharp memory and can quickly remember people's backgrounds.",
13 | "I learn from my mistakes and get inspired by others.",
14 | "My thoughts may seem unique, but they’ve often been done by others."
15 | ];
16 |
17 | // Generate Random Fact
18 | function generateFact() {
19 | const randomIndex = Math.floor(Math.random() * facts.length);
20 | document.getElementById("fact").textContent = facts[randomIndex];
21 | }
22 |
--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
1 | MIT License
2 |
3 | Copyright (c) 2024 Farha Kousar
4 |
5 | Permission is hereby granted, free of charge, to any person obtaining a copy
6 | of this software and associated documentation files (the "Software"), to deal
7 | in the Software without restriction, including without limitation the rights
8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
9 | copies of the Software, and to permit persons to whom the Software is
10 | furnished to do so, subject to the following conditions:
11 |
12 | The above copyright notice and this permission notice shall be included in all
13 | copies or substantial portions of the Software.
14 |
15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
21 | SOFTWARE.
22 |
--------------------------------------------------------------------------------
/style.css:
--------------------------------------------------------------------------------
1 | /* Moving background animation */
2 | body, html {
3 | margin: 0;
4 | padding: 0;
5 | height: 100%;
6 | overflow: hidden;
7 | font-family: Arial, sans-serif;
8 | }
9 |
10 | .background {
11 | position: absolute;
12 | width: 100%;
13 | height: 100%;
14 | background: linear-gradient(120deg, #ff9a9e, #fad0c4, #fbc2eb, #a1c4fd);
15 | background-size: 300% 300%;
16 | animation: gradientAnimation 10s ease infinite;
17 | }
18 |
19 | @keyframes gradientAnimation {
20 | 0% { background-position: 0% 50%; }
21 | 50% { background-position: 100% 50%; }
22 | 100% { background-position: 0% 50%; }
23 | }
24 |
25 | /* Container styling */
26 | .container {
27 | text-align: center;
28 | color: white;
29 | margin-top: 20%;
30 | }
31 |
32 | /* Animated button */
33 | .animated-button {
34 | background-color: #ffffff;
35 | color: #ff6f61;
36 | border: none;
37 | padding: 15px 30px;
38 | border-radius: 30px;
39 | font-size: 18px;
40 | font-weight: bold;
41 | cursor: pointer;
42 | box-shadow: 0px 8px 15px rgba(0, 0, 0, 0.1);
43 | transition: all 0.3s ease;
44 | }
45 |
46 | .animated-button:hover {
47 | background-color: #ff6f61;
48 | color: #ffffff;
49 | transform: translateY(-5px);
50 | box-shadow: 0px 15px 20px rgba(255, 111, 97, 0.3);
51 | }
52 |
53 | /* Fun fact text */
54 | #fact {
55 | font-size: 20px;
56 | margin: 20px 0;
57 | text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
58 | }
59 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # **✨ Fun Facts About Me - Capstone Project ✨**
2 |
3 | Welcome to the **Fun Facts About Me** project! This app was designed as a capstone project during the **GenAI 101 Workshop**, aimed at equipping participants with the skills to harness Generative AI, master prompt engineering, and create personalized web applications.
4 |
5 | ---
6 |
7 | ## 🌟 **About the Workshop**
8 |
9 | The **GenAI 101 Workshop** was a hands-on, immersive experience where participants explored the fascinating world of AI through:
10 |
11 | ### 📌 **Key Learning Outcomes**
12 | 1. **Prompt Engineering**: Crafting precise prompts to guide AI responses effectively.
13 | 2. **AI Hallucination Management**: Identifying and correcting inaccuracies in AI-generated content.
14 | 3. **Web App Development**: Building and deploying shareable applications using **Pieces Copilot** and basic web technologies.
15 |
16 | Through this project, participants learned to apply these concepts practically, resulting in the creation of a fun, interactive web app.
17 |
18 | ---
19 |
20 | ## 🎯 **About the Project**
21 |
22 | The **Fun Facts About Me** app is a simple, yet engaging web application that allows users to generate random fun facts at the click of a button.
23 |
24 | ### ⚙️ **Features**
25 | - **✨ Random Fact Generation**: Click the button to reveal a unique fun fact about yourself.
26 | - **🎨 Customizable Fun Facts**: Add your own personal touches by editing the `facts` array.
27 | - **🌐 Easy Hosting**: Effortlessly share your app online via **GitHub Pages**.
28 |
29 | ---
30 |
31 | ## 🚀 **How to Use the App**
32 |
33 | 1. Open the app in your browser via the **GitHub Pages** link.
34 | 2. Click the **"Generate Another Fun Fact"** button.
35 | 3. A new fun fact will display every time you click the button!
36 | 4. Share your app with friends, family, or on social media for a bit of fun.
37 |
38 | ---
39 |
40 | ## 💐 **Acknowledgements**
41 |
42 | This project would not have been possible without the incredible guidance and support of **Ali Sir**. and **Letsupgrade** Your dedication, expertise, and passion for teaching made this learning journey truly inspiring.
43 |
44 | Thank you for encouraging us to explore the potential of Generative AI and for providing us with the tools and knowledge to build something meaningful.
45 |
46 | ---
47 |
48 | ## 💡 **About Me**
49 |
50 | As a passionate tech enthusiast, I enjoy exploring innovative technologies and creating engaging projects. This app reflects my curiosity, creativity, and the skills I developed during the workshop.
51 |
52 | Feel free to explore the app, customize it with your own fun facts, and share your feedback with me. Let’s keep learning and growing together! 🚀
53 |
54 |
55 |
56 | ---
57 |
58 | Thank you for visiting my project! 🌟 Keep having fun and creating magic! ✨
59 |
--------------------------------------------------------------------------------