├── script
├── config
│ └── config.JSON
├── package-lock.json
├── time.js
├── themes.js
└── weather.js
├── img
├── gold.WebP
├── guts.WebP
├── alcest.WebP
├── griffith.WebP
└── pastel.WebP
├── README.md
├── index.html
└── css
└── styles.css
/script/config/config.JSON:
--------------------------------------------------------------------------------
1 | {
2 | "weatherToken": ""
3 | }
--------------------------------------------------------------------------------
/img/gold.WebP:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AmeerMoustafa/Forbidden-startpage/HEAD/img/gold.WebP
--------------------------------------------------------------------------------
/img/guts.WebP:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AmeerMoustafa/Forbidden-startpage/HEAD/img/guts.WebP
--------------------------------------------------------------------------------
/img/alcest.WebP:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AmeerMoustafa/Forbidden-startpage/HEAD/img/alcest.WebP
--------------------------------------------------------------------------------
/img/griffith.WebP:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AmeerMoustafa/Forbidden-startpage/HEAD/img/griffith.WebP
--------------------------------------------------------------------------------
/img/pastel.WebP:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/AmeerMoustafa/Forbidden-startpage/HEAD/img/pastel.WebP
--------------------------------------------------------------------------------
/script/package-lock.json:
--------------------------------------------------------------------------------
1 | {
2 | "name": "script",
3 | "lockfileVersion": 3,
4 | "requires": true,
5 | "packages": {}
6 | }
7 |
--------------------------------------------------------------------------------
/script/time.js:
--------------------------------------------------------------------------------
1 | // Formats and Displays the current Day and Time
2 | const displayDate = setInterval(() => {
3 | const date = new Date()
4 | const day = date.getDay()
5 | const dayOfWeek = ["Sunday", "Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday"]
6 | const today = dayOfWeek[day]
7 |
8 | document.getElementsByClassName("date")[0].innerHTML = today
9 | document.getElementsByClassName("time")[0].innerHTML = date.toLocaleTimeString([], {
10 | hour: 'numeric',
11 | minute: 'numeric'
12 | })
13 | }, 1000)
--------------------------------------------------------------------------------
/script/themes.js:
--------------------------------------------------------------------------------
1 | themeRandomizer = () => {
2 | const theme = ["gold", "pastel", "alcest", "griffith", "guts"]
3 | const random = theme[Math.floor(Math.random() * theme.length)]
4 | return random
5 | }
6 |
7 | setTheme = () => {
8 | const selector = document.getElementsByClassName("image")[0]
9 | savedTheme = localStorage.getItem('theme')
10 | if(savedTheme) {
11 | document.documentElement.className = savedTheme
12 | }
13 |
14 |
15 |
16 | selector.addEventListener("click", () => {
17 | theme = themeRandomizer()
18 | document.documentElement.className = theme
19 | localStorage.setItem('theme', theme)
20 | })
21 | }
22 |
23 | setTheme()
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Forbidden-startpage
2 | A simple startpage with a few themes to choose from. Made for personal use, practice and fun. Been learning web development for a few months. I am very open for suggestions on improving this project and will very much appreciate feedback.
3 | 
4 | [live Preview](https://forbidden-startpage.pages.dev/)
5 |
6 | ### features:
7 |
8 | - Multiple Themes
9 | - Get a random theme from the list by clicking on the image
10 | - Localstorage support to save selected theme
11 | - Date/Time and Weather
12 |
13 |
14 | # Themes
15 |
16 | ## Guts
17 | 
18 |
19 | ## Griffith
20 | 
21 |
22 | ## Gold
23 | 
24 |
25 | ## Pastel
26 | 
27 |
28 | ## Alcest
29 | 
30 |
31 | ### How to add weather suppot
32 |
33 | Simply go to the config.JSON file in your config folder and paster your openweatherAPI key there.
--------------------------------------------------------------------------------
/script/weather.js:
--------------------------------------------------------------------------------
1 | const { weatherAPI } = require('./config/config.JSON')
2 |
3 |
4 | // Initial API call
5 | const getWeather = async () => {
6 | const res = await fetch(`https://api.openweathermap.org/data/2.5/weather?lat=33.8938&lon=35.5018&appid=${weatherAPI}&units=metric`)
7 | const weather = await res.json()
8 | return weather
9 | }
10 |
11 | //regex to return the first number from the API's weather condition ID
12 | const conditionChecker = async() => {
13 | const weather = await getWeather()
14 | const re = new RegExp(/\d/)
15 | const weatherCondition = weather.weather[0].id.toString()
16 | const firstInt = weatherCondition.match(re).toString()
17 | return firstInt
18 | }
19 |
20 |
21 | //Displays a different FontAwesome Icon on night/day rain/shine
22 | const displayWeather = async () => {
23 | weather = await getWeather()
24 | weatherCondition = await conditionChecker()
25 | const date = new Date
26 | hours = date.getHours()
27 | if(hours >= 18 || hours <= 6){
28 | document.getElementsByClassName("weather")[0].innerHTML = ` ${weather.main.temp}°`
29 |
30 | if(weatherCondition == 2 || weatherCondition == 3 || weatherCondition == 5) {
31 | document.getElementsByClassName("weather")[0].innerHTML = ` ${weather.main.temp}°`
32 | }
33 |
34 | }
35 |
36 | else {
37 | document.getElementsByClassName("weather")[0].innerHTML = ` ${weather.main.temp}°`
38 | if(weatherCondition === 2 || weatherCondition === 3 || weatherCondition === 5) {
39 | document.getElementsByClassName("weather")[0].innerHTML = ` ${weather.main.temp}°`
40 | }
41 | }
42 | }
43 |
44 | displayWeather()
--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
1 |
2 |
3 |
4 |
5 |
6 |
7 |
8 |
9 |
10 |
11 |
12 | Welcome
13 |
14 |
15 |
16 | 
17 |
18 |
19 |
20 |
21 |
31 |
32 |
33 |
34 |
35 |
47 |
48 |
49 |
50 |
62 |
63 |
64 |
65 |
77 |
78 |
79 |
91 |
92 |
93 |
105 |
106 |