lee2sman · vanedm · Nov 1, 2023 · Nov 1, 2023 · Nov 1, 2023 · Nov 8, 2023
diff --git a/.vscode/settings.json b/.vscode/settings.json
@@ -0,0 +1,3 @@
+{
+    "liveServer.settings.port": 5501
+}
diff --git a/Untitled-1.html b/Untitled-1.html
@@ -0,0 +1,11 @@
+
+<!DOCTYPE html>
+<html>
+
+<style>
+
+</style>
+<body>
+
+</body>
+</html>
diff --git a/chirp-project/alert_chirp.mp3 b/chirp-project/alert_chirp.mp3
diff --git a/chirp-project/alert_image.mp3 b/chirp-project/alert_image.mp3
diff --git a/chirp-project/index.html b/chirp-project/index.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+<html>
+	<head>
+		<meta charset="UTF-8">
+		<link rel="stylesheet" type="text/css" href="style.css">
+		<title>
+		  CHIRP
+		</title>
+
+	</head>
+	<body>
+
+
+	<div class="grid-container">
+			<div class="left-col">
+				<p>
+					<input type="text" placeholder="Enter chirp" id="textInput">
+				</p>
+				<button class="my-button" onclick="addDiv(); emptyText()">Add a chirp</button>
+				<p>
+					<input type="text" placeholder="Image url" id="imgInput">
+				</p>
+				<button class="my-button" onclick="addImage(); emptyImg()">Add an image</button>
+
+			</div>
+
+			<div class="right-col" id="content-area">
+			</div>
+		</div>
+
+<!-- The Modal -->
+<div id="myModal" class="modal">
+
+  <!-- Modal content -->
+  <div class="modal-content">
+
+    <h1>Welcome to CHIRP!</h1>
+		<div class="about-chirp">
+			<h2>About Chirp</h2>
+			<p>Chirp is a bare bones social media project that has the ability to post images and text.</p>
+			<p>When making a post, the program will send out a sound cue that lets you know your post is up.</p>
+			<p>Honestly we did not know what else to put in here.</p>
+		</div>
+	<h4>Please read and agree to the code of conduct to continue.</h4>
+		<div class="conduct-rules">
+			<h2>Code of Conduct</h2> 
+			<h3>Free speech absolutism</h3>
+			<p>There will be no limit on free speech be it controversial, political, offensive, and a call to action.</p>
+			<h3>Create a toxic community</h3>
+			<p>Inactive members after 2 weeks will have their accounts deleted</p>
+			<p>If you don’t insult somebody for 2 weeks you will also be banned and have your account deleted.</p>
+			<p>On the insults messages you send if you receive likes your account is awarded points.</p>
+			<p>If somebody tries to rat you out or dox someone else It will not only result in a ban but the website will dox you back and send local citizens who use the app to assault you in the morning as you leave for work between the hours and only between 8-10am.</p>
+			<h3>Have genuine interest and joy in the community.</h3>
+			<p>Have fun, you know it’s a toxic place if you have a problem, close the site and shut off your computer. Try to respect these people like your own pals, being toxic can be fun if you all know it’s a joke.</p>
+		</div>
+
+
+	<!--Put the button to agree inside the modal -->
+	<button class="button" id ="agree" onclick="iAgree()"> I Agree</button>
+</div>
+<script src="script.js"></script>
+	</body>
+</html>
diff --git a/chirp-project/script.js b/chirp-project/script.js
@@ -0,0 +1,111 @@
+
+function addDiv() {
+
+let currentDate = new Date();
+let hours = currentDate.getHours();
+if(hours>12){
+  hours = hours-12;
+}
+let time = hours + ":" + currentDate.getMinutes();
+  //create a new P tag, save it in a variable
+  let theNewDiv = document.createElement("div");
+  let timeDiv = document.createElement("div");
+  //add a class to our new div element
+  theNewDiv.classList.add("auto-div");
+  timeDiv.classList.add("right");
+  //set the text inside the div
+  theNewDiv.innerHTML = document.getElementById("textInput").value;
+  timeDiv.innerHTML = time;
+
+  //find the right tag to add the div to
+  //we used an id of "content-area" for
+  //the place where we want to add the chirp
+  let theContentArea = document.getElementById("content-area");
+
+  //add the new div to that tag
+  theContentArea.appendChild(theNewDiv);
+  theContentArea.appendChild(timeDiv);
+
+  //play a sound when a post is made
+  let audio = new Audio("alert_chirp.mp3");
+  audio.play();
+}
+
+function addImage() {
+let currentDate = new Date();
+let hours = currentDate.getHours();
+if(hours>12){
+  hours = hours-12;
+}
+let time = hours + ":" + currentDate.getMinutes();
+  //create a new P tag, save it in a variable
+  let theNewDiv = document.createElement("div");
+  let timeDiv = document.createElement("div");
+  //add a class to our new div element
+  theNewDiv.classList.add("auto-div");
+  timeDiv.classList.add("right");
+
+  //create image tag to put into the div
+  theImgTag = "<img src='" + document.getElementById("imgInput").value + "' width = 100 height = 100>";
+
+  //set the text inside the div
+  theNewDiv.innerHTML = theImgTag;
+  timeDiv.innerHTML = time;
+
+  //find the right tag to add the div to
+  //we used an id of "content-area" for
+  //the place where we want to add the twit
+  let theContentArea = document.getElementById("content-area");
+
+  //add the new div to that tag
+  theContentArea.appendChild(theNewDiv);
+  theContentArea.appendChild(timeDiv);
+
+  //play a sound when a post is made
+  let audio = new Audio("alert_image.mp3");
+  audio.play();
+
+  var input = document.getElementById("textInput"); //Get the input box
+  input.addEventListener("keyup", function(event) {  //Check keys
+    if (event.keyCode === 13) {  //Check for enter key
+      event.preventDefault();
+      // document.getElementById("my-button").click(); //Should activate the button, but doesn't.
+      addDiv(); //Submit the text
+      emptyText();  //Clear the input
+    }
+  });
+  var imginput = document.getElementById("imgInput"); //Get the input box
+  imginput.addEventListener("keyup", function(event) {  //Check keys
+    if (event.keyCode === 13) { //Check for enter key
+      event.preventDefault();
+      // document.getElementById("my-button").click();  //Should activate the button, but doesn't.
+      addImage();  //Submit the image link
+      emptyImg();  //Clear the input
+    }
+  });
+
+
+  function emptyText()
+  {
+    document.getElementById("textInput").value = ""; //Clears input box for text
+  }
+  function emptyImg()
+  {
+    document.getElementById("imgInput").value = ""; //Clears input box for image links
+  }
+}
+
+window.onload = function() {
+  var modal = document.getElementById('myModal');
+  function closeModal() {
+    modal.style.display = 'none';
+  }
+  modal.style.display = 'block';
+  var button = document.getElementById('agree');
+  button.onclick = closeModal;
+};
+
+
+
+
+
diff --git a/chirp-project/style.css b/chirp-project/style.css
@@ -0,0 +1,141 @@
+html,
+body {
+    height: 100%;
+    margin: 0;
+    padding: 20px;
+    box-sizing: border-box;
+    color: blue;
+}
+
+.my-button {
+    background-color: #fdfcdc;
+    padding: 10px;
+    border: 1px solid black;
+}
+
+.modal {
+    position: fixed;
+    z-index: 1;
+    padding-top: 20px;
+    left: 0;
+    top: 0;
+    width: 100%;
+    height: 100%;
+    overflow: auto;
+    display: none;
+    text-align: center;
+	color: black;
+
+}
+
+.modal-content {
+	background-color: #fdfcdc;
+    margin: auto;
+    padding: 20px;
+	border: 3px solid black;
+    width: 80%;
+    max-height: 90%;
+    overflow-y: auto;
+}
+
+.button {
+    background-color: #f07167;
+    border: 3px solid #00afb9;
+    color: blue;
+    padding: 15px 32px;
+    text-align: center;
+    text-decoration: none;
+    display: inline-block;
+    font-size: 16px;
+    margin: 4px 2px;
+    cursor: pointer;
+}
+
+.button:hover {
+    background-color: purple;
+    color: white;
+}
+
+.grid-container {
+    position: absolute;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    display: grid;
+    grid-template-columns: 250px auto;
+    grid-template-rows: 100% 100%;
+}
+
+.left-col {
+    padding: 15px;
+    background-color: #0081a7;
+}
+
+.right-col {
+    padding: 15px;
+    background-color: #00afb9;
+}
+
+.auto-div {
+    margin: 15px 0;
+    padding: 10px;
+    background-color: #f07167;
+    border: 3px solid #fdfcdc;
+}
+
+.right {
+    margin: -15px 0;
+    padding: 3px;
+    text-align: right;
+}
+
+.about-chirp {
+	border: 3px solid #00afb9;
+    padding: 20px;
+    border-radius: 5px;
+	background-color: #f07167;
+	color: blue;
+}
+
+.about-chirp p {
+    margin: 0;
+    padding-left: 20px;
+    text-indent: -15px;
+}
+
+.about-chirp h3,
+.about-chirp p {
+    margin-top: 15px;
+    text-align: left;
+}
+
+.about-chirp p:before {
+    content: "•";
+    margin-right: 10px;
+}
+
+.conduct-rules {
+    border: 3px solid #00afb9;
+    padding: 20px;
+    border-radius: 5px;
+    background-color: #f07167;
+	color: blue;
+}
+
+.conduct-rules h3,
+.conduct-rules p {
+    margin-top: 15px;
+    text-align: left;
+}
+
+.conduct-rules p {
+    margin: 0;
+    padding-left: 20px;
+    text-indent: -15px;
+}
+
+.conduct-rules p:before {
+    content: "•";
+    margin-right: 10px;
+}
diff --git a/chirp.png b/chirp.png