Show Quotes on New Tab

vivekkrishna

@nomadic i have some how got rid of cors error as i used the mode no cors in fetch call

nomadic

@vivekkrishna Yeah, that is a static site.

Think ZenQuotes would need to have a specific configuration on their servers to allow CORS. If they don't have it set up that way, then the mismatch with your domain and https://zenquotes.io would trigger the CORS error.

Edit: Just saw your new reply. Is the site deployed? I think if you run the site locally it might bypass the CORS issue (been awhile since I messed with it, so not sure if true). You then get a nice surprise when you publish the site and it doesn't work anymore.

Would think ZenQuotes would have there servers configured to allow this, but maybe they want to force you to run the call in the backend for caching purposes.

vivekkrishna

@nomadic no it is deployed .plz can u please give me code that builds a web page and uses backend to display quotes from zenquotes on the web page or atleast guide me

nomadic

@vivekkrishna Best I can do is point you to the documentation. Here is a PHP example: https://docs.zenquotes.io/code-example-cache-api-data-to-local-txt-file-with-php/

As for taking the quote data and displaying it, you can look at my mod's code: https://forum.vivaldi.net/post/559461

I don't have much experience with publishing websites with a full backend. I only manage a few static sites through Netlify. For a group project in college, we set up a Flask website (which uses Python), but I wasn't responsible for the server setup. I just had to complain to my group mate a few times when I got Nginx errors .

There are many guides out there that would do a better job explaining it than me.

vivekkrishna

i will deploy my website using netlify but i am not really understanding ur mod, like it has a lot to do and breaking it down is hard

vivekkrishna

your mod is specifically for a web browser i guess. but i just have to show some quotes on my index page thats all or atleast say how should i correct this error index1.html:25 Uncaught (in promise) SyntaxError: Unexpected end of input (at index1.html:25:31)
at getapi (index1.html:25:31)
at async index1.html:29:3 and here is the code :

<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Random Quotes from ZenQuotes</title>
</head>
<body>
  <h1>Random Quotes from ZenQuotes</h1>

 

  <div id="quote-container"></div>

  
    <script type="text/javascript">

const api_url ="https://zenquotes.io/api/quotes/";

(async function() {
  const api_url = "https://zenquotes.io/api/quotes/";

  async function getapi(url) {
    const response = await fetch(url, { mode: "no-cors" });
    var data = await response.json();
    console.log(data);
  }

  await getapi(api_url);
})();

  </script>
</body>
</html>```

DoctorG

@vivekkrishna Please edit your post and add ``` to get a code block for the HTML code!
Example:
```
This is in a code block
```
gives

This is in a code block

vivekkrishna

also say how to make static website into dynamic

nomadic

@vivekkrishna said in Show Quotes on New Tab:

i am not really understanding ur mod

I tried to include descriptive variable and function names with a few comments as well. There is definitely stuff you can't use because it is a mod for Vivaldi, but some of the basic parts of it can be used. If you have any specific questions, you can ask me about them.

Uncaught (in promise) SyntaxError: Unexpected end of input (at index1.html:25:31)

Sounds like the no-cors configuration won't work for you. See this StackOverflow answer: https://stackoverflow.com/a/47456842/12275656

Seems that ZenQuote's server isn't configured for CORS.

also say how to make static website into dynamic

Deploying a site with a backend is a more involved and I am not sure Netlify provides that sort of hosting.

It sounds like you need to do some more researching on your own. There are many in depth tutorials out there. I am not going to be able to do a better job than any of them.

There are also an infinite amount of different ways to do it, so you will have to find out what best works for the project you have in mind. Like Flask worked well for our project because it involved many different templates that pulled in information from a database, but it would be overkill for a simple webpage loading quotes.

vivekkrishna

@nomadic ,u said that I have to do some research regarding all that stuff, that's actually right ,i thought that I would manage the back end with just little knowledge and high use of chatgpt. But that will not work . Any suggestions for good tutorials so that I would become as good as u in doing all this stuff and I have one more question - some people say that focus on any one role like web developer or python developer, WT do u say

nomadic

@vivekkrishna I am just a mechanical engineer that thought it was a good idea to add a computer science major to my coursework at college "for fun" (was not fun); I am not an expert by any means.

Being a programmer involves being good at searching for stuff online. I spend half my time on coding projects looking at StackOverflow, JSFiddle, CodePen, or GitHub. You try something, break it, search up errors to better understand how it broke, looking up better ways to solve it now that you have better vocabulary to describe the issue, then try and adapt what you found to make it work for your application. Then slowly over time you become better at solving the problems you encounter without needing to search online for solutions.

I don't have any specific tutorials to suggest. Just do a search and see what you find. For the actual deployment, many hosting providers have instructions for how to set up some popular methods on their services.

@vivekkrishna said in Show Quotes on New Tab:

some people say that focus on any one role like web developer or python developer, WT do u say

I haven't ever worked in a programming job, but I can give you my limited insight.

It definitely helps to have a specialty where you are particularly proficient, but it is important to be flexible. Programming is always changing in what is relevant and useful. With stuff like web development, there is always some new framework that everyone starts using, so you have to be able to adapt and learn new things.

Employers often like to see a portfolio of projects you have worked on so they can gauge your ability to try out different technologies and learn how to use them.

Edit: And now I go to sleep. Stayed up way too late...