Scribd
Upload
52 views

Lab Assignment - React Native

Uploaded by

KAMI Alsi
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
52 views

Lab Assignment - React Native

Uploaded by

KAMI Alsi
Copyright
© © All Rights Reserved
Available Formats
Download as DOCX, PDF, TXT or read online on Scribd
You are on page 1/ 5

Lab Assignment 01 (React Native) Due : No Due

TASK 1: Write a JavaScript program that computes and displays the average marks of the following students.
Then, show the average letter grade. Display the names of the students with a mark higher than the average.
*students is an array of student objects,that has two properties: a student’s name and their mark
● function computeAvg(students) – returns the average of all students
● function convertToLetterGrade(mark) - returns the corresponding letter grade to a mark
● function markGreaterThanAvg(students, average) - does not return a value, displays on the console (using
console.log) the students’ name and mark that are higher than the average

Number to Letter Grade Conversion:

CODE:
const students = [
{ name: 'Diana', mark: 82 },
{ name: 'Victor', mark: 67 },
{ name: 'Anne', mark: 76 },
{ name: 'Izzie', mark: 94 },
{ name: 'Thomas', mark: 72 }
];

function computeAvg(students) {
let total = 0;
students.forEach(student => {
total += student.mark;
});
return total / students.length;
}

function convertToLetterGrade(mark) {
if (mark >= 90) return 'A';
else if (mark >= 80) return 'B';
else if (mark >= 70) return 'C';
else if (mark >= 60) return 'D';
else return 'F';
}

function markGreaterThanAvg(students, average) {


console.log("Students with marks higher than the average:");
students.forEach(student => {
if (student.mark > average) {
console.log(`${student.name}: ${student.mark}`);
}
});
}

const averageMark = computeAvg(students);


console.log(`Average Mark: ${averageMark}`);
console.log(`Average Letter Grade: ${convertToLetterGrade(averageMark)}`);
markGreaterThanAvg(students, averageMark);

class Student {
constructor(name, mark) {
this.name = name;
this.mark = mark;
}
}

Description: This exercise calculates the average mark of the students, converts that average mark to a letter
grade, and then prints the students who scored higher than the average.
Visit the link to view the work:
https://replit.com/@pcomputer813/Assignment-1-Ex1#index.js
Output:

TASK 2:
React Native Ex.
Basic Layout and Styling In the App component create a simple layout with 3 boxes. Use the View component for the
layout and the boxes themselves. Each box should have a height and a width, and the layout of the boxes should be styled
with Flexbox.

CODE:
import React from 'react';
import { View, StyleSheet } from 'react-native';

const App = () => {


return (
<View style={styles.container}>
<View style={styles.box1} />
<View style={styles.box2} />
<View style={styles.box3} />
</View>
);
};

const styles = StyleSheet.create({


container: {
flexDirection: 'row',
justifyContent: 'space-around',
alignItems: 'center',
flex: 1,
backgroundColor: '#f0f4f7',
},
box1: {
width: 50,
height: 50,
backgroundColor: '#66FF66',
},
box2: {
width: 75,
height: 75,
backgroundColor: '#33CC33',
},
box3: {
width: 100,
height: 100,
backgroundColor: '#009900',
},
});

export default App;

Description: This exercise creates a simple layout featuring three green boxes displayed horizontally. Each box
varies in size: the first box is small, the second is medium, and the third is large. The boxes are evenly spaced
within a light gray background, showcasing a clean and visually appealing arrangement that highlights basic
Flexbox styling techniques in React Native.
Visit the link to view the work:
https://replit.com/@pcomputer813/React-Native-Ex2-Assignment-1#App.js

Output:
TASK 3:
A Simple Profile Card
The goal of this exercise is to create a profile card with an image, name, and short description. Use Flexbox to arrange the
items and style them. You should use the View, Image, and Text components to build the card.

CODE:
import React from 'react';
import { View, Image, Text, StyleSheet } from 'react-native';

const ProfileCard = () => {


return (
<View style={styles.card}>
<Image
source={{ uri: 'https://marketplace.canva.com/EAFltPVX5QA/1/0/1600w/canva-
cute-cartoon-anime-girl-avatar-ZHBl2NicxII.jpg' }}
style={styles.image}
/>
<Text style={styles.name}>user</Text>
<Text style={styles.description}>
An enthusiastic explorer.
Lover of rock music❤🤘🏻
She likes to debate and communicate openly with everyone.
</Text>
</View>
);
};

const styles = StyleSheet.create({


card: {
backgroundColor: '#c1e8c9',
borderRadius: 10,
shadowColor: '#000',
shadowOffset: { width: 0, height: 2 },
shadowOpacity: 0.2,
shadowRadius: 2,
elevation: 5,
padding: 20,
alignItems: 'center',
},
image: {
width: 100,
height: 100,
borderRadius: 50,
marginBottom: 10,
},
name: {
fontSize: 20,
fontWeight: 'bold',
},
description: {
fontSize: 16,
color: '#666',
textAlign: 'center',
},
});

export default ProfileCard;

Description: This exercise creates a profile card component in React Native.


This code shows up:
- an image from the internet.
- Name: "Erika Spahi"
- A short description.
The profile card is styled with a light green background, rounded corners, and centered text.
Visit the link to view the work:
https://replit.com/@pcomputer813/React-Native-Ex3-Assignment-1#App.js

You might also like