diff --git a/1.jpg b/1.jpg new file mode 100644 index 00000000..7f39f7bc Binary files /dev/null and b/1.jpg differ diff --git a/index.html b/index.html index e69de29b..eac0642e 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,109 @@ + + + + + + + + + + Projekt zaliczeniowy + + +
+
+

Losuj Obiadek

+
+
+
+ +
+
+
+
+
+
+ Wylosowany obiadek +
+

lorem

+
+
+ +
+
+
+ Wylosowany obiadek +
+

lorem

+
+
+ +
+
+
+ Wylosowany +
+

lorem

+
+
+ +
+
+
+ +
+ + + + diff --git a/main.js b/main.js index e69de29b..ed575f23 100644 --- a/main.js +++ b/main.js @@ -0,0 +1,27 @@ +const $random_button = document.getElementById("random_button"); +//const $imgRandom = document.getElementsByClassName("img_random"); + +const $Youtube_link = document.getElementById("Youtube_link"); + +function Losuj() { + for(let i=0;i<3;i++){ + fetch("https://www.themealdb.com/api/json/v1/1/random.php") + .then((res) => res.json()) + .then((res) => { + console.log(res); + + const strSource = res.meals[0].strMealThumb; + const newTitle = res.meals[0].strMeal; + const Source =res.meals[0].strSource + const Youtube = res.meals[0].strYoutube + document.getElementsByClassName("new_title")[i].innerText = newTitle; + document.getElementsByClassName("img_random")[i].src = strSource; + document.getElementsByClassName("Source")[i].href = Source + document.getElementsByClassName("Youtube_link")[i].href=Youtube + }); + } +} + +$random_button.addEventListener("click", () => { + Losuj() +}); diff --git a/obrazki/1.jpg b/obrazki/1.jpg new file mode 100644 index 00000000..7f39f7bc Binary files /dev/null and b/obrazki/1.jpg differ diff --git a/obrazki/2.jpg b/obrazki/2.jpg new file mode 100644 index 00000000..cd907094 Binary files /dev/null and b/obrazki/2.jpg differ diff --git a/obrazki/3.jpg b/obrazki/3.jpg new file mode 100644 index 00000000..b50b750f Binary files /dev/null and b/obrazki/3.jpg differ diff --git a/obrazki/body.jpg b/obrazki/body.jpg new file mode 100644 index 00000000..ead97d90 Binary files /dev/null and b/obrazki/body.jpg differ diff --git a/obrazki/body100.jpg b/obrazki/body100.jpg new file mode 100644 index 00000000..6f9fb90b Binary files /dev/null and b/obrazki/body100.jpg differ diff --git a/obrazki/cdv.png b/obrazki/cdv.png new file mode 100644 index 00000000..1720e6b3 Binary files /dev/null and b/obrazki/cdv.png differ diff --git a/obrazki/pexels-pixabay-54455.jpg b/obrazki/pexels-pixabay-54455.jpg new file mode 100644 index 00000000..422b490d Binary files /dev/null and b/obrazki/pexels-pixabay-54455.jpg differ diff --git a/obrazki/pexels-steve-3789885.jpg b/obrazki/pexels-steve-3789885.jpg new file mode 100644 index 00000000..c4e3d308 Binary files /dev/null and b/obrazki/pexels-steve-3789885.jpg differ diff --git a/obrazki/szablon.jpg b/obrazki/szablon.jpg new file mode 100644 index 00000000..ef57de27 Binary files /dev/null and b/obrazki/szablon.jpg differ diff --git a/style.css b/style.css index e69de29b..78b3eae8 100644 --- a/style.css +++ b/style.css @@ -0,0 +1,243 @@ +body { + background-color: rgb(250, 250, 238); + margin: 0.5%; + position: relative; +} +.articlelist { + background-image: url(obrazki/body.jpg); + background-repeat: no-repeat; + background-position: center center; + background-attachment: fixed; + width: 100%; + max-width: 1000px; + height: auto; + border: 1.5px solid rgb(214, 211, 201); + margin: 0 auto; + margin-left: auto; + margin-right: auto; + -webkit-box-shadow: 0px 0px 29px -16px rgba(66, 68, 90, 1); + -moz-box-shadow: 0px 0px 29px -16px rgba(66, 68, 90, 1); + box-shadow: 0px 0px 29px -16px rgba(66, 68, 90, 1); +} +header { + width: 100%; + display: flex; + border: 1px solid #564d20; + background: #5b5958; + border-bottom-width: 4px; +} +.title { + display: flex; + justify-content: center; + align-items: center; + width: 100%; + margin: 10px; + font-family: 'Dancing Script', cursive; + font-size: 50px; + color: #FDF4F4; + text-shadow: 4px 1px 14px rgb(97, 110, 136); +} +.fa-plate-wheat { + margin-right: 8px; +} +.topButtons { + margin-bottom: 15px; + padding: 50px; + display: flex; + justify-content: center; + text-align: center; + position: relative; +} +.losuj { + display: flex; + justify-content: center; + align-items: center; +} +.randomFood { + width: 1000px; + grid-template-columns: 1fr 1fr 1fr; + display: grid; + text-align: center; + position: relative; +} +.foodSuggest { + display: flex; + justify-content: center; + position: relative; + width: 333.33px; + margin-bottom: 8px; +} +.buttons1 { + position: absolute; + top: 10px; + left: 15px; + margin-left: 10px; +} +.buttons2 { + position: absolute; + top: 10px; + left: 15px; + margin-left: 10px; +} +.buttons3 { + position: absolute; + top: 10px; + left: 15px; + margin-left: 10px; +} +.footer { + margin-bottom: 0px; +} +footer { + height: auto; + border: 1px solid #4d4624; + border-top-width: 9px; + border-bottom: 1px; + margin-top: 10%; + background: #5b5958; + font-family: 'Dancing Script', cursive; + color: #FDF4F4; + border: 1px solid #6b6027; +} +a { + color: #FDF4F4; + text-decoration: none; + cursor: pointer; +} +.cdv {margin-top: 12px; + margin-left: 20px; + width: 80px; + height: 80px; +} +.texrFooter { + margin-top: 0px; + margin-left: 20px; +} +.styleButton { + width: 248px; + box-shadow: 0px 10px 14px -7px #3e7327; + background: linear-gradient(to bottom, #77b55a 5%, #72b352 100%); + background-color: #77b55a; + border-radius: 13px; + display: inline-block; + cursor: pointer; + color: #f4fdfc; + text-align: center; + font-family: 'Dancing Script', cursive; + font-size: 18px; + font-weight: bold; + text-decoration: none; + text-shadow: 0px 1px 0px #5b8a3c; + outline: none; + padding: 10px; + cursor: pointer; +} +.styleButton:hover { + background: linear-gradient(to bottom, #72b352 5%, #77b55a 100%); + background-color: #72b352; +} +.titleRecipe1 { + width: 280px; + font-size: 100%; + font-family: 'Dancing Script', cursive; + text-align: center; + display: inline-block; + border: 2px solid rgba(216, 221, 231, 0.1); + border-radius: 92px 93px 93px 92px; + background-color: rgba(216, 221, 231, 0.6); + color: #010706; + position: absolute; + top: 80%; + left: 9px; +} +.titleRecipe2 { + width: 280px; + font-size: 100%; + font-family: 'Dancing Script', cursive; + text-align: center; + display: inline-block; + color: #010706; + border: 2px solid rgba(216, 221, 231, 0.1); + border-radius: 92px 93px 93px 92px; + background-color: rgba(216, 221, 231, 0.6); + position: absolute; + top: 80%; + left: 9px; +} +.titleRecipe3 { + width: 280px; + font-size: 100%; + font-family: 'Dancing Script', cursive; + text-align: center; + display: inline-block; + color: #010706; + border: 2px solid rgba(216, 221, 231, 0.1); + border-radius: 92px 93px 93px 92px; + background-color: rgba(216, 221, 231, 0.6); + position: absolute; + top: 80%; + left: 9px; +} +.imgFood { + position: relative; + text-align: center; + justify-content: center; +} +img { + border: 1px solid rgba(67, 61, 35, 0.2); + object-fit: cover; + width: 300px; + height: 400px; +} +button { + color: #6e559c; + background-color: rgba(246, 244, 238, 0.6); + width: 27px; +} +.detailsButton { + margin-bottom: 3px; +} +.mailButton { + width: 29px; + margin-bottom: 3px; +} +.youtubeButton { + width: 29px; + margin-bottom: 3px; +} +.fa-bars { + color: #5e0d0d; + width: 15px; + height: 13px; +} +.fa-youtube { + color: #cb0d0d; + width: 15px; + height: 13px; +} +.fa-envelope { + color: #b75829; + width: 15px; + height: 13px; +} +p { + font-size: 120%; +} +@media (max-width:978px) { + .randomFood { + display: block; + width: 334px; + } +} +@media (max-width: 799px) { + .topButtons { + display: block; + } + .randomFood { + width: 334px; + } +} +main { + display: flex; + justify-content: center; +}