Makerspace at the Fulton School
For the fourth quarter, I continued to develop a website for the existing World Wide Technology project. I wanted to make it possible for individuals to enter their information on the profile page of the website and have all the added material saved. Due to time, I couldn’t make it to the step where the information would be saved, but the basic outline and design of the website were created.
To start, I created a new HTML document on Atom to write out the general outline of the webpage. This included all of the different items that were to be present on the page. The actual style of the website was made on a different document and frankly isn’t very elaborate. Both pages can be found below.
Next, I created a document to define the role of the “save button” at the bottom of the page. Along with this, a “serverconnection” document was made to connect the server that would save the data with the website (save button), but due to time, it is currently blank and won’t be necessary to preview.
Link to webpage: file:///Users/brookeleonard/Documents/ProgrammingWebsite/SSD.html
Code for page:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<script src="jquery-3.6.0.min.js"></script>
<title>Social Student Directory</title>
<link rel="stylesheet" href="somthing.css">
</head>
<body>
<h1>
Social Student Directory
</h1>
<br>
<img id="profilepic" src="brooke.PNG" alt="Profile Picture">
<div id="studentname">
Name:
<input type="text" id="name" title="student name">
Nickname:
<input type="text" id="nickname" title="student nickname">
</div>
<br>
<div id="grade">
Grade:
<input type="text" id="grade" title="student grade">
Age:
<input type="text" id="age" title="student age">
<br>
<br>
</div>
Bio:
<br>
<textarea id="bio">
Type here
</textarea>
<br>
<br>
<div id="hashtags">
Hashtags:
<input type="text" id="hashtag" title="student hashtags">
<br>
<br>
</div>
Identification Tile:
<br>
<img id="tilepic" src="doctile.jpg" alt="Tile Picture">
<br>
<div id="QR code">
QR Code:
<input type="text" id="QR code" title="Student QR code">
<br>
<br>
<input type="button" id="Submit" title="save" value="Save">
</body>
<script src="newprofile.js"></script>
</html>
Code for style:
body {
background-color: lightgrey;
}
div{
border: 2px solid grey
}
.FirstClass{
border: 5px solid black;
border-style: outset groove;
}
button {background-color: blue;
}
#DeltaDiv{border-style: inset groove;
}
#profilepic {
width: 400px;
}
#tilepic {
width: 200px;
}
Code for save button:
submitbutton = document.getElementById("Submit");
submitbutton.addEventListener("click",savedata);
function savedata(){
name = document.getElementById("name").value;
nickname = document.getElementById("nickname").value;
data = {
"name": name,
"nickname": nickname,
// (continue later)
}
console.log (data)
}
Recent Comments