Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Sagar Frontend assessment #26

Open
wants to merge 2 commits into
base: master
Choose a base branch
from
Open

Sagar Frontend assessment #26

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
6516110
Add files via upload
sagar-prasain Apr 9, 2022
a5c50c4
Updated read.me
sagar-prasain Apr 9, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
58 changes: 58 additions & 0 deletions Sagar Exercise 1.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,58 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Sagar Exercise 1</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="css/style.css" rel="stylesheet" type="text/css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.6.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>

</head>
<body>
<div id ="page" class="hero-image">
<div class="hero-text">
<h1 id ="hero-heading">Hello Developer!</h1>
<p id ="hero-tagline">Lorem ipsum dolor sit amet, consectetur adipiscing elit</p>
</div>
</div>
<div id ="main" class="container">
<div id ="box" class="col-lg-3">
<div class="imgBx">
<a href="#">
<img id ="image" src="http://via.placeholder.com/400x300">
</a>
<p id="text"><br>Lorem ipsum dolor sit amet, consectetur adipisicing 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.
</p>
</div>
<button id="btn" class="d-flex justify-content-center" type="button" name="button">READ MORE</button>
</div>

<div id="box" class="col-lg-3">
<div class="imgBx">
<a href="#">
<img id ="image" src="http://via.placeholder.com/400x300" >
</a>
<p id="text"><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.
</p>
</div>
<button id="btn" class="d-flex justify-content-center" type="button" name="button">READ MORE</button>
</div>

<div id="box" class="col-lg-3">
<div class="imgBx">
<a href="#">
<img id ="image" src="http://via.placeholder.com/400x300" >
</a>
<p id="text"><br>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco.
</p>
</div>
<button id="btn" class="d-flex justify-content-center" type="button" name="button">READ MORE</button>
</div>
</div>
</div>

</body>
</html>
80 changes: 80 additions & 0 deletions Sagar Exercise 2.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,80 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Sagar Exercise 2</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="m-4">
<div class="accordion" id="myAccordion">
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#collapseOne">Section 1</button>
</h2>
<div id="collapseOne" class="accordion-collapse collapse" data-bs-parent="#myAccordion">
<div class="card-body">
<p>Maecenas nec semper ante, pellentesque posuere lorem. Nullam ipsum massa, consequat eget urna ut, pulvinar dignissim lorem. Nulla facilisi. Nam mattis eleifend metus. Fusce at commodo lorem. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus pellentesque elit sem, vel blandit posuere.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingTwo">
<button type="button" class="accordion-button" data-bs-toggle="collapse" data-bs-target="#collapseTwo">Section 2</button>
</h2>
<div id="collapseTwo" class="accordion-collapse collapse show" data-bs-parent="#myAccordion">
<div class="card-body">
<p> Mauris a orci sodales, scelerisque velit vitae, gravida nisl. Ut non laoreet eros, vel laoreet nisi. Praesent sed dolor dui. Proin non fringilla quam. Aliquam erat volutpat. Vestibulum vel arcu semper, lobortis turpis ac, ultricies nisi. Praesent id.</p>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingThree">
<button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#collapseThree"> Section 3</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#myAccordion">
<div class="card-body">
<p>Sed elementum sapien ut sapien imperdiet, eu venenatis enim rhoncus. Praesent euismod tincidunt rhoncus. Duis cras amet:</p>
<ul>
<li>List item one</li>
<li>List item two</li>
<li>List item three</li>
</ul>
</div>
</div>
</div>
<div class="accordion-item">
<h2 class="accordion-header" id="headingOne">
<button type="button" class="accordion-button collapsed" data-bs-toggle="collapse" data-bs-target="#collapseFour">Section 4</button>
</h2>
<div id="collapseFour" class="accordion-collapse collapse" data-bs-parent="#myAccordion">
<div class="card-body">
<p>Cras dictum. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Aenean lacinia mauris vel est.</p><p>Suspendisse eu nisl. Nullam ut libero. Integer dignissim consequat lectus. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
</div>
</div>
</div>
</div>
</div>

<style>
.accordion{
margin: 20px;
}
.accordion-button {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.2);
border-radius: 5px;
overflow: hidden;
font-family: "Quicksand", sans-serif;
background-color: #ADEFD1FF;
}
body {
background-color:#00A4CCFF;
background-repeat: no-repeat;
background-attachment: fixed;
background-size: cover;
}
</style>
</body>
</html>
99 changes: 99 additions & 0 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,99 @@
body, html {
height: 100%;
margin: 0;
font-family: Arial, Helvetica, sans-serif;
}
#page {
max-width: 1440px;
}

.hero-image {
background-image:url("http://via.placeholder.com/1920x650");
height: 60%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
position: relative;
display: flex;
}

.hero-text {
text-align: center;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color:#FFFFFF;
}
#hero-heading{
font-size: 50px;
font-family: "Arial-bold", sans-serif;
letter-spacing: 2.8px;
color:#FFFFFF;
}
#hero-tagline{
font-size: 2rem;
color:#FFFFFF;
margin: -3px 0 0 0;
letter-spacing: 2.5px;
}
#box {
min-height: 450px;
padding: 0px 0px;
margin: 40px 15px;
max-width: 400px;
min-width: 280px;
border: 2px solid #e6e6e6;
border-radius: 7px;
display:block;
}
#text {
padding: 3px 21px 0px 19px;
text-align: center;
font-size: 13px;
text-indent: 1px;
line-height: 21.8px;
min-height: 164px;
font-family: Arial, sans-serif;
display: block;
}
#image{
position: relative;
max-width: 100%;
max-height: 100%;
padding: 18px 17px 17px 17px;
border-radius: 21px;
}
#btn{
position: relative;
display: block;
margin: auto;
min-width: 50px;
max-width: 140px;
height: 38px;
border-radius: 32px;
border: 2px solid black;
padding: 8px 9px 8px 16px;
bottom: 16px !important;
}
.container {
display: flex;
align-items: flex-start;
align-content: center;
justify-content:center;
min-height: 450px;
position: relative;
margin:30px 15px;
}

.container :first-child {
align-self: center;
}
@media only screen and (max-width: 600px) {
.hero-image{
background: url("http://via.placeholder.com/600x600");
display: inherit;
min-height: 600px;
min-width: 600px;
}

11 changes: 11 additions & 0 deletions readme.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -38,3 +38,14 @@ Read the `data.json` file and display the data as tabs on desktop and an accordi
Submission
---
We recommend submitting your completed assessment as a forked repository. Please replace README content with instructions and relevant documentation.

****Explain why the result of `('b' + 'a' + + 'a' + 'a').toLowerCase()` is `banana`.***
Explanation:
'b' + 'a' + + 'a' + 'a' is evaluated as 'b' + 'a' + (+'a') + 'a'.

(+'a') attempts to convert 'a' to a number using the unary plus operator. Because 'a' is not a number, the result is NaN ("Not a Number"):'b' + 'a' + NaN + 'a'

Although NaN stands for "Not a Number", it's still a numeric type; when added to strings, it concatenates just as any other number would:'b' + 'a' + NaN + 'a' => 'baNaNa'
Finally, it's lowercased:

'baNaNa'.toLowerCase() => 'banana'