Scribd
Upload
2 views4 pages

Fronted Assignment

The document outlines the client-server architecture of web applications, distinguishing between front-end (user interface) and back-end (data management) components. It discusses the Bootstrap framework for responsive design, the BEM CSS naming convention for modular styles, and the use of AJAX for asynchronous data loading. Additionally, it provides examples of CSS selectors and debugging techniques in JavaScript.

Uploaded by

Nyi Zaw
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
2 views4 pages

Fronted Assignment

The document outlines the client-server architecture of web applications, distinguishing between front-end (user interface) and back-end (data management) components. It discusses the Bootstrap framework for responsive design, the BEM CSS naming convention for modular styles, and the use of AJAX for asynchronous data loading. Additionally, it provides examples of CSS selectors and debugging techniques in JavaScript.

Uploaded by

Nyi Zaw
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 4

Fronted

1. Answer:

The diagram depicts a standard client-server architecture, illustrating the fundamental separation between the
front-end and back-end components of a web application. The front-end, or client-side, encompasses the user
interface elements that users directly interact with, such as web browsers, desktop applications, and mobile
apps. These elements are responsible for presenting information and capturing user input.

The back-end, or server-side, manages the application's data and logic. It consists of a database server for data
storage and retrieval, a web server to handle requests from the front-end and serve web pages, and a file server
for storing application files. The internet acts as the communication bridge, enabling data exchange between
the front-end and back-end.

In essence, the front-end is responsible for the user experience, while the back-end handles the data processing
and management necessary for the application to function. This separation of concerns allows for a modular
and scalable approach to web application development.
2. Answer:
Bootstrap Framework
Bootstrap is a popular CSS framework that helps developers create responsive and mobile-first web designs
quickly. It provides predefined classes for styling, grids, components, and JavaScript functionalities.
Exampe:

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bootstrap Example</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css">
</head>
<body>

<div class="container">
<h1 class="text-center text-primary">Hello, Bootstrap!</h1>
<button class="btn btn-success">Click Me</button>
</div>

</body>
</html>

Bootstrap makes it easier to style buttons, text, and layouts.

CSS Design with BEM


BEM (Block Element Modifier) is a CSS naming convention that organizes styles in a structured way. It
makes CSS modular, reusable, and readable.

I use this in my project BookSection. Here is an example:

/* Block: book-section */
.book-section {
padding: 2rem;
}

.book-section__title {
font-size: 24px;
font-weight: bold;
color: #333;
}

/* Modifier for different sections */


.book-section--featured {
background-color: #F2D6CE;
}

.book-section = Block
.book-section__title = Element
.book-section—featured = Modifier
Using #id and .class
#id (ID selector): Used to style a single unique element.
.class (Class selector): Used to style multiple elements.
Example:

<h1 id="main-title">This is a Heading</h1>


<p class="text">This is a paragraph.</p>
<p class="text">Another paragraph with the same class.</p>

/* ID Selector (applies to one unique element) */


#main-title {
color: red;
font-size: 30px;
}

/* Class Selector (applies to multiple elements) */


.text {
color: blue;
font-size: 16px;
}

AJAX
AJAX allows a web page to send and receive data from a server without reloading.
Click ‘More’ button to get books.
Example:

<div class="flex justify-center">


<button
@click="loadMore(selectedCategory.value)"
class="mt-6 bg-[#9E5F4E] text-white px-6 py-2 rounded-md hover:bg-[#874C3F] border-0"
>
More Results
</button>
</div>
const loadMore = async () => {
const res = await fetch(
`/api/books/v1/volumes?q=${query}&key=${API_KEY}&maxResults=${maxResult.value}&startIndex=$
{startIndex.value}`,
{ mode: "cors" }
);
try {
const data = await res.json();
if (data.items && Array.isArray(data.items)) {
books.value = [...books.value, ...data.items]; // Append new books
} else {
console.warn("No books found for this query.");
}
} catch (error) {
console.error("Error fetching books:", error);
}
};

Console and Debugger


<script>
let a = 10;
let b = 20;

console.log("The value of a is:", a);


console.log("The value of b is:", b);
console.log("The sum is:", a + b);

debugger; // This line will pause execution in DevTools


let c = a * b;
console.log("The multiplication result is:", c);
</script>

3. Github Repo - https://github.com/nyinyizaw92/school-library.git

You might also like