Department of Computing

SE-312: Software Construction

Class: BESE 10AB

Lab 06: Styling in React

Date: 14/03/2022

Time: Monday, 09:00am-12:00pm & 02:00-05:00pm

Instructor: Dr. Seema Jehan

Lab Engineer: Mr. Nadeem Nawaz

Submitted By:
Muhammad Hassaan

CMS: 288203

CS312: Software ConstructionPage 1

Lab 06: Styling in React

Introduction
React is a JavaScript library created by Facebook. React is a tool for building UI components.
React creates a VIRTUAL DOM in memory.

Objectives
The objective of this lab is using the styling concepts of react to design a simple react web page.
The students will design a simple website. Students will explore different styling components.

Tools/Software Requirement
NPM, Node.js, React, HTML, CSS

Previous Knowledge:
HTML, CSS, Javascript (ES6).

Helping Material:

W3Schools: https://www.w3schools.com/react/default.asp

Material UI: https://material-ui.com/

Note:

You can use “https://material-ui.com/” to design different components for your webpage such as
appbar for navigation bar and cards in what we do section.

Be creative in your design and explore different styling components.

To use the above website, follow these steps:

Install Material-UI's source files via npm. We take care of injecting the CSS needed.

$ npm install @material-ui/core

Load the default Roboto font.

<link rel="stylesheet" href="https://fonts.googleapis.com/css?

family=Roboto:300,400,500,700&display=swap" />

CS312: Software ConstructionPage 2

Here is an example how to use these components. Material-UI components work without any
additional setup, and don't pollute the global scope.

import React from 'react';

import { Button } from '@material-ui/core';

function App() {

return <Button color="primary">Hello World</Button>;}

Lab Tasks:
Task 1: Design a simple web page using React. You can use components from “https://material-
ui.com/”

Make a simple web page using react.

Set the background of your choice

Add a name and logo of your choice on the top left corner

Make a top navigation bar on the upper right corner and add 3-4 components (No need to make
pages for components, just make a navigation bar)

Make an introduction section and add a heading, some text and a picture on the page as shown in
the ss

CS312: Software ConstructionPage 3

Task 2:

Continue the task 1 and add an about us section below the introduction section.

Add a picture, heading and some text in this section as shown in the ss.

Task 3:

Continue the above tasks and make another section named “what we do”.

Add a heading some text in this section.

Insert at least 3 different cards using “https://material-ui.com/”.

Add some text on the cards.

Join all three sections.

CS312: Software ConstructionPage 4

 Solution

Task 1 Code:

Navbar.js:

import * as React from 'react';

import AppBar from '@mui/material/AppBar';

import Box from '@mui/material/Box';

import Toolbar from '@mui/material/Toolbar';

import IconButton from '@mui/material/IconButton';

import Typography from '@mui/material/Typography';

import Menu from '@mui/material/Menu';

import MenuIcon from '@mui/icons-material/Menu';

import Container from '@mui/material/Container';

import Avatar from '@mui/material/Avatar';

import Button from '@mui/material/Button';

import Tooltip from '@mui/material/Tooltip';

CS312: Software ConstructionPage 5

 import MenuItem from '@mui/material/MenuItem';

import logo from '../../images/ras.jpg';

const pages = ['Products', 'Pricing', 'Blog'];

const settings = ['Profile', 'Account', 'Dashboard', 'Logout'];

const Navbar = () => {

const [anchorElNav, setAnchorElNav] = React.useState(null);

const [anchorElUser, setAnchorElUser] = React.useState(null);

const handleOpenNavMenu = (event) => {

setAnchorElNav(event.currentTarget);

};

const handleOpenUserMenu = (event) => {

setAnchorElUser(event.currentTarget);

};

const handleCloseNavMenu = () => {

setAnchorElNav(null);

};

const handleCloseUserMenu = () => {

setAnchorElUser(null);

};

return (

CS312: Software ConstructionPage 6

 <AppBar position="static">

<Container maxWidth="xl">

<Toolbar disableGutters>

<Typography

variant="h6"

noWrap

component="div"

sx={{ mr: 2, display: { xs: 'none', md: 'flex' } }}

>

<img src={logo} alt="Logo" width={50} height={50} />

</Typography>

<Box sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}>

<IconButton

size="large"

aria-label="account of current user"

aria-controls="menu-appbar"

aria-haspopup="true"

onClick={handleOpenNavMenu}

color="inherit"

>

<MenuIcon />

</IconButton>

<Menu

id="menu-appbar"

anchorEl={anchorElNav}

CS312: Software ConstructionPage 7

 anchorOrigin={{

vertical: 'bottom',

horizontal: 'left',

}}

keepMounted

transformOrigin={{

vertical: 'top',

horizontal: 'left',

}}

open={Boolean(anchorElNav)}

onClose={handleCloseNavMenu}

sx={{

display: { xs: 'block', md: 'none' },

}}

>

{pages.map((page) => (

<MenuItem key={page} onClick={handleCloseNavMenu}>

<Typography textAlign="center">{page}</Typography>

</MenuItem>

))}

</Menu>

</Box>

<Typography

variant="h6"

noWrap

component="div"

CS312: Software ConstructionPage 8

 sx={{ flexGrow: 1, display: { xs: 'flex', md: 'none' } }}

>

LOGO

</Typography>

<Box sx={{ flexGrow: 1, display: { xs: 'none', md: 'flex' } }}>

{pages.map((page) => (

<Button

key={page}

onClick={handleCloseNavMenu}

sx={{ my: 2, color: 'white', display: 'block' }}

>

{page}

</Button>

))}

</Box>

<Box sx={{ flexGrow: 0 }}>

<Tooltip title="Open settings">

<IconButton onClick={handleOpenUserMenu} sx={{ p: 0 }}>

<Avatar alt="Remy Sharp"

src="/static/images/avatar/2.jpg" />

</IconButton>

</Tooltip>

<Menu

sx={{ mt: '45px' }}

id="menu-appbar"

CS312: Software ConstructionPage 9

 anchorEl={anchorElUser}

anchorOrigin={{

vertical: 'top',

horizontal: 'right',

}}

keepMounted

transformOrigin={{

vertical: 'top',

horizontal: 'right',

}}

open={Boolean(anchorElUser)}

onClose={handleCloseUserMenu}

>

{settings.map((setting) => (

<MenuItem key={setting} onClick={handleCloseUserMenu}>

<Typography textAlign="center">{setting}</Typography>

</MenuItem>

))}

</Menu>

</Box>

</Toolbar>

</Container>

</AppBar>

);

};

export default Navbar;

CS312: Software ConstructionPage 10

 Intro.js:

import * as React from 'react';

import { styled } from '@mui/material/styles';

import Box from '@mui/material/Box';

import Paper from '@mui/material/Paper';

import Grid from '@mui/material/Grid';

import pro1 from '../../images/pro1.jpg';

import pro2 from '../../images/pro2.jpg';

export default function Intro() {

return (

<Box sx={{ flexGrow: 1 }}>

<Grid container spacing={2}>

<Grid item xs={6} style={{textAlign: "left", paddingLeft:

"50px"}}>

<h1>Welcome to Quatify</h1>

<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit,

sed do eiusmod tempor incididunt ut labore et dolore magna

aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco

laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit

esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident,

sunt in culpa qui officia deserunt mollit anim id est

CS312: Software ConstructionPage 11

 laborum.

</p>

</Grid>

<Grid item xs={6}>

<img src={pro1} alt="Logo" width={400} height={400} />

</Grid>

</Grid>

</Box>

);

Task Output Screenshot:

Task 2 Code:

About.js:

import * as React from 'react';

CS312: Software ConstructionPage 12

 import { styled } from '@mui/material/styles';

import Box from '@mui/material/Box';

import Paper from '@mui/material/Paper';

import Grid from '@mui/material/Grid';

import pro2 from '../../images/pro2.jpg';

export default function Intro() {

return (

<Box sx={{ flexGrow: 1 }}>

<Grid container spacing={2}>

<Grid item xs={6}>

<img src={pro2} alt="Logo" width={400} height={400} />

</Grid>

<Grid item xs={6} style={{textAlign: "left"}}>

<h1>About Us</h1>

<p>

Lorem ipsum dolor sit amet, consectetur adipiscing elit,

sed do eiusmod tempor incididunt ut labore et dolore magna

aliqua.

Ut enim ad minim veniam, quis nostrud exercitation ullamco

laboris nisi ut aliquip ex ea commodo consequat.

Duis aute irure dolor in reprehenderit in voluptate velit

esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat
cupidatat non proident,

sunt in culpa qui officia deserunt mollit anim id est

laborum.

</p>

</Grid>

CS312: Software ConstructionPage 13

 </Grid>

</Box>

);

Task Output Screenshot:

Task 3 Code:

Card.js:

import * as React from 'react';

import Card from '@mui/material/Card';

import CardActions from '@mui/material/CardActions';

import CardContent from '@mui/material/CardContent';

import CardMedia from '@mui/material/CardMedia';

import Button from '@mui/material/Button';

import Typography from '@mui/material/Typography';

import pro1 from '../../images/pro1.jpg';

CS312: Software ConstructionPage 14

 export default function MediaCard() {

return (

<div>

<h1>What We do?</h1>

<Card className='card' sx={{ maxWidth: 300 }}>

<CardMedia

component="img"

height="140"

image={pro1}

alt="green iguana"

/>

<CardContent>

<Typography gutterBottom variant="h5" component="div">

Web Design

</Typography>

<Typography variant="body2" color="text.secondary">

Lizards are a widespread group of squamate reptiles, with

over 6,000

species, ranging across all continents except Antarctica

</Typography>

</CardContent>

<CardActions>

<Button size="small">Share</Button>

<Button size="small">Learn More</Button>

</CardActions>

CS312: Software ConstructionPage 15

 </Card>

<Card className='card' sx={{ maxWidth: 300 }}>

<CardMedia

component="img"

height="140"

image={pro1}

alt="green iguana"

/>

<CardContent>

<Typography gutterBottom variant="h5" component="div">

UI/UX

</Typography>

<Typography variant="body2" color="text.secondary">

Lizards are a widespread group of squamate reptiles, with

over 6,000

species, ranging across all continents except Antarctica

</Typography>

</CardContent>

<CardActions>

<Button size="small">Share</Button>

<Button size="small">Learn More</Button>

</CardActions>

</Card>

<Card className='card' sx={{ maxWidth: 300 }}>

CS312: Software ConstructionPage 16

 <CardMedia

component="img"

height="140"

image={pro1}

alt="green iguana"

/>

<CardContent>

<Typography gutterBottom variant="h5" component="div">

Graphic Design

</Typography>

<Typography variant="body2" color="text.secondary">

Lizards are a widespread group of squamate reptiles, with

over 6,000

species, ranging across all continents except Antarctica

</Typography>

</CardContent>

<CardActions>

<Button size="small">Share</Button>

<Button size="small">Learn More</Button>

</CardActions>

</Card>

<Card className='card' sx={{ maxWidth: 300 }}>

<CardMedia

component="img"

height="140"

CS312: Software ConstructionPage 17

 image={pro1}

alt="green iguana"

/>

<CardContent>

<Typography gutterBottom variant="h5" component="div">

Dev Ops

</Typography>

<Typography variant="body2" color="text.secondary">

Lizards are a widespread group of squamate reptiles, with

over 6,000

species, ranging across all continents except Antarctica

</Typography>

</CardContent>

<CardActions>

<Button size="small">Share</Button>

<Button size="small">Learn More</Button>

</CardActions>

</Card>

<Card className='card' sx={{ maxWidth: 300 }}>

<CardMedia

component="img"

height="140"

image={pro1}

alt="green iguana"

/>

CS312: Software ConstructionPage 18

 <CardContent>

<Typography gutterBottom variant="h5" component="div">

Hosting

</Typography>

<Typography variant="body2" color="text.secondary">

Lizards are a widespread group of squamate reptiles, with

over 6,000

species, ranging across all continents except Antarctica

</Typography>

</CardContent>

<CardActions>

<Button size="small">Share</Button>

<Button size="small">Learn More</Button>

</CardActions>

</Card>

<Card className='card' sx={{ maxWidth: 300 }}>

<CardMedia

component="img"

height="140"

image={pro1}

alt="green iguana"

/>

<CardContent>

<Typography gutterBottom variant="h5" component="div">

Quality Assurance

CS312: Software ConstructionPage 19

 </Typography>

<Typography variant="body2" color="text.secondary">

Lizards are a widespread group of squamate reptiles, with

over 6,000

species, ranging across all continents except Antarctica

</Typography>

</CardContent>

<CardActions>

<Button size="small">Share</Button>

<Button size="small">Learn More</Button>

</CardActions>

</Card>

</div>

);

App.js:

import Navbar from "./components/Navbar/Navbar"

import Intro from "./components/Intro/Intro"

import About from "./components/About/About"

import Card from "./components/Card/Card"

import './App.css';

function App() {

return (

CS312: Software ConstructionPage 20

 <div className="App">

<Navbar/>

<h1>Hello World!</h1>

<Intro />

<About />

<Card />

</div>

);

export default App;

Task Output Screenshot:

Deliverables

Compile a single word document by filling in the solution part and submit this Word file on
LMS. This lab grading policy is as follows: The lab is graded between 0 to 10 marks. The

CS312: Software ConstructionPage 21

submitted solution can get a maximum of 5 marks. At the end of each lab or in the next lab, there
will be a viva/quiz related to the tasks. The viva/quiz has a weightage of 5 marks. Insert the
solution/answer in this document. You must show the implementation of the tasks in the
designing tool, along with your complete Word document to get your work graded. You must
also submit this Word document on the LMS. In case of any problems with submissions on
LMS, submit your Lab assignments by emailing it to Mr. Nadeem nawaz:
nadeem.nawaz@seecs.edu.pk.

CS312: Software ConstructionPage 22