cdv-poznan · Dan199312 · May 29, 2022
diff --git a/assets/backVideo.mp4 b/assets/backVideo.mp4
diff --git a/assets/background.jpg b/assets/background.jpg
diff --git a/assets/logo1.png b/assets/logo1.png
diff --git a/favicon.ico b/favicon.ico
diff --git a/index.html b/index.html
@@ -0,0 +1,36 @@
+<!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">
+    <title>Document</title>
+    <link rel="stylesheet" href="./styles/global.css"/>
+    <link rel="stylesheet" href="./styles/login.css"/>
+</head>
+<body>
+
+    <section class="login_screen">
+        <video loop autoplay muted src="./assets/backVideo.mp4" class="background_video"></video>
+        <div class="login_container">
+            <img src="./assets/logo1.png" class="logo"/>
+            <h1 class="login_title">JAMES BOND'S APP</h1>
+            <div class="input_container">
+                <label>AGEND ID</label>
+                <input id="login_input"/>
+            </div>
+            <div class="input_container">
+                <label>PASSWORD</label>
+                <input type="password" id="password_input"/>
+            </div>
+            <button class="btn"id="login_button">LOG IN</button>
+
+            <p id="login_error" class="not_visible">Login Error</p>
+            <p class="login_text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Ducimus reiciendis optio laboriosam soluta quo laborum inventore, fugit id corporis voluptatem sequi sunt, eum, molestias quisquam voluptatibus odit ipsa explicabo perspiciatis.</p>
+
+        </div>
+    </section>
+
+    <script src="./scripts/index.js"></script>
+</body>
+</html>
diff --git a/main.js b/main.js
diff --git a/mainScreen.html b/mainScreen.html
@@ -0,0 +1,77 @@
+<!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="https://unpkg.com/leaflet@1.8.0/dist/leaflet.css" integrity="sha512-hoalWLoI8r4UszCkZ5kL8vayOGVae1oxXe/2A4AO6J9+580uKHDO3JdHb7NzwwzK5xr/Fs0W40kiNHxM9vyTtQ==" crossorigin="" />
+<script src="https://unpkg.com/leaflet@1.8.0/dist/leaflet.js" integrity="sha512-BB3hKbKWOc9Ez/TAwyWxNXeoV9c1v6FIeYiBieIWkpLjauysF18NzgR1MBNBXf8/KABdlkX68nAhlwcDFLGPCQ==" crossorigin=""></script>
+    <title>Document</title>
+    <link rel="stylesheet" href="./styles/global.css"/>
+    <link rel="stylesheet" href="./styles/mainScreen.css"/>
+
+</head>
+<body>
+
+    <button class="btn" id="toggle_screen">Tasks / Home</button>
+    <main>
+        <button class="btn" id="logout">LOGOUT</button>
+        <img src="./assets/logo1.png" class="logo"/>
+        <div id="general_screen">
+            <section class="country_section single_section">
+                <div class="country_inputs">
+                    <div class="input_container">
+                        <label>Bond, where are you going?</label>
+                        <input id="country_input" value="Poland"/>
+                    </div>
+                    <button class="btn" id="country_button">Check</button>
+                </div>
+                <div class="country_labels">
+                    <p>
+                        <span class="data_label">Country:</span>
+                        <span calss="data_value" id="country_fullname"></span>
+                    </p>
+                    <p>
+                        <span class="data_label">Population:</span>
+                        <span calss="data_value" id="country_population"></span>
+                    </p>
+                    <p>
+                        <span class="data_label">Capital city:</span>
+                        <span calss="data_value" id="country_capital"></span>
+                    </p>
+
+                </div>
+                <div id="map">
+
+                </div>
+            </section>
+            <section class="single_section">
+                <h2>New Bond's identity</h2>
+                <img src="https://cdn-icons-png.flaticon.com/512/147/147144.png" id="new_picture"/>
+                <div>
+                    <p><span>Name: </span><span id="new_name"></span></p>
+                    <p><span>Email: </span><span id="new_eamil"></span></p>
+                    <button class="btn" id="generate_id">Generate</button>
+
+                </div>
+            </section>
+        </div>
+        <div id="notes_screen" class="hidden">
+            <section class="single_section">
+                <div class="input_container">
+                    <label>Tasks: </label>
+                    <input id="new_task_input" />
+                    <button class="btn" id="add_task">Add</button>
+                    <button class="btn" id="load_tasks">Load tasks from memory</button>
+                  </div>
+                  <ul id="task_list"></ul>
+
+            </section>
+        </div>
+    </main>
+
+
+
+    <script src="./scripts/mainScreen.js"></script>
+</body>
+</html>
diff --git a/scripts/index.js b/scripts/index.js
@@ -0,0 +1,60 @@
+const $login = document.getElementById("login_input");
+const $Password = document.getElementById("password_input");
+const $loginButton = document.getElementById("login_button");
+const $loginError= document.getElementById("login_error");
+//https://login-service-wsb-wj.netlify.app/.netlify/functions/login
+
+/*
+const loginHandler = async () => {
+    const password = $Password.value;
+    const login = $login.value;
+
+   const response = await fetch('https://login-service-wsb-wj.netlify.app/.netlify/functions/login', {
+        method: "POST",
+        body: JSON.stringify({
+
+            login,
+            password,
+
+        }),
+    });
+
+    const responseParsed = await response.json();
+
+    if (response.isLogged) {
+        window.location.href = "./mainScreen.html";
+    } else {
+        $loginError.classList.remove("not_visible");
+    }
+
+};
+*/
+
+const loginHandler = () => {
+    const password = $Password.value;
+    const login = $login.value;
+
+    fetch('https://login-service-wsb-wj.netlify.app/.netlify/functions/login', {
+        method: "POST",
+        body: JSON.stringify({
+
+            login,
+            password,
+
+        }),
+    })
+
+    .then((Response)=>Response.json())
+    .then((Response)=>{
+        console.log(Response);
+        if (Response.isLogged) {
+            localStorage.setItem("isLoggedIn", "yes");
+            window.location.href = "./mainScreen.html";
+        } else {
+            $loginError.classList.remove("not_visible");
+        }
+});
+};
+
+
+$loginButton.addEventListener("click", loginHandler);
diff --git a/scripts/mainScreen.js b/scripts/mainScreen.js
@@ -0,0 +1,135 @@
+
+const $logout = document.getElementById("logout");
+const $countryButton = document.getElementById("country_button");
+const $countryInput = document.getElementById("country_input");
+const $generateButton = document.getElementById("generate_id");
+const $toggleButton = document.getElementById("toggle_screen");
+
+const $toggleScreens = document.getElementById("toggle_screens");
+const $addTask = document.getElementById("add_task");
+const $taskList = document.getElementById("task_list");
+const $newTaskInput = document.getElementById("new_task_input");
+const $loadTasks = document.getElementById("load_tasks");
+
+
+$toggleButton.addEventListener('click', () => {
+    document.getElementById("general_screen").classList.toggle("hidden");
+    document.getElementById("notes_screen").classList.toggle("hidden");
+})
+
+var map = L.map('map').setView([0, 0], 5);
+L.tileLayer('https://api.maptiler.com/maps/toner/{z}/{x}/{y}.png?key=LI4L28yACgdpBon0bgPY', {
+    attributtion: '<a href="https://www.maptiler.com/copyright/" target="_blank">&copy; MapTiler</a> <a href="https://www.openstreetmap.org/copyright" target="_blank">&copy; OpenStreetMap contributors</a>'
+}).addTo(map);
+
+
+
+
+const logout = () => {
+    localStorage.setItem("isLoggedIn", "no");
+    window.location.href = "/";
+};
+
+const isLoggedIn =localStorage.getItem("isLoggedIn");
+
+if (isLoggedIn !== "yes"){
+    logout();
+};
+
+
+const searchCountry = () => {
+    const country = $countryInput.value;
+    fetch(`https://restcountries.com/v3.1/name/${country}`)
+    .then((res) => res.json())
+    .then((res) => {
+        const country = res[0];
+        if (country){
+
+            const capital = country.capital.join(",");
+            const fullName = country.name.official;
+            const population = country.population;
+
+            document.getElementById("country_fullname").innerText = fullName;
+            document.getElementById("country_population").innerText = population;
+            document.getElementById("country_capital").innerText = capital;
+
+            map.panTo(country.latlng, {animate: true, duration: 2.0});
+
+        }
+
+        console.log(res);
+    });
+
+};
+
+$generateButton.addEventListener("click", () => {
+    fetch('https://randomuser.me/api/')
+    .then((res) => res.json())
+    .then((res) => {
+        const id = res.results[0];
+        if (id) {
+
+            const newName = id.name.first + " " + id.name.last;
+            const email = id.email;
+            const avatar = id.picture.medium;
+
+
+
+            document.getElementById("new_name").innerText = newName;
+            document.getElementById("new_eamil").innerText = email;
+            document.getElementById("new_picture").src = avatar;
+
+        }
+        console.log(res);
+    });
+});
+
+
+
+  $addTask.addEventListener("click", () => {
+    const newTask = $newTaskInput.value;
+    $newTaskInput.value = "";
+    const listElement = document.createElement("li");
+    listElement.classList.add("task");
+    listElement.innerText = newTask;
+    $taskList.append(listElement);
+    const tasksFromLS = localStorage.getItem("tasks")
+      ? JSON.parse(localStorage.getItem("tasks"))
+      : [];
+    console.log(tasksFromLS);
+    tasksFromLS.push(newTask);
+    localStorage.setItem("tasks", JSON.stringify(tasksFromLS));
+  });
+
+  $taskList.addEventListener("click", (e) => {
+    if (e.target.classList.contains("task")) {
+      const taskToDelete = e.target.innerText;
+      e.target.remove();
+      const tasksFromLS = localStorage.getItem("tasks")
+        ? JSON.parse(localStorage.getItem("tasks"))
+        : [];
+      const tasksAfterDelete = tasksFromLS.filter(
+        (task) => task !== taskToDelete
+      );
+      localStorage.setItem("tasks", JSON.stringify(tasksAfterDelete));
+    }
+  });
+
+  $loadTasks.addEventListener("click", () => {
+    if ($taskList.childNodes.length === 0) {
+      const tasksFromLS = localStorage.getItem("tasks")
+        ? JSON.parse(localStorage.getItem("tasks"))
+        : [];
+
+      tasksFromLS.forEach((taskText) => {
+        const listElement = document.createElement("li");
+        listElement.classList.add("task");
+        listElement.innerText = taskText;
+        $taskList.append(listElement);
+      });
+    }
+  });
+
+$logout.addEventListener("click", logout);
+$countryButton.addEventListener("click", searchCountry);
+
diff --git a/style.css b/style.css
diff --git a/styles/global.css b/styles/global.css
@@ -0,0 +1,64 @@
+@import url('https://fonts.googleapis.com/css2?family=Special+Elite&display=swap');
+
+
+* {
+    font-family: 'Special Elite', cursive;
+}
+
+html {
+    font-size: 62.5%;
+}
+
+.not_visible {
+    visibility: hidden;
+}
+
+body {
+    padding: 0;
+    margin: 0;
+    min-height: 100vh;
+    background-image: url("../assets/background.jpg");
+    background-position: center;
+    background-size: cover;
+    background-repeat: no-repeat;
+    font-size: large;
+}
+
+.input_container {
+    display: flex;
+    justify-content: center;
+    align-content: center;
+    gap: 1.6rem;
+    margin-bottom: 2rem;
+}
+
+.input_container input {
+    background: transparent;
+    border: none;
+    border-bottom: .1rem solid ghostwhite;
+    color: ghostwhite;
+    padding: .5rem;
+}
+
+.btn {
+    width: 12rem;
+    background-color: rgba(16, 167, 16, 0.419);
+    border: .2rem solid darkgreen;
+    padding: 1rem 2rem;
+    color: ghostwhite;
+    cursor: pointer;
+    border-radius: 1rem;
+
+}
+
+.btn:hover {
+    transform: translateY(-.3rem);
+}
+
+.btn:active{
+    transform: translateY(-.1rem);
+}
+
+.hidden {
+    display: none;
+}