DEV Community

Cover image for My first baby project
danielarmbruster0314
danielarmbruster0314

Posted on

My first baby project

My first project completed as of today and it was so fun to see my skills come to life on the DOM. What is the project? Well my project was a fortune generator that utilized a local server acting as a mock API. In the app the user could either get a regular fortune which included the proverb and lucky numbers, just the lucky numbers or just the proverb. the user could also add a proverb that would be added to the API and be in the pool of possible outcomes. I added a number generator that adds a set of lucky numbers for the users proverb before posting it to the local server. This project was built upon a code base written by Jon Kantner @ https://codepen.io/jkantner and the spicifick code base @ codehttps://codepen.io/jkantner/pen/VJMGLR highly recommend you check his stuff out. The intention for this project was to create my own local API or db.json file and utilize fetch calls and responses based of user input. I do not intend to utilize this project on my own professional portfolio nor do I intended to host a website that would utilize this project in terms of monetization. I simply was utilizing this project to expand my understanding of DOM manipulation and server calls. And I am grateful and excited that I could contribute, expand, and manipulate code from another creator to better conceptualize my understanding and my project vision. This process was a roller coaster, but I had such a fun learning experience. The biggest challenge I had was creating a process that would grab a random item from my local server but came up with a brute force solution that seemed to do the job. My solution was to make 2 separate calls to the local server. The first call would return the array of objects containing all the proverbs and lucky numbers, then a second request that would utilize the array Length to generate a random id number based of the length of the array and make a request to that end point.

let newId = Math.floor((Math.random() * arry.length) + 1);
            fetch(`http://localhost:3000/fortune/${newId}`)
            .then((resp) => resp.json())
            .then((data) => (data))  

Enter fullscreen mode Exit fullscreen mode

Again truly loved this project and looking forward to the next learning experience.

Top comments (0)