diff --git a/.vscode/settings.json b/.vscode/settings.json new file mode 100644 index 00000000..aef84430 --- /dev/null +++ b/.vscode/settings.json @@ -0,0 +1,3 @@ +{ + "liveServer.settings.port": 5501 +} \ No newline at end of file diff --git a/Fitz - Standing.png b/Fitz - Standing.png new file mode 100644 index 00000000..897f1d8b Binary files /dev/null and b/Fitz - Standing.png differ diff --git a/Humaaans - 3 Characters.png b/Humaaans - 3 Characters.png new file mode 100644 index 00000000..c9fd236f Binary files /dev/null and b/Humaaans - 3 Characters.png differ diff --git a/Stuck at Home - Stats and Graphs.png b/Stuck at Home - Stats and Graphs.png new file mode 100644 index 00000000..36d99985 Binary files /dev/null and b/Stuck at Home - Stats and Graphs.png differ diff --git a/index.html b/index.html index e69de29b..9b1da9e5 100644 --- a/index.html +++ b/index.html @@ -0,0 +1,315 @@ + + + + + + + Javascript Project - 2022 + + + + + + + + + + +
+
+
+
+

Become a better version of yourself!

+

Focus on loosing weight without loosing your joy of life!

+ +
+ drawing of a man +
+ + +
+
+
+ Picture of people +
+

About Us

+

Lorem ipsum dolor sit amet consectetur adipisicing elit. Nihil libero repudiandae quae voluptates reprehenderit! Vitae asperiores quisquam odit! Veniam corrupti laborum soluta iusto molestias, provident praesentium perferendis natus et. Labore. Lorem ipsum dolor sit amet consectetur adipisicing elit. Enim odit quae necessitatibus deleniti corporis hic, reprehenderit vel cupiditate officia eaque tenetur beatae officiis inventore adipisci veritatis minima dicta blanditiis perspiciatis.

+ +
+
+ +
+
+
+
+

BMI CALCULATOR

+

Calculate your BMI before you sign in!

+
+ + +

After clicking that button you will be redirected to kalkulator-bmi.pl

+ +
+
+ drawing of a man + +
+
+ + + +
+
+

OUR TEAM

+

+ Meet our the team of certificated dieteticians that will help you loose weight! +

+
+
+
+
+
+ +
+ + +
+
+

Frequently Asked Questions

+
+ +
+

+ +

+
+
Lorem ipsum, dolor sit amet consectetur adipisicing elit. In magni recusandae aspernatur sunt incidunt, quia molestiae enim deserunt repellendus ut repellat totam, suscipit eaque distinctio eius. Eius explicabo voluptatem architecto. + Atque earum, beatae, hic quas tenetur a omnis dolores possimus adipisci quod at. Nam cumque, ratione ex illo neque voluptatem numquam magnam harum nobis, ducimus molestiae totam, deleniti tempora. Perspiciatis! + Suscipit ea ut animi minus quam doloribus? Eligendi cumque eveniet, quasi id voluptatibus quod laudantium qui beatae corrupti, sed architecto aliquid unde? Ullam ea eum ducimus sunt at a veritatis?
+
+
+ +
+

+ +

+
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Est voluptatum exercitationem beatae excepturi, nobis numquam libero quisquam error assumenda sit corporis. Iusto soluta reprehenderit placeat magni officia sit ea quae! + Ratione nesciunt officiis veniam! Deleniti aperiam repudiandae atque architecto, excepturi, tempora mollitia cum ipsum facilis minima quod placeat vitae eligendi vel quis voluptatum laudantium obcaecati eaque. Ullam minima necessitatibus harum! + Sunt, enim? Voluptatum, fugit dolor cumque et doloremque repellat quibusdam aspernatur? Quisquam, obcaecati? Exercitationem enim commodi debitis velit expedita nihil, sequi quas sunt provident aliquid nam molestiae sint officia suscipit.
+
+
+ +
+

+ +

+
+
Lorem, ipsum dolor sit amet consectetur adipisicing elit. Nemo ipsa iure perferendis aliquam distinctio sint, incidunt quos eveniet minima eius magnam quia corporis, non debitis error vero labore quod sapiente! + Dolores debitis cum quia possimus, odio impedit. Soluta molestias accusamus quae consequuntur culpa aut voluptatibus quisquam cupiditate possimus! Repellat sit placeat quidem id! Repudiandae reprehenderit, ducimus obcaecati incidunt sequi odio! + Vero, consequatur at repellat asperiores obcaecati qui assumenda maxime a hic quo. Voluptatibus, labore. Mollitia dignissimos nesciunt quo est, corrupti aut recusandae perferendis ad blanditiis. Exercitationem aliquam adipisci praesentium suscipit? + Vel hic quos vero debitis provident recusandae culpa dolorem. Nemo, adipisci totam perspiciatis blanditiis suscipit eveniet. Fugiat harum odio facilis cum libero sunt rem! Veritatis repellendus similique aliquid molestias deserunt! + Voluptatem minima delectus eius illo! Corporis minima tempore reprehenderit recusandae nemo, omnis quas officia cumque iure dolores. Iusto, dignissimos quasi quisquam est facilis omnis reprehenderit? Eum nostrum voluptate neque in!
+
+
+ +
+

+ +

+
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Est voluptatum exercitationem beatae excepturi, nobis numquam libero quisquam error assumenda sit corporis. Iusto soluta reprehenderit placeat magni officia sit ea quae! + Ratione nesciunt officiis veniam! Deleniti aperiam repudiandae atque architecto, excepturi, tempora mollitia cum ipsum facilis minima quod placeat vitae eligendi vel quis voluptatum laudantium obcaecati eaque. Ullam minima necessitatibus harum! + Sunt, enim? Voluptatum, fugit dolor cumque et doloremque repellat quibusdam aspernatur? Quisquam, obcaecati? Exercitationem enim commodi debitis velit expedita nihil, sequi quas sunt provident aliquid nam molestiae sint officia suscipit.
+
+
+ +
+

+ +

+
+
Lorem ipsum dolor sit amet consectetur adipisicing elit. Est voluptatum exercitationem beatae excepturi, nobis numquam libero quisquam error assumenda sit corporis. Iusto soluta reprehenderit placeat magni officia sit ea quae! + Ratione nesciunt officiis veniam! Deleniti aperiam repudiandae atque architecto, excepturi, tempora mollitia cum ipsum facilis minima quod placeat vitae eligendi vel quis voluptatum laudantium obcaecati eaque. Ullam minima necessitatibus harum! + Sunt, enim? Voluptatum, fugit dolor cumque et doloremque repellat quibusdam aspernatur? Quisquam, obcaecati? Exercitationem enim commodi debitis velit expedita nihil, sequi quas sunt provident aliquid nam molestiae sint officia suscipit.
+
+
+
+
+
+ +
+ +

Check some opinions about us!

+ +
+ + +
+ +

+ Name: +

+

+ e-mail: +

+
+

+ What they say: +

+ Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis quae, magnam autem sunt, dolore iure natus placeat sint quidem tempora soluta praesentium at illum eos? Vero repellat numquam quasi delectus. + Velit amet nobis est officia voluptatem aliquam! Doloremque excepturi sequi vitae obcaecati beatae saepe reiciendis, perspiciatis, maiores omnis harum dignissimos ea corrupti temporibus facilis repellat sint blanditiis impedit laboriosam ab! +
+ +

+
+ + +
+ + + + + + +
+
+
+
+

+ Contact info +
    +
  • + Main location: Example Street 12/22 Boston +
  • +
  • + Call Center: +00 000 000 000 +
  • +
  • + e-mail: example@email.com +
  • +
  • + Account: 00 0000 0000 0000 0000 0000 +
  • + +
+

+
+
+ +
+
+ +
+
+
+ + + + + + + + + + + \ No newline at end of file diff --git a/main.js b/main.js index e69de29b..af140427 100644 --- a/main.js +++ b/main.js @@ -0,0 +1,71 @@ +const $generateButton = document.getElementById("generate_opinion"); +const $BMIButton = document.getElementById("bmi_button") + + +//bmi button + + +$BMIButton.addEventListener("click", () =>{ + location.replace('https://bmi-online.pl/'); +}); + + +// reqres api + +fetch('https://reqres.in/api/users') +.then(response => response.json()) +.then(json => { + console.log(json.data); + const teamContainer= json.data.map( el =>{ + return ` +
+
+
+
+ +
+
+ ${el.first_name} + + ${el.last_name} + +

${el.email}

+

Lorem ipsum, dolor sit amet consectetur adipisicing elit. In magni recusandae aspernatur sunt incidunt, quia molestiae enim deserunt repellendus ut repellat totam, suscipit eaque distinctio eius. Eius explicabo voluptatem architecto.

+
+
+
+
+ `}) + + document.querySelector('.team-container').innerHTML = teamContainer; +}) + + +// map + +var map = L.map('map').setView([40.712, -74.227],5); + +L.tileLayer('https://api.maptiler.com/maps/basic/256/{z}/{x}/{y}.png?key=IfxVdhkwsAqYS8TOgkw8', { + attribution:'© MapTiler © OpenStreetMap contributors' +}).addTo(map); + + +//event listener + +$generateButton.addEventListener("click", () =>{ + fetch('https://randomuser.me/api/') + .then((res) => res.json()) + .then((res) => { + console.log(res); + const NewName = res.results[0].name.first + ' ' + res.results[0].name.last; + const email = res.results[0].email; + const avatar =res.results[0].picture.medium; + document.getElementById("new_email").innerText = email; + document.getElementById("new_name").innerText = NewName; + document.getElementById("new_picture").src = avatar; + document.getElementById("text_opinion").classList.remove("not_visible") +}); +}); + + + diff --git a/style.css b/style.css index e69de29b..050aa1e9 100644 --- a/style.css +++ b/style.css @@ -0,0 +1,58 @@ +body::before{ + display: block; + content: ''; + height: 60px; +} + +#new_picture{ + height: 100px; + width: 100px; + margin: auto; + border-radius: 50px; +} +#opinions { + margin: auto; +} + +.not_visible { + visibility: hidden; +} + +.generate_button { + + background-color: rgb(245, 245, 245); + border: 2px solid rgba(85, 107, 47, 0.678); + padding: 10px 20px; + color: green; + cursor: pointer; + border-radius: 50px; +} + +#map { + height: 250px; + max-width: 400px; + width: 100%; + margin: auto; + border: purple; +} + +#contact { + padding: 20px; + +} +.list-contact { + padding: 10px; + +} +.opinions_card{ + padding: 20px; + +} +/* .bmi-picture{ + height: 200px; + width: 200px; +} */ +.warn_info{ + font-size: xx-small; + color: sienna; +} \ No newline at end of file