harjoitus 8 lisäys

06f1c390 · AE6374 · c870b2f5 · 06f1c390 · 06f1c390 · 06f1c390
Commit 06f1c390 authored 3 months ago by AE6374
--- a/harjoitukset/harjoitus8/code.js
+++ b/harjoitukset/harjoitus8/code.js
+function init() {
+    let infoText = document.getElementById('infoText')
+    infoText.innerHTML = 'Ladataan tehtävälista palvelimelta, odota...'
+    loadTodos()
+  }
+
+async function loadTodos() {
+    let response = await fetch('http://localhost:3000/todos')
+    let todos = await response.json()
+      console.log(todos)
+    showTodos(todos)
+  }
+
+function createTodoListItem(todo) {
+    // luodaan uusi LI-elementti
+    let li = document.createElement('li')
+      // luodaan uusi id-attribuutti
+    let li_attr = document.createAttribute('id')
+      // kiinnitetään tehtävän/todon id:n arvo luotuun attribuuttiin 
+    li_attr.value= todo._id
+      // kiinnitetään attribuutti LI-elementtiin
+    li.setAttributeNode(li_attr)
+      // luodaan uusi tekstisolmu, joka sisältää tehtävän/todon tekstin
+    let text = document.createTextNode(todo.text)
+      // lisätään teksti LI-elementtiin
+    li.appendChild(text)
+      // luodaan uusi SPAN-elementti, käytännössä x-kirjan, jotta tehtävä saadaan poistettua
+    let span = document.createElement('span')
+      // luodaan uusi class-attribuutti
+    let span_attr = document.createAttribute('class')
+      // kiinnitetään attribuuttiin delete-arvo, ts. class="delete", jotta saadaan tyylit tähän kiinni
+    span_attr.value = 'delete'
+      // kiinnitetään SPAN-elementtiin yo. attribuutti
+    span.setAttributeNode(span_attr)
+      // luodaan tekstisolmu arvolla x
+    let x = document.createTextNode(' x ')
+      // kiinnitetään x-tekstisolmu SPAN-elementtiin (näkyville)
+    span.appendChild(x)
+      // määritetään SPAN-elementin onclick-tapahtuma kutsumaan removeTodo-funkiota
+    span.onclick = function() { removeTodo(todo._id) }
+      // lisätään SPAN-elementti LI-elementtin
+    li.appendChild(span)
+      // palautetaan luotu LI-elementti
+      // on siis muotoa: <li id="mongoIDXXXXX">Muista soittaa...<span class="remove">x</span></li>
+    return li
+  }
+
+function showTodos(todos) {
+    let todosList = document.getElementById('todosList')
+    let infoText = document.getElementById('infoText')
+    // no todos
+    if (todos.length === 0) {
+      infoText.innerHTML = 'Ei tehtäviä'
+    } else {    
+      todos.forEach(todo => {
+          let li = createTodoListItem(todo)        
+          todosList.appendChild(li)
+      })
+      infoText.innerHTML = ''
+    }
+  }
+
+async function addTodo() {
+    let newTodo = document.getElementById('newTodo')
+    const data = { 'text': newTodo.value }
+    const response = await fetch('http://localhost:3000/todos', {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json'
+      },
+      body: JSON.stringify(data)
+    })
+    let todo = await response.json()
+    let todosList = document.getElementById('todosList')
+    let li = createTodoListItem(todo)
+    todosList.appendChild(li)
+  
+    let infoText = document.getElementById('infoText')
+    infoText.innerHTML = ''
+    newTodo.value = ''
+  }
+
+async function removeTodo(id) {
+    const response = await fetch('http://localhost:3000/todos/'+id, {
+      method: 'DELETE'
+    })
+    let responseJson = await response.json()
+    let li = document.getElementById(id)
+    li.parentNode.removeChild(li)
+  
+    let todosList = document.getElementById('todosList')
+    if (!todosList.hasChildNodes()) {
+      let infoText = document.getElementById('infoText')
+      infoText.innerHTML = 'Ei tehtäviä'
+    }
+  }
\ No newline at end of file
--- a/harjoitukset/harjoitus8/get2.png
+++ b/harjoitukset/harjoitus8/get2.png
--- a/harjoitukset/harjoitus8/index.html
+++ b/harjoitukset/harjoitus8/index.html
+<!DOCTYPE html>
+<html>
+<head>
+  <meta charset="UTF-8">
+  <title>FullStack-esimerkkisovellus</title>
+  <link rel="stylesheet" href="styles.css">
+  <script src="code.js"></script>
+</head>
+<body onload="init()">
+  <div id="container">
+    <h1>Tehtävälista</h1>
+    <input type="text" id="newTodo"/>
+    <button onclick="addTodo()">Lisää</button>
+    <ul id="todosList"></ul>
+    <p id="infoText"></p>
+  </div>
+</body>
+</html>
\ No newline at end of file
--- a/harjoitukset/harjoitus8/index.js
+++ b/harjoitukset/harjoitus8/index.js
+const express = require('express') 
+const cors = require('cors')
+const app = express()
+const port = 3000
+
+// cors - allow connection from different domains and ports
+app.use(cors())
+
+// convert json string to json object (from request)
+app.use(express.json())
+
+const mongoose = require('mongoose')
+const mongoDB = 'mongodb+srv://joonapankkone:SALASANATÄHÄN@democluster.h2r6u.mongodb.net/?retryWrites=true&w=majority&appName=DemoCluster'
+mongoose.connect(mongoDB)
+
+const db = mongoose.connection
+db.on('error', console.error.bind(console, 'connection error:'))
+db.once('open', function() {
+  console.log("Database test connected")
+})
+
+// scheema
+const todoSchema = new mongoose.Schema({
+  text: { type: String, required: true } 
+})
+
+// model
+const Todo = mongoose.model('Todo', todoSchema, 'todos')
+
+// Routes here...
+app.post('/todos', async (request, response) => {
+    const { text } = request.body
+    const todo = new Todo({
+      text: text
+    })
+    const savedTodo = await todo.save()
+    response.json(savedTodo)  
+  })
+
+
+app.get('/todos', async (request, response) => {
+    const todos = await Todo.find({})
+    response.json(todos)
+  })
+
+app.get('/todos/:id', async (request, response) => {
+    const todo = await Todo.findById(request.params.id)
+    if (todo) response.json(todo)
+    else response.status(404).end()
+  })
+
+app.delete('/todos/:id', async (request, response) => {
+    const doc = await Todo.findById(request.params.id);
+    if (doc) {
+      await doc.deleteOne()
+      response.json(doc)
+    }
+    else response.status(404).end()
+  })
+// todos-route
+app.get('/todos', (request, response) => {
+  response.send('Todos')
+})
+
+// app listen port 3000
+app.listen(port, () => {
+  console.log('Example app listening on port 3000')
+})
\ No newline at end of file
--- a/harjoitukset/harjoitus8/poistettu-tehtava.png
+++ b/harjoitukset/harjoitus8/poistettu-tehtava.png
--- a/harjoitukset/harjoitus8/postaus.png
+++ b/harjoitukset/harjoitus8/postaus.png
--- a/harjoitukset/harjoitus8/styles.css
+++ b/harjoitukset/harjoitus8/styles.css
+body {
+    font-family: 'Oswald', sans-serif;
+  }
+  
+  #container {
+    width: 420px;
+    background-color:aliceblue;
+    border-radius: 3px;
+    padding: 0px 15px 0px 15px;
+    margin: 10px auto;
+    border: 1px solid #ddd;
+  }
+  
+  h1 {
+    background-color: rgb(95, 160, 99);
+    text-align: center;
+    color: white;
+    padding: 5px;
+    border-radius: 15px;
+  }
+  
+  ul {
+    list-style-type: circle;
+    margin: 20px 0 20px 0;
+  }
+  
+  ul li {
+    background: #cce5ff;
+    color: rgb(62, 62, 173);
+  }
+  
+  input[type=text] {
+    border: 1px solid #ccc;
+    padding: 5px;
+    width: 300px;
+    font-size: 15px;
+  }
+  
+  button {
+    border: 1px solid #ccc;
+    margin-left: 15px;
+    padding: 5px 15px;
+    font-size: 15px;
+    cursor: pointer;
+  }
+  
+  .delete {
+    cursor: pointer;
+    color: red;
+    font-weight: bold;
+  }
\ No newline at end of file
--- a/harjoitukset/harjoitus8/tehtavat.png
+++ b/harjoitukset/harjoitus8/tehtavat.png