Skip to content

PO2396 #23

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 9 commits into
base: master
Choose a base branch
from
Open

PO2396 #23

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
9 commits
Select commit Hold shift + click to select a range
537ab83
szablon HTML
May 25, 2022
2f94567
Pierwsza wersja CSS
May 25, 2022
8afff2c
footer css
May 26, 2022
62bfedf
zrobiłam przeciski na img
May 27, 2022
4386add
dodałam @media
May 27, 2022
0d18be0
adaptywność całej strony
May 27, 2022
2c75231
Dodałam API
May 31, 2022
f224fa9
Przesunięcie losowania do zewnętrznej funkcji, dodano wywołanie Losuj…
May 31, 2022
6464f94
Dodano footer, sformatowanie kodu
May 31, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
Binary file added 1.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
109 changes: 109 additions & 0 deletions index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,109 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css2?family=Dancing+Script:wght@400;500;700&display=swap" >
<script src="https://kit.fontawesome.com/49cd939c76.js" crossorigin="anonymous"></script>
<title>Projekt zaliczeniowy</title>
</head>
<body onload="Losuj()">
<article class="articlelist">
<header>
<h1 class="title"><i class="fa-solid fa-plate-wheat"></i> Losuj Obiadek</h1>
</header>
<section class="topButtons">
<div class="losuj">
<button class="styleButton" id="random_button"> Losuj
<i class="fa-solid fa-plate-wheat"></i></button>
</div>
</section>
<main>
<article class="randomFood">
<section class="foodSuggest">
<div class="imgFood">
<img src="" alt="Wylosowany obiadek" class="img_random" id="Img1">
<div class="titleRecipe1">
<p><span class="new_title">lorem</span></p>
</div>
</div>
<article class="buttons1">
<div class="detailsButton">
<button>
<a href="" class="Source" target="_blank">
<i class="fa-solid fa-bars"></i>
</a>
</button>
</div>
<div class="youtubeButton">
<button>
<a href="" class="Youtube_link" target="_blank">
<i class="fa-brands fa-youtube"></i>
</a>
</button>
</div>
</article>
</section>
<section class="foodSuggest">
<div class="imgFood">
<img src="" alt="Wylosowany obiadek" class="img_random">
<div class="titleRecipe2">
<p><span class="new_title">lorem</span></p>
</div>
</div>
<article class="buttons2">
<div class="detailsButton">
<button>
<a href="" class="Source" target="_blank">
<i class="fa-solid fa-bars"></i>
</a>
</button>
</div>
<div class="youtubeButton">
<button>
<a href="" class="Youtube_link" target="_blank">
<i class="fa-brands fa-youtube"></i>
</a>
</button>
</div>
</article>
</section>
<section class="foodSuggest">
<div class="imgFood">
<img src="" alt="Wylosowany" class='img_random'>
<div class="titleRecipe3">
<p><span class="new_title">lorem</span></p>
</div>
</div>
<article class="buttons3">
<div class="detailsButton">
<button>
<a href="" class="Source" target="_blank">
<i class="fa-solid fa-bars"></i>
</a>
</button>
</div>
<div class="youtubeButton">
<button>
<a href="" class="Youtube_link" target="_blank">
<i class="fa-brands fa-youtube"></i>
</a>
</button>
</div>
</article>
</section>
</article>
</main>
<footer>
<div class="footer">
<a href="https://cdv.pl/studia-podyplomowe/" target="_blank"><img src="obrazki/cdv.png" alt="" class="cdv"> </a>
<p class="texrFooter">Studia podyplomowe </p>
</div>
</footer>
</article>
<script src="main.js"></script>
</body>
</html>

27 changes: 27 additions & 0 deletions main.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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()
});
Binary file added obrazki/1.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added obrazki/2.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added obrazki/3.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added obrazki/body.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added obrazki/body100.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added obrazki/cdv.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added obrazki/pexels-pixabay-54455.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added obrazki/pexels-steve-3789885.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added obrazki/szablon.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
243 changes: 243 additions & 0 deletions style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;
}