Faker Posts - Answer Overflow

Topics

Faker

KPCKevin Powell - Community

•Created by Faker on 11/21/2024 in #front-end

Is event object and window.event object the same ?

Hello guys, sorry to disturb you, can someone explain what is the difference between an event object passed by an event handler and an a window event please. I just read that the window.event was used for backward compatibility like this: event = event || window.event I don't understand, event and window.event aren't the same thing ? for e,g consider the following:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event vs window.event</title>
</head>
<body>
    <button id="clickMe">Click Me</button>
    <input id="typeHere" placeholder="Type something here" />
    <script>
        // Click Event Listener
        document.getElementById("clickMe").addEventListener("click", (event) => {
            console.log("---- Click Event ----");
            console.log("event (local):", event);
            console.log("window.event (global):", window.event);
        });

        // Input Event Listener
        document.getElementById("typeHere").addEventListener("input", (event) => {
            console.log("---- Input Event ----");
            console.log("event (local):", event);
            console.log("window.event (global):", window.event);
        });
    </script>
</body>
</html>

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Event vs window.event</title>
</head>
<body>
    <button id="clickMe">Click Me</button>
    <input id="typeHere" placeholder="Type something here" />
    <script>
        // Click Event Listener
        document.getElementById("clickMe").addEventListener("click", (event) => {
            console.log("---- Click Event ----");
            console.log("event (local):", event);
            console.log("window.event (global):", window.event);
        });

        // Input Event Listener
        document.getElementById("typeHere").addEventListener("input", (event) => {
            console.log("---- Input Event ----");
            console.log("event (local):", event);
            console.log("window.event (global):", window.event);
        });
    </script>
</body>
</html>

I didn't really understand what is the difference

1 replies

KPCKevin Powell - Community

•Created by Faker on 11/20/2024 in #front-end

How to load content in a single page web app

Hello guys, sorry to disturb you all. I need to load content in a single page web app. From what I have read and seen, there are 2 ways of doing it (using vanilla JS)... one way is to inject the html content directly into div containers while the other is just to shift from display block to display none when needed. I don't understand, is there a difference here? I need to use history API, to keep track of the changes, like pages we are navigating through, it's more appropriate to inject html content directly here rather than div element?

3 replies

KPCKevin Powell - Community

•Created by Faker on 11/20/2024 in #front-end

width of anchor tag of a vertical navigation bar not being set properly

Hello guys, sorry to disturb you all; each time, I build a horizontal navigation bar; to change I wanted to build a vertical one this time. But it seems I'm having some issues with the width of the anchor tag, like I wanted extra spaces to the right of the anchor tags but this isn't being achieved; I try to modify the paddings to the right and left, nothings seems to happen.... can someone explain what I'm I doing wrong please. https://codepen.io/Fakeur/pen/KKOjgaN

12 replies

KPCKevin Powell - Community

•Created by Faker on 11/19/2024 in #back-end

How to keep track when session expires in express session

Hello guys, sorry to disturb you all; can someone explain how can I do in order to keep track when a session expires , for e,g after 5sec without refreshing the web-page

// Access the session as req.session
app.get('/', (req,res) => {
    console.log(req.session);
    if (req.session.viewCount) {
        req.session.viewCount++;
        viewCount++;
    }
    else {
        req.session.viewCount = 1;
        viewCount = 1;
    }
    console.log(`${req.session.id}`);
    res.send(`<h1> Hello world...view count(s): ${req.session.viewCount}`);
});

// Access the session as req.session
app.get('/', (req,res) => {
    console.log(req.session);
    if (req.session.viewCount) {
        req.session.viewCount++;
        viewCount++;
    }
    else {
        req.session.viewCount = 1;
        viewCount = 1;
    }
    console.log(`${req.session.id}`);
    res.send(`<h1> Hello world...view count(s): ${req.session.viewCount}`);
});

22 replies

KPCKevin Powell - Community

•Created by Faker on 11/17/2024 in #front-end

How to use Fetch API in JS

Hello guys, sorry to disturb you all; I have just learnt about the fetch API in JavaScript. I understand what it does in terms of asynchronous loading, like having new content displayed on a web page without having to reload the page but I don't really know how to use it, like the arguments it take, what we can do etc... Is there a small project that I can do just to make me more comfortable with that please. Also, while digging into the fetch API, I came across the term "axios"; is that a library that is more performant than the fetch API ?

25 replies

KPCKevin Powell - Community

•Created by Faker on 11/17/2024 in #front-end

What is the difference between text node and textContent ?

Hello guys, sorry to disturb you all; I was just reading about some DOM APIs and came across text node; what is it? is it the same thing as textContent ?

8 replies

KPCKevin Powell - Community

•Created by Faker on 11/17/2024 in #back-end

Content-type multipart/form-data vs application/json when submitting a form

Hello guys, sorry to disturb you all; consider the following code:

document.querySelector('#login').addEventListener('submit', (event) => {
    event.preventDefault(); // Prevent default form submission

    const formData = new FormData(event.target);

    // Convert FormData to JSON
    const formObject = {};
    formData.forEach((value, key) => {
        formObject[key] = value;
    });

    fetch('http://localhost:8080/M00967932/form.html', {
        method: 'POST', // Specify the HTTP method
        headers: { 'Content-Type': 'application/json' }, // Set JSON content type
        body: JSON.stringify(formObject), // Send JSON string
    })
        .then((response) => {
            if (!response.ok) {
                throw new Error('Network response was not ok ' + response.statusText);
            }
            return response.text(); // Use response.json() if the server sends JSON
        })
        .then((data) => {
            console.log('Success:', data); // Handle success
        })
        .catch((error) => {
            console.error('Error:', error); // Handle errors
        });
});

document.querySelector('#login').addEventListener('submit', (event) => {
    event.preventDefault(); // Prevent default form submission

    const formData = new FormData(event.target);

    // Convert FormData to JSON
    const formObject = {};
    formData.forEach((value, key) => {
        formObject[key] = value;
    });

    fetch('http://localhost:8080/M00967932/form.html', {
        method: 'POST', // Specify the HTTP method
        headers: { 'Content-Type': 'application/json' }, // Set JSON content type
        body: JSON.stringify(formObject), // Send JSON string
    })
        .then((response) => {
            if (!response.ok) {
                throw new Error('Network response was not ok ' + response.statusText);
            }
            return response.text(); // Use response.json() if the server sends JSON
        })
        .then((data) => {
            console.log('Success:', data); // Handle success
        })
        .catch((error) => {
            console.error('Error:', error); // Handle errors
        });
});

document.querySelector('#login').addEventListener('submit', (event) => {
    event.preventDefault(); // Prevent default form submission

    const formData = new FormData(event.target);

    fetch('http://localhost:8080/M00967932/form.html', {
        method: 'POST', // Specify the HTTP method
        body: formData, // Send the FormData object
    })
        .then((response) => {
            if (!response.ok) {
                throw new Error('Network response was not ok ' + response.statusText);
            }
            return response.json(); // Parse JSON response if applicable
        })
        .then((data) => {
            console.log('Success:', data); // Handle success
        })
        .catch((error) => {
            console.error('Error:', error); // Handle errors
        });
});

document.querySelector('#login').addEventListener('submit', (event) => {
    event.preventDefault(); // Prevent default form submission

    const formData = new FormData(event.target);

    fetch('http://localhost:8080/M00967932/form.html', {
        method: 'POST', // Specify the HTTP method
        body: formData, // Send the FormData object
    })
        .then((response) => {
            if (!response.ok) {
                throw new Error('Network response was not ok ' + response.statusText);
            }
            return response.json(); // Parse JSON response if applicable
        })
        .then((data) => {
            console.log('Success:', data); // Handle success
        })
        .catch((error) => {
            console.error('Error:', error); // Handle errors
        });
});

61 replies

KPCKevin Powell - Community

•Created by Faker on 11/16/2024 in #back-end

How to handle middleware, routes and routers in express

Hello guys, sorry to disturb you all; I have some doubts concerning the following terminologies and how they are used in express js: middleware , routes and routers. From what I have understood, middleware is just the middleman sitting in between a request and a respond which has the abilities to modify our request and respond object. Routes are simply the endpoint of our urls, like http/localhost:3030/abc/endpoint. Routers are the things that modularize our script by handling specific routes; like routers create dedicated "rooms" to handle specific routes. I'm What I'm confused about is the use of app.use() and when creating a new instance of : router = express.Router(), what does the express.Router() does? Because in our main script, this will be used as argument in the app.use, like app.use(router). What is happening here? How is app.use behaving as a middleware.... I understand the terminologies but I'm having some difficulties to visualise how they work in real time.

9 replies

KPCKevin Powell - Community

•Created by Faker on 11/16/2024 in #back-end

What happens when we submit a form in HTML if action attribute is empty or contains a url

Hello guys, sorry to disturb you all; I have built a small server using node and express js. Now I have built a small login form. What I want to do is send the form to the server; their I will need to perform some validation etc. But how do I send the form to the server ? Also, say my form web page is on localhost:3030 and my server on localhost:8080, how do I do communicate please

61 replies

KPCKevin Powell - Community

•Created by Faker on 11/16/2024 in #back-end

Express server not loading my stylesheet

No description

2 replies

KPCKevin Powell - Community

•Created by Faker on 11/16/2024 in #back-end

API vs SSR (Server Side rendering)

Hello guys, sorry to disturb you all; I just came across the term SSR. I had a look at what it means and from what I've understood, the term SSR means that everything is "pre-made" in the backend. For example, a server serves an a web page where the HTML is already rendered along with the CSS and JS(Like SSR serves a template). Behind the scenes, SSR does use APIs to fetch data but the idea is every initial loading is done by the server (every time a web page is reloaded we should still get the same initial webpage). Then what happens is when the server sends the HTML page to the browser, a user might want to check for the weather on a weather app for e.g. Each time we don't want to reload the server to display the new content; what we want is to dynamically reload the webpage for the user, this is done through APIs

7 replies

KPCKevin Powell - Community

•Created by Faker on 11/15/2024 in #front-end

Cookies, Sessions and Tokens

Hello guys, sorry to disturb you all; I'm trying to make sense of those terms but they are not that clear. From what I have understand: - Cookies: Use to store some data like user preference (like dark/light mode) - data persist even though browser is closed because data is stored on local machine; this has an expiry date. - Session: Use to store data while the user is browsing; keep track of what user is doing such as logging in/shopping etc. (I'm still confused about that though, when we say keeping track of what user is doing, this seems vague) - Tokens : Tokens are used for authentication; this enables a user to stay login for an amount of time. Can someone just have a look whether the statements are correct and add more to that if needed please... I also have some question: We say HTTP requests are stateless (meaning they don't remember anything); how do cookies/sessions/tokens handle that? Also, I know we have a refresh and access tokens; why do we have 2 tokens? On certain websites, like facebook, if we log in and close the browser without signing out, it may happens we stay log in all the times unless the clear our history. Do tokens have a role to play here? Last question, I also notice two terms, authentication and authorisation; what is the difference here please; authentication is when user log in for the first time; what about authorisation? (Sorry for the long question, really need to understand that)

106 replies

KPCKevin Powell - Community

•Created by Faker on 11/13/2024 in #back-end

Serving static files in express

Hello everyone, sorry to disturb you. I have a question regarding app.get(express.static()). Let's say we have a folder named public, and the path to this folder is passed as an argument. We noticed that if we have a stylesheet in this folder, the link to it in the HTML file doesn't need to be changed. When the server is running, the CSS is still parsed correctly. However, if we try to open the HTML file directly using the local server VS Code extension, it doesn't work. Could anyone explain why this happens please.

3 replies

KPCKevin Powell - Community

•Created by Faker on 11/13/2024 in #back-end

What is the purpose of a middleware in express

Hello guys, from what I have read, in Express.js, middleware is a function that intercepts incoming requests and gives access to the request and response objects. What is it purpose/importance? How does it relate to route handlers please

44 replies

KPCKevin Powell - Community

•Created by Faker on 11/12/2024 in #front-end

When to use rem and em

Hello guys, I'm currently learning how to build responsive design and I came across that we should try not to use the px units to build responsive designs; only keep that for small things, like logos etc...We should try to stick with units like ch, rem and em. From what I understand, rem is the font-size relative to our root element, the html element and em is the unit relative to the nearest parent element. But when should we choose to use rem rather than em.

15 replies

KPCKevin Powell - Community

•Created by Faker on 11/12/2024 in #front-end

How do grid lines work in CSS grid?

No description

8 replies

KPCKevin Powell - Community

•Created by Faker on 11/11/2024 in #back-end

Demystifying event loop and blocking code in nodejs

Hello guys, sorry to disturb you all; I'm currently learning nodejs and I came across the terms "event loop" and "blocking code". Can someone just confirm whether my understanding is correct or if there are things that can be added: From what I have understand, the event loop monitors whatever process happen in our node environment such as reading from a file or writing to a file. The event loop offload works on a specific process if that process is caught "waiting" so that other tasks can be perform by the time the other task finish waiting. Now, from what I have understand for the term "blocking" code, it is possible to make an asynchronous piece of code waits until it finishes whatever it has to do then to proceed with the other instructions. Also, everything inside a callback is blocking code?

1 replies

KPCKevin Powell - Community

•Created by Faker on 11/10/2024 in #back-end

How to prepend a specific word in my server url in node

Hello guys, sorry to disturb you all; I have created a simple server using node js. The url of my server is always something like that: localhost:xxxx/index.html I have some questions first: Why the full path of our file isn't displayed in the url but like if our index.html is in the folder views, we don't see that folder. Next, what I wanted to do is, before every webpage, whether it is localhost:xxxx/about.html or localhost.xxxx/contact-me.html, I want to prepend a word, like localhost.xxxx/SOMETHING/index.html

23 replies

KPCKevin Powell - Community

•Created by Faker on 11/10/2024 in #back-end

How does HTTP headers/HTTP request and respond work

Hello guys, sorry to disturb you all; I'm trying to build a small server using nodejs but first I need to understand how http and http headers work; can someone explain please. All I understand that our headers contain a request header and response header but it's unclear

49 replies

KPCKevin Powell - Community

•Created by Faker on 11/10/2024 in #back-end

Trying to build a web server using nodejs

Hello guys, sorry to disturb you all; I'm currently learning how to build a web server locally using nodejs. However, I have some doubts; I don't understand that part on the filePath, what are we trying to do here? Why are we both about only html files? What's happening here please

const extension = path.extname(req.url);
    let contentType;

    switch(extension){
        case '.css':
            contentType = 'text/css';
            break;
        case '.js':
            contentType = 'text/javascript';
            break;
        case '.json':
            contentType = 'application/json';
            break
        case '.jpeg':
            contentType = 'image/jpeg';
            break;
        case '.png':
            contentType = 'image/png';
            break;
        case '.txt':
            contentType = 'text/plain'
            break;
        default:
            contentType = 'text/html';
    }

    let filePath = contentType === 'text/html' && req.url === '/'
                ? path.join(__dirname, 'views.index.html')
                : contentType === 'text/html' && req.url.slice(-1) === '/'
                    ? path.join(__dirname,'views',req.url,'index.html')
                    : contentType === 'type/html'
                        ? path.join(__dirname, 'views', req.url)
                        : path.join(__dirname, req.url);

const extension = path.extname(req.url);
    let contentType;

    switch(extension){
        case '.css':
            contentType = 'text/css';
            break;
        case '.js':
            contentType = 'text/javascript';
            break;
        case '.json':
            contentType = 'application/json';
            break
        case '.jpeg':
            contentType = 'image/jpeg';
            break;
        case '.png':
            contentType = 'image/png';
            break;
        case '.txt':
            contentType = 'text/plain'
            break;
        default:
            contentType = 'text/html';
    }

    let filePath = contentType === 'text/html' && req.url === '/'
                ? path.join(__dirname, 'views.index.html')
                : contentType === 'text/html' && req.url.slice(-1) === '/'
                    ? path.join(__dirname,'views',req.url,'index.html')
                    : contentType === 'type/html'
                        ? path.join(__dirname, 'views', req.url)
                        : path.join(__dirname, req.url);

25 replies