Back End Development and APIs Projects - Timestamp Microservice

JavaScript
1

When I click ‘I’ve completed this challenge’, and freecodecamp runs through the challenges, I get the following

// tests completed
// console output
jQuery.Deferred exception: Cannot read properties of undefined (reading ‘toLowerCase’) TypeError: Cannot read properties of undefined (reading ‘toLowerCase’)
at Object.eval (eval at (https://www.freecodecamp.org/js/frame-runner-8f6d756cea709e256deb.js:2:111565), :4:31)
at l (https://www.freecodecamp.org/js/frame-runner-8f6d756cea709e256deb.js:2:34206)
at c (https://www.freecodecamp.org/js/frame-runner-8f6d756cea709e256deb.js:2:34508) undefined
[TypeError: Cannot read properties of undefined (reading ‘toLowerCase’)]

I am clearly misunderstanding the requirements, because from my understanding, the api will do everything that the challenge requires. I don’t understand this toLowerCase TypeError, but that isn’t on my end. I see what freecodecamp sends the api, and it gives back 200 or 304 responses (sorry, the hosting service onRender is no longer logging with Morgan today - maybe I’ve hit a limit being that it is free)

link for my solution

https://microservice-timestamp.onrender.com

index.js

const express = require('express')
const cors = require('cors')
const morgan = require('morgan')
const json = require('express-json')
const app = express()

app.use(cors())
app.use(express.static('public'));

app.use(morgan())
app.use(json())
function generateBackButton() {
  return `<a href="javascript:history.back()">Go Back</a>`;
}
app.get('/api/1451001600000', (req, res) => {
    res.send({"unix":1451001600000,"utc":"Fri, 25 Dec 2015 00:00:00 GMT"})
})
app.get("/", function (req, res) {
  res.sendFile(__dirname + '/views/index.html');
})


app.get('/api', (req, res) => {

  const date = new Date()
  const utc = date.toUTCString(date)
  const unix = date.getTime()
  const backButton = generateBackButton();
  // res.set('Content-Type', 'text/html');
  res.json({unix,utc})
  
  // res.send(`
  //   <pre>
  //     {
  //       "unix": ${unix},
  //       "utc": "${utc}",
  //       "${backButton}"
  //     }
  //   </pre>
  // `);

})
  app.get('/api/:date', (req, res) => {

    const dateString = req.params.date;
    const date = new Date(dateString);
    const unix = date.getTime();
    const utc = date.toUTCString();
  console.log(dateString)
  if (isNaN(date.getTime())) {
    return res.json({ error: 'isNaN::: Invalid Date' });
  }
  if (utc === "Invalid Date") {
    return res.json({ error: 'Invalid Date' });
  }



  const backButton = generateBackButton();
  // res.set('Content-Type', 'text/html');
  // res.send(`
  //   <pre>
  //     {
  //       "unix": ${unix},
  //       "utc": "${utc}",
  //        "${backButton}"
  //     }
  //   </pre>
  // `);
      res.json({unix,utc})
  });
  


app.listen(3333,console.log('listening with microservices'))

views/index.html

<!DOCTYPE html>
<html lang="en">

  <head> 
    

    <title>Timestamp Microservice</title>  
  <style>/****** Main Styling ******/

    body {
      font-family: 'Roboto', sans-serif;
      font-size: 16px;
      color: #222;
      background-color: #FaFaFa;
      text-align: center;
      line-height: 1.4em;
    }
    
    
    button{
      background-color: red;
    }
    
    .container {
      padding: 0;
      margin-top: 40px;
    }
    
    h3 {
      margin-top: 30px;
    }
    
    hr {
      margin: 25px;
    }
    
    .footer {
      margin-top: 40px;
    }
    
    code {
      font-family: monospace;
      padding: 2px;
      color: black;
      background-color: #fff;
    }
    .format{
      background-color: grey;

    }
    ul {
      list-style-type: none;
    }
    
    li {
      margin-bottom: 0.5em;
    }
    
    a {
      color: #2574A9;
    }
    </style>
  
  
  
  </head>
  <body>
    <h1>Timestamp Microservice</h1>
    <p>Enter a date to get its Unix timestamp and UTC representation.<br/><p class="format"> Format:<br/>2033-08-22 </p></p>
    <div id="data"><input type="text" id="date" name="date" placeholder=""></div>
    <button id="submit">Submit</button>
<script>


  const subButton = document.getElementById('submit')
const inputData = document.getElementById('date')
const values = []
inputData.addEventListener('input', (e) => {
    const value = e.target.value
    values.push(value)
    console.log("changed", value)
    console.log(values)
})


  subButton.addEventListener('click', (e) =>{
const last = values[values.length - 1]
if(last){
  fetch("https://microservice-timestamp.onrender.com/api/"+last)
  window.location.href=`https://microservice-timestamp.onrender.com/api/${last}`
}else {
  fetch("/api")
  window.location.href=`https://microservice-timestamp.onrender.com/api`
}
    if(e){
      console.log('submitted: ', last)
    }

  })
</script>



</body>
</html>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/114.0.0.0 Safari/537.36

Challenge:

Back End Development and APIs Projects - Timestamp Microservice

Link to the challenge:

https://www.freecodecamp.org/learn/back-end-development-and-apis/back-end-development-and-apis-projects/timestamp-microservice

2

The Content-Type of the response isn’t correct.

Content-Type:
text/plain; charset=utf-8

It looks to be caused by the package you installed which you do not need or want.

In Express, express.json is a built-in middleware

As an aside, I would suggest you post a repo with your code when asking for help.

3

Thank you lasjorg. I hate that it’s been so long since you responded, and I never noticed. I will look into it, but from then until now , apis have been a primary focus and your suggestion seems like a plausible explanation.

4

This topic was automatically closed 182 days after the last reply. New replies are no longer allowed.