Skip to content

Commit

Permalink
Enhanced app stylings & functionalities
Browse files Browse the repository at this point in the history
  • Loading branch information
@hoangsonww
hoangsonww committed Jan 17, 2024
1 parent 9ba00b0 commit cc9a9c3
Show file tree
Hide file tree
Showing 3 changed files with 27 additions and 12 deletions.
2 changes: 2 additions & 0 deletions src/css/style.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@

html {
scroll-behavior: smooth;
overflow-x: hidden;
}

header {
Expand All @@ -29,6 +30,7 @@ body {
min-height: 100vh;
font-family: "Poppins", sans-serif;
margin: 0;
overflow-x: hidden;
}

.modal {
Expand Down
27 changes: 20 additions & 7 deletions src/html/about.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
<title>About Page</title>
<link rel="stylesheet" href="../css/style.css">
<link rel="icon" type="image/x-icon" href="../../images/favicon.ico">
<link rel="manifest" href="../../manifest.json">
</head>

<body style="background-image: url(../../images/snow.jpg)">
Expand All @@ -15,7 +16,19 @@ <h2>About The Event Horizon App</h2>
</div>
</header>
<p id="about-text" style="text-align: center">
This app will act as a countdown timer that allows users to anticipate and count down to major events in their lives. Users can select from predefined events or create custom events, setting both the event name and date. Created by Son Nguyen Hoang in October 2023.
This app is your ultimate countdown timer that allows users to anticipate and count down to major events in their lives. Users can select from predefined events or create custom events, setting both the event name and date.
</p>
<p id="about-text" style="text-align: center">
The app also features a weather widget that allows users to view the weather at their location. Users can also view the weather at any location by entering the location in the search bar.
</p>
<p id="about-text" style="text-align: center">
You can also chat with our sophisticated chatbot, which can answer your questions about the app and provide you with useful information.
</p>
<p id="about-text" style="text-align: center">
This app also allows you to add event notes to your events, which can be used to store important information about your events.
</p>
<p id="about-text" style="text-align: center">
<strong>Created by Son Nguyen Hoang in October 2023.</strong>
</p>

<section class="additional-apps-section">
Expand All @@ -24,27 +37,27 @@ <h2>Explore Our Other Apps</h2>
<div class="app-container">
<div class="app">
<p>Discover a world of movies with <strong>The MovieVerse App</strong>, your ultimate guide to the cinematic universe.</p>
<button onclick="window.location.href='https://hoangsonww.github.io/The-MovieVerse-Database/';">Visit The MovieVerse</button>
<button style="font: inherit" onclick="window.location.href='https://hoangsonww.github.io/The-MovieVerse-Database/';">Visit The MovieVerse</button>
</div>

<div class="app">
<p>Delve into delightful recipes and cuisines with <strong>RecipeGenie App</strong>, your ultimate recipe database.</p>
<button onclick="window.location.href='https://hoangsonww.github.io/RecipeGenie-App/';">Visit RecipeGenie</button>
<button style="font: inherit" onclick="window.location.href='https://hoangsonww.github.io/RecipeGenie-App/';">Visit RecipeGenie</button>
</div>

<div class="app">
<p>Organize your thoughts and tasks effectively with the simple yet intuitive <strong>StickyNotes App</strong>.</p>
<button onclick="window.location.href='https://hoangsonww.github.io/The-StickyNotes-App/';">Visit StickyNotes</button>
<button style="font: inherit" onclick="window.location.href='https://hoangsonww.github.io/The-StickyNotes-App/';">Visit StickyNotes</button>
</div>

<div class="app">
<p>Stay informed about the weather with <strong>WeatherMate App</strong>, your personal weather forecasting assistant.</p>
<button onclick="window.location.href='https://hoangsonww.github.io/WeatherMate-App/';">Visit WeatherMate</button>
<button style="font: inherit" onclick="window.location.href='https://hoangsonww.github.io/WeatherMate-App/';">Visit WeatherMate</button>
</div>

<div class="app">
<p>Efficiently plan and manage your todo lists with <strong>ToDo App</strong>, your ultimate todo organizer.</p>
<button onclick="window.location.href='https://hoangsonww.github.io/The-ToDo-App/';">Visit ToDo App</button>
<button style="font: inherit" onclick="window.location.href='https://hoangsonww.github.io/The-ToDo-App/';">Visit ToDo App</button>
</div>
</div>
</section>
Expand All @@ -57,7 +70,7 @@ <h2 style="margin-top: 60px; margin-bottom: -40px">Explore My Profile</h2>
<a href="mailto:[email protected]" class="social-button">My Email</a>
</div>

<button onclick="window.location.href='../../index.html'">Back to Countdown</button>
<button style="font: inherit; margin-bottom: 50px" onclick="window.location.href='../../index.html'">Back to Countdown</button>

<script src="../js/script.js"></script>
</body>
Expand Down
10 changes: 5 additions & 5 deletions src/js/script.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,8 +85,8 @@ function updateEvent() {
const customEvents = JSON.parse(localStorage.getItem('customEvents')) || [];

if (customEvents.length === 0) {
eventTitle.textContent = "New Year 2024";
currentEventDate = "1 Jan 2024";
eventTitle.textContent = "New Year 2025";
currentEventDate = "1 Jan 2025";
}

localStorage.setItem('lastEvent', JSON.stringify(eventToSave));
Expand All @@ -103,7 +103,7 @@ eventDropdown.addEventListener("change", function() {
setEvent("New Year", new Date(`1 Jan ${currentYear + 1}`));
break;
case "10 Feb":
setEvent("Lunar New Year", new Date(`10 Feb ${currentYear + 1}`));
setEvent("Lunar New Year", new Date(`10 Feb ${currentYear}`));
break;
case "9 Nov":
setEvent("My Birthday", new Date(`9 Nov ${currentYear}`));
Expand Down Expand Up @@ -133,8 +133,8 @@ document.addEventListener('DOMContentLoaded', function() {
currentEventDate = lastEvent.date;
}
else {
eventTitle.textContent = "New Year 2024";
currentEventDate = "1 Jan 2024";
eventTitle.textContent = "New Year 2025";
currentEventDate = "1 Jan 2025";
}
countdown();
displayCustomEvents();
Expand Down

0 comments on commit cc9a9c3

Please sign in to comment.