Skip to content

Completed assignment #9

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

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

Completed assignment #9

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
9cd2e0e
90% website completed
LakshmiBulusu Jul 10, 2020
afa13f4
edits
LakshmiBulusu Jul 10, 2020
80b0723
edited
LakshmiBulusu Jul 10, 2020
6ce22d9
edited
LakshmiBulusu Jul 10, 2020
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
28 changes: 28 additions & 0 deletions ReadMe.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,28 @@
<!DOCTYPE html>
<html lang="en">

<head>
<body>
<p>This website is designed for K-5 elementary school which focuses mainly on taking student attendance remotely.</p>
<p>This project has 3 major goals.</p><BR>

<a href="https://luckyavailable.github.io/sba.javascript_3-page-website/">Link to website</a><br>


<br>1) <b>Student Attendance</b>: <p>Created student boxes using flexbox and 3 check boxes to indicate their presence and a submit button submits attendance of student in the main page. In this page, used following HTML elements and custom .CSS and .JS files.<BR></p>
Main HTML elements used in this page.<BR>
a) div created using flexcontainer <BR>
b) checkBox<BR>
c) image<BR>
d) button<BR>
e) custom .css used to create flexdirection/border/style/width etc<BR>
f) custom .js functions to read user selection and alert to the teacher on #ofstudent attended.<BR>
g) Used external styling.<BR><BR>

2.<b>Photoupload</b>: <p>This link takes the students to upload their photos,I have used Html file elements and custom functions to validate if the file is a photo or not.I have also used Regex for this link.</p>

3.<b>Student details</b>:<p>This link gives the details of all students in the form of a html form and table.</p>


</body>
</html>
79 changes: 79 additions & 0 deletions Student_Details.html
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,79 @@
<!DOCTYPE html>
<html lang="en">
<head>
<title>Student Details</title>
<link href="./css/style.css" rel="stylesheet">
<script type="text/javascript" src="./js/school.js"></script>

</head> <!-- header ends here -->
<body> <!-- body begins here -->
<div class="header">
<h1>Dr.Phillips Elementary School</h1>
<img class ="schoolimage1" src="img/schoolemoji.jpg" alt="schoolemoji" width="8%">
</div>
<div>
<div align="left">
<h2><b>View student details</b></h2>
<table>
<tr>
<th>Student ID</th>
<th>Student Name</th>
<th>Student Address</th>
<th>Emergency Contact</th>
</tr>
<tr>
<td> 01 </td>
<td>A</td>
<td>103 Bastille lane,Orlando</td>
<td>(321)332-9807</td>
</tr>
<tr>
<td> 02</td>
<td> B</td>
<td> 201 Dr.Phillips drive,Charlotte</td>
<td> (321)345-6576</td>
</tr>
<tr>
<td>03</td>
<td> C</td>
<td>345 holy drive,MN</td>
<td> (213)456-5434</td>
</tr>
<tr>
<td>04</td>
<td> D</td>
<td>456 crest drive,SC</td>
<td> (223)-456-1234</td>
</tr>
<tr>
<td>05</td>
<td>E</td>
<td>345 castle drive,IL</td>
<td> (223)-456-3456</td>
</tr>

</table>
</div>

<div align="center">
<h2><b>Enter the student details</b></h2>
<label for="student name">Student Name:</label>
<input type="text" id="fname" name="student name"><br><br>
<label for="Student Address">Student Address:</label>
<input type="text" id="Student Address" name="Student Address"><br><br>
<label for="City">Student City:</label>
<input type="text" id="city" name="city"><br>
<label for="grade">Choose a grade:</label>
<select name="Grade" id="grade">
<option value="KG">Kindergarten</option>
<option value="first">Firstgrade</option>
<option value="second">Secondgrade</option>
<option value="third">Thirdgrade</option>
<option value="fourth">Fourthgrade</option>
<option value="fifth">Fifthgrade</option>
</select>
<input type="Submit" value="Save" onclick="enterStudentDetails()">
</div>
</div>
</body>
</html>
239 changes: 234 additions & 5 deletions css/style.css
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,9 +1,238 @@
body {
background-color: navy;

.header {
padding: 30px; /* some padding */
text-align: center; /* center the text */
background: #1abc9c; /* green background */
color: white; /* white text color */
}

/* Increase the font size of the <h1> element */
.header h1 {
font-size: 40px;
}
.navbar {
overflow: hidden; /* Hide overflow */
background-color: #333; /* Dark background color */
}
.flex-container {
display: flex;
align-items:center;
align-content: space-between;
flex-direction: row;
background-color: DodgerBlue;

}
.divsize{
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
width:220px;
}

myimage {
width:100px;
height:5%;
}

mybutton{
background-color: #f1f1f1;
margin: 10px;
padding: 20px;
font-size: 30px;
width:220px;
}
table, th, td {
border: 1px solid black;
}
















































































/* Style the navigation bar links */
.navbar a {
float: left; /* Make sure that the links stay side-by-side */
display: block; /* Change the display to block, for responsive reasons (see below) */
color: white; /* White text color */
text-align: center; /* Center the text */
padding: 14px 20px; /* Add some padding */
text-decoration: none; /* Remove underline */
}

/* Right-aligned link */
.navbar a.right {
float: right; /* Float a link to the right */
}
/* Change color on hover/mouse-over */
.navbar a:hover {
background-color: #ddd; /* Grey background color */
color: black; /* Black text color */
}
/* Ensure proper sizing */
* {
box-sizing: border-box;
}

/* Column container */
.row {
display: flex;
flex-wrap: wrap;
}

object {
height: 100vh;
width: 100vh;
/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
flex: 30%; /* Set the width of the sidebar */
background-color: #f1f1f1; /* Grey background color */
padding: 20px; /* Some padding */
}

/* Main column */
.main {
flex: 70%; /* Set the width of the main content */
background-color: white; /* White background color */
padding: 20px; /* Some padding */
}
/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
.row {
flex-direction: column;
}
}

/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
.navbar a {
float: none;
width: 100%;
}
}
.footer {
padding: 20px; /* Some padding */
text-align: center; /* Center text*/
background: #ddd; /* Grey background */
/* Dropdown Button */
.dropbtn {
background-color: #3498DB;
color: white;
padding: 16px;
font-size: 16px;
border: none;
cursor: pointer;
}

/* Dropdown button on hover & focus */
.dropbtn:hover, .dropbtn:focus {
background-color: #2980B9;
}

/* The container <div> - needed to position the dropdown content */
.dropdown {
position: relative;
display: inline-block;
}

/* Dropdown Content (Hidden by Default) */
.dropdown-content {
display: none;
position: absolute;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}

/* Change color of dropdown links on hover */
.dropdown-content a:hover {background-color: #ddd}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}

.student{
float:right;

}
Binary file added img/boyimage.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/images.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/schoolemoji.jpg
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Binary file added img/studentemoji.png
View file
Open in desktop
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Loading