├── .DS_Store ├── .gitignore ├── README.md ├── bg.js ├── clock.js ├── gretting.js ├── images ├── .DS_Store ├── 1.jpg ├── 2.jpg └── 3.jpg ├── index.css ├── index.html └── todo.js /.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nomadcoders/js-basics/d8ad31037afdf700b7a02360ff8a05c243fbfdcc/.DS_Store -------------------------------------------------------------------------------- /.gitignore: -------------------------------------------------------------------------------- 1 | # Logs 2 | logs 3 | *.log 4 | npm-debug.log* 5 | yarn-debug.log* 6 | yarn-error.log* 7 | 8 | # Runtime data 9 | pids 10 | *.pid 11 | *.seed 12 | *.pid.lock 13 | 14 | # Directory for instrumented libs generated by jscoverage/JSCover 15 | lib-cov 16 | 17 | # Coverage directory used by tools like istanbul 18 | coverage 19 | 20 | # nyc test coverage 21 | .nyc_output 22 | 23 | # Grunt intermediate storage (http://gruntjs.com/creating-plugins#storing-task-files) 24 | .grunt 25 | 26 | # Bower dependency directory (https://bower.io/) 27 | bower_components 28 | 29 | # node-waf configuration 30 | .lock-wscript 31 | 32 | # Compiled binary addons (https://nodejs.org/api/addons.html) 33 | build/Release 34 | 35 | # Dependency directories 36 | node_modules/ 37 | jspm_packages/ 38 | 39 | # TypeScript v1 declaration files 40 | typings/ 41 | 42 | # Optional npm cache directory 43 | .npm 44 | 45 | # Optional eslint cache 46 | .eslintcache 47 | 48 | # Optional REPL history 49 | .node_repl_history 50 | 51 | # Output of 'npm pack' 52 | *.tgz 53 | 54 | # Yarn Integrity file 55 | .yarn-integrity 56 | 57 | # dotenv environment variables file 58 | .env 59 | 60 | # next.js build output 61 | .next -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | # JS Basics 2 | 3 | Repository for the JS-Basics Nomad Academy Course. Cloning a Productivity App with VanillaJS 4 | -------------------------------------------------------------------------------- /bg.js: -------------------------------------------------------------------------------- 1 | const body = document.querySelector("body"); 2 | 3 | const IMG_NUMBER = 3; 4 | 5 | function paintImage(imgNumber) { 6 | const image = new Image(); 7 | image.src = `images/${imgNumber + 1}.jpg`; 8 | image.classList.add("bgImage"); 9 | body.prepend(image); 10 | } 11 | 12 | function genRandom() { 13 | const number = Math.floor(Math.random() * IMG_NUMBER); 14 | return number; 15 | } 16 | 17 | function init() { 18 | const randomNumber = genRandom(); 19 | paintImage(randomNumber); 20 | } 21 | 22 | init(); 23 | -------------------------------------------------------------------------------- /clock.js: -------------------------------------------------------------------------------- 1 | const clockContainer = document.querySelector(".js-clock"), 2 | clockTitle = clockContainer.querySelector("h1"); 3 | 4 | function getTime() { 5 | const date = new Date(); 6 | const minutes = date.getMinutes(); 7 | const hours = date.getHours(); 8 | const seconds = date.getSeconds(); 9 | clockTitle.innerText = `${hours < 10 ? `0${hours}` : hours}:${ 10 | minutes < 10 ? `0${minutes}` : minutes 11 | }:${seconds < 10 ? `0${seconds}` : seconds}`; 12 | } 13 | 14 | function init() { 15 | getTime(); 16 | setInterval(getTime, 1000); 17 | } 18 | 19 | init(); 20 | -------------------------------------------------------------------------------- /gretting.js: -------------------------------------------------------------------------------- 1 | const form = document.querySelector(".js-form"), 2 | input = form.querySelector("input"), 3 | greeting = document.querySelector(".js-greetings"); 4 | 5 | const USER_LS = "currentUser", 6 | SHOWING_CN = "showing"; 7 | 8 | function saveName(text) { 9 | localStorage.setItem(USER_LS, text); 10 | } 11 | 12 | function handleSubmit(event) { 13 | event.preventDefault(); 14 | const currentValue = input.value; 15 | paintGreeting(currentValue); 16 | saveName(currentValue); 17 | } 18 | 19 | function askForName() { 20 | form.classList.add(SHOWING_CN); 21 | form.addEventListener("submit", handleSubmit); 22 | } 23 | 24 | function paintGreeting(text) { 25 | form.classList.remove(SHOWING_CN); 26 | greeting.classList.add(SHOWING_CN); 27 | greeting.innerText = `Hello ${text}`; 28 | } 29 | 30 | function loadName() { 31 | const currentUser = localStorage.getItem(USER_LS); 32 | if (currentUser === null) { 33 | askForName(); 34 | } else { 35 | paintGreeting(currentUser); 36 | } 37 | } 38 | 39 | function init() { 40 | loadName(); 41 | } 42 | 43 | init(); 44 | -------------------------------------------------------------------------------- /images/.DS_Store: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nomadcoders/js-basics/d8ad31037afdf700b7a02360ff8a05c243fbfdcc/images/.DS_Store -------------------------------------------------------------------------------- /images/1.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nomadcoders/js-basics/d8ad31037afdf700b7a02360ff8a05c243fbfdcc/images/1.jpg -------------------------------------------------------------------------------- /images/2.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nomadcoders/js-basics/d8ad31037afdf700b7a02360ff8a05c243fbfdcc/images/2.jpg -------------------------------------------------------------------------------- /images/3.jpg: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/nomadcoders/js-basics/d8ad31037afdf700b7a02360ff8a05c243fbfdcc/images/3.jpg -------------------------------------------------------------------------------- /index.css: -------------------------------------------------------------------------------- 1 | body { 2 | background-color: #2c3e50; 3 | } 4 | 5 | .btn { 6 | cursor: pointer; 7 | } 8 | body { 9 | color: #34495e; 10 | } 11 | 12 | .clicked { 13 | color: #7f8c8d; 14 | } 15 | 16 | .form, 17 | .greetings { 18 | display: none; 19 | } 20 | 21 | .showing { 22 | display: block; 23 | } 24 | 25 | @keyframes fadeIn { 26 | from { 27 | opacity: 0; 28 | } 29 | to { 30 | opacity: 1; 31 | } 32 | } 33 | 34 | .bgImage { 35 | position: absolute; 36 | top: 0; 37 | left: 0; 38 | width: 100%; 39 | height: 100%; 40 | z-index: -1; 41 | animation: fadeIn 0.5s linear; 42 | } 43 | -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | Something 6 | 7 | 8 | 9 | 10 | 11 |
12 |

00:00

13 |
14 |
15 | 16 |
17 |

18 |
19 | 20 |
21 | 23 | 24 | 25 | 26 | 27 | 28 | 29 | -------------------------------------------------------------------------------- /todo.js: -------------------------------------------------------------------------------- 1 | const toDoForm = document.querySelector(".js-toDoForm"), 2 | toDoInput = toDoForm.querySelector("input"), 3 | toDoList = document.querySelector(".js-toDoList"); 4 | 5 | const TODOS_LS = "toDos"; 6 | 7 | let toDos = []; 8 | 9 | function deleteToDo(event) { 10 | const btn = event.target; 11 | const li = btn.parentNode; 12 | toDoList.removeChild(li); 13 | const cleanToDos = toDos.filter(function(toDo) { 14 | return toDo.id !== parseInt(li.id); 15 | }); 16 | toDos = cleanToDos; 17 | saveToDos(); 18 | } 19 | 20 | function saveToDos() { 21 | localStorage.setItem(TODOS_LS, JSON.stringify(toDos)); 22 | } 23 | 24 | function paintToDo(text) { 25 | const li = document.createElement("li"); 26 | const delBtn = document.createElement("button"); 27 | const span = document.createElement("span"); 28 | const newId = toDos.length + 1; 29 | delBtn.innerText = "❌"; 30 | delBtn.addEventListener("click", deleteToDo); 31 | span.innerText = text; 32 | li.appendChild(delBtn); 33 | li.appendChild(span); 34 | li.id = newId; 35 | toDoList.appendChild(li); 36 | const toDoObj = { 37 | text: text, 38 | id: newId 39 | }; 40 | toDos.push(toDoObj); 41 | saveToDos(); 42 | } 43 | 44 | function handleSubmit(event) { 45 | event.preventDefault(); 46 | const currentValue = toDoInput.value; 47 | paintToDo(currentValue); 48 | toDoInput.value = ""; 49 | } 50 | 51 | function loadToDos() { 52 | const loadedToDos = localStorage.getItem(TODOS_LS); 53 | if (loadedToDos !== null) { 54 | const parsedToDos = JSON.parse(loadedToDos); 55 | parsedToDos.forEach(function(toDo) { 56 | paintToDo(toDo.text); 57 | }); 58 | } 59 | } 60 | 61 | function init() { 62 | loadToDos(); 63 | toDoForm.addEventListener("submit", handleSubmit); 64 | } 65 | 66 | init(); 67 | --------------------------------------------------------------------------------