This commit is contained in:
Philippe Torrel
@@ -12048,6 +12048,32 @@ textarea.form-control-lg {
|
||||
font-weight: 900;
|
||||
src: url("../fonts/source-sans-3-v19-latin/source-sans-3-v19-latin-900italic.woff2") format("woff2");
|
||||
}
|
||||
.drop-shadow-curved {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 40%;
|
||||
padding: 1em;
|
||||
margin: 2em 10px 4em;
|
||||
background: #fff;
|
||||
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.3), 0 0 40px rgba(0, 0, 0, 0.1) inset;
|
||||
}
|
||||
.drop-shadow-curved:before, .drop-shadow-curved:after {
|
||||
content: "";
|
||||
width: 3px;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: 10px;
|
||||
bottom: 10px;
|
||||
box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
|
||||
border-radius: 10px/100px;
|
||||
}
|
||||
.drop-shadow-curved:before {
|
||||
left: 0;
|
||||
}
|
||||
.drop-shadow-curved:after {
|
||||
right: 0;
|
||||
}
|
||||
|
||||
/* Color Theme Swatches in Hex */
|
||||
*,
|
||||
html {
|
||||
@@ -12084,41 +12110,68 @@ blockquote {
|
||||
font-family: "Gloria Hallelujah", Cambria, Cochin, Georgia, Times, "Times New Roman", serif;
|
||||
}
|
||||
|
||||
.chuck-norris-joke {
|
||||
position: relative;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
height: 100vh;
|
||||
background: #555 url("../img/concrete-bg.jpg") center no-repeat fixed;
|
||||
background-size: cover;
|
||||
}
|
||||
.chuck-norris-joke::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
top: 0;
|
||||
left: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: radial-gradient(circle, rgba(0, 0, 0, 0.5) 0%, rgba(0, 0, 0, 0.8) 100%);
|
||||
}
|
||||
.chuck-norris-joke > * {
|
||||
position: relative;
|
||||
z-index: 2;
|
||||
}
|
||||
.chuck-norris-joke {
|
||||
.weather-box {
|
||||
background-color: #efefef;
|
||||
padding: 1rem;
|
||||
border-radius: 1rem;
|
||||
font-family: "Source Sans 3", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
|
||||
max-width: 400px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
.chuck-norris-joke .joke-text {
|
||||
color: white;
|
||||
.weather-box .weather-pic {
|
||||
width: 45%;
|
||||
}
|
||||
.weather-box .weather-pic figure {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
}
|
||||
.weather-box .weather-pic figure img,
|
||||
.weather-box .weather-pic figure svg {
|
||||
width: 100%;
|
||||
}
|
||||
.weather-box .weather-pic figure img {
|
||||
border-radius: 1rem;
|
||||
}
|
||||
.weather-box .weather-pic figure figcaption {
|
||||
text-align: center;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.weather-box .weather-pic figure .description {
|
||||
text-align: center;
|
||||
color: #ccc;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.weather-box .weather-information {
|
||||
padding: 2.5rem 0 0;
|
||||
width: 55%;
|
||||
}
|
||||
.weather-box .weather-information .text-temp {
|
||||
text-align: center;
|
||||
font-size: 3rem;
|
||||
max-width: 80%;
|
||||
padding: 2rem;
|
||||
text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
|
||||
margin: 0;
|
||||
color: #555;
|
||||
}
|
||||
.weather-box .weather-information .temp-unit {
|
||||
font-size: 2.5rem;
|
||||
color: #777777;
|
||||
}
|
||||
.weather-box .weather-information .text-temp-min-max {
|
||||
text-align: center;
|
||||
color: #ccc;
|
||||
line-height: 1;
|
||||
margin: 0 0 2rem;
|
||||
}
|
||||
.weather-box .weather-information .wind-information {
|
||||
display: flex;
|
||||
text-align: center;
|
||||
}
|
||||
.weather-box .weather-information .wind-information .icon-compass {
|
||||
font-size: 48px;
|
||||
color: #777;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
margin: 0 1rem 0 2rem;
|
||||
}
|
||||
|
||||
/*# sourceMappingURL=main.css.map */
|
||||
|
||||
File diff suppressed because one or more lines are too long
File diff suppressed because it is too large
Load Diff
File diff suppressed because one or more lines are too long
@@ -1,97 +1,56 @@
|
||||
import $ from 'jquery'; // Bundler ist notwendig (esbuild, rollup, rolldown, webpack, parcel, browserify)
|
||||
'use strict';
|
||||
|
||||
(() => {
|
||||
// === DOM & VARS =======
|
||||
const DOM = {
|
||||
chuckNorrisJoke: document.querySelector('.chuck-norris-joke'),
|
||||
jokeText: document.querySelector('.joke-text'),
|
||||
buttonGetJoke: document.querySelector('.button-get-joke'),
|
||||
weatherBox: document.querySelector('.weather-box'),
|
||||
weatherIcon: document.querySelector('.weather-pic img'),
|
||||
figcaption: document.querySelector('figcaption'),
|
||||
description: document.querySelector('.description'),
|
||||
temp: document.querySelector('.temp'),
|
||||
tempMin: document.querySelector('.temp-min'),
|
||||
tempMax: document.querySelector('.temp-max'),
|
||||
iconCompass: document.querySelector('.icon-compass'),
|
||||
speed: document.querySelector('.speed'),
|
||||
deg: document.querySelector('.wind-deg'),
|
||||
};
|
||||
|
||||
console.log(DOM);
|
||||
|
||||
// BITTE EIGENEN API KEY VERWENDEN
|
||||
const API_KEY = 'b62eaccfd1a09cf1d04b00bd2ec689e7';
|
||||
// https//latlong.net
|
||||
const LAT = 43.720215;
|
||||
const LON = 7.352606;
|
||||
|
||||
// https://api.openweathermap.org/data/4.0/onecall/timeline/1day?cnt=10&lat=51.5000&lon=-0.1000&start=1776596400&appid={API key}
|
||||
// === INIT =============
|
||||
const init = () => {
|
||||
console.log('init...');
|
||||
DOM.buttonGetJoke.addEventListener('click', onClickGetJoke);
|
||||
|
||||
// Funktionaufrufe
|
||||
// getJoke().then((data) => {
|
||||
// generateJoke(data.value);
|
||||
// });
|
||||
// getJokeXhr();
|
||||
getJokeJQuery();
|
||||
};
|
||||
|
||||
// === EVENTHANDLER =====
|
||||
const onClickGetJoke = (e) => {
|
||||
getJoke().then((data) => {
|
||||
generateJoke(data.value);
|
||||
getWeather().then((data) => {
|
||||
console.log(data);
|
||||
});
|
||||
};
|
||||
|
||||
// === EVENTHANDLER =====
|
||||
|
||||
// === XHR/FETCH ========
|
||||
const getJoke = async () => {
|
||||
const getWeather = async () => {
|
||||
try {
|
||||
const response = await fetch('https://api.chucknorris.io/jokes/random');
|
||||
if (!response.ok) {
|
||||
throw new Error('HTTP-Request went wrong.');
|
||||
const res = await fetch(
|
||||
`https://api.openweathermap.org/data/2.5/weather?lat=${LAT}&lon=${LON}&units=metric&appid=${API_KEY}`,
|
||||
);
|
||||
if (!res.ok) {
|
||||
throw Error('Fetch Error');
|
||||
}
|
||||
const data = await response.json();
|
||||
const data = await res.json();
|
||||
return data; // -> Promise
|
||||
} catch (error) {
|
||||
console.error('Error: ', error);
|
||||
|
||||
console.error(error);
|
||||
throw error;
|
||||
}
|
||||
};
|
||||
|
||||
const getJokeXhr = () => {
|
||||
const xhr = new XMLHttpRequest();
|
||||
xhr.open('GET', 'https://api.chucknorris.io/jokes/random');
|
||||
xhr.send();
|
||||
|
||||
// 0 UNSENT Der Client wurde erstellt. open() wurde noch nicht aufgerufen.
|
||||
// 1 OPENED open() wurde aufgerufen.
|
||||
// 2 HEADERS_RECEIVED send() wurde aufgerufen, und Header und Status sind verfügbar.
|
||||
// 3 LOADING Wird heruntergeladen; responseText enthält teilweise Daten.
|
||||
// 4 DONE Der Vorgang ist abgeschlossen.
|
||||
|
||||
xhr.addEventListener('readystatechange', (e) => {
|
||||
console.log(e, xhr);
|
||||
console.log('Ready state: ', xhr.readyState);
|
||||
|
||||
if (xhr.readyState === 4 && (xhr.status === 200 || xhr.status === 304)) {
|
||||
const data = JSON.parse(xhr.responseText);
|
||||
generateJoke(data.value);
|
||||
}
|
||||
});
|
||||
};
|
||||
|
||||
const getJokeJQuery = () => {
|
||||
$.getJSON('https://api.chucknorris.io/jokes/random', (data) => {
|
||||
generateJoke(data.value);
|
||||
});
|
||||
|
||||
// $.ajax({
|
||||
// method: 'GET',
|
||||
// url: 'https://api.chucknorris.io/jokes/random',
|
||||
// dataType: 'json',
|
||||
// success: (data) => {
|
||||
// generateJoke(data.value);
|
||||
// },
|
||||
// error: (err) => {
|
||||
// console.log(err);
|
||||
// },
|
||||
// })
|
||||
// .done((data) => console.log(data))
|
||||
// .fail((err) => console.error(err));
|
||||
};
|
||||
|
||||
// === FUNCTIONS ========
|
||||
const generateJoke = (joke) => {
|
||||
DOM.jokeText.textContent = joke;
|
||||
};
|
||||
|
||||
init();
|
||||
})();
|
||||
|
||||
@@ -0,0 +1,32 @@
|
||||
// Shadow Effects ==========================
|
||||
// https://codepen.io/sdthornton/pen/wBZdXq
|
||||
.drop-shadow-curved {
|
||||
position: relative;
|
||||
float: left;
|
||||
width: 40%;
|
||||
padding: 1em;
|
||||
margin: 2em 10px 4em;
|
||||
background: #fff;
|
||||
box-shadow:
|
||||
0 1px 4px rgba(0, 0, 0, 0.3),
|
||||
0 0 40px rgba(0, 0, 0, 0.1) inset;
|
||||
|
||||
&:before,
|
||||
&:after {
|
||||
content: '';
|
||||
width: 3px;
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
|
||||
top: 10px;
|
||||
bottom: 10px;
|
||||
box-shadow: 0 0 15px rgba(0, 0, 0, 0.6);
|
||||
border-radius: 10px / 100px;
|
||||
}
|
||||
&:before {
|
||||
left: 0;
|
||||
}
|
||||
&:after {
|
||||
right: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
@import 'chuck-norris-joke';
|
||||
// @import 'chuck-norris-joke';
|
||||
// @import 'header-main';
|
||||
// @import 'logo-main';
|
||||
// @import 'menu-main';
|
||||
@import 'weather-box';
|
||||
|
||||
@@ -0,0 +1,73 @@
|
||||
@use 'sass:color';
|
||||
|
||||
.weather-box {
|
||||
background-color: #efefef;
|
||||
padding: 1rem;
|
||||
border-radius: 1rem;
|
||||
font-family: $font-copy;
|
||||
max-width: 400px;
|
||||
|
||||
display: flex;
|
||||
|
||||
.weather-pic {
|
||||
width: 45%;
|
||||
figure {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
img,
|
||||
svg {
|
||||
width: 100%;
|
||||
}
|
||||
img {
|
||||
border-radius: 1rem;
|
||||
}
|
||||
figcaption {
|
||||
text-align: center;
|
||||
line-height: 1.5;
|
||||
}
|
||||
.description {
|
||||
text-align: center;
|
||||
color: #ccc;
|
||||
line-height: 1.5;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.weather-information {
|
||||
padding: 2.5rem 0 0;
|
||||
width: 55%;
|
||||
|
||||
.text-temp {
|
||||
text-align: center;
|
||||
font-size: 3rem;
|
||||
margin: 0;
|
||||
color: #555;
|
||||
}
|
||||
.temp-unit {
|
||||
font-size: 2.5rem;
|
||||
// color: lighten(#555, 20%);
|
||||
color: color.scale(#555, $lightness: 20%);
|
||||
}
|
||||
|
||||
.text-temp-min-max {
|
||||
text-align: center;
|
||||
color: #ccc;
|
||||
line-height: 1;
|
||||
margin: 0 0 2rem;
|
||||
}
|
||||
|
||||
.wind-information {
|
||||
display: flex;
|
||||
text-align: center;
|
||||
.icon-compass {
|
||||
font-size: 48px;
|
||||
color: #777;
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
// transform: rotate(-45deg);
|
||||
margin: 0 1rem 0 2rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -3,7 +3,7 @@
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Chuck Norris Joke (API)</title>
|
||||
<title>Wetter (API)</title>
|
||||
<!-- <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.8/dist/css/bootstrap.min.css" rel="stylesheet" /> -->
|
||||
|
||||
<link rel="icon" type="image/png" href="/favicon/favicon-96x96.png" sizes="96x96" />
|
||||
@@ -13,16 +13,45 @@
|
||||
<meta name="apple-mobile-web-app-title" content="Wetter" />
|
||||
<link rel="manifest" href="/favicon/site.webmanifest" />
|
||||
|
||||
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.3.1/css/all.min.css" />
|
||||
<link rel="stylesheet" href="/assets/css/main.css" />
|
||||
|
||||
<script src="/assets/js/build.js" defer></script>
|
||||
</head>
|
||||
<body>
|
||||
<main>
|
||||
<section class="section-joke">
|
||||
<!-- .chuck-norris-joke>blockquote.joke-text+button.btn.btn-dark.button-get-joke{Get Joke} -->
|
||||
<div class="chuck-norris-joke">
|
||||
<blockquote class="joke-text"></blockquote>
|
||||
<button class="btn btn-dark button-get-joke">Get Joke</button>
|
||||
<section class="section-weather">
|
||||
<div class="container py-5">
|
||||
<h2>Weather Box</h2>
|
||||
<!-- ▼ weather-box ▼ -->
|
||||
<div class="weather-box drop-shadow-curved">
|
||||
<!-- .weather-pic>figure>img+figc+p.description{WEATHER_DESCRIPTION} -->
|
||||
<div class="weather-pic">
|
||||
<figure>
|
||||
<img src="https://dummyimage.com/100x100.jpg" alt="" />
|
||||
<figcaption>{TITLE}</figcaption>
|
||||
<p class="description">WEATHER_DESCRIPTION</p>
|
||||
</figure>
|
||||
</div>
|
||||
<!-- .weather-information>p.text-temp>span.temp{00}+span.temp-unit{°C} -->
|
||||
<div class="weather-information">
|
||||
<p class="text-temp"><span class="temp">00</span><span class="temp-unit">°C</span></p>
|
||||
<p class="text-temp-min-max"><span class="temp-min">00</span> - <span class="temp-max">99</span></p>
|
||||
|
||||
<!-- .wind-information>i.fa-regular.fa-compass.icon-compass+p.text-wind-info -->
|
||||
<div class="wind-information">
|
||||
<i class="fa-regular fa-compass icon-compass"></i>
|
||||
<p class="text-wind-info">
|
||||
<span class="speed">{00}</span>
|
||||
<span class="speed-unit">km/h</span>
|
||||
<br />
|
||||
<span class="wind-deg">{359}</span>
|
||||
<span class="wind-deg-unit">°</span>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<!-- ▲ /weather-box ▲ -->
|
||||
</div>
|
||||
</section>
|
||||
</main>
|
||||
|
||||
+1497
-4
File diff suppressed because it is too large
Load Diff
@@ -4,7 +4,8 @@
|
||||
"description": "",
|
||||
"main": "index.js",
|
||||
"scripts": {
|
||||
"server": "npx http-server -p 3000 -c-1",
|
||||
"http-server": "npx http-server -p 3000 -c-1",
|
||||
"server": "npx browser-sync start --server --files 'assets/css/*.css, assets/js/*.js, **/*.html, *.html'",
|
||||
"css": "npx sass dev/scss/main.scss:assets/css/main.css -w -q",
|
||||
"js": "npx esbuild dev/js/main.js --watch --bundle --sourcemap --outfile=assets/js/build.js",
|
||||
"dev": "run-p css js server"
|
||||
@@ -12,6 +13,7 @@
|
||||
"keywords": [],
|
||||
"type": "module",
|
||||
"devDependencies": {
|
||||
"browser-sync": "^3.0.4",
|
||||
"esbuild": "^0.28.2",
|
||||
"http-server": "^14.1.1",
|
||||
"npm-run-all": "^4.1.5",
|
||||
|
||||
Reference in New Issue
Block a user