diff --git a/ReadMe.html b/ReadMe.html new file mode 100644 index 0000000..e145997 --- /dev/null +++ b/ReadMe.html @@ -0,0 +1,28 @@ + + + + + +

This website is designed for K-5 elementary school which focuses mainly on taking student attendance remotely.

+

This project has 3 major goals.


+ +Link to website
+ + +
1) Student Attendance:

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.

+Main HTML elements used in this page.
+a) div created using flexcontainer
+b) checkBox
+c) image
+d) button
+e) custom .css used to create flexdirection/border/style/width etc
+f) custom .js functions to read user selection and alert to the teacher on #ofstudent attended.
+g) Used external styling.

+ +2.Photoupload:

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.

+ +3.Student details:

This link gives the details of all students in the form of a html form and table.

+ + + + \ No newline at end of file diff --git a/Student_Details.html b/Student_Details.html new file mode 100644 index 0000000..2054580 --- /dev/null +++ b/Student_Details.html @@ -0,0 +1,79 @@ + + + + Student Details + + + + + +
+

Dr.Phillips Elementary School

+ schoolemoji +
+
+
+

View student details

+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
Student IDStudent NameStudent AddressEmergency Contact
01 A103 Bastille lane,Orlando(321)332-9807
02 B 201 Dr.Phillips drive,Charlotte (321)345-6576
03 C345 holy drive,MN (213)456-5434
04 D456 crest drive,SC (223)-456-1234
05E345 castle drive,IL (223)-456-3456
+
+ +
+

Enter the student details

+ +

+ +

+ +
+ + + +
+
+ + \ No newline at end of file diff --git a/css/style.css b/css/style.css index d17d83a..0bce4a7 100644 --- a/css/style.css +++ b/css/style.css @@ -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

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
- 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; + + } \ No newline at end of file diff --git a/img/boyimage.png b/img/boyimage.png new file mode 100644 index 0000000..1844823 Binary files /dev/null and b/img/boyimage.png differ diff --git a/img/images.png b/img/images.png new file mode 100644 index 0000000..4880e46 Binary files /dev/null and b/img/images.png differ diff --git a/img/schoolemoji.jpg b/img/schoolemoji.jpg new file mode 100644 index 0000000..75f3fe6 Binary files /dev/null and b/img/schoolemoji.jpg differ diff --git a/img/studentemoji.png b/img/studentemoji.png new file mode 100644 index 0000000..bf1f726 Binary files /dev/null and b/img/studentemoji.png differ diff --git a/index.html b/index.html index 4dc0c72..6028388 100644 --- a/index.html +++ b/index.html @@ -1,57 +1,50 @@ - - - - - - - - - + + SCHOOL ATTENDANCE - + - - - - - - - - - - - - - - - - - - - - - The quickest of brown foxes. - - - - - - -
- - -
- - - +
+

Dr.Phillips Elementary School

+ schoolemoji +
+
+ Student Attendance + Photo Upload + Student Details + Help +
+ + +
+
Student A + + +
+
Student B + + +
+
Student C + + +
+
Student D + + +
+
Student E + + +
+
+
+
+ +
- - - - \ No newline at end of file diff --git a/js/school.js b/js/school.js new file mode 100644 index 0000000..f42fb55 --- /dev/null +++ b/js/school.js @@ -0,0 +1,78 @@ +function verifyAttendance() { + var attended= 0; + var absent =0; + var v=document.getElementById("student1").checked; + if(v==true) + attended++; + else + absent++; + var u=document.getElementById("student2").checked; + if(u==true) + attended++; + else + absent++; + var z=document.getElementById("student3").checked; + if(z==true) + attended++; + else + absent++; + var a=document.getElementById("student4").checked; + if(a==true) + attended++; + else + absent++; + var b=document.getElementById("student5").checked; + if(b==true) + attended++; + else + absent++; + alert( + "Total #of students in class "+eval(attended+absent)+"\n"+ + "Total #of students presented "+attended+"\n"+ + "Total #of students absent "+absent); +} + +var fileExtn=""; +var fileName=""; + +function myUpload() { + var x = document.getElementById("myFile"); + if (x.files.length == 0) { + alert("Please select an image file to upload"); + } else + { + for (var i = 0; i < x.files.length; i++) + { + var file = x.files[i]; + fileName =file.name; + console.log("The fileName "+fileName); + fileExtn = checkFileExtension(); + if((fileExtn =='png') || (fileExtn =='jpg') || (fileExtn =='jif')){ + console.log("extension "+fileExtn); + alert ("Uploaded successfully"); + } + else{ + console.log("extension "+fileExtn); + alert("upload only images files"); + } + + } + } + } + + /**Using regexp to find extension of the file */ + function checkFileExtension() { + regex = new RegExp('[^.]+$'); + console.log("RegEx"+regex); + fileExtn = fileName.match(regex); + return fileExtn; + + } + + /**This function is under construction.*/ + + function enterStudentDetails() { + alert("Student submitted successfully") + + } + diff --git a/photoUpload.html b/photoUpload.html new file mode 100644 index 0000000..0b20229 --- /dev/null +++ b/photoUpload.html @@ -0,0 +1,21 @@ + + + + + + + PHOTO UPLOAD + + +
+

Dr.Phillips Elementary School

+ schoolemoji +

+

Please upload student's photo

+
+ +

+ + + + \ No newline at end of file