├── .gitignore
├── css
    └── style.css
├── img
    ├── 0.jpeg
    ├── 1.jpeg
    └── 2.jpeg
├── README.md
├── js
    ├── background.js
    ├── clock.js
    ├── weather.js
    ├── greetings.js
    ├── quotes.js
    └── todo.js
└── index.html


/.gitignore:
--------------------------------------------------------------------------------
1 | .DS_Store


--------------------------------------------------------------------------------
/css/style.css:
--------------------------------------------------------------------------------
1 | .hidden {
2 |   display: none;
3 | }
4 | 


--------------------------------------------------------------------------------
/img/0.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nomadcoders/javascript-for-beginners/HEAD/img/0.jpeg


--------------------------------------------------------------------------------
/img/1.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nomadcoders/javascript-for-beginners/HEAD/img/1.jpeg


--------------------------------------------------------------------------------
/img/2.jpeg:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/nomadcoders/javascript-for-beginners/HEAD/img/2.jpeg


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Javascript For Beginners
2 | 
3 | Learning Javascript by Making a Productivity App
4 | 


--------------------------------------------------------------------------------
/js/background.js:
--------------------------------------------------------------------------------
 1 | const images = ["0.jpeg", "1.jpeg", "2.jpeg"];
 2 | 
 3 | const chosenImage = images[Math.floor(Math.random() * images.length)];
 4 | 
 5 | const bgImage = document.createElement("img");
 6 | 
 7 | bgImage.src = `img/${chosenImage}`;
 8 | 
 9 | document.body.appendChild(bgImage);
10 | 


--------------------------------------------------------------------------------
/js/clock.js:
--------------------------------------------------------------------------------
 1 | const clock = document.querySelector("h2#clock");
 2 | 
 3 | function getClock() {
 4 |   const date = new Date();
 5 |   const hours = String(date.getHours()).padStart(2, "0");
 6 |   const minutes = String(date.getMinutes()).padStart(2, "0");
 7 |   const seconds = String(date.getSeconds()).padStart(2, "0");
 8 |   clock.innerText = `${hours}:${minutes}:${seconds}`;
 9 | }
10 | 
11 | getClock();
12 | setInterval(getClock, 1000);
13 | 


--------------------------------------------------------------------------------
/js/weather.js:
--------------------------------------------------------------------------------
 1 | const weather = document.querySelector("#weather span:first-child");
 2 | const city = document.querySelector("#weather span:last-child");
 3 | const API_KEY = "241051bf13976dd3ddf8b8d9f247255e";
 4 | 
 5 | function onGeoOk(position) {
 6 |   const lat = position.coords.latitude;
 7 |   const lon = position.coords.longitude;
 8 |   const url = `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&appid=${API_KEY}&units=metric`;
 9 |   fetch(url)
10 |     .then((response) => response.json())
11 |     .then((data) => {
12 |       city.innerText = data.name;
13 |       weather.innerText = `${data.weather[0].main} / ${data.main.temp}`;
14 |     });
15 | }
16 | function onGeoError() {
17 |   alert("Can't find you. No weather for you.");
18 | }
19 | 
20 | navigator.geolocation.getCurrentPosition(onGeoOk, onGeoError);
21 | 


--------------------------------------------------------------------------------
/js/greetings.js:
--------------------------------------------------------------------------------
 1 | const loginForm = document.querySelector("#login-form");
 2 | const loginInput = document.querySelector("#login-form input");
 3 | const greeting = document.querySelector("#greeting");
 4 | 
 5 | const HIDDEN_CLASSNAME = "hidden";
 6 | const USERNAME_KEY = "username";
 7 | 
 8 | function onLoginSubmit(event) {
 9 |   event.preventDefault();
10 |   loginForm.classList.add(HIDDEN_CLASSNAME);
11 |   const username = loginInput.value;
12 |   localStorage.setItem(USERNAME_KEY, username);
13 |   paintGreetings(username);
14 | }
15 | 
16 | function paintGreetings(username) {
17 |   greeting.innerText = `Hello ${username}`;
18 |   greeting.classList.remove(HIDDEN_CLASSNAME);
19 | }
20 | 
21 | const savedUsername = localStorage.getItem(USERNAME_KEY);
22 | 
23 | if (savedUsername === null) {
24 |   loginForm.classList.remove(HIDDEN_CLASSNAME);
25 |   loginForm.addEventListener("submit", onLoginSubmit);
26 | } else {
27 |   paintGreetings(savedUsername);
28 | }
29 | 


--------------------------------------------------------------------------------
/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 |   <head>
 4 |     <meta charset="UTF-8" />
 5 |     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
 6 |     <link rel="stylesheet" href="css/style.css" />
 7 |     <title>Momentum App</title>
 8 |   </head>
 9 |   <body>
10 |     <h2 id="clock">00:00:00</h2>
11 |     <form class="hidden" id="login-form">
12 |       <input
13 |         required
14 |         maxlength="15"
15 |         type="text"
16 |         placeholder="What is your name?"
17 |       />
18 |       <input type="submit" value="Log In" />
19 |     </form>
20 |     <h1 class="hidden" id="greeting"></h1>
21 |     <form id="todo-form">
22 |       <input type="text" placeholder="Write a To Do and Press Enter" required />
23 |     </form>
24 |     <ul id="todo-list"></ul>
25 |     <div id="quote">
26 |       <span></span>
27 |       <span></span>
28 |     </div>
29 |     <div id="weather">
30 |       <span></span>
31 |       <span></span>
32 |     </div>
33 |     <script src="js/greetings.js"></script>
34 |     <script src="js/clock.js"></script>
35 |     <script src="js/quotes.js"></script>
36 |     <script src="js/background.js"></script>
37 |     <script src="js/todo.js"></script>
38 |     <script src="js/weather.js"></script>
39 |   </body>
40 | </html>
41 | 


--------------------------------------------------------------------------------
/js/quotes.js:
--------------------------------------------------------------------------------
 1 | const quotes = [
 2 |   {
 3 |     quote: "The way to get started is to quit talking and begin doing.",
 4 |     author: "Walt Disney",
 5 |   },
 6 |   {
 7 |     quote: "Life is what happens when you're busy making other plans.",
 8 |     author: "John Lennon",
 9 |   },
10 |   {
11 |     quote:
12 |       "The world is a book and those who do not travel read only one page.",
13 |     author: "Saint Augustine",
14 |   },
15 |   {
16 |     quote: "Life is either a daring adventure or nothing at all.",
17 |     author: "Helen Keller",
18 |   },
19 |   {
20 |     quote: "To Travel is to Live",
21 |     author: "Hans Christian Andersen",
22 |   },
23 |   {
24 |     quote: "Only a life lived for others is a life worthwhile.",
25 |     author: "Albert Einstein",
26 |   },
27 |   {
28 |     quote: "You only live once, but if you do it right, once is enough.",
29 |     author: "Mae West",
30 |   },
31 |   {
32 |     quote: "Never go on trips with anyone you do not love.",
33 |     author: "Hemmingway",
34 |   },
35 |   {
36 |     quote: "We wander for distraction, but we travel for fulfilment.",
37 |     author: "Hilaire Belloc",
38 |   },
39 |   {
40 |     quote: "Travel expands the mind and fills the gap.",
41 |     author: "Sheda Savage",
42 |   },
43 | ];
44 | 
45 | const quote = document.querySelector("#quote span:first-child");
46 | const author = document.querySelector("#quote span:last-child");
47 | const todaysQuote = quotes[Math.floor(Math.random() * quotes.length)];
48 | 
49 | quote.innerText = todaysQuote.quote;
50 | author.innerText = todaysQuote.author;
51 | 


--------------------------------------------------------------------------------
/js/todo.js:
--------------------------------------------------------------------------------
 1 | const toDoForm = document.getElementById("todo-form");
 2 | const toDoInput = document.querySelector("#todo-form input");
 3 | const toDoList = document.getElementById("todo-list");
 4 | 
 5 | const TODOS_KEY = "todos";
 6 | 
 7 | let toDos = [];
 8 | 
 9 | function saveToDos() {
10 |   localStorage.setItem(TODOS_KEY, JSON.stringify(toDos));
11 | }
12 | 
13 | function deleteToDo(event) {
14 |   const li = event.target.parentElement;
15 |   li.remove();
16 |   toDos = toDos.filter((toDo) => toDo.id !== parseInt(li.id));
17 |   saveToDos();
18 | }
19 | 
20 | function paintToDo(newTodo) {
21 |   const li = document.createElement("li");
22 |   li.id = newTodo.id;
23 |   const span = document.createElement("span");
24 |   span.innerText = newTodo.text;
25 |   const button = document.createElement("button");
26 |   button.innerText = "❌";
27 |   button.addEventListener("click", deleteToDo);
28 |   li.appendChild(span);
29 |   li.appendChild(button);
30 |   toDoList.appendChild(li);
31 | }
32 | 
33 | function handleToDoSubmit(event) {
34 |   event.preventDefault();
35 |   const newTodo = toDoInput.value;
36 |   toDoInput.value = "";
37 |   const newTodoObj = {
38 |     text: newTodo,
39 |     id: Date.now(),
40 |   };
41 |   toDos.push(newTodoObj);
42 |   paintToDo(newTodoObj);
43 |   saveToDos();
44 | }
45 | 
46 | toDoForm.addEventListener("submit", handleToDoSubmit);
47 | 
48 | const savedToDos = localStorage.getItem(TODOS_KEY);
49 | 
50 | if (savedToDos !== null) {
51 |   const parsedToDos = JSON.parse(savedToDos);
52 |   toDos = parsedToDos;
53 |   parsedToDos.forEach(paintToDo);
54 | }
55 | 


--------------------------------------------------------------------------------